Grav - Gestor de activos

En este capítulo, estudiemos sobre Asset Manager. Asset Manager se introdujo en Grav 0.9.0 para unificar la interfaz para agregar y administrar activos comoJavaScript y CSS. Agregar estos activos de temas y complementos proporcionará capacidades avanzadas comoordering y Asset Pipeline. losAsset Pipeline se utiliza para minificar y comprimir los activos para reducir los requisitos del navegador y también reduce el tamaño de los activos.

Asset Manager es una clase y está disponible para usar en Grav a través de complementos de eventos. También puede usar la clase Asset Manager directamente en temas usando llamadas Twig.

Configuración

Asset Manager consta de un conjunto de opciones de configuración. lossystem.yamlel archivo contiene los valores predeterminados; puede anular estos valores en suuser/config/system.yaml archivo.

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

Activos en temas

El tema Antimateria viene como tema predeterminado cuando instala Grav. Muestra un ejemplo de cómo agregar archivos CSS en subase.html.twig archivo que reside en este 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() }}

El código anterior se explica brevemente a continuación.

La región definida en el block La etiqueta de la ramita se puede reemplazar o agregar en las plantillas que extienden el uno y puede ver el número de do assets.addCss() llamadas dentro de este bloque.
los {% do %} La etiqueta le permite manejar variables sin ninguna salida que esté integrada en Twig.
Los activos de CSS se pueden agregar a Asset Manager usando addCss()método. Puede establecer la prioridad de las hojas de estilo pasando un valor numérico como segundo parámetro. La llamada a laaddCss() El método procesa las etiquetas HTML de los elementos CSS.

Los activos de JavaScript se utilizan de la misma forma que los activos de CSS. Los activos de JavaScript dentro delblock ramitas como se muestra a continuación.

{% 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() }}

Agregar activos

La siguiente tabla enumera los diferentes tipos de métodos de adición:

No Señor.	Método y descripción
1	add(asset, [options]) Según la extensión del archivo, el addel método coincide con el activo. Es un método adecuado para llamar a uno de los métodos directos para CSS o JS. Puedes hacer uso deoptionspara establecer la prioridad. El atributo de la canalización controla si un activo debe incluirse o no en una canalización de combinación / minimización.
2	addCss(asset, [options]) Al utilizar este método, puede agregar activos a los activos de CSS. Según la prioridad establecida en el segundo parámetro, el activo se ordena en la lista. Si no se establece ninguna prioridad, se establece 10 de forma predeterminada. El atributo de la canalización controla si un activo debe incluirse o no en una canalización de combinación / minimización.
3	addDirCss(directory) Al usar este método, puede agregar un directorio de entidades que consta de los activos CSS que se organizarán en orden alfabético.
4	addInlineCss(css, [options]) Puede proporcionar una cadena de CSS dentro de la etiqueta de estilo en línea mediante este método.
5	addJs(asset, [options]) Al usar este método, puede agregar activos a los activos de JS. Si no se establece la prioridad, establece la prioridad predeterminada en 10. El atributo de canalización determina si un activo debe incluirse en la canalización de combinación / minificación o no.
6	addInlineJs(javascript, [options]) Este método le permite agregar una cadena de JS dentro de la etiqueta de secuencia de comandos en línea.
7	addDirJs(directory) Al usar este método, puede agregar un directorio de entidad que consta de los activos JS, que se organizarán en orden alfabético.
8	registerCollection(name, array) Este método le permite registrar una matriz que consta de activos CSS o JS con un nombre para que pueda usarse más tarde utilizando el add()método. Si está utilizando varios temas o complementos, este método es muy útil.

Opciones

Hay muchas opciones para pasar la variedad de activos que se explican como se muestra a continuación:

Para CSS

priority - Toma un valor entero y el valor predeterminado será 100.
pipeline - Cuando un activo no está incluido en la canalización, se establece en falsevalor. Y el valor predeterminado se establece entrue.

Para JS

priority - Toma un valor entero y el valor predeterminado será 100.
pipeline - Cuando un activo no está incluido en el pipeline, falseEstá establecido. Y el valor predeterminado se establece entrue.
loading - Esta opción admite 3 valores como empty, async y defer.
group- Consiste en una cadena que especifica un nombre único para un grupo. Y el valor predeterminado se establece entrue.

Example

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

Representación de activos

El estado actual de los activos de CSS y JS se puede representar mediante lo siguiente:

css ()

Basado en todos los activos CSS que se han agregado a Asset Manager, el css()El método muestra una lista que consta de etiquetas de enlace HTML CSS. Según el atributo de la canalización, la lista puede contener un archivo minificado y un activo individual / combinado.

js ()

Basado en todos los activos de JS que han estado en Asset Manager, el js()El método muestra una lista que consta de las etiquetas de enlace HTML JS. Según el atributo de la canalización, la lista puede contener un archivo minificado y un activo individual / combinado.

Activos nombrados

Grav le permite registrar una colección de activos CSS y JS con un nombre, para que pueda usar el addactivos a Asset Manager utilizando el nombre registrado. Esto se puede lograr en Grav utilizando una función llamadanamed assets. Estas colecciones personalizadas se definen ensystem.yaml; las colecciones pueden ser utilizadas por cualquier tema o complemento.

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

los registerCollection() El método se puede usar programáticamente con el siguiente 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);

Activos agrupados

Grav 0.9.43 se introdujo con una nueva función llamada Grouped Assets, que le permite pasar una matriz de opciones que consta de opciones groupal agregar activos. Esta función es muy útil cuando necesita algunos archivos JS o JS en línea en una parte específica de la página.

Al usar la sintaxis de opciones, debe especificar el grupo al agregar el activo como se muestra a continuación.

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

Si no se establece ningún grupo para un activo, entonces headestá configurado como grupo predeterminado. Si desea que estos activos se representen en el grupo inferior, debe agregar lo siguiente en su tema.

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

Activos estáticos

Siempre que desee referir activos sin el uso de Asset Manager, puede utilizar el url()método de ayuda. Por ejemplo, cuando desee hacer referencia a una imagen del tema, puede utilizar la siguiente sintaxis.

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

los url() El método auxiliar opcionalmente toma el segundo parámetro para permitir que la URL incluya dominio y esquema usando true o falsevalores. De forma predeterminada, el valor se establece enfalse que muestra solo la URL relativa.

Example

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

↰ Previous page Next page ↱