Drupal Cafe Vol.52 で「Drupal 8でtwigやJavascriptに変数を追加するのはどうやるの?」という話が出たので、基本的な方法をご紹介します。
(関連記事:「CMS機能比較 DrupalかWordPressか?- 最適なWebプラットフォームを選択する方法」)
twigに変数を渡す方法
これはDrupal 7から大きな変更はありません。
{theme_name}.theme (これはDrupal 7での template.php に相当します) に hook_preprocess_HOOK(&$variables) という関数を作り、この関数に渡される $variable という引数に値を追加していくことで、twigに任意の値を渡すことができます。
「hook」の部分はテーマの名前、「HOOK」の部分は変数を渡すリージョンやフィールドの名前になります。
例えばテーマの名前が「foo」で page.html.twig で使える変数を設定したい場合、 foo_preprocess_page(&$variables) という関数を以下のように作成します。
function foo_preprocess_page(&$variables) {
$variables['my_variable'] = 'Hello drupal 8 themeing!';
}
変数 $variable は配列になっており、配列のキーがtwigでの変数名となります。
上記のサンプルの場合だと、page.html.twig に <h1>{{ my_variable }}</h1>
のように書くと、 <h1>Hello drupal 8 themeing!</h1>
のように変換されてHTMLとして出力されます。
Javascriptに変数を渡す方法
こちらはDrupal 7から若干変わっています。
Drupal 7の場合 drupal_add_js を使い、
drupal_add_js(array('foo' => array('my_variable' => 'Hello drupal 7 themeing')), 'setting');
のように書くと、Javascript側で
(function ($) {
Drupal.behaviors.foo = {
attach: function(context, settings) {
console.log(settings.foo.my_variable); // "Hello drupal 7 themeing" がログに出力される。
}
}
})(jQuery);
のように変数を参照することができました。
それに対してDrupal 8では hook_page_attachments を使います。
例えばテーマの名前が「foo」の場合、foo.theme に
function foo_page_attachments(array &$attachments) {
$attachments['#attached']['drupalSettings']['foo']['my_variable'] = 'Hello drupal 8 themeing';
}
のように書いておくと、Javascript側では、
console.log(drupalSettings.foo.my_variable); // "Hello drupal 8 themeing" がログに出力される。
のように参照することができます。
Drupal.org により詳しい情報がまとまっていますので、詳細は以下を参照してください。
関連コンテンツ
Drupal 初心者講座バックナンバー
- Drupal 9/10 初心者講座
- 第 1 回 歴史に見る Drupal の DNA
- 第 2 回 Drupal はフレームワークか?CMS か?他の CMS との比較
- 第 3 回 Drupal の特徴
- 第 4 回 Drupal 9 / 10 のインストール (1)
- 第 5 回 Drupal 9 / 10 のインストール (2)
- 第 6 回 Drupal にコンテンツを投稿してみる
- 第 7 回 Drupal のボキャブラリとタクソノミーの使い方
- 第 8 回 コンテンツ管理における Drupal と他の CMS との比較
- 第 9 回 Drupal のブロックシステム
- 第 10 回 Drupal の標準クエリビルダー Views の使い方
- 第 11 回 Drupal と他の CMS のクエリビルダー機能を比較
- 第 12 回 Drupal の多言語機能と他の CMS やサービスとの比較
- 第 13 回 Drupal の権限設定と WordPress や Movable Type との比較
- 第 14 回 Drupal のテーマシステムについて
- 第 15 回 Drupal の拡張モジュールの選定と使い方
- 第 16 回 Drupal をもっと知りたい方に向けた各種情報