Grav - Menedżer zasobów

W tym rozdziale przestudiujmy Asset Manager. Asset Manager został wprowadzony w Grav 0.9.0 w celu ujednolicenia interfejsu do dodawania i zarządzania zasobami, takimi jakJavaScript i CSS. Dodanie tych zasobów z motywów i wtyczek zapewni zaawansowane możliwości, takie jakordering i Asset Pipeline. PlikAsset Pipeline służy do zmniejszania i kompresowania zasobów, dzięki czemu zmniejsza wymagania przeglądarki, a także zmniejsza rozmiar zasobów.

Asset Manager jest klasą dostępną do użycia w Gravu za pośrednictwem haków zdarzeń wtyczek. Możesz również używać klasy Asset Manager bezpośrednio w motywach, używając wywołań Twig.

Konfiguracja

Asset Manager składa się z zestawu opcji konfiguracyjnych. Pliksystem.yamlplik zawiera wartości domyślne; możesz zastąpić te wartości w swoimuser/config/system.yaml plik.

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

Zasoby w motywach

Motyw Antymaterii jest domyślnym motywem po zainstalowaniu Grav. Pokazuje przykład, jak dodać pliki CSS do plikubase.html.twig plik, który znajduje się w tym motywie.

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

Powyższy kod wyjaśniono pokrótce poniżej.

Region zdefiniowany w block tag twig może być zastąpiony lub dołączony do szablonów, które rozszerzają ten i możesz zobaczyć liczbę do assets.addCss() wywołania w tym bloku.
Plik {% do %} tag pozwala na obsługę zmiennych bez żadnego wyjścia, które jest wbudowane w sam Twig.
Zasoby CSS można dodać do Menedżera zasobów za pomocą addCss()metoda. Możesz ustawić priorytet arkuszy stylów, przekazując wartość liczbową jako drugi parametr. Wezwanie doaddCss() renderuje tagi HTML z zasobów CSS.

Zasoby JavaScript są używane w taki sam sposób, jak zasoby CSS. Zasoby JavaScript wblock Tagi twig, jak pokazano poniżej.

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

Dodawanie zasobów

Poniższa tabela zawiera listę różnych typów metod dodawania -

Sr.No.	Metoda i opis
1	add(asset, [options]) Na podstawie rozszerzenia pliku addmetoda pasuje do zasobu. Jest to właściwa metoda wywołania jednej z metod bezpośrednich dla CSS lub JS. Możesz skorzystać zoptionsustawić priorytet. To, czy zasób powinien zostać uwzględniony w potoku kombinacji / minify, czy nie, jest kontrolowane przez atrybut potoku.
2	addCss(asset, [options]) Korzystając z tej metody, możesz dodawać zasoby do zasobów CSS. Na podstawie priorytetu ustawionego w drugim parametrze zasób jest uporządkowany na liście. Jeśli nie ustawiono żadnego priorytetu, domyślnie ustawiono 10. To, czy zasób powinien zostać uwzględniony w potoku kombinacji / minify, czy nie, jest kontrolowane przez atrybut potoku.
3	addDirCss(directory) Korzystając z tej metody, możesz dodać katalog encji składający się z zasobów CSS, które zostaną uporządkowane w kolejności alfabetycznej.
4	addInlineCss(css, [options]) Używając tej metody, możesz podać ciąg znaków CSS w tagu stylu wbudowanego.
5	addJs(asset, [options]) Korzystając z tej metody, możesz dodawać zasoby do zasobów JS. Jeśli priorytet nie jest ustawiony, ustawia domyślny priorytet na 10. Atrybut potoku określa, czy zasób powinien zostać uwzględniony w potoku kombinacji / minify, czy nie.
6	addInlineJs(javascript, [options]) Ta metoda umożliwia dodanie ciągu JS do wbudowanego tagu script.
7	addDirJs(directory) Korzystając z tej metody, możesz dodać katalog encji składający się z zasobów JS, które zostaną uporządkowane w kolejności alfabetycznej.
8	registerCollection(name, array) Ta metoda umożliwia zarejestrowanie tablicy składającej się z zasobów CSS lub JS pod nazwą, aby można było z niej później korzystać za pomocą add()metoda. Jeśli używasz wielu motywów lub wtyczek, ta metoda jest bardzo przydatna.

Opcje

Istnieje wiele opcji przekazywania tablicy zasobów, które wyjaśniono, jak pokazano poniżej -

Dla CSS

priority - Przyjmuje wartość całkowitą, a wartością domyślną będzie 100.
pipeline - Gdy zasób nie jest uwzględniony w potoku, ustawia się na falsewartość. Domyślna wartość totrue.

Dla JS

priority - Pobiera wartość całkowitą, a wartość domyślna to 100.
pipeline - Gdy zasób nie jest uwzględniony w potoku, falsejest ustawiony. Domyślna wartość totrue.
loading - Ta opcja obsługuje 3 wartości, takie jak empty, async i defer.
group- Składa się z ciągu określającego unikalną nazwę grupy. Domyślna wartość totrue.

Example

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

Renderowanie zasobów

Bieżący stan zasobów CSS i JS można renderować za pomocą następującego -

css ()

Na podstawie wszystkich zasobów CSS, które zostały dodane do Menedżera zasobów, plik css()renderuje listę składającą się z tagów linków HTML CSS. Na podstawie atrybutu potoku lista może zawierać zminimalizowany plik i pojedynczy / połączony zasób.

js ()

W oparciu o wszystkie zasoby JS, które były w Asset Manager, plik js()renderuje listę składającą się ze znaczników odsyłaczy HTML JS. Na podstawie atrybutu potoku lista może zawierać zminimalizowany plik i pojedynczy / połączony zasób.

Nazwane zasoby

Grav umożliwia zarejestrowanie kolekcji zasobów CSS i JS pod nazwą, dzięki czemu można używać rozszerzenia addzasobów do Asset Manager przy użyciu zarejestrowanej nazwy. Można to osiągnąć w Gravu za pomocą funkcji o nazwienamed assets. Te kolekcje niestandardowe są zdefiniowane wsystem.yaml; kolekcje mogą być używane przez dowolny motyw lub wtyczkę.

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

Plik registerCollection() metoda może być używana programowo z następującym kodem -

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

Aktywa zgrupowane

Grav 0.9.43 został wprowadzony z nową funkcją o nazwie Grouped Assets, co pozwala na przekazanie tablicy opcji składającej się z opcjonalnych grouppodczas dodawania zasobów. Ta funkcja jest bardzo przydatna, gdy potrzebujesz plików JS lub wbudowanego JS w określonej części strony.

Korzystając ze składni opcji, podczas dodawania zasobu należy określić grupę, jak pokazano poniżej.

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

Jeśli żadna grupa nie jest ustawiona dla zasobu, to headjest ustawiona jako grupa domyślna. Jeśli chcesz, aby te zasoby były renderowane w dolnej grupie, musisz dodać następujące elementy w swoim motywie.

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

Zasoby statyczne

Zawsze, gdy chcesz polecić zasoby bez użycia Menedżera zasobów, możesz użyć rozszerzenia url()metoda pomocnicza. Na przykład, jeśli chcesz odnieść się do obrazu z motywu, możesz użyć następującej składni.

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

Plik url() helper opcjonalnie przyjmuje drugi parametr, aby umożliwić adresowi URL uwzględnienie domeny i schematu przy użyciu true lub falsewartości. Domyślnie wartość jest ustawiona nafalse który wyświetla tylko względny adres URL.

Example

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