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

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

Asset Managerはクラスであり、プラグインイベントフックを介してGravで使用できます。Twig呼び出しを使用して、テーマでAssetManagerクラスを直接使用することもできます。

構成

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をインストールすると、反物質テーマがデフォルトのテーマとして表示されます。それはあなたにCSSファイルを追加する方法の例を示していますbase.html.twig このテーマにあるファイル。

{% 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 小枝タグは、1つを拡張するテンプレートで置き換えたり追加したりでき、の数を確認できます。 do assets.addCss() このブロック内の呼び出し。

  • ザ・ {% do %} タグを使用すると、Twig自体に組み込まれている出力なしで変数を処理できます。

  • CSSアセットは、を使用してAssetManagerに追加できます。 addCss()方法。2番目のパラメーターとして数値を渡すことにより、スタイルシートの優先順位を設定できます。への呼び出しaddCss() メソッドは、CSSアセットからHTMLタグをレンダリングします。

JavaScriptアセットは、CSSアセットと同じように使用されます。内のJavaScriptアセットblock 以下に示すようにタグを小枝します。

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

アセットの追加

次の表に、さまざまなタイプの追加メソッドを示します。

シニア番号 方法と説明
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の場合

  • priority −整数値を取り、デフォルト値は100になります。

  • pipeline −アセットがパイプラインに含まれていない場合、次のように設定されます。 false値。そして、デフォルト値はに設定されていますtrue。

JSの場合

  • priority −整数値を取り、デフォルト値は100になります。

  • pipeline −資産がパイプラインに含まれていない場合、 falseが設定されています。そして、デフォルト値はに設定されていますtrue。

  • loading −このオプションは、次のような3つの値をサポートします。 empty、 async そして defer。

  • 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()メソッドは、HTMLCSSリンクタグで構成されるリストをレンダリングします。パイプライン属性に基づいて、リストには縮小ファイルと個別/結合アセットを含めることができます。

js（）

Asset Managerに送信されたすべてのJSアセットに基づいて、 js()メソッドは、HTMLJSリンクタグで構成されるリストをレンダリングします。パイプライン属性に基づいて、リストには縮小ファイルと個別/結合アセットを含めることができます。

名前付きアセット

Gravを使用すると、CSSおよびJSアセットのコレクションを名前で登録できるため、 add登録名を使用してアセットマネージャーにアセットを送信します。これは、Gravで次の機能を使用して実行できます。named assets。これらのカスタムコレクションは、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番目のパラメーターを取り、URLにドメインとスキーマを含めることができるようにします。 true または false値。デフォルトでは、値はに設定されていますfalse 相対URLのみを表示します。

Example

url("theme://somepath/mycss.css", true)
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved