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
これで、「テスト２：」の文が書きかわります。ブラウザで "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()の第２引数に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"
})
ハンズオンは以上になります。お疲れ様でした。
