親ウェブサイトのモジュールを使ってブログ一覧のグローバルナビゲーションを作る

「親ウェブサイトのモジュールを利用して、ブログ一覧のグローバルナビゲーションを作るにはどうしたら良いか」という質問をいただきました。実現する方法は色々ありますが、その一例を書いてみます。

目指すかたち

今回のナビゲーションの完成イメージは次の通りで、ウェブサイトのメインページ(main_index)とその配下にあるブログの一覧(それぞれのメインページ)を表示するものです。

wbgnavi1.png

  • ホーム(親ウェブサイトのメインページ)
  • ブログ1(子ブログのメインページ)
  • ブログ2(子ブログのメインページ)
  • ブログ3(子ブログのメインページ)

また、それぞれのページ(ブログ)にいるときは「class="on"」を付けるようにします。

wbgnavi2.png

wbgnavi3.png

ナビゲーションモジュール

ウェブサイトに「ナビゲーション」というモジュールテンプレートを作ります。サンプルでは、プロフェッショナルウェブサイトを利用しているので、元々ある「ナビゲーション」をカスタマイズしています。

<ul>
<li class="first<mt:IfWebsite><mt:If name="main_index"> on</mt:If></mt:IfWebsite>"><a href="<mt:BlogParentWebsite><$mt:Link template="メインページ"$></mt:BlogParentWebsite>">ホーム</a></li>
<mt:BlogParentWebsite>
 <mt:Blogs include_blogs="7,8,9">
 <$mt:BlogID setvar="navi_blog_id"$>
 <li<mt:If name="navi_blog_id" eq="$this_blog_id"> class="on"</mt:If>><a
 href="<$mt:BlogURL$>"><$mt:BlogName$></a></li>
 </mt:Blogs>
</mt:BlogParentWebsite>
</ul>

ウェブサイトの下には必ずブログがあるというのを前提としているので、余計な条件分岐は入れていません。

解説

2行目
<li class="first<mt:IfWebsite><mt:If name="main_index"> on</mt:If></mt:IfWebsite>"><a href="<mt:BlogParentWebsite><$mt:Link template="メインページ"$></mt:BlogParentWebsite>">ホーム</a></li>

ここで、もしウェブサイトで、main_index であれば class に on を付けます。

  • もしウェブサイトであれば : mt:IfWebsite
  • もし main_index であれば : mt:If name="main_index"

mt:Link を mt:BlogParentWebsite で囲っているのは、mt:link をウェブサイトのコンテキストで評価するためです。このようにしないと、この mt:Link は各ブログのメインページへのリンクを書き出してしまいます。

また、この 2 行目全体を mt:BlogParentWebsite で囲ってしまうと、<mt:If name="main_index"> がいつも通ってしまい、ブログのページでも「ホーム」の class に on が付いた状態になってしまいます。

3行目以降
<mt:BlogParentWebsite>
 <mt:Blogs include_blogs="7,8,9">
 <$mt:BlogID setvar="navi_blog_id"$>
 <li<mt:If name="navi_blog_id" eq="$this_blog_id"> class="on"</mt:If>><a href="<$mt:BlogURL$>"><$mt:BlogName$></a></li>
 </mt:Blogs>
</mt:BlogParentWebsite>

ここは mt:BlogParentWebsite で囲って親ウェブサイトのコンテキストで評価し、mt:Blogs でブログ一覧を出力します。include_blogs で出力するブログIDを指定しています。

<$mt:BlogID setvar="navi_blog_id"$> でループ中のブログIDを変数 navi_blog_id にセットします。

<mt:If name="navi_blog_id" eq="$this_blog_id"> class="on"</mt:If>

ここで navi_blog_id と this_blog_id が同じ場合は class="on" を付けます。この this_blog_id は、このモジュールをインクルートする側でセットして、このモジュールに渡すようにします。

ウェブサイトでのインクルード

ウェブサイトでこのモジュールをインクルードする部分の書き方は次のようになります。

<$mt:Include module="ナビゲーション" variable_this_blog_id="0"$>

この variable_this_blog_id="0" はなくても問題ありませんが、僕はなんとなく明確になるのでこの方がいいかな。

この部分をもっと テンプレートっぽく書くなら次のような感じです。

<mt:SetVarBlock name="this_blog_id"><$mt:WebsiteID $></mt:SetVarBlock>
<mt:Include module="ナビゲーション" blog_id="$website_id" variable_this_blog_id="$this_blog_id">

ブログでのインクルード

ブログでこのモジュールをインクルードする部分の書き方は次のようになります。

<mt:SetVarBlock name="website_id"><mt:BlogParentWebsite><mt:WebsiteID></mt:BlogParentWebsite></mt:SetVarBlock>
<mt:SetVarBlock name="this_blog_id"><$mt:BlogID$></mt:SetVarBlock>
<mt:Include module="ナビゲーション" blog_id="$website_id" variable_this_blog_id="$this_blog_id">

1行目で、mt:BlogParentWebsite で親ウェブサイトのコンテキストで mt:WebsiteID を取得し、変数 website_id にセットします。

2行目で、そのブログの mt:BlogID を取得し、変数 this_blog_id にセットします。

3行目の mt:Include では、blog_id="$website_id" でウェブサイトのモジュールをインクルードすることを指定し、variable_this_blog_id="$this_blog_id" でモジュールに変数 this_blog_id の値を渡します。これで、モジュール側でループ中の navi_blog_id と this_blog_id を比較するという仕組みです。

以上です。