Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

テンプレートを構築する際に、ヘッダ・フッタなどのインクルードを各テンプレートに記載するのではなく、全体のレイアウトを定義した「親テンプレート」を継承してから、変更したい箇所のみを上書きする構築手法のことです。
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="レイアウト-基本" />
webbingstudio@github
フリーランスのWebエンジニアです。HTML5/CSS3/jQuery/PHP/Movable Type/WordPress/a-blog cms/baserCMS
https://webbingstudio.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away