これはMovable Type Advent Calendar 2019の19日目の記事です。
MONSTER DIVEでは「Movable Type使い」を積極採用中ですが、
ありがたいことにお仕事のご依頼のほうが多く、既存のメンバー(マークアップエンジニア/フロントエンドエンジニア)たちももっとMovable Typeを使いこなせるように、という意図から、勉強会を定期的に行っています。
アドベントカレンダーのネタを何にしようかなってことで、
今回は再構築高速化にも関連する意外と奥深い「<mt:Include>・<mt:IncludeBlock>」について説明してみたいと思います。
(→ Movable Type 再構築高速化 考察(1) / Movable Type 再構築高速化 考察(2))
まずは<mt:Include>から。
おなじみモジュールテンプレートを呼び出すMTタグですね。
moduleモディファイアに指定した、モジュールテンプレートをタグの場所に挿入します。
ブロックごとにまとめるとテンプレートがスッキリして見やすくなりますね。
ちなみにファイル(file="xxxx")もインクルードできますが、デフォルト設定だと使えなくなっています。
※mt-config.cgi内で解禁することが可能。
ほかにもモディファイアはあるので、公式テンプレートタグリファレンスを御覧ください。
個人的に使用する機会は少ないですが、状況によっては便利なMTタグです。
簡単に言えば、さきほどの<mt:Include>の逆の動作をします。
モジュールテンプレートを呼び出す点は同じですが、その呼出先のなかに指定したコンテンツを埋め込んで展開することができます。 例えば、他のページと共通のコンテンツだけれども、一部分だけ違うとかいう際に向いています。
ほかにもモディファイアはあるので、公式テンプレートタグリファレンスを御覧ください。
グローバルナビは基本的にサイト全体で共通なのだけれど、トップページでだけHOMEボタンを出したくない!
という例を両タグで作ってみたいと思います。
一番簡単な方法は、グローバルナビのモジュールテンプレート複数作成して、
インデックステンプレートとそれ以外のテンプレートでそれぞれ呼び出すことです。
差異が多ければ、テンプレート自体を分けたほうが見やすいです。
<$mt:Include module="[BLK] グローバルナビ:TOP"$>
<$mt:Include module="[BLK] グローバルナビ:汎用"$>
インデックステンプレートに判別用のオリジナル変数を設置します。
<$mt:SetVar name="site_index" value="1"$>
モジュールテンプレート「グルーバルナビ」を新規作成して、その中で分岐を作成します。
<div class="globalHeader"> <ul> <mt:If name="site_index"> <li><a href="/index.html">home</a></li> </mt:If> <li><a href="/about.html">about</a></li> <li><a href="/access.html">access</a></li> <li><a href="/contact.html">contact</a></li> </ul> </div>
あとは、各テンプレートからモジュールテンプレート「グルーバルナビ」を呼びだすだけです。
<$mt:Include module="[BLK] グローバルナビ"$>
<mt:Include>に直接変数を指定して、テンプレートモジュールに変数を渡すことも可能です。
以下のようにすれば、内部の分岐処理に変数を渡すことができます。
もちろん複数指定することも可能です。
<$mt:Include module="[BLK] グローバルナビ" site_index="1" linkTitle="home"$>
トップページ以外では、「site_index="1"」を指定しなければ「home」ボタンは表示されません。
今度は、<mt:IncludeBlock> を使ってみます。
<mt:Include> でも、先程の例のように変数を渡せますが、
<mt:IncludeBlock>の場合は、変数の値のなかでMTタグを使えるし、改行も可能です。
<mt:IncludeBlock module="[BLK] グローバルナビ" var="linkUnit"> <li><a href="<$mt:siteURL$>">home</a></li> </mt:IncludeBlock>
<div class="globalHeader"> <ul> <$mt:Var name="linkUnit"$> <li><a href="/about.html">about</a></li> <li><a href="/access.html">access</a></li> <li><a href="/contact.html">contact</a></li> </ul> </div>
※varモディファイアは省略可能です。
その場合は、テンプレートモジュール内の「<$mt:Var name="contents"$>」に展開されます。
<mt:Include>・<mt:IncludeBlock>のmoduleモディファイアには変数を指定することもできます。
以下は、モジュールテンプレート名を分岐してみた例。
実際は、こんな作り方しないけど...。例ってことで。
<$mt:If name="site_index"> <$mt:SetVar name="moduleName" value="[BLK] グローバルナビ:TOP"$> <$mt:Else> <$mt:SetVar name="moduleName" value="[BLK] グローバルナビ:汎用"$> <$/mt:If> <mt:Include module="$moduleName">
ソースを一旦まとめるっていう意味では、<mt:SetVarTemplate> も似たような働きをします。
ソースは見やすく!きれいに!