Grav - Vermögensverwalter

In diesem Kapitel wollen wir uns damit befassen Asset Manager. Asset Manager wurde in Grav 0.9.0 eingeführt, um die Schnittstelle zum Hinzufügen und Verwalten von Assets wie zu vereinheitlichenJavaScript und CSS. Das Hinzufügen dieser Assets aus Themen und Plugins bietet erweiterte Funktionen wie zordering und Asset Pipeline. DasAsset Pipeline wird verwendet, um die Assets zu minimieren und zu komprimieren, so dass die Anforderungen des Browsers und die Größe der Assets reduziert werden.

Asset Manager ist eine Klasse und kann in Grav über Plugin-Event-Hooks verwendet werden. Sie können die Asset Manager-Klasse auch direkt in Designs verwenden, indem Sie Twig-Aufrufe verwenden.

Aufbau

Asset Manager besteht aus einer Reihe von Konfigurationsoptionen. Dassystem.yamlDatei enthält die Standardwerte; Sie können diese Werte in Ihrem überschreibenuser/config/system.yaml Datei.

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

Assets in Themen

Das Antimaterie-Design wird als Standarddesign für die Installation von Grav verwendet. Es zeigt ein Beispiel für das Hinzufügen von CSS-Dateien zu Ihrembase.html.twig Datei, die sich in diesem Thema befindet.

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

Der obige Code wird unten kurz erläutert.

Die in der block Das Zweig-Tag kann in Vorlagen ersetzt oder angehängt werden, die das eine erweitern, und Sie können die Anzahl der Vorlagen anzeigen do assets.addCss() ruft in diesem Block auf.
Das {% do %} Mit tag können Sie Variablen ohne Ausgabe verarbeiten, die in Twig selbst integriert ist.
Die CSS-Assets können mithilfe von zu Asset Manager hinzugefügt werden addCss()Methode. Sie können die Priorität der Stylesheets festlegen, indem Sie einen numerischen Wert als zweiten Parameter übergeben. Der Anruf bei deraddCss() Methode rendert die HTML-Tags aus CSS-Assets.

Die JavaScript-Assets werden auf die gleiche Weise wie die CSS-Assets verwendet. Die JavaScript-Assets innerhalb derblock Zweig-Tags wie unten gezeigt.

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

Assets hinzufügen

In der folgenden Tabelle sind die verschiedenen Arten von Additionsmethoden aufgeführt.

Sr.Nr.	Methode & Beschreibung
1	add(asset, [options]) Basierend auf der Dateierweiterung wird die addMethode entspricht dem Asset. Es ist eine geeignete Methode zum Aufrufen einer der direkten Methoden für CSS oder JS. Sie können nutzenoptionsPriorität setzen. Ob ein Asset in die Kombinations- / Minimierungs-Pipeline aufgenommen werden soll oder nicht, wird durch das Pipeline-Attribut gesteuert.
2	addCss(asset, [options]) Mit dieser Methode können Sie Assets zu den CSS-Assets hinzufügen. Basierend auf der im zweiten Parameter festgelegten Priorität wird das Asset in der Liste sortiert. Wenn keine Priorität festgelegt ist, ist standardmäßig 10 festgelegt. Ob ein Asset in die Kombinations- / Minimierungs-Pipeline aufgenommen werden soll oder nicht, wird durch das Pipeline-Attribut gesteuert.
3	addDirCss(directory) Mit dieser Methode können Sie ein Entitätsverzeichnis hinzufügen, das aus den CSS-Assets besteht und in alphabetischer Reihenfolge angeordnet ist.
4	addInlineCss(css, [options]) Mit dieser Methode können Sie eine CSS-Zeichenfolge im Inline-Style-Tag bereitstellen.
5	addJs(asset, [options]) Mit dieser Methode können Sie Assets zu den JS-Assets hinzufügen. Wenn keine Priorität festgelegt ist, wird die Standardpriorität auf 10 festgelegt. Das Pipeline-Attribut bestimmt, ob ein Asset in die Kombinations- / Minimierungs-Pipeline aufgenommen werden soll oder nicht.
6	addInlineJs(javascript, [options]) Mit dieser Methode können Sie eine JS-Zeichenfolge in das Inline-Skript-Tag einfügen.
7	addDirJs(directory) Mit dieser Methode können Sie ein Entitätsverzeichnis hinzufügen, das aus den JS-Assets besteht und in alphabetischer Reihenfolge angeordnet ist.
8	registerCollection(name, array) Mit dieser Methode können Sie ein Array, das aus CSS- oder JS-Assets besteht, mit einem Namen registrieren, damit es später mithilfe von verwendet werden kann add()Methode. Wenn Sie mehrere Themen oder Plugins verwenden, ist diese Methode sehr nützlich.

Optionen

Es gibt viele Optionen, um das Array von Assets zu übergeben, die wie unten gezeigt erläutert werden -

Für CSS

priority - Es wird ein ganzzahliger Wert verwendet und der Standardwert ist 100.
pipeline - Wenn ein Asset nicht in der Pipeline enthalten ist, wird es auf gesetzt falseWert. Und der Standardwert ist eingestellttrue.

Für JS

priority - Nimmt einen ganzzahligen Wert und der Standardwert ist 100.
pipeline - Wenn ein Vermögenswert nicht in der Pipeline enthalten ist, falseeingestellt ist. Und der Standardwert ist eingestellttrue.
loading - Diese Option unterstützt 3 Werte wie empty, async und defer.
group- Es besteht aus einer Zeichenfolge, die einen eindeutigen Namen für eine Gruppe angibt. Und der Standardwert ist eingestellttrue.

Example

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

Assets rendern

Der aktuelle Status der CSS- und JS-Assets kann wie folgt gerendert werden:

css ()

Basierend auf allen CSS-Assets, die dem Asset Manager hinzugefügt wurden, wird die css()Methode rendert eine Liste bestehend aus HTML CSS Link Tags. Basierend auf dem Pipeline-Attribut kann die Liste eine minimierte Datei und ein einzelnes / kombiniertes Asset enthalten.

js ()

Basierend auf allen JS-Assets, die Asset Manager zur Verfügung gestellt haben, wird die js()Methode rendert eine Liste, die aus den HTML JS-Link-Tags besteht. Basierend auf dem Pipeline-Attribut kann die Liste eine minimierte Datei und ein einzelnes / kombiniertes Asset enthalten.

Benannte Vermögenswerte

Mit Grav können Sie eine Sammlung von CSS- und JS-Assets mit einem Namen registrieren, damit Sie die verwenden können addAssets an Asset Manager unter Verwendung des registrierten Namens. Dies kann in Grav mithilfe einer Funktion namens aufgerufen werdennamed assets. Diese benutzerdefinierten Sammlungen sind in definiertsystem.yaml; Die Sammlungen können von jedem Thema oder Plugin verwendet werden.

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

Das registerCollection() Methode kann programmgesteuert mit dem folgenden Code verwendet werden -

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

Gruppierte Vermögenswerte

Grav 0.9.43 wurde mit einer neuen Funktion namens eingeführt Grouped Assets, mit dem Sie ein Optionsfeld übergeben können, das aus optional besteht groupbeim Hinzufügen von Assets. Diese Funktion ist sehr nützlich, wenn Sie an einem bestimmten Teil der Seite einige JS-Dateien oder Inline-JS benötigen.

Bei Verwendung der Optionssyntax müssen Sie die Gruppe beim Hinzufügen des Assets wie unten gezeigt angeben.

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

Wenn für ein Asset keine Gruppe festgelegt ist, dann headist als Standardgruppe festgelegt. Wenn Sie möchten, dass diese Assets in der unteren Gruppe gerendert werden, müssen Sie Ihrem Thema Folgendes hinzufügen.

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

Statische Vermögenswerte

Wann immer Sie Assets ohne die Verwendung von Asset Manager verweisen möchten, können Sie die verwenden url()Hilfsmethode. Wenn Sie beispielsweise auf ein Bild aus dem Thema verweisen möchten, können Sie die folgende Syntax verwenden.

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

Das url() Die Hilfsmethode verwendet optional den zweiten Parameter, damit die URL mithilfe von Domäne und Schema enthalten kann true oder falseWerte. Standardmäßig ist der Wert auf eingestelltfalse Hier wird nur die relative URL angezeigt.

Example

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