Grav - 资产管理器

在本章中，让我们研究资产管理器。资产管理器是在 Grav 0.9.0 中引入的，以统一添加和管理资产(如 JavaScript 和 CSS)的界面。从主题和插件中添加这些资产将提供高级功能，例如 排序 和 资产管道。资产管道 用于最小化和压缩资产，从而降低浏览器的要求并减少资产的大小。

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

配置

资产管理器由一组配置选项组成。system.yaml 文件包含默认值；您可以在 user/config/system.yaml 文件中覆盖这些值。

assets: # 资产管理器 (JS、CSS) 的配置
    css_pipeline: false # CSS 管道是将多个 CSS 资源统一到一个文件中
    css_minify: true # 在管道传输过程中缩小 CSS
    css_rewrite: true # 在管道传输过程中重写任何 CSS 相对 URL
    js_pipeline: false # JS 管道是将多个 JS 资源统一到一个文件中
    js_minify: true # 在管道传输过程中缩小 JS

主题中的资产

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

添加资产

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

选项

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

对于 CSS

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

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

对于 JS

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

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

• loading − 该选项支持empty、async、defer3个值。

• group − 由一个字符串组成，用于指定组的唯一名称。默认值设置为 true。

示例

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

根据已进入 Asset Manager 的所有 JS 资产，js() 方法呈现由 HTML JS 链接标签组成的列表。根据管道属性，列表可以包含最小化文件和单个/组合资产。

命名资产

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 引入了一项名为分组资产的新功能，它允许您在添加资产时传递由可选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)