资产经理（Asset Manager）

在本章中，我们将研究Asset Manager 。 在Grav 0.9.0中引入了Asset Manager来统一用于添加和管理JavaScript和CSS等资产的界面。 从主题和插件添加这些资源将提供诸如ordering和Asset Pipeline等高级功能。 Asset Pipeline用于缩小和压缩资产，以减少浏览器的需求并减少资产的大小。

Asset Manager是一个类，可以通过插件事件挂钩在Grav中使用。 您还可以使用Twig调用直接在主题中使用Asset Manager类。

配置 (Configuration)

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

主题资产

安装Grav时，Antimatter主题作为默认主题。 它显示了如何在base.html.twig文件中添加CSS文件的示例，该文件位于此主题中。

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

以下简要解释上述代码。

• block twig标记中定义的区域可以替换或附加到扩展该模块的模板中，您可以在此块中看到do assets.addCss()调用的数量。

• {% do %}标签允许您处理变量，而没有任何内置于Twig本身的输出。

• 可以使用addCss()方法将CSS资产添加到Asset Manager。 您可以通过将数值作为第二个参数传递来设置样式表的优先级。 对addCss()方法的调用会从CSS资源中呈现HTML标记。

JavaScript资产的使用方式与CSS资产相同。 block twig标记内的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() }}

添加资产

下表列出了不同类型的添加方法 -

选项 (Options)

有许多选项可以传递资产数组，如下所示 -

对于CSS

• priority - 它采用整数值，默认值为100。

• pipeline - 当资产未包含在管道中时，它将设置为false值。 并且默认值设置为true 。

For JS

• priority - 取整数值，默认值为100。

• pipeline - 当资产未包含在管道中时，设置为false 。 并且默认值设置为true 。

• loading - 此选项支持3个值，例如empty ， async和defer 。

• group - 它由一个字符串组成，该字符串指定组的唯一名称。 并且默认值设置为true 。

Example

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

渲染资产

可以使用以下方法呈现CSS和JS资产的当前状态 -

css()

基于已添加到Asset Manager的所有CSS资产， css()方法呈现由HTML CSS链接标记组成的列表。 根据管道属性，列表可以包含缩小文件和个人/组合资产。

js()

基于已经到资产管理器的所有JS资产， js()方法呈现由HTML JS链接标记组成的列表。 根据管道属性，列表可以包含缩小文件和个人/组合资产。

命名资产

Grav允许您使用名称注册CSS和JS资产的集合，以便您可以使用注册名称add资产add到Asset Manager。 这可以通过使用named assets的功能在Grav中完成。 这些自定义集合在system.yaml;中定义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引入了一个名为Grouped Assets的新功能，它允许您在添加Assets时传递由可选group组成的选项数组。 当您在页面的特定部分需要一些JS文件或内联JS时，此功能非常有用。

通过使用选项语法，您必须在添加资产时指定组，如下所示。

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

如果没有为资产设置组，则将head设置为默认组。 如果要在底部组中呈现这些资源，则必须在主题中添加以下内容。

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

静态资产

无论何时想要在不使用Asset Manager的情况下引用资产，都可以使用url()辅助方法。 例如，如果要从主题中引用图像，则可以使用以下语法。

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

url()帮助器方法可选地使用第二个参数来使URL能够使用true或false值来包含域和模式。 默认情况下，该值设置为false ，仅显示相对URL。

Example

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