ishikawa note

front-end engineer / web director / YAMAGATA

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

Posted in: a-blog cmsテンプレートの継承

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


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

これまでのファイル読み込み記述 <!--#include file="/path/to/file" -->@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.htmlindex.html に読み込みます。さらに任意の @section ~ @endsection 内を上書きします。以下は aside セクションにカテゴリーリストを追加する内容です。

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

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

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

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

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

雑感

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