Movable Typeでパンくずをカテゴリ階層で実装する
このブログもだいぶ技術的な記事が多くなり、大きくカテゴリで分けるようなデザインにしたのですが、そうなると「パンくず」がほしくなってきました。もはやブログっぽくないですね。
まず、ブログ記事については以下のようなコードを記述し、リストをレイアウトしてあげれば「パンくず」を表現できます。
<ul> <li><a href="<$MTBlogURL$>">HOME</a></li> <MTEntryCategories> <MTParentCategory> <li class="arrow"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li> </MTParentCategory> <li class="arrow"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li> </MTEntryCategories> <li class="arrow"><$MTEntryTitle$></li> </ul>
表示は「ホーム > カテゴリ > サブカテゴリ > 記事タイトル」となります。サブカテゴリが存在しない場合、つまりそれ自身が親カテゴリに属している場合はMTParentCategoryが無視されるので「ホーム > カテゴリ > 記事タイトル」となります。
そのカテゴリのリンク先にあたる、カテゴリ別ブログ記事リストについては以下のように書きます。
<ul> <li><a href="<$MTBlogURL$>">HOME</a></li> <MTParentCategory> <li class="arrow"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li> </MTParentCategory> <li class="arrow"><$mt:ArchiveTitle$></li> </ul>
表示は「ホーム > カテゴリ > サブカテゴリ」または「ホーム > カテゴリ」となります。
これを利用する前提としては、記事が一つのカテゴリ、もしくは、サブカテゴリに属していることが条件になります。2つ以上に属していると恐らく崩れるでしょう。あと、サブサブカテゴリを設定しても崩れるかも。。。
実際に、上記コードを利用して、このブログサイトのパンくずを実現しています。
ちなみに「パンくず」とは、森の中、来た道を辿って戻れるように、パンをちぎって置いて進んだことから来ているそうです。ほんとうかな。。。
コメントする