web-dev-qa-db-ja.com

スケーリングしやすい方法で単一のページにJavaScriptを含める方法

Drupal 8のテーマ設定とモジュール開発でJSを使用することについて多くの資料を読みましたが、GSAPアニメーションなどの日常的に追加する最も簡単な方法の理解は得られませんでした。個々のノードへのインタラクティブなD3チャート。

カスタムJSの各部分は、1つのページでのみ必要になります。時間の経過とともに、サイトは数十ページまたは数百ページにも及ぶ可能性があります。

モジュール開発のドキュメントを読んで、カスタムモジュールを作成し、各JSファイルをmyModule.libraries.ymlに追加して、IDに基づいて1つだけのページにそれぞれをロードするロジックを使用できますが、そのパスを開始する前に、これを行う他の方法があるかどうか尋ねます。

8javascript
7
Andrew Staroscik

次の手順を実行すると、Drupal 8）の外部JavaScriptライブラリの操作が明確になります（特定のページに条件付きでロードする方法を含む）：

ステップ1： JavaScriptファイルをテーマまたはモジュールのjsというフォルダー内に配置します。この手順の後、フォルダー構造は次のようになります。

my-theme/js/my-script.js

ステップ2：テーマにmy-theme.libraries.ymlファイルが既にある場合は、それを開き、作成しない場合は開きます。

Drupal 8では、ライブラリは、一意に識別されたライブラリ名でバンドルされたCSSまたはJSファイルの単なるコレクションです。

この手順では、手順1で作成したJSファイルをライブラリに含める必要があります。これを行うには、my-theme.libraries.ymlファイルに次のコード行を追加します。

my-library:
  js: 
    js/my-script.js: {}

これで、my-theme/my-libraryというアセットライブラリができました。これは、いくつかの方法でサイトにロードできます。

ステップ3：最後のステップは、ライブラリーをサイトにロードすることです。これは、4つの特定の方法で実行できます。

方法1：theme-name.info.ymlファイルを介してライブラリをグローバルにアタッチします

ライブラリは、theme-name.info.ymlファイルで次のようにライブラリプロパティに追加することで指定できます。

name: my-theme
type: theme
description: my theme
package: other
core: 8.x
libraries: 
  - my-theme/global-effects
  - my-theme/my-library

base theme: stable

ここでthemename.info.ymlファイルに指定されているライブラリはすべて、eveyページで利用できるようになります。

方法2：theme-name.themeファイルでhook_page_attachments_alterを使用します。

次のコード行は、ノードリストページにのみライブラリを添付します。

function mytheme_page_attachments_alter(&$page){
  $path = $current_path = \Drupal::service('path.current')->getPath();
  if($path == '/node') {
    $page['#attached']['library'][] = 'my-theme/my-library';
  }
}

方法3：ライブラリを条件付きで追加するもう1つの便利な方法は、hook_preprocess_page（）などの前処理関数を使用することです。

これは、アセットライブラリをフロントページに制限する別の例です。

function mytheme_preprocess_page(&$variables){
  if ($variables['is_front'] == TRUE) {
    $variables['#attached']['library'][] = 'my-theme/my-library';
  }
}

方法4：アセットライブラリは、Twigテンプレート内でattach_library関数を使用してアタッチすることもできます。そのテンプレートがいつでも使用される対応するライブラリは、テンプレート固有の条件に従って添付されます。

この動作を確認するには、テーマでテンプレートを作成または変更する必要があります。この例では、node.html = twigテンプレートを変更して、次のコード行でnode.id == 1の場合にのみライブラリをアタッチします

{% if node.id == 1 %}
  {{ attach_library('my-theme/my-library') }}
{% endif %}

これで、サイトのノード1にアクセスすると、ライブラリの動作を確認できます。

22
vivek agarwal

参照： https://www.drupal.org/developing/api/8/assets

ページからの引用：

ページにライブラリをアタッチする

ロードする必要のあるアセットに応じて、対応するアセットライブラリを別の方法でアタッチします。結局のところ、一部のアセットライブラリはすべてのページで必要ですが、その他のライブラリは非常にまれで、他のほとんどは必要ですが、すべてではありません。

ただし、最も重要なのは、どのページ（つまり、URLまたはルート）に基づいてライブラリを添付するかを決定するのではなく、ページに表示されるものに基づいてライブラリを添付するかどうかを決定することです。ページに '＃ type '=>' table '、'＃type '=>' dropbutton 'および' #type '=>' foobar 'の場合、これらの各' #type 'に関連付けられたライブラリのみをロードします。ただし、「＃type」だけに限定されているわけではありません。「＃type」の特定のインスタンスに対してのみ特定のアセットライブラリをロードしたい場合があります。その場合は、そのインスタンスのレンダー配列にアタッチするだけです。

もちろん、ごくまれに、ページ上の「もの」に関係なく、実際に特定のアセットをすべてのページ（たとえば、ページの読み込みを追跡する分析JavaScript）に読み込む正当な理由があります。

2
NWOM