Grav - 资源管理器

---

---

在本章中，让我们学习关于**资源管理器**。资源管理器是在 Grav 0.9.0 中引入的，用于统一添加和管理**JavaScript**和**CSS**等资源的界面。从主题和插件中添加这些资源将提供高级功能，例如**排序**和**资源管道**。**资源管道**用于缩小和压缩资源，从而减少浏览器的需求并减小资源的大小。

资源管理器是一个类，可以通过插件事件钩子在 Grav 中使用。您也可以通过使用 Twig 调用在主题中直接使用资源管理器类。

配置

资源管理器包含一组配置选项。**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 资源添加到资源管理器。您可以通过传递数值作为第二个参数来设置样式表的优先级。对**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() }}

添加资源

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

选项

有很多选项可以传递资源数组，如下所示：

对于 CSS

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

• **pipeline** - 当资源未包含在管道中时，将其设置为**false**值。默认值设置为**true**。

对于 JS

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

• **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()**方法根据已添加到资源管理器的所有 CSS 资源渲染包含 HTML CSS 链接标签的列表。根据 pipeline 属性，列表可以包含缩小文件和单个/组合资源。

js()

**js()**方法根据已添加到资源管理器的所有 JS 资源渲染包含 HTML JS 链接标签的列表。根据 pipeline 属性，列表可以包含缩小文件和单个/组合资源。

命名资源

Grav 允许您使用名称注册 CSS 和 JS 资源的集合，以便您可以使用注册的名称将**add**资源添加到资源管理器。这可以通过 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 引入了一项名为**分组资源**的新功能，允许您在添加资源时传递包含可选**group**的选项数组。当您需要页面特定部分的一些 JS 文件或内联 JS 时，此功能非常有用。

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

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

如果未为资源设置组，则**head**将设置为默认组。如果希望这些资源在底部组中呈现，则必须在您的主题中添加以下内容。

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

静态资源

每当您想在不使用资源管理器的情况下引用资源时，可以使用**url()**辅助方法。例如，当您想从主题中引用图像时，可以使用以下语法。

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

**url()**辅助方法可选地采用第二个参数，以使用**true**或**false**值启用 URL 包含域名和模式。默认情况下，该值设置为**false**，仅显示相对 URL。

示例

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