Drupal 8のデフォルトでは、追加JSファイルの読み込み位置はbodyの閉じタグ直前となっています。
しかし、headタグ内で読ませたいJSファイルがあることもあります。
公式で下記ページにてやり方が説明してありますが、いまいち分かりづらく…
Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme | Drupal.org
いろいろと試した結果、上記ページのやり方を理解しましたので、備忘録として残しておきます。
編集するのは my_theme.info.yml と my_theme.libraries.yml で、実際にJSファイルが読み込まれる箇所はheadの閉じタグ直前となります。
Before
my_theme.info.yml
name: my_theme
type: theme
description: MY TEST THEME
core: 8.x
base theme: classy
libraries:
- my_theme/global-styling
regions:
header: Header
featured: Featured
content: Content
sidebar_first: First sidebar
sidebar_second: Second sidebar
footer: Footer
my_theme.libraries.yml
global-styling:
version: 1.x
css:
theme:
css/style.css: {}
js:
js/style.js: {}
After
my_theme.info.yml
name: my_theme
type: theme
description: MY TEST THEME
core: 8.x
base theme: classy
libraries:
- my_theme/global-styling
- my_theme/js-header
regions:
header: Header
featured: Featured
content: Content
sidebar_first: First sidebar
sidebar_second: Second sidebar
footer: Footer
my_theme.libraries.yml
global-styling:
version: 1.x
css:
theme:
css/style.css: {}
js:
js/style.js: {}
js-header:
header: true
js:
js/header.js: {}
コメント