LoginSignup
1
2

More than 5 years have passed since last update.

テンプレート継承方式のテーマ構築について

Last updated at Posted at 2019-03-16

テンプレート継承方式とは

テンプレートを構築する際に、ヘッダ・フッタなどのインクルードを各テンプレートに記載するのではなく、全体のレイアウトを定義した「親テンプレート」を継承してから、変更したい箇所のみを上書きする構築手法のことです。
Movable Typeではレイアウトテンプレート全体を、タグの処理を遅延させる mt:SetVarTemplate で変数化することで実装できます。

この手法をデフォルトとしている、a-blog cmsの解説が比較的理解しやすいかもしれません。
https://developer.a-blogcms.jp/release28/ajax/extends.html

layout.html
<html>
(ヘッダとか)

@section(main)
<h2>こんにちは!</h2>
@endsection

(サイドメニューとか)
(フッタとか)
</html>
entry.html
@extend(layout.html)

@section(main)
<h2>ブログ記事のタイトル</h2>
<p>ブログ記事の内容</p>
@endsection

テンプレート継承方式の利点

各CMSへの高度な理解が必要となりますが、各テンプレートの見通しが良くなり、テンプレートによって全体のレイアウトが大幅に変わるようなサイトにも対応しやすいです。

MovableType.netでも導入してみたい

MovableType.netでは mt:SetVarTemplate タグが使用できません。
https://movabletype.net/tags/list/

このため、mt:SetVerBlock で代用して、以下の通り変更点をレイアウトテンプレートよりも先に書くことになります。
<mt:Unless name="(変数名)">〜</mt:Unless> で包括することで、指定しなかった場合のデフォルトのソースコードを定義することができます。

テーマ内の変数が増えると不具合の回避が難しくなりますが、一般的な方法よりもコードの見通しは良くなるかもしれません。

layout.mtml
<html>
(ヘッダとか)

<mt:Unless name="__main__">
    <mt:SetVarBlock name="__main__">
    <h2>こんにちは!</h2>
    </mt:SetVarBlock>
</mt:Unless>
<mt:Var name="__main__" />

(サイドメニューとか)
(フッタとか)
</html>
entry.mtml
<mt:SetVarBlock name="__main__">
<h2>ブログ記事のタイトル</h2>
<p>ブログ記事の内容</p>
</mt:SetVarBlock>

<mt:Include module="レイアウト-基本" />
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2