テンプレート継承方式とは
テンプレートを構築する際に、ヘッダ・フッタなどのインクルードを各テンプレートに記載するのではなく、全体のレイアウトを定義した「親テンプレート」を継承してから、変更したい箇所のみを上書きする構築手法のことです。
Movable Typeではレイアウトテンプレート全体を、タグの処理を遅延させる mt:SetVarTemplate
で変数化することで実装できます。
この手法をデフォルトとしている、a-blog cmsの解説が比較的理解しやすいかもしれません。
https://developer.a-blogcms.jp/release28/ajax/extends.html
<html>
(ヘッダとか)
@section(main)
<h2>こんにちは!</h2>
@endsection
(サイドメニューとか)
(フッタとか)
</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>
で包括することで、指定しなかった場合のデフォルトのソースコードを定義することができます。
テーマ内の変数が増えると不具合の回避が難しくなりますが、一般的な方法よりもコードの見通しは良くなるかもしれません。
<html>
(ヘッダとか)
<mt:Unless name="__main__">
<mt:SetVarBlock name="__main__">
<h2>こんにちは!</h2>
</mt:SetVarBlock>
</mt:Unless>
<mt:Var name="__main__" />
(サイドメニューとか)
(フッタとか)
</html>
<mt:SetVarBlock name="__main__">
<h2>ブログ記事のタイトル</h2>
<p>ブログ記事の内容</p>
</mt:SetVarBlock>
<mt:Include module="レイアウト-基本" />