Grav - Gestionnaire d'actifs

Dans ce chapitre, étudions les Asset Manager. Asset Manager a été introduit dans Grav 0.9.0 pour unifier l'interface d'ajout et de gestion d'actifs tels queJavaScript et CSS. L'ajout de ces actifs à partir de thèmes et de plugins fournira des fonctionnalités avancées telles queordering et Asset Pipeline. leAsset Pipeline est utilisé pour minimiser et compresser les actifs afin de réduire les exigences du navigateur et également réduire la taille des actifs.

Asset Manager est une classe disponible pour une utilisation dans Grav via des hooks d'événement de plugin. Vous pouvez également utiliser la classe Asset Manager directement dans les thèmes en utilisant les appels Twig.

Configuration

Asset Manager se compose d'un ensemble d'options de configuration. lesystem.yamlle fichier contient les valeurs par défaut; vous pouvez remplacer ces valeurs dans votreuser/config/system.yaml fichier.

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

Actifs dans les thèmes

Le thème Antimatière est le thème par défaut lorsque vous installez Grav. Il montre un exemple de la façon d'ajouter des fichiers CSS dans votrebase.html.twig fichier qui réside dans ce thème.

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

Le code ci-dessus est expliqué brièvement ci-dessous.

La région définie dans le block la balise twig peut être remplacée ou ajoutée dans des modèles qui étendent celui-ci et vous pouvez voir le nombre de do assets.addCss() appels à l'intérieur de ce bloc.
le {% do %} La balise vous permet de gérer des variables sans aucune sortie qui est intégrée à Twig lui-même.
Les actifs CSS peuvent être ajoutés à Asset Manager en utilisant addCss()méthode. Vous pouvez définir la priorité des feuilles de style en passant une valeur numérique comme deuxième paramètre. L'appel auaddCss() La méthode restitue les balises HTML à partir des ressources CSS.

Les actifs JavaScript sont utilisés de la même manière que les actifs CSS. Les ressources JavaScript dans leblock balises twig comme indiqué ci-dessous.

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

Ajout d'actifs

Le tableau suivant répertorie les différents types de méthodes d'ajout -

N ° Sr.	Méthode et description
1	add(asset, [options]) Basé sur l'extension de fichier, le addla méthode correspond à l'actif. C'est une méthode appropriée pour appeler l'une des méthodes directes pour CSS ou JS. Vous pouvez utiliseroptionspour définir la priorité. La question de savoir si un actif doit être inclus dans le pipeline combiné / minimisé ou non est contrôlée par l'attribut pipeline.
2	addCss(asset, [options]) En utilisant cette méthode, vous pouvez ajouter des actifs aux actifs CSS. En fonction de la priorité définie dans le deuxième paramètre, l'actif est classé dans la liste. Si aucune priorité n'est définie, 10 est défini par défaut. La question de savoir si un actif doit être inclus dans le pipeline combiné / minimisé ou non est contrôlée par l'attribut pipeline.
3	addDirCss(directory) En utilisant cette méthode, vous pouvez ajouter un répertoire d'entités composé des actifs CSS qui seront classés par ordre alphabétique.
4	addInlineCss(css, [options]) Vous pouvez fournir une chaîne de CSS à l'intérieur d'une balise de style en ligne en utilisant cette méthode.
5	addJs(asset, [options]) En utilisant cette méthode, vous pouvez ajouter des actifs aux actifs JS. Si la priorité n'est pas définie, elle définit la priorité par défaut sur 10. L'attribut pipeline détermine si un actif doit être inclus dans le pipeline de combinaison / réduction ou non.
6	addInlineJs(javascript, [options]) Cette méthode vous permet d'ajouter une chaîne de JS à l'intérieur de la balise de script en ligne.
sept	addDirJs(directory) En utilisant cette méthode, vous pouvez ajouter un répertoire d'entités composé des actifs JS, qui seront classés par ordre alphabétique.
8	registerCollection(name, array) Cette méthode vous permet d'enregistrer un tableau constitué d'actifs CSS ou JS avec un nom afin qu'il puisse être utilisé ultérieurement en utilisant le add()méthode. Si vous utilisez plusieurs thèmes ou plugins, cette méthode est très utile.

Options

Il existe de nombreuses options pour transmettre le tableau des actifs qui sont expliquées comme indiqué ci-dessous -

Pour CSS

priority - Il prend une valeur entière et la valeur par défaut sera 100.
pipeline - Lorsqu'un actif n'est pas inclus dans le pipeline, il est défini sur falsevaleur. Et la valeur par défaut est définie surtrue.

Pour JS

priority - Prend une valeur entière et la valeur par défaut sera 100.
pipeline - Lorsqu'un actif n'est pas inclus dans le pipeline, falseest réglé. Et la valeur par défaut est définie surtrue.
loading - Cette option prend en charge 3 valeurs telles que empty, async et defer.
group- Il se compose d'une chaîne qui spécifie le nom unique d'un groupe. Et la valeur par défaut est définie surtrue.

Example

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

Rendu des actifs

L'état actuel des actifs CSS et JS peut être rendu en utilisant ce qui suit -

css ()

Sur la base de tous les actifs CSS qui ont été ajoutés à Asset Manager, le css()La méthode rend une liste composée de balises de lien HTML CSS. En fonction de l'attribut pipeline, la liste peut contenir un fichier minifié et un actif individuel / combiné.

js ()

Sur la base de tous les actifs JS qui ont été à Asset Manager, le js()La méthode restitue une liste constituée des balises de lien HTML JS. En fonction de l'attribut pipeline, la liste peut contenir un fichier minifié et un actif individuel / combiné.

Actifs nommés

Grav vous permet d'enregistrer une collection d'actifs CSS et JS avec un nom, afin que vous puissiez utiliser le addactifs à Asset Manager en utilisant le nom enregistré. Cela peut être accompli dans Grav en utilisant une fonctionnalité appeléenamed assets. Ces collections personnalisées sont définies danssystem.yaml; les collections peuvent être utilisées par n'importe quel thème 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

le registerCollection() méthode peut être utilisée par programme avec le code suivant -

$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);

Actifs groupés

Grav 0.9.43 a été introduit avec une nouvelle fonctionnalité appelée Grouped Assets, qui vous permet de transmettre un tableau d'options composé de grouptout en ajoutant des actifs. Cette fonctionnalité est très utile lorsque vous avez besoin de certains fichiers JS ou de JS en ligne dans une partie spécifique de la page.

En utilisant la syntaxe des options, vous devez spécifier le groupe lors de l'ajout de l'actif comme indiqué ci-dessous.

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

Si aucun groupe n'est défini pour un actif, alors headest défini comme groupe par défaut. Si vous souhaitez que ces éléments s'affichent dans le groupe inférieur, vous devez ajouter les éléments suivants à votre thème.

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

Actifs statiques

Chaque fois que vous souhaitez référencer des actifs sans utiliser Asset Manager, vous pouvez utiliser le url()méthode d'assistance. Par exemple, lorsque vous souhaitez faire référence à une image du thème, vous pouvez utiliser la syntaxe suivante.

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

le url() La méthode d'assistance prend éventuellement le deuxième paramètre pour permettre à l'URL d'inclure le domaine et le schéma à l'aide de true ou falsevaleurs. Par défaut, la valeur est définie surfalse qui affiche uniquement l'URL relative.

Example

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