Drupal 8 テーマ作成 .libraries.ymlファイルについて

--広告--

ポイント

Drupal 8のテーマで、cssやJavaScriptを読み込むためには、theme名.libraries.ymlファイルが必要になります。

今回はtheme名.libraries.ymlファイルの記載方法や定義について説明します。

閲覧数 349 回

theme名.libraries.ymlファイルについて

Drupal テーマ内でcssやjapascriptを読み込むためには theme名.libraries.yml というファイルの作成が必要になります。

テーマ名が「sample」の場合は、ファイル名は「sample.libraries.yml」というようになります。

theme名.libraries.ymlファイルを作成しよう

それでは実際にtheme名.libraries.ymlファイルを作成してみましょう。

今回はtheme名.info.ymlファイルに

libraries:
- sample/base

と記載されているという前提で進めます。

記載内容としては下記のようになります。

base:
  version: VERSION 1.x
  css:
    theme:
      css/themify-icons.css: {}
      css/bootstrap.css: {}
  js:
    js/jquery-1.10.2.min.js: {}
 

theme名.info.ymlファイルの定義についての説明

ここからファイルの詳細な内容について説明していきます

1行目: base:

こちらはtheme名.info.ymlファイルに記載されたライブラリ名を記載します。

2行目: version: VERSION 1.x

ライブラリのバージョンを自由に記載します。

3行目: css:

こちらは「css」または「js」と記載します。

今回は4行目以降でcssの定義をするため「css:」と記載しています。

4行目: theme:

こちらはcssのウエイトを設定することができます。

下記5パターンでウエイトを設定できます。

 

• base key assigns a weight of CSS_BASE = -200
• layout key assigns a weight of CSS_LAYOUT = -100
• component key assigns a weight of CSS_COMPONENT = 0;
• state key assigns a weight of CSS_STATE = 100
• theme key assigns a weight of CSS_THEME = 200
 

引用:Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module

 

5〜6行目
css/themify-icons.css: {}
css/bootstrap.css: {}

こちらにcssのパスを記載します。

今回は「css」ディレクトリ内の2つのファイルを読み込んでいます。

7行目: js:

3行目ではcssの定義でしたが、こちらはjsの定義です。

8行目以降でjsの定義を行うため、jsと記載されています。

8行目:
js/jquery-1.10.2.min.js: {}

こちらにjsのパスを記載します。

今回は「js」ディレクトリの1ファイルを読み込んでいます。

theme名.libraries.ymlファイルのまとめ

今回はtheme名.libraries.ymlファイルの概要と記載方法について説明しました。

以前のバージョンにはなかった部分ですので、しっかりと学習する必要がありそうです。

こちらのページだけでは足りない部分もありますので、詳しくはDrupal.orgにて確認をお願いします。

カテゴリ

関連タグ

--広告--

同じカテゴリのコンテンツ

・非常に簡易的なDrupalのテーマ作成方法を説明します。

Drupalのテンプレート構造についての説明をします。

主…

ここでは「記事」「基本ページ」等のコンテンツタイプごとに

node.html.tiwgは、page.html.twigの …

ここではテーマにスタイルシートを追加する方法を説明します。