グローバルナビでページによって強調表示

グローバルナビゲーションを少しカスタマイズ。該当するページでスタイルが変わるようにしてみました

例えばaboutのページですとこのような感じです

しくみは、aboutのページか判別して、該当したときはナビリンクに使われているli要素に特定のスタイルをつける、というものです。ここでは、ページが該当したら、thispageというクラスをli要素に追加してそうでないページにはつけないという判別でおこなっています。

判別のやりかたはphpつかったりとか、いろいろとあるんですが、MTIfを使った判別でやってみました。

例えば、メインインデックスのときの場合はこのようなソースです

<li<mt:if name="tempName" eq="index_main"> class="thispage"</mt:if>><a href="<$MTBlogURL$>" rel="nofollow">BlogTop</a></li>

mt.Vicunaのテンプレートでの説明になりますが、テンプレート判別するため、メインインデックスページには、以下のようにMTSetVarを使って定義されています。

<MTSetVar name="tempName" value="index_main">

これを利用してナビゲーションのテンプレートに書いたのが以下のようなものです

<li<mt:if name="tempName" eq="index_main"> class="thispage"</mt:if>><a href="<$MTBlogURL$>" rel="nofollow">BlogTop</a></li>

eq="index_main"とすることで、メインページのみ実行されるようにしました。同様にしてアーカイブインデックスへのリンクではlike="archive"のように書くと、アーカイブページのときにスタイルが変わるといった寸法です。

ここまでは、簡単にいったのですが、ウェブページのときの判別は少々手間がかかりました。各ページにユニークなタグを設定しておいて、ウェブページのタグを利用します。このような形になりました。

<li<mt:if name="tempName" eq="individual_webpage">
<MTPageIftagged tag="about"> class="thispage"</MTPageIftagged></mt:if>>
<a href="<$MTBlogURL$>about.html" rel="nofollow">about</a>
</li>

eq="individual_webpage"で、ウェブページのみの実行にして、MTPageIftaggedでタグ（この場合、about）がついたページのときにclass=""をつけます。

今回利用したテンプレートタグ

• MTIｆ
• MTPageIftagged