Grav - Gerente de Ativos

Neste capítulo, vamos estudar sobre Asset Manager. O Asset Manager foi introduzido no Grav 0.9.0 para unificar a interface para adicionar e gerenciar ativos comoJavaScript e CSS. Adicionar esses recursos de temas e plug-ins fornecerá recursos avançados, comoordering e Asset Pipeline. oAsset Pipeline é usado para minificar e compactar os ativos de modo que reduza os requisitos do navegador e também reduz o tamanho dos ativos.

O Asset Manager é uma classe disponível para uso no Grav por meio de ganchos de eventos do plugin. Você também pode usar a classe Asset Manager diretamente em temas usando chamadas Twig.

Configuração

O Asset Manager consiste em um conjunto de opções de configuração. osystem.yamlarquivo contém os valores padrão; você pode substituir esses valores em seuuser/config/system.yaml Arquivo.

assets:                     # Configuration for Assets Manager (JS, CSS)
   css_pipeline: false      # The CSS pipeline is the unification of multiple CSS resources into one file
   css_minify: true         # Minify the CSS during pipelining
   css_rewrite: true        # Rewrite any CSS relative URLs during pipelining
   js_pipeline: false       # The JS pipeline is the unification of multiple JS resources into one file
   js_minify: true          # Minify the JS during pipelining

Ativos em temas

O tema Antimatéria vem como tema padrão quando você instala o Grav. Mostra um exemplo de como adicionar arquivos CSS em seubase.html.twig arquivo que reside neste tema.

{% block stylesheets %}
   {% do assets.addCss('theme://css/pure-0.5.0/grids-min.css', 103) %}
   {% do assets.addCss('theme://css-compiled/nucleus.css',102) %}
   {% do assets.addCss('theme://css-compiled/template.css',101) %}
   {% do assets.addCss('theme://css/custom.css',100) %}
   {% do assets.addCss('theme://css/font-awesome.min.css',100) %}
   {% do assets.addCss('theme://css/slidebars.min.css') %}

   {% if browser.getBrowser == 'msie' and browser.getVersion == 10 %}
      {% do assets.addCss('theme://css/nucleus-ie10.css') %}
   {% endif %}
   {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
      {% do assets.addCss('theme://css/nucleus-ie9.css') %}
      {% do assets.addJs('theme://js/html5shiv-printshiv.min.js') %}
   {% endif %}
{% endblock %}
{{ assets.css() }}

O código acima é explicado brevemente a seguir.

A região definida no block a tag twig pode ser substituída ou anexada em modelos que estendem o um e você pode ver o número de do assets.addCss() chamadas dentro deste bloco.
o {% do %} tag permite que você manipule variáveis sem qualquer saída que seja construída no próprio Twig.
Os ativos CSS podem ser adicionados ao Asset Manager usando addCss()método. Você pode definir a prioridade das folhas de estilo passando um valor numérico como segundo parâmetro. A chamada para oaddCss() método renderiza as tags HTML de ativos CSS.

Os ativos JavaScript são usados da mesma forma que os ativos CSS. Os ativos de JavaScript dentro doblock tags twig como mostrado abaixo.

{% block javascripts %}
   {% do assets.addJs('jquery',101) %}
   {% do assets.addJs('theme://js/modernizr.custom.71422.js',100) %}
   {% do assets.addJs('theme://js/antimatter.js') %}
   {% do assets.addJs('theme://js/slidebars.min.js') %}
   {% do assets.addInineJs('alert(\'This is inline!\')') %}
{% endblock %}
{{ assets.js() }}

Adicionando ativos

A tabela a seguir lista os diferentes tipos de métodos de adição -

Sr. Não.	Método e Descrição
1	add(asset, [options]) Com base na extensão do arquivo, o addmétodo corresponde ao ativo. É um método adequado para chamar um dos métodos diretos para CSS ou JS. Você pode fazer uso deoptionspara definir a prioridade. Se um ativo deve ser incluído na combinação / minificar pipeline ou não, é controlado pelo atributo pipeline.
2	addCss(asset, [options]) Usando este método, você pode adicionar ativos aos ativos CSS. Com base na prioridade definida no segundo parâmetro, o ativo é classificado na lista. Se nenhuma prioridade for definida, por padrão, 10 é definido. Se um ativo deve ser incluído na combinação / minificar pipeline ou não, é controlado pelo atributo pipeline.
3	addDirCss(directory) Usando este método, você pode adicionar um diretório de entidades que consiste nos ativos CSS que serão organizados em ordem alfabética.
4	addInlineCss(css, [options]) Você pode fornecer uma string de CSS dentro da tag de estilo embutido usando este método.
5	addJs(asset, [options]) Usando este método, você pode adicionar ativos aos ativos JS. Se a prioridade não for definida, ele define a prioridade padrão para 10. O atributo pipeline determina se um ativo deve ser incluído no pipeline de combinação / minificação ou não.
6	addInlineJs(javascript, [options]) Este método permite adicionar uma string de JS dentro da tag de script embutido.
7	addDirJs(directory) Usando este método, você pode adicionar um diretório de entidade consistindo nos ativos JS, que serão organizados em ordem alfabética.
8	registerCollection(name, array) Este método permite registrar uma matriz que consiste em ativos CSS ou JS com um nome para que possa ser usado posteriormente usando o add()método. Se você estiver usando vários temas ou plug-ins, esse método é muito útil.

Opções

Existem muitas opções para passar o conjunto de ativos que são explicados conforme mostrado abaixo -

Para CSS

priority - É necessário um valor inteiro e o valor padrão será 100.
pipeline - Quando um ativo não é incluído no pipeline, ele é definido como falsevalor. E o valor padrão é definido comotrue.

Para JS

priority - Assume um valor inteiro e o valor padrão será 100.
pipeline - Quando um ativo não está incluído no pipeline, falseestá definido. E o valor padrão é definido comotrue.
loading - Esta opção oferece suporte a 3 valores, como empty, async e defer.
group- Consiste em uma string que especifica o nome exclusivo de um grupo. E o valor padrão é definido comotrue.

Example

{% do assets.addJs('theme://js/example.js', 
{'priority':101, 'pipeline':true, 'loading':'async', 'group':'top'}) %}

Ativos de renderização

O estado atual dos ativos CSS e JS pode ser renderizado usando o seguinte -

css ()

Com base em todos os ativos CSS que foram adicionados ao Asset Manager, o css()método renderiza uma lista que consiste em tags de link HTML CSS. Com base no atributo pipeline, a lista pode conter arquivo reduzido e ativo individual / combinado.

js ()

Com base em todos os ativos JS que foram para o Asset Manager, o js()método renderiza uma lista que consiste em tags de link HTML JS. Com base no atributo pipeline, a lista pode conter arquivo reduzido e ativo individual / combinado.

Ativos Nomeados

Grav permite que você registre uma coleção de ativos CSS e JS com um nome, para que você possa usar o addativos para o Asset Manager usando o nome registrado. Isso pode ser feito no Grav usando um recurso chamadonamed assets. Essas coleções personalizadas são definidas emsystem.yaml; as coleções podem ser usadas por qualquer tema ou plugin.

assets:
   collections:
      jquery: system://assets/jquery/jquery-2.1.3.min.js
      bootstrap:
         - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
         - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css
         - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js

o registerCollection() método pode ser usado programaticamente com o seguinte código -

$assets = $this->Grav['assets'];
   $bootstrapper_bits = [https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,
      https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css,
      https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js];
   $assets->registerCollection('bootstrap', $bootstrap_bits);
$assets->add('bootstrap', 100);

Ativos agrupados

Grav 0.9.43 foi introduzido com um novo recurso chamado Grouped Assets, que permite que você passe uma matriz de opções que consiste em groupao adicionar ativos. Este recurso é muito útil quando você precisa de alguns arquivos JS ou JS em linha em uma parte específica da página.

Usando a sintaxe de opções, você deve especificar o grupo ao adicionar o ativo, conforme mostrado abaixo.

{% do assets.addJs('theme://js/example.js', {'priority':102, 'group':'bottom'}) %}

Se nenhum grupo for definido para um ativo, então headé definido como grupo padrão. Se você deseja que esses ativos sejam renderizados no grupo inferior, você deve adicionar o seguinte em seu tema.

{{ assets.js('bottom') }}

Ativos estáticos

Sempre que quiser referir ativos sem o uso do Asset Manager, você pode usar o url()método auxiliar. Por exemplo, quando quiser fazer referência a uma imagem do tema, você pode usar a seguinte sintaxe.

<img src = "{{ url("theme://" ~ widget.image) }}" alt = "{{ widget.text|e }}" />

o url() método auxiliar opcionalmente usa o segundo parâmetro para permitir que a URL inclua domínio e esquema usando true ou falsevalores. Por padrão, o valor é definido comofalse que exibe apenas o URL relativo.

Example

url("theme://somepath/mycss.css", true)

↰ Previous page Next page ↱