Movable Type CMSプラットフォーム Movable Type
ドキュメントサイト

Blogブログ

変数を定義した MTInclude ファンクションタグの活用

テンプレートモジュールを読み込む MTInclude ファンクションタグに、変数を定義すると、定義した変数を読み込むテンプレートモジュール内で利用することができます。

例えば、Movable Type で管理している画像のサムネイルを表示するテンプレートモジュールを読み込む場合、読み込む場所によって画像サイズを変更するといったような事が可能になります。簡単な例を見てみましょう。

Picture テンプレートモジュール
<$MTAssetThumbnailLink width="$image_width"$>
Picture テンプレートモジュールを読み込む MTInclude ファンクションタグ

サムネイル画像の横幅を 100px として読み込みたい場合

<$MTInclude module="Picture" image_width="100"$>

サムネイルの画像の横幅を 180px として読み込みたい場合

<$MTInclude module="Picture" image_width="180"$>

MTInclude ファンクションタグに指定した image_width="value" という部分で定義された値が image_width という変数として、読み込むテンプレートモジュールで利用可能になります。読み込む Picture テンプレートモジュールで、MTAssetThumbnailLink の width モディファイアの値で image_width という変数を利用するようにしておくだけです。

ファイル名にルールがあって、一部だけ変えて読み込みたい時なども便利に使えそうです。同じテンプレート内でも、MTInclude ファンクションタグで定義する変数の値を変更するだけで、対応できます。

Icon テンプレートモジュール
<img alt="" src="/images/image-<mt:var name="filename">.jpg" width="100" height="100" />
Icon テンプレートモジュールを読み込む MTInclude ファンクションタグ

image-foo.jpg を表示するように読み込みたい場合

<$MTInclude module="Icon" fliename="foo"$>

image-bar.jpg を表示するように読み込みたい場合

<$MTInclude module="Icon" fliename="bar"$>

変数は Movable Type テンプレートタグのモディファイアの値として利用する場合は $variable と頭に $ を付けて利用します。それ以外の場合は MTVar, MTGetVar ファンクションタグを利用し $ を付けずに name モディファイアで指定します。

変数を利用する側では、default モディファイアを利用して、初期値の設定も可能ですので MTInclude ファンクションタグに変数が定義されていない場合にも対応できます。さきほどの Icon テンプレートモジュールに default モディファイアを追加して、初期値を設定してみます。

Icon テンプレートモジュール
<img alt="" src="/images/image-<mt:var name="filename" default="original">.jpg" width="100" height="100" />

これで、MTInclude ファンクションタグに変数 filename が定義されていない場合は、image-original.jpg を表示するように読み込みます。default モディファイアは、MTAssetThumbnailLink などでも利用可能です。

さらに変数は複数の定義も行えますので、様々な利用シーンが考えられます。例えば、先程の画像ファイル名を指定して表示するテンプレートモジュールでは、ファイル名だけでなく、サイズや代替テキストなどにも変数を利用することもできます。

また、テンプレートモジュールで MTIf などのコンディショナルタグを利用すれば、定義された変数を利用して、条件分岐を行うこともできます。

テンプレートごとに、コンテンツを読み変えるだけでは、表現しきれない部分などで重宝しそうです。今回は画像ファイルを表示するテンプレートモジュールを例にしましたが、様々な内容のテンプレートモジュール (簡単な CSS ファイルなど) の読み込み時に変数が利用できるとなると、テンプレートでの表現の幅が広がります。

  • このエントリーをはてなブックマークに追加