Grav - 资产经理

本章我们来学习一下Asset Manager。Grav 0.9.0 中引入了 Asset Manager，以统一用于添加和管理JavaScript和CSS等资源的界面。从主题和插件添加这些资产将提供高级功能，例如排序和资产管道。资产管道用于缩小和压缩资产，从而降低对浏览器的要求，同时也减小资产的大小。

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

配置

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 时，反物质主题将作为默认主题。它显示了如何在该主题中的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() }}

下面简单解释一下上面的代码。

块树枝标签中定义的区域可以替换或附加到扩展该区域的模板中，并且您可以看到该块内do asset.addCss()调用的数量。
{% do %}标签允许您处理变量，而无需任何内置于 Twig 本身的输出。
可以使用addCss()方法将 CSS 资源添加到资源管理器中。您可以通过传递数值作为第二个参数来设置样式表的优先级。对addCss()方法的调用会从 CSS 资源中渲染出 HTML 标签。

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

添加资产

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

先生。	方法及说明
1	添加（资产，[选项]）根据文件扩展名，添加方法与资产相匹配。这是调用 CSS 或 JS 直接方法之一的正确方法。您可以使用选项来设置优先级。资产是否应包含在组合/缩小管道中由管道属性控制。
2	addCss（资产，[选项]）通过使用此方法，您可以将资源添加到CSS资源中。根据第二个参数中设置的优先级，资产在列表中排序。如果未设置优先级，则默认设置为 10。资产是否应包含在组合/缩小管道中由管道属性控制。
3	addDirCss（目录）通过使用此方法，您可以添加一个由 CSS 资源组成的实体目录，该目录将按字母顺序排列。
4	addInlineCss(css, [选项]) 您可以使用此方法在内联样式标记内提供一串 CSS。
5	addJs（资产，[选项]）通过该方法可以给JS资源添加资源。如果未设置优先级，则它将默认优先级设置为 10。管道属性确定资产是否应包含在组合/缩小管道中。
6	addInlineJs(javascript, [选项]) 该方法允许您在内联脚本标签内添加一串 JS。
7	addDirJs（目录）通过该方法，您可以添加一个由JS资源组成的实体目录，该目录将按字母顺序排列。
8	注册集合（名称，数组）此方法允许您使用名称注册由 CSS 或 JS 资源组成的数组，以便稍后可以通过 add ()方法使用它。如果您使用多个主题或插件，那么此方法非常有用。

选项

有很多选项可以传递资产数组，解释如下 -

对于 CSS

优先级- 它采用整数值，默认值为 100。
pipeline - 当资产不包含在 pipeline 中时，它设置为false值。默认值设置为true。

对于JS

优先级- 采用整数值，默认值为 100。
pipeline - 当资产不包含在 pipeline 中时，设置false 。默认值设置为true。
loading - 此选项支持 3 个值，例如empty、async和defer。
group - 它由指定组的唯一名称的字符串组成。默认值设置为true。

例子

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

渲染资源

CSS 和 JS 资源的当前状态可以通过使用以下命令来呈现 -

CSS()

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

js()

js()方法基于已访问 Asset Manager 的所有 JS 资源，呈现一个由 HTML JS 链接标记组成的列表。根据管道属性，列表可以包含缩小的文件和单个/组合资产。

指定资产

Grav允许您使用名称注册CSS和JS资产的集合，以便您可以使用注册的名称将资产添加到资产管理器中。这可以在 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 引入了一项名为Grouped Assets 的新功能，它允许您在添加资产时传递由可选组组成的选项数组。当页面的特定部分需要一些 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。

例子

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