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)