在本章中，我们将研究 Asset Manager . Grav 0.9.0中引入了Asset Manager来统一界面，用于添加和管理 JavaScript 和 CSS 等资产.从主题和插件添加这些资源将提供高级功能，例如订购和资产管道. 资产管道用于缩小和压缩资产，以减少浏览器的需求，同时减少资产的大小.
资产经理是一个类和可通过插件事件挂钩在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时，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() }}上面简要解释了上面的代码.
块 twig标签中定义的区域可以替换或附加到扩展该区域的模板中，您可以看到 do assets.addCss()在此块内调用.
{％do％} 标签允许您处理变量而不构建任何输出进入Twig本身.
可以使用 addCss()方法将CSS资产添加到Asset Manager.您可以通过将数值作为第二个参数传递来设置样式表的优先级.对 addCss()方法的调用会从CSS资源中呈现HTML标记.
JavaScript资产使用方式与CSS资产相同. 块 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() }}下表列出了不同类型的添加方法 :
| Sr.No. | 方法&安培;说明 |
|---|---|
| 1 | add(asset，[options]) 根据文件扩展名， add 方法与资产匹配.它是调用CSS或JS的直接方法之一的正确方法.您可以使用选项来设置优先级.是否应将资产包括在组合/缩小管道中由管道属性控制. |
| 2 | addCss(资产，[选项]) 使用此方法，您可以将资产添加到CSS资产.根据第二个参数中设置的优先级，资产在列表中排序.如果未设置优先级，则默认设置为10.是否应将资产包括在组合/缩小管道中由管道属性控制. |
| 3 | addDirCss(目录) 通过使用此方法，您可以添加由CSS资产组成的实体目录，按字母顺序排列. |
| 4 | addInlineCss(css，[options]) 你可以在里面提供一串CSS使用此方法的内联样式标记. |
| 5 | addJs(资产，[选项]) 通过使用此方法，您可以向JS资产添加资产.如果未设置优先级，则将默认优先级设置为10.管道属性确定资产是否应包含在组合/缩小管道中. |
| 6 | addInlineJs(javascript，[options]) 此方法允许您在内联脚本标记内添加一串JS. |
| 7 | addDirJs(目录) 使用这个方法，你可以添加一个由JS资产组成的实体目录，它将按字母顺序排列. |
| 8 | registerCollection(name，array) 此方法允许您要注册一个由CSS或JS资产组成的数组，并使用名称，以便稍后可以使用 add()方法使用它.如果您使用多个主题或插件，则此方法非常有用. |
有许多选项可以传递资产数组，如下所示 :
优先级 : 它需要一个整数值，默认值为100.
管道 : 当资产未包含在管道中时，它将设置为 false 值.并且默认值设置为 true .
优先级 : 取整数值，默认值为100.
管道 : 如果资产未包含在管道中，则设置 false .默认值设置为 true .
loading : 此选项支持3个值，例如空，异步和延迟.
组 : 它由一个字符串组成，该字符串指定组的唯一名称.默认值设置为 true .
示例
{% do assets.addJs('theme://js/example.js',
{'priority':101, 'pipeline':true, 'loading':'async', 'group':'top'}) %}可以使用以下 : 来呈现CSS和JS资产的当前状态;
基于所有已添加到Asset Manager的CSS资产， css()方法呈现由HTML CSS链接标记组成的列表.根据管道属性，列表可以包含缩小的文件和个人/组合资产.
基于所有JS资产已经去过Asset Manager， 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://img01.yuandaxia.cn/Content/img/tutorials/grav/bootstrap.min.css - https://img01.yuandaxia.cn/Content/img/tutorials/grav/bootstrap-theme.min.css - https://img01.yuandaxia.cn/Content/img/tutorials/grav/bootstrap.min.js
registerCollection()方法可以通过编程方式使用以下代码 :
$assets = $this->Grav['assets'];
$bootstrapper_bits = [https://img01.yuandaxia.cn/Content/img/tutorials/grav/bootstrap.min.css,
https://img01.yuandaxia.cn/Content/img/tutorials/grav/bootstrap-theme.min.css,
https://img01.yuandaxia.cn/Content/img/tutorials/grav/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 ')}}每当你想在不使用资产管理器的情况下引用资产时，那么你可以使用 url()辅助方法.例如，当您想从主题中引用图像时，您可以使用以下语法.
<img src ="{ {url("theme://"~widget.image)}}"alt ="{{widget.text | e}}"/>url()辅助方法可选择使用第二个参数，通过使URL能够包含域和模式true 或 false 值.默认情况下，该值设置为 false ，仅显示相对URL.
示例
url("theme://somepath/mycss.css"，true)
