G: @extendsを使ってテンプレートを最適化してみよう
Ver. 2.8.0 よりテンプレートを継承できる機能が追加されました。 このハンズオンでは、継承機能(@extends)を使ってテンプレートをわかりやすくて管理しやすい形にしていきます。
1. ハンズオン用にテスト環境を用意する
HTMLファイルを修正しながら実際に動作の確認をするため、Ver. 2.8.0 以上の a-blog cms がインストールされた環境を準備します。
1-1. ablogcms.io で a-blog cms のテスト環境を用意しよう
有限会社アップルップルではお試し用環境「ablogcms.io」を用意しておりますので、こちらからテスト環境の構築ができます。また、SFTPでアクセスできるツールなどのご用意をお願いします。
※ローカル環境で開発したい方はこちらを参考にしてください。
1-2. beginner2018 のテーマを選択
今回のハンズオンでは「beginner2018」のテーマを使用します。管理ページ > コンフィグ > テーマ設定 にて、テーマディレクトリ名を「beginner2018」に設定してください。
これでハンズオンの環境準備が整いました。
2. 継承機能(@extends)について理解を深めよう
ハンズオンに取りかかる前に、継承機能(@extends)についての理解を深めておきましょう。
継承機能について詳しく解説しているページがあるのでこちらを参照してください。
3. ハンズオン1(継承機能を体験してみよう)
それでは、簡単に継承機能を体験してみましょう。HTMLファイル(テンプレート)を編集するため、「1-1. ablogcms.io で a-blog cms のテスト環境を用意しよう」で構築したサーバーへSFTPツールなどを使用しアクセスしてください。
3−1. 継承元テンプレートを作成しよう
継承元となるテンプレートを作成します。/themes/beginner2018/_layoutsフォルダにHTMLファイルを新規作成し、ファイル名を "base_test.html" としてください。
作成した "base_test.html" をテキストエディタで開き、下記を貼り付けてください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p>テスト1:これは継承元テンプレートです。</p> <p>テスト2:これは継承元テンプレートです。</p> <p>テスト3:parent要素の確認。これは継承元テンプレートです。</p> </body> </html>
3-2. 継承先テンプレートを作成しよう
継承先となるテンプレートを作成します。/themes/beginner2018フォルダの直下にHTMLファイルを新規作成し、ファイル名を "top_test.html" としてください。

今の時点で「http://取得したドメイン名.ablogcms.io/top_test.html」にアクセスしてみてください。"top_test.html" には何も書かれていないので、「not found」になるはずです。
※ a-blog cms では、HTMLファイル内に htmlタグ やbodyタグが書かれていないと「not found」や「404エラー」になる設定になっています(Ver. 2.7.18 より)。設定を変えることも可能なので、くわしくは直接表示させないテンプレートを指定するの記事をご覧ください。
3-3. "base_test.html" を "top_test.html" に継承してみよう
継承先となる "top_test.html" をテキストエディタで開き、下記ソースを貼り付けてください。
@extends("/_layouts/base_test.html")
これで "base_test.html" を "top_test.html" に継承できるようになりました。"top_test.html" をブラウザで確認してみましょう。
「テスト1:これは継承元テンプレートです。」「テスト2:これは継承元テンプレートです。」「テスト3:parent要素の確認。これは継承元テンプレートです。」の表示が確認できるはずです。
3-4. 継承元を @section() 〜 @endsection で囲み、継承先で @section 内を変更してみよう
継承元となる "base_test.html" をテキストエディタで開いてください。
「<p>テスト1:これは継承元テンプレートです。</p>」「<p>テスト2:これは継承元テンプレートです。</p>」「<p>テスト3:parent要素の確認。これは継承元テンプレートです。</p>」を下記のように @section(セクション名)
〜@endsection
で囲みます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> @section(test1) <p>テスト1:これは継承元テンプレートです。</p> @endsection @section(test2) <p>テスト2:これは継承元テンプレートです。</p> @endsection @section(test3) <p>テスト3:parent要素の確認。これは継承元テンプレートです。</p> @endsection </body> </html>
継承先となる "top_test.html" をテキストエディタで開き、@extends の下に下記を追記してください。
@section(test2) <p>テスト2:これは継承先テンプレートです。</p> @endsection
これで、「テスト2:」の文が書きかわります。ブラウザで "top_test.html" を開き、書きかわっていることを確認してください。
- @section 追記前「テスト2:これは継承元テンプレートです。」
- @section 追記後「テスト2:これは継承先テンプレートです。」
3-5. @parent を使ってみよう
継承先となる "top_test.html" をテキストエディタで開き、下記ソースをテンプレートの一番下に貼り付けてください。
@section(test3) @parent <p>テスト3:parent要素の確認。これは継承先テンプレートです。</p> @endsection
"top_test.html" では@section(test3)内で @parent が呼ばれると、継承元(親テンプレート)の @section 内のコードを保持しつつ、継承先(子テンプレート)の記述も表示してくれるようになります。
それでは、"top_test.html" をブラウザで確認してみましょう。「テスト3:」は「テスト3:parent要素の確認。これは継承元テンプレートです。」と「テスト3:parent要素の確認。これは継承先テンプレートです。」の2つが確認できるはずです。
これで、@extends 機能のハンズオンは終わりです。次に @include 機能について解説していきます。
4. @includeを使ってみよう
@include は Ver. 2.8.0 から追加された新しい記法です。以前のインクルードはただファイルを読み込んでくるだけでしたが、新しいインクルード文には、変数を読み込み先テンプレートに渡せる機能が追加されています( インクルード | a-blog cms developers )。
4-1. @include の記述方法
インクルードのは下記のように記述します。
@include("/path/to/file.html")
4-2. 引数
変数を読み込み先テンプレートに渡たす機能を紹介します。変数の引き渡しは下記のように行います。
読み込み元(インクルード)
変数の渡し方は、@include()の第2引数にJSON形式で渡します。
JSON形式とは、{"名前": "値"}
のように変数名と値を " : " (コロン)で区切り、全体を中括弧で囲う記述形式のことです。変数を2つ以上並べる場合は下記のように ” , ”(カンマ)で区切ります。
@include("/path/to/file.html", {"key": "value", "key2": "value2"})
読み込み先(変数参照先)
変数の参照は、通常の変数と違い2重の中括弧で囲むことで参照できるようになります。
<p>{{key}}</p> <p>{{key2}}</p>
デフォルト値
変数が空だったり引数として渡されなかった場合に、デフォルト値を設定できるようになっています。 " | "(パイプ)で区切り、default("デフォルト値")
で定義できます。また、" | "(パイプ)で区切るものはデフォルト値だけでなく、別変数も記述できます。その場合は、左から順に見ていき、空でない値があったときにその変数が表示されます。
読み込み先(変数参照先)
{{key | key2 | default("デフォルト値")}}
5. ハンズオン(@includeを使ってモジュールIDを切り替えよう)
beginner2018テーマで一覧ページ表示用に使われるindex.htmlに@include("/include/siteparts/linkList.html")
と記述されている箇所があります。この@include文に引数でmodule_id
を渡してあげると、リンク集の内容を切り替えられるようにしてみましょう。下記の条件を満たしていればハンズオン、クリアです!
条件1. 下のソースコードの時は今まで通りのリンク集が出るように
インクルード先でdefault
を利用し、読み込みもとでmodule_id
の引数がない場合でも、モジュールIDとして、link_list
が設定されているようにしましょう。
@include("/include/siteparts/linkList.html")

条件2. 下のようにタイトルとモジュールIDを設定されていれば、その内容が出るように
@include("/include/siteparts/linkList.html", { "module_id": "link_list2", "module_heading": "リンク集2" })

ハンズオンは以上になります。お疲れ様でした。