目录

Grav - 资产经理( Asset Manager)

在本章中,我们将研究Asset Manager 。 在Grav 0.9.0中引入了Asset Manager来统一用于添加和管理JavaScriptCSS等资产的界面。 从主题和插件添加这些资源将提供诸如orderingAsset 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() }}

添加资产

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

Sr.No. 方法和描述
1

add(asset, [options])

根据文件扩展名, add方法与资产匹配。 它是调用CSS或JS的直接方法之一的正确方法。 您可以使用options来设置优先级。 是否应将资产包含在组合/缩小管道中由管道属性控制。

2

addCss(asset, [options])

通过使用此方法,您可以将资产添加到CSS资产。 根据第二个参数中设置的优先级,资产在列表中排序。 如果未设置优先级,则默认设置为10。 是否应将资产包含在组合/缩小管道中由管道属性控制。

3

addDirCss(directory)

通过使用此方法,您可以添加由CSS资产组成的实体目录,该目录将按字母顺序排列。

4

addInlineCss(css, [options])

您可以使用此方法在内联样式标记内提供一串CSS。

5

addJs(asset, [options])

通过使用此方法,您可以将资产添加到JS资产。 如果未设置优先级,则将默认优先级设置为10.管道属性确定资产是否应包含在组合/缩小管道中。

6

addInlineJs(javascript, [options])

此方法允许您在内联脚本标记内添加JS字符串。

7

addDirJs(directory)

通过使用此方法,您可以添加由JS资产组成的实体目录,该目录将按字母顺序排列。

8

registerCollection(name, array)

此方法允许您使用名称注册由CSS或JS资产组成的数组,以便稍后可以使用add()方法使用它。 如果您使用多个主题或插件,则此方法非常有用。

选项 (Options)

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

对于CSS

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

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

For JS

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

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

  • loading - 此选项支持3个值,例如emptyasyncdefer

  • 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能够使用truefalse值来包含域和模式。 默认情况下,该值设置为false ,仅显示相对URL。

Example

url("theme://somepath/mycss.css", true)
↑回到顶部↑
WIKI教程 @2018