38. Drupal SAPPORO
Twig 変数
• 一般の変数
• {% set <変数> = 値 %} で変数を定義して値をセットできる。
• Drupal テンプレート変数
• コアのテンプレートファイルの冒頭部分に、
そのテンプレートで使用できる変数の説明コメントが記述されている。
{#
/**
* @file
* Default theme implementation for the basic structure of a single Drupal page.
*
* Variables:
* - logged_in: A flag indicating if user is logged in.
* - root_path: The root path of the current page (e.g., node, admin, user).
* - node_type: The content type for the current node, if the page is a node.
* - head_title: List of text elements that make up the head_title variable.
・・・
#}
・・・
html.html.twig
39. Drupal SAPPORO
コード例1:出力タグ
• テンプレート変数の値出力
• html.html.twig のテンプレート変数 logged_in を出力する例
• logged_in はログイン中なら true となるテンプレート変数
{# 変数値の出力 #}
<p>logged_in 変数の出力例: {{ logged_in }}</p>
<hr>
html.html.twig(抜粋)
{#
/**
* @file
* Default theme implementation for the basic structure of a single Drupal page.
*
* Variables:
* - logged_in: A flag indicating if user is logged in.
・・・
40. Drupal SAPPORO
コード例2:if 文
• 条件分岐
• {% if 条件式 %} ① {% else %} ② {% endif %}
• 条件式が true と評価されれば ①、それ以外は ② が有効となる
{# 条件分岐 #}
<p>条件分岐の例:logged_in が true ならログイン中と表示する。</p>
{% if logged_in %}
<p>ログイン中です。</p>
{% else %}
<p>ログインしていません。</p>
{% endif %}
<hr>
html.html.twig(抜粋)
41. Drupal SAPPORO
コード例3:for 文
• 反復構造
• {% for 変数 in 初期値..終了値 %} … {% endfor %}
• … の部分では変数を利用して処理を記述できる(出力等)
{# 反復構造 #}
<p>反復処理の例:変数 i を 0 から 3 まで変化させて値を表示する。</p>
{% for i in 0..3 %}
i = {{ i }}<br>
{% endfor %}
<hr>
html.html.twig(抜粋)
42. Drupal SAPPORO
コード例4:マップ構造
• マップ構造と変数への代入
• {% set 変数 = {キー:値, キー:値, ・・・} %}
• 「キー:値」 の形式をカンマ区切りで並べて {} で囲むとマップ構造になる
• set 変数 = に続けることで変数に代入できる
{# 変数への代入とマップ構造 #}
{%
set tokens =
{0:'hello',1:'my',2:'name',3:'is',4:'drupal.'}
%}
html.html.twig(抜粋)
43. Drupal SAPPORO
コード例5:for in 構文
• 配列(マップの値)の全件表示
• {% for 変数 in 配列 %} … {% endfor %}
• 全要素(の値)を「変数」で参照しながら全件処理する
• … の部分では変数を利用して処理を記述できる(出力等)
{# 先に定義したマップの値を全件表示する #}
<p>マップの値を全件表示する:</p>
{% for token in tokens %}
{{ token }}
{% endfor %}
<hr>
html.html.twig(抜粋)
44. Drupal SAPPORO
コード例6:for key,value in 構文
• マップのキーと値の全件表示
• {% for キー変数,値変数 in マップ %} … {% endfor %}
• マップ内の各要素のキーと値を参照しながら全件処理する。
• 各要素のキーは 「キー変数」、値は 「値変数」 にそれぞれセットされる
• … の部分で各変数を参照して処理を記述できる(出力等)
{# 先に定義したマップのキーと値の全件表示 #}
<p>マップのキーと値を全件表示する:</p>
{% for key,value in tokens %}
token[{{ key }}] = {{ value }}<br>
{% endfor %}
<hr>
html.html.twig(抜粋)
73. Drupal SAPPORO
生成ページのソースを題材と比較すると…
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="about.html">About</a>
</li>
題材の index.html(抜粋)
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
・・・
<ul>
<li>
<a href="/" data-drupal-link-system-path="<front>">About</a>
</li>
Drupal の生成ページ(抜粋)
ul 要素のクラス属性が不足している。
この部分を出力しているテンプレートは?
74. Drupal SAPPORO
Twig デバッグのコメントを確認すると…
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
・・・
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'menu__main' -->
<!-- FILE NAME SUGGESTIONS:
* menu--main.html.twig
x menu.html.twig
-->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/menu.html.twig' -->
<ul>
<li>
<a href="/" data-drupal-link-system-path="<front>">About</a>
</li>
Drupal の生成ページ(抜粋)
現在使用されているメニューのテンプレートが
menu.html.twig であること、および
メインメニュー専用のテンプレートファイルの
menu--main.html.twig で
オーバーライドできることがわかる。