これは Craft CMS Advent Calendar 2016 11日目の記事です。
今回は、テンプレートの基本的な内容に触れてみます。
Craft CMS のテンプレートエンジンである Twig は、Drupal 8、EC-CUBE 3、Grav といった比較的新しい CMS で多く採用されていることもあり、使ったことがあるという方が多いかもしれません。
一度記法を覚えてしまえば、他のシステムのテンプレートも同じ感覚で実装できる点は魅力ですよね。
テンプレートファイルの保存先と URL について
開発環境のデモサイトとして使用している Happy Leager を例に、ファイル構成を確認してみましょう。
Craft CMS のテンプレートは craft/templates
に準備します。
craft/templates
├── _includes/
│ ├── article_body.html
│ ├── article_heading.html
│ ├── content_header.html
│ └── index_heading.html
├── _layouts/
│ ├── base.html
│ └── site.html
├── about/
│ └── index.html
├── index.html
├── news/
│ ├── _entry.html
│ └── index.html
├── search/
│ └── _results.html
├── services/
│ ├── _entry.html
│ └── _index.html
└── work/
├── _entry.html
└── _index.html
craft/templates/index.html
はトップページ向けのテンプレートで、下記いずれかの URL をリクエストされた際に表示されます。
- http://localhost/
- http://localhost/index
- http://localhost/index.html
一部、ディレクトリ名やファイル名の接頭辞が _(アンダースコア)
になっているものは、ブラウザから直接アクセスできないようになっています。
- http://localhost/_layouts/base.html
- http://localhost/work/_index.html
サイト共通のインクルードパーツやエントリーの ID などのパラメータが必須となるテンプレートなどでこの仕組みを利用しておき、管理画面で任意のセクションのエントリテンプレートとして紐づけたり、ルーティングの設定で参照できるようにします。
タグについて
テンプレートタグは、大きく分けて3種類あります。
コメント
{#
と #}
で囲まれた内容は、コメントになります。
{# これはコメント文です #}
{#
# 改行を含めることで、複数行コメントも可能です。
-#}
ロジックタグ
{%
と %}
で囲まれた内容は、ロジックタグです。
変数をセットしたり、ループ処理や条件分岐といった何らかの処理を行う場合に記述します。
{% set image = entry.heroImage.first() %}
{% if image %}
<img src="{{ image.getUrl({ height: 916 }) }}" alt="{{ image.title }}"/>
{% endif %}
Happy Leager の craft/templates/index.html
でも、ヒーローイメージがセットされていれば img
タグを出力する記述を確認できます。
ロジックタグには、Twig で実装されているものと Craft CMS で利用できるものがありますので、それぞれ公式リファレンスで確認しておきましょう。
Tags - Documentation - Twig:
http://twig.sensiolabs.org/doc/tags/index.html
Tags | Templating Reference | Craft CMS:
https://craftcms.com/docs/templating/tags
出力タグ
{{
と }}
で囲まれた出力タグは、あらかじめセットされた変数や function の戻り値を出力します。|(パイプ)
区切りでフィルタを適用すれば、出力内容を調整できます。
<h1><a href="{{ siteUrl }}">{{ siteName }}</a></h1>
<p>{{ now|date("Y.m.d H:i:s") }}</p>
funtion やフィルタも、Twig と Craft CMS それぞれの公式リファレンスで一度目を通しておくとよいでしょう。
Functions - Documentation - Twig:
http://twig.sensiolabs.org/doc/functions/
Functions | Templating Reference | Craft CMS:
https://craftcms.com/docs/templating/functions
Filters - Documentation - Twig:
http://twig.sensiolabs.org/doc/filters/
Filters | Templating Reference | Craft CMS:
https://craftcms.com/docs/templating/filters
なお、Twig テンプレートの基本について書かれた PHP Archive さんの記事が判りやすいと感じましたので、あわせてご紹介しておきます。
[PHP]Twigテンプレートの実践的な構成と作り方 | PHP Archive:
http://php-archive.net/php/twig-advanced/
テンプレートの作成にあたって
お使いのエディタでシンタックスハイライトやコードの補完ができるよう、Twig 公式リファレンスの IDEs Integration
欄を参考に事前にプラグインなどをインストールしておくと便利です。
Twig for Template Designers - Documentation - Twig:
http://twig.sensiolabs.org/doc/templates.html
Sublime Text や Atom であれば、Craft CMS 向けに最適化されたプラグインもオススメです。
BarrelStrength/Craft-Twig.tmbundle: A Craft CMS influenced Twig bundle for Sublime Text and Textmate:
https://github.com/BarrelStrength/Craft-Twig.tmbundle
fruitstudios/Craft-Twig: Craft CMS Package for Atom:
https://github.com/fruitstudios/Craft-Twig
まとめ
ここでは、テンプレートの基本的な内容について解説してみました。
実際にコードを書いてみると覚えやすいと思いますので、次回はベーステンプレートを作成してみようと思います。