Grav-アセットマネージャー

この章では、アセットマネージャー*について学習します。 Asset ManagerはGrav 0.9.0で導入され、 *JavaScript や CSS などのアセットを追加および管理するためのインターフェースを統合しました。これらのアセットをテーマとプラグインから追加すると、 ordering や Asset Pipeline などの高度な機能が提供されます。 Asset Pipeline は、ブラウザーの要件を軽減し、アセットのサイズを縮小するように、アセットを縮小および圧縮するために使用されます。

Asset Managerはクラスであり、プラグインイベントフックを介して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をインストールすると、反物質テーマがデフォルトのテーマになります。このテーマにある basel.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 小枝タグで定義された領域は、それを拡張するテンプレートで置換または追加することができ、このブロック内の* do asset.addCss（）*呼び出しの数を確認できます。
\ {％do％} タグを使用すると、Twig自体に組み込まれた出力なしで変数を処理できます。
CSSアセットは、* addCss（）*メソッドを使用してAsset Managerに追加できます。 2番目のパラメーターとして数値を渡すことにより、スタイルシートの優先順位を設定できます。 * addCss（）*メソッドを呼び出すと、CSSアセットからHTMLタグがレンダリングされます。

JavaScriptアセットは、CSSアセットと同じ方法で使用されます。以下に示す block 小枝タグ内の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.	Method & Description
1	add(asset, [options]) ファイル拡張子に基づいて、 add メソッドはアセットに一致します。これは、CSSまたはJSの直接メソッドの1つを呼び出すための適切なメソッドです。 options を使用して優先度を設定できます。アセットを組み合わせ/縮小パイプラインに含めるかどうかは、パイプライン属性によって制御されます。
2	addCss(asset, [options]) この方法を使用すると、CSSアセットにアセットを追加できます。 2番目のパラメーターで設定された優先順位に基づいて、資産はリスト内で順序付けられます。優先度が設定されていない場合、デフォルトで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（）*メソッドを使用して後で使用できるようにすることができます。複数のテーマまたはプラグインを使用している場合、この方法は非常に便利です。

オプション

以下に示すように説明されている資産の配列を渡すための多くのオプションがあります-

CSSの場合

優先度-整数値を取り、デフォルト値は100になります。
pipeline -アセットがパイプラインに含まれていない場合、 false 値に設定されます。そして、デフォルト値は true に設定されています。

JSの場合

priority -整数値を取り、デフォルト値は100です。
pipeline -アセットがパイプラインに含まれていない場合、 false が設定されます。そして、デフォルト値は true に設定されています。
loading -このオプションは、 empty 、 async 、 defer などの3つの値をサポートします。
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には、 Grouped 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（）ヘルパーメソッドは、オプションで2番目のパラメーターを取り、 *true または false 値を使用してURLにドメインとスキーマを含めることを可能にします。デフォルトでは、値は false に設定され、相対URLのみが表示されます。

例

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

Grav-asset-manager

目次