Учебники

Грав — Управляющий Активами

Январь 5, 2019

В этой главе давайте изучим Asset Manager . Менеджер активов был представлен в Grav 0.9.0 для унификации интерфейса для добавления и управления активами, такими как JavaScript и CSS . Добавление этих ресурсов из тем и плагинов обеспечит расширенные возможности, такие как упорядочение и конвейер активов . Конвейер активов используется для минимизации и сжатия активов, чтобы уменьшить требования браузера, а также уменьшить размер активов.

Asset Manager — это класс, доступный для использования в Grav через перехватчики событий плагина. Вы также можете использовать класс Asset Manager непосредственно в темах с помощью вызовов Twig.

конфигурация

Asset Manager состоит из набора параметров конфигурации. Файл system.yaml содержит значения по умолчанию; Вы можете переопределить эти значения в вашем файле user / config / system.yaml . 

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

Активы в Темах

Тема Antimatter становится стандартной по умолчанию при установке Grav. Он показывает пример того, как добавить CSS-файлы в ваш файл base.html.twig, который находится в этой теме. 

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

Приведенный выше код кратко поясняется ниже.

  • Регион, определенный в теге ветки блока, может быть заменен или добавлен в шаблоны, расширяющие его, и вы можете увидеть количество вызовов do assets.addCss () внутри этого блока.

  • Тег {% do%} позволяет вам обрабатывать переменные без вывода, который встроен в сам Twig.

  • Ресурсы CSS можно добавить в Asset Manager с помощью метода addCss () . Вы можете установить приоритет таблиц стилей, передав числовое значение в качестве второго параметра. Вызов метода addCss () выводит теги HTML из ресурсов CSS.

Регион, определенный в теге ветки блока, может быть заменен или добавлен в шаблоны, расширяющие его, и вы можете увидеть количество вызовов do assets.addCss () внутри этого блока.

Тег {% do%} позволяет вам обрабатывать переменные без вывода, который встроен в сам Twig.

Ресурсы CSS можно добавить в Asset Manager с помощью метода addCss () . Вы можете установить приоритет таблиц стилей, передав числовое значение в качестве второго параметра. Вызов метода addCss () выводит теги HTML из ресурсов CSS.

Ресурсы JavaScript используются так же, как активы CSS. Ресурсы JavaScript внутри тегов блочных веток, как показано ниже. 

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

Добавление активов

В следующей таблице перечислены различные типы методов добавления —

Sr.No. Метод и описание
1

добавить (актив, [опции])

На основе расширения файла метод add соответствует активу. Это правильный метод для вызова одного из прямых методов для CSS или JS. Вы можете использовать параметры, чтобы установить приоритет. Должен ли актив включаться в конвейер комбинирования / минимизации или нет, определяется атрибутом конвейера.

2

addCss (актив, [опции])

Используя этот метод, вы можете добавлять ресурсы в ресурсы CSS. На основании приоритета, установленного во втором параметре, актив упорядочивается в списке. Если приоритет не установлен, то по умолчанию 10 установлено. Должен ли актив включаться в конвейер комбинирования / минимизации или нет, определяется атрибутом конвейера.

3

addDirCss (каталог)

Используя этот метод, вы можете добавить каталог сущностей, состоящий из ресурсов CSS, которые будут расположены в алфавитном порядке.

4

addInlineCss (css, [options])

С помощью этого метода вы можете предоставить строку CSS внутри встроенного тега стиля.

5

addJs (актив, [опции])

Используя этот метод, вы можете добавить активы в активы JS. Если приоритет не установлен, тогда он устанавливает приоритет по умолчанию на 10. Атрибут конвейера определяет, должен ли актив быть включен в конвейер комбинации / минификации или нет.

6

addInlineJs (JavaScript, [параметры])

Этот метод позволяет добавить строку JS внутри тега встроенного скрипта.

7

addDirJs (каталог)

Используя этот метод, вы можете добавить каталог сущностей, состоящий из ресурсов JS, которые будут расположены в алфавитном порядке.

8

registerCollection (имя, массив)

Этот метод позволяет зарегистрировать массив, состоящий из ресурсов CSS или JS, с именем, чтобы его можно было использовать позже с помощью метода add () . Если вы используете несколько тем или плагинов, то этот метод очень полезен.

добавить (актив, [опции])

На основе расширения файла метод add соответствует активу. Это правильный метод для вызова одного из прямых методов для CSS или JS. Вы можете использовать параметры, чтобы установить приоритет. Должен ли актив включаться в конвейер комбинирования / минимизации или нет, определяется атрибутом конвейера.

addCss (актив, [опции])

Используя этот метод, вы можете добавлять ресурсы в ресурсы CSS. На основании приоритета, установленного во втором параметре, актив упорядочивается в списке. Если приоритет не установлен, то по умолчанию 10 установлено. Должен ли актив включаться в конвейер комбинирования / минимизации или нет, определяется атрибутом конвейера.

addDirCss (каталог)

Используя этот метод, вы можете добавить каталог сущностей, состоящий из ресурсов CSS, которые будут расположены в алфавитном порядке.

addInlineCss (css, [options])

С помощью этого метода вы можете предоставить строку CSS внутри встроенного тега стиля.

addJs (актив, [опции])

Используя этот метод, вы можете добавить активы в активы JS. Если приоритет не установлен, тогда он устанавливает приоритет по умолчанию на 10. Атрибут конвейера определяет, должен ли актив быть включен в конвейер комбинации / минификации или нет.

addInlineJs (JavaScript, [параметры])

Этот метод позволяет добавить строку JS внутри тега встроенного скрипта.

addDirJs (каталог)

Используя этот метод, вы можете добавить каталог сущностей, состоящий из ресурсов JS, которые будут расположены в алфавитном порядке.

registerCollection (имя, массив)

Этот метод позволяет зарегистрировать массив, состоящий из ресурсов CSS или JS, с именем, чтобы его можно было использовать позже с помощью метода add () . Если вы используете несколько тем или плагинов, то этот метод очень полезен.

Опции

Есть много вариантов передачи массива активов, которые объясняются, как показано ниже —

Для CSS

  • priority — принимает целочисленное значение, и значением по умолчанию будет 100.

  • конвейер — когда актив не включен в конвейер, он устанавливается в ложное значение. И значение по умолчанию установлено в true .

priority — принимает целочисленное значение, и значением по умолчанию будет 100.

конвейер — когда актив не включен в конвейер, он устанавливается в ложное значение. И значение по умолчанию установлено в true .

Для JS

  • приоритет — принимает целочисленное значение и значение по умолчанию будет 100.

  • конвейер — когда актив не включен в конвейер, устанавливается false . И значение по умолчанию установлено в true .

  • loading — эта опция поддерживает 3 значения, таких как empty , async и defer .

  • группа — состоит из строки, которая задает уникальное имя для группы. И значение по умолчанию установлено в true .

приоритет — принимает целочисленное значение и значение по умолчанию будет 100.

конвейер — когда актив не включен в конвейер, устанавливается false . И значение по умолчанию установлено в true .

loading — эта опция поддерживает 3 значения, таких как empty , async и defer .

группа — состоит из строки, которая задает уникальное имя для группы. И значение по умолчанию установлено в true .

пример 

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

Рендеринг активов

Текущее состояние ресурсов CSS и JS можно отобразить с помощью следующего:

CSS ()

На основе всех ресурсов CSS, которые были добавлены в Asset Manager, метод css () отображает список, состоящий из тегов HTML-ссылок. На основе атрибута конвейера список может содержать минимизированный файл и отдельный / объединенный актив.

JS ()

На основе всех ресурсов JS, которые были в Asset Manager, метод js () отображает список, состоящий из тегов HTML JS link. На основе атрибута конвейера список может содержать минимизированный файл и отдельный / объединенный актив.

Именованные активы

Grav позволяет зарегистрировать коллекцию ресурсов CSS и JS с именем, чтобы вы могли использовать добавление активов в Asset Manager, используя зарегистрированное имя. Это может быть достигнуто в Grav с помощью функции, называемой именованные активы . Эти пользовательские коллекции определены в system.yaml; Коллекции могут быть использованы любой темой или плагином. 

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

Метод registerCollection () может использоваться программно со следующим кодом — 

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

Сгруппированные активы

Grav 0.9.43 был представлен с новой функцией, называемой Сгруппированные активы , которая позволяет передавать массив опций, состоящий из необязательной группы, при добавлении активов. Эта функция очень полезна, когда вам нужны некоторые JS-файлы или встроенные JS в определенной части страницы.

Используя синтаксис параметров, вы должны указать группу при добавлении ресурса, как показано ниже. 

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

Если для актива не установлена ​​группа, то заголовок устанавливается как группа по умолчанию. Если вы хотите, чтобы эти ресурсы отображались в нижней группе, вы должны добавить следующее в вашу тему. 

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

Статические активы

Всякий раз, когда вы хотите сослаться на активы без использования Asset Manager, вы можете использовать вспомогательный метод url () . Например, если вы хотите сослаться на изображение из темы, вы можете использовать следующий синтаксис. 

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

Вспомогательный метод url () дополнительно принимает второй параметр, чтобы URL-адрес включал домен и схему, используя значения true или false . По умолчанию установлено значение false, которое отображает только относительный URL-адрес.

пример

43
Share: