MTでカテゴリーナビの所属しているカテゴリのみ条件分岐する

Movable Type(以下MT）でブログなどのウェブサイトを制作していると、ユーザビリティを上げるため、ナビゲーションの現在いるページの部分をハイライトさせて表示させるデザインにすることが多くあると思います。

しかし、MTを使用してカテゴリー一覧を表示させると、その中の一部に対して、特別なidを付けるのは普通のMTタグだけでは、難しかったのですが、最近、やっと方法がわかったので、メモしておきます。

一階層目までのカテゴリーリストを表示する場合

まず、現在の開いているページのカテゴリーを取得するのですが、ここでMTSetVarBlockタグを使い、変数として、用意しておきます。

このサイトの場合は、変数を用意する場合、すべて一ヶ所にまとめていた方が分かりやすいので、ヘッダーテンプレートのDTDより前にまとめて記述します。

以下がソースです。

<mt:IfArchiveType archive_type="Individual">
<MTSetVarBlock name="category_label"><$MTCategoryLabel$></MTSetVarBlock>
</mt:IfArchiveType>
<mt:IfArchiveType archive_type="Category">
<MTSetVarBlock name="category_label"><$MTCategoryLabel$></MTSetVarBlock>
</mt:IfArchiveType>

ここでは、mt:IfArchiveType を使用して、個別ページと、カテゴリーアーカイブページで変数を利用するように条件分岐しています。
ここで、分岐しておかないと、すべてのテンプレートに挿入される場合、カテゴリーが存在しないトップページなどで利用できないので、再構築の際にエラーがでます。

個別ページとカテゴリーページのテンプレートに挿入すれば、分岐しなくても問題ないような気もしますが、未確認ですので、どなたか確認された方は報告頂ければありがたいです。

次に、本題のカテゴリーナビの部分ですが、MTTopLevelCategoriesかMTSubCategoriesを使用して一覧を表示していると思うのですが、その中で、もう一度、現在表示しているページのカテゴリーを変数として定義し、カテゴリー一覧を表示している中で現在表示しているカテゴリーと一致するものだけ分岐します。

以下がulで一覧を括った場合のソースです。

<ul>
<MTTopLevelCategories>
<MTSetVarBlock name="category_label2"><$MTCategoryLabel$></MTSetVarBlock>
<MTIf name="category_label2" eq="$category_label">
<li id="current"><a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><$MTCategoryLabel$></a></li>
<MTElse>
<li><a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><$MTCategoryLabel$></a></li>
</MTElse>
</MTIf>
</MTTopLevelCategories>
</ul>

上記では、トップレベルのカテゴリーのみを分岐して、表示しているカテゴリーのliタグにid=”current”を付けている例です。

二階層目までのカテゴリーリストを表示する場合

最近、仕事で、二階層目までのサブカテゴリーをハイライトし、所属している親カテゴリーにも別のidを付けてハイライトする必要があったので、以下にソースを晒しておきます。

まずは、変数宣言部分のソース

<mt:IfArchiveType archive_type="Individual">
<MTSetVarBlock name="category_label"><$MTCategoryLabel$></MTSetVarBlock>
<MTSetVarBlock name="top_category_label2"><MTTopLevelParent><$MTCategoryLabel$></MTTopLevelParent></MTSetVarBlock>
</mt:IfArchiveType>
<mt:IfArchiveType archive_type="Category">
<MTSetVarBlock name="category_label"><$MTCategoryLabel$></MTSetVarBlock>
</mt:IfArchiveType>

先ほどのトップレベルカテゴリーのみの場合と違うのは、現在表示しているカテゴリーの親カテゴリーを変数として定義します。以下がソースです。

<MTSetVarBlock name="top_category_label2"><MTTopLevelParent><$MTCategoryLabel$>

上記の部分で、親カテゴリーを定義しておきます。
これは、二階層目まで限定です。三階層目までいくと、ひとつ上のカテゴリではなく、一番上のカテゴリーを取得するので、分岐ができません。

次にカテゴリー一覧部分のソースです。

<MTTopLevelCategories>
<MTSetVarBlock name="top_category_label2"><MTTopLevelParent><$MTCategoryLabel$></MTTopLevelParent></MTSetVarBlock>
<MTSubCatIsFirst><ul<MTHasNoParentCategory> id="localNavi"</MTHasNoParentCategory>></MTSubCatIsFirst>
<MTIf name="top_category_label2" eq="$top_category_label">
<li id="current"><a href="<$MTCategoryArchiveLink$>"><MTIfCategory><$MTCategoryLabel$></MTIfCategory></a>
<MTSubCategories>
<MTSetVarBlock name="category_label2"><$MTCategoryLabel$></MTSetVarBlock>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIf name="category_label2" eq="$category_label">
<li id="sub_current"><a href="<$MTCategoryArchiveLink$>"><MTIfCategory><$MTCategoryLabel$></MTIfCategory></a></li>
<MTElse>
<li><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a><MTSubCatsRecurse></li>
</MTIf>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</li>
<MTElse>
<li><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a><MTSubCatsRecurse></li>
</MTElse>
</MTIf>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>

上記のソースで構築すると以下のようなhtmlが吐き出されます。

<ul id="localNavi">
<li><a href="#">親カテゴリー1</a>
<ul>
<li><a href="#">サブカテゴリー1</a></li>
<li><a href="#">サブカテゴリー2</a></li>
<li><a href="#">サブカテゴリー3</a></li>
</ul>
</li>
<li id="current"><a href="#">所属している親カテゴリー2</a>
<ul>
<li><a href="#">サブカテゴリー1</a></li>
<li id="sub_current"><a href="#">所属しているサブカテゴリー2</a></li>
<li><a href="#">サブカテゴリー3</a></li>
</ul>
</li>
<li><a href="#">親カテゴリー3</a>
<ul>
<li><a href="#">サブカテゴリー1</a></li>
<li><a href="#">サブカテゴリー2</a></li>
<li><a href="#">サブカテゴリー3</a></li>
</ul>
</li>
</ul>

これで、所属しているカテゴリーのみ別のスタイルを効かせることができるので、あとはCSSでハイライトさせる用のスタイルを書けばOKです。