2018-05-19

テンプレートを継承してテーマを最適化

a-blog cms Ver.2.8 から追加された新機能「テンプレートの継承」。テーマの中でファイルを継承し、指定した範囲を上書きできるとのこと。春合宿のハンズオン資料を参考に試してみます。

G: @extendsを使ってテンプレートを最適化してみよう | 2018春合宿 | ハンズオン | a-blog cms developer

a-blog cms developer

Ver. 2.8.0 よりテンプレートを継承できる機能が追加されました。このハンズオンでは、継承機能（@extends）を使ってテンプレートをわかりやすくて管理しやすい形にしていきます。 1. ハン...

ファイルの読み込み記述を @include に書き換え

これまでのファイル読み込み記述  を @include("/path/to/file") に変更したら、ソースコードがぐんと見やすくなった感じがします。

継承元テンプレートを作成

ベースになるテンプレートを作成します。例えば/layout/base.html。このファイルを継承します。さらに、ソース内の任意の範囲を @section ~ @endsection で囲み、セクション名をつけて設定。継承する際に追加・変更など上書きできるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  @section(head-meta)
    @include("/include/head/meta.html")
  @endsection
  @section(head-link)
    @include("/include/head/link.html")
  @endsection
  @section(head-js)
    @include("/include/head/js.html")
  @endsection
</head>
<body>
  <header>
    @section(header)
    <h1><a href="%{BASE_URL}">%{BLOG_NAME}</a></h1>
    @endsection
  </header>
  <main>
    @section(main)
      @include("/include/entry/body.html")
    @endsection
  </main>
  <aside>
    @section(aside)
      @include("/include/parts/search.html")
    @endsection
  </aside>
  <footer>
    @section(footer)
    <p>&copy; %{DOMAIN}</p>
    @endsection
  </footer>
</body>
</html>

継承してモジュールを追加してみる

base.html を index.html に読み込みます。さらに任意の @section ~ @endsection 内を上書きします。以下は aside セクションにカテゴリーリストを追加する内容です。

// 継承元テンプレートの読み込み
@extends("/layout/base.html")

//上書きする部分
@section(aside)
  @include("/include/parts/search.html")
  @include("/include/category/list.html")
@endsection

index.html のソースはこれだけ。
またbase.html は index.html の親テンプレートに当たるので、最初から設定されている @include("/include/parts/search.html") 部分は@parent で参照できる。

@extends("/layout/base.html")

@section(aside)
  @parent
  @include("/include/category/list.html")
@endsection

雑感

構築するウェブサイトの規模などにもよりますが、テンプレートの継承をメインに制作していくと、管理や効率が良さそうだと実感しました。参照元テンプレートは@section@include だらけにしないことがポイントかもしれません。

ishikawa note

ファイルの読み込み記述を @include に書き換え

継承元テンプレートを作成

継承してモジュールを追加してみる

雑感