【Drupal 8】JavaScript file を <head> で読む方法

【Drupal 8】JavaScript file を <head> で読む方法

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: {}

CMSカテゴリの最新記事