Statamicのテンプレートタグの基本

2017/02/05

Statamicには独自のテンプレートタグがあります。様々な機能が用意されたこのタグを使って、柔軟なテンプレートファイルを構築することができます。

Statamicの独自テンプレートの概要です。Statamicでは、このタグを用いた独自のテンプレートを「Antlers(鹿の角) Templates」と呼んでいるようです。

タグのシンタックス(書式ルール)

  • ダブルブラケッツ {{ }} で括る
  • 大文字小文字は別ものとして扱われる(case-sensitive)
# template
{{ tag }}

タグの使い方=変数の値を出力する

  • 変数は文字列(strings)と配列(array/list)を扱うことができる
  • 配列(array)の出力にはタグのペア {{ a }} {{ /a }} を使う
  • 変数(配列)と値の設定はYAML書式を使う

シングル変数

変数:値=1:1のシングル変数をYAMLで設定し、タグで呼び出す場合のサンプルです。
値を管理画面で登録した場合も、サーバ内に同様のYAMLファイルがデータとして自動で生成・保存されます。

# YAML

 location: 名古屋
 temperature: 16
 level: 寒い
# template

場所は{{ location }}です。今日の気温は{{ temperature }}で、{{ level }}です。

多次元配列

変数内に変数を持つ多次元配列の場合は、YAMLでは変数をネストで設定し、タグペアで呼び出します。

# YAML

 members:
   - name: 山田
     role: アナリスト
   - name: 近藤
     role: エンジニア
   - name: 斉藤
     role: デザイナー
# template

{{ menbers }}
  {{ name }}は{{ role }}です。
{{ /menbers }}

次のように出力されます。

山田はアナリストです。
近藤はエンジニアです。
斉藤はデザイナーです。

リスト(一元配列) 

単純な配列の値を出力する場合は、値を{{ value }}で出力することができる。

  • リスト=普通の一元配列
  • 変数の呼び出しにはタグペアを使い、値の出力には{{ value }}を使う
# YAML

 team:
   - 山田
   - 近藤
   - 斉藤
# template

{{ team }}
  {{ value }}さん
{{ /team }}

次のように出力されます。

山田さん
近藤さん
斉藤さん

変数の修飾子(Modifier)

希望する条件に合致した値だけを出力したり、順番を操作するための機能がModifierです。テンプレートで変数と合わせて指定します。

  • Modifilerはソート、出力数の指定、切り出し、trim、逆順で表示など、条件を付けて値を表示する機能。
  • 種類は130個以上。statamic.com: Modifiers

次の様なデータをModifilerを使って出力してみます。

# YAML

 weather:
   - location: 名古屋
     temperature: 16
   - location: 東京
     temperature: 18
   - location: 兵庫
     temperature: 14
   - location: 北海道
     temperature: 3

指定した数だけ出力するlimitを使って先頭から2つのみを表示するテンプレート例。

# template

{{ weather limit="2" }}
  {{ location }}の気温は{{ temperature }}です。
{{ /weathter}}

次のように出力されます。

名古屋の気温は16度です。
東京の気温は18度です。

修飾子を複数つなげる

複数の条件を指定する場合は、Modifilerを複数指定します。

  • いくつでも修飾子をつなげることができる
  • 指定された順番(左から順番)に加工処理される

気温でソートした後、上から2つのみを表示するテンプレート例。

# template

{{ weather sort="temperature" limit="2" }}
  気温が高い地域は{{ location }}で、気温は{{ temperature }}です。
{{ /weather }}

次のように出力されます。

気温が高い地域は東京で、気温は18度です。
気温が高い地域は名古屋で、気温は16度です。

修飾子Modifilerには2つの書き方があります。

修飾子の記法1

  • 複数の修飾子を|パイプラインでつなぐ
  • 修飾内容(修飾の条件)は:コロンで指定する
  • 文字列変数の条件分岐(ifなど)に使用される
# templater

{{ string_variable | modifier1:修飾内容1:修飾内容1 | modifier2 }}

修飾子の記法2

  • 配列変数に使う(タグペアを使う)
  • 修飾の内容(条件)を|パイプラインでつなぐ
  • この記法の場合、条件分岐処理はできない
# template

{{ array_variable modifiler1="修飾内容1 | 修飾内容1" }}
  // 
{{ /array_variable }}

条件分岐ロジック

条件分岐によって出力内容を制御するための機能。
大きくは、if/elseunless/unlesselseがあり、次のタグペアで指定します。

# template

{{ if }} {{/if}}
{{ if }} {{ elseif }} {{ else }} {{ /if }}

{{ unless }} {{ /unless }}
{{ unless }} {{ unlesselse }} {{ /unless }}

分岐の条件式では、PHPと同様の「比較演算子:comparison」と「論理演算子:logocal」が使用できます。

真偽値、存在判定

  • 変数が存在しており、値がnullでない場合に「真」を返す
  • 変数が存在しない、または値がnullの場合、または値がfalseの場合は「偽」を返す
# template

# headerという変数があれば処理実行
{{ if header }}
  <img src="/assets/img/id.jpg">
{{ /if }}

# 全て真の時に処理実行(かつ &&)
{{ if header && footer && side }}
  サイトのフレームパーツ完成
{{ /if }}

# どれか一つ真の時に処理実行(または ||)
{{ if header || footer || side }}
  サイトは全然できてないね
{{ /if }}

# 偽の時に処理実行
{{ if ! soup }}
  ランチはスープじゃないよ
{{ /if }}

{{ unless soup }}
  ランチはスープじゃないよ
{{ /unless }}

比較演算

# template

# 等しい
{{ if season == "春" || season == "秋" }}
  <img src="/assets/img/subseason.png">
{{ elseif season == "冬" }}
  <img src="/assets/img/mainseason.png">
{{ /if }}

# 大小
{{ if age < 16 }}
  まだ子供だから
{{ elseif age >=20 }}
  もう大人だから
{{ /if }}

ショートハンド記法

真の時に変数の値を表示するだけの場合、orを使って記述を短縮することができます。

# template

# 通常の記法
{{ if header }}
  {{ header }}
{{ elseif header-2 }}
  {{ header-2 }}
{{ else }}
  "ヘッダーなし"
{{ /if }}
# ショートハンド記法
{{ header or header-2 or "ヘッダーなし" }}

条件分岐の条件に修飾子を使う

条件分岐の条件で修飾子を使う場合は、それらを()カッコで括ります。

# template

{{ if (date | modify_date:+73 years | format:Y) == 2015 }}
  これは確かに1942年に書かれた。
{{ /if }}

条件に正規表現を使う

  • 条件分岐の条件で正規表現を使う場合は、それらを~チルダでつなぐ
  • 正規表現は文字列型にエスケープしないといけない
  • 正規表現の前後は'シングルクオートで括る
# template

{{ if content ~ '/\bbest\b.+\bever/' }}
  {{ content }}
{{ /if }}

テンプレート内のコメントアウト

テンプレートコードの中でコメントを使う場合は、コメント文を{{# #}}で括ります。

# template

{{# これはコメントだよ #}}

一時的に動的処理をさせない場合などは、コードの前後を{{ noparse }}タグで括ります。

# template

{{ noparse }}
  Welcome to {{ fast_food_chain }},
  home of the {{ fast_food_chain_specialty_item }},
  can I take your order?
{{ /noparse }}

個別の変数単体に対し動的処理を回避する場合は、タグの前に@を付けます。

# template

ようこそ! @{{ fast_food_chain }}

値を出力する以外のタグの使い方

  1. 個別のエントリーやページのパーツを制御するCollection用のタグ Collection Tag
  2. 環境情報の値を.envファイルから取得するためのタグ Env Tag
  3. リダイレクト処理を実行するだけのタグ Redirect Tag

※タグはほぼ「変数」と同じように見えます。タグと変数の違いについて詳しくはこちら Tags vs. Variables

番外編:パラメータの中の変数

タグのパラメータの中で変数を使う場合は、変数をシングルブラケッツ{ }で括ります。

# template

{{ nav from="{segment_1}" }}
一つ前のページへ
867867.com

Contents

Get in touch

これからも、仕事と遊びを通して多くの方と出会えますように。

お問い合わせ
株式会社グランフェアズ
facebook

※個人事業主ですが、専従のため制作のご依頼はお受けしておりません。

© 867867.com All Rights Reserved.

menu