すべてのページで同じ「最近のブログ記事一覧」を表示するカスタマイズ

Movable Type で「最近のブログ記事一覧」をすべてのページで同じように表示するサブテンプレートを作ってみました。

「最近のブログ記事一覧」を表示しようとする場合、インデックステンプレートにおいてはまさにそのブログの最近のブログ記事一覧が表示されますが、アーカイブテンプレート、例えばカテゴリアーカイブにおいては、そのカテゴリに属する最近のブログ記事一覧が表示されてしまいます。

これをすべてのページでインデックステンプレートと同じものを表示させるには、サーバーサイドインクルード(SSI)を使うのが一般的です。しかし、MT 4.2 から使えるようになったテンプレートモジュールのキャッシュを利用すれば何とかなるかも?って思っていろいろやってみたのですが、それは(へたれ)テンプレートモジュール・キャッシュの使い方 (WolaWola)の記事にあるのと同じ考え方でして、結局ダメでした。

だったらなんとかテンプレートをカスタマイズしてやってみよう、と思ったわけです。また、キャッシュを使えば、回りくどいテンプレートになったとしても、それほど再構築時間に影響は出ないでしょうから少し気楽です。

さて、前置きが長くなりましたが、その「最近のブログ記事一覧」のサブテンプレートを解説してみます。

表示結果

最初に表示結果を見てみましょう。左が通常の「最近のブログ記事一覧」で、右が今回作った「最近のブログ記事一覧」です。

【メインインデックス(トップページ)での表示】

recententry01.jpg

【「 WordPress 」というカテゴリでの表示】

recententry02.jpg

前提

今回のサブテンプレートでは以下の内容を前提として考えました。

  • サーバーサイドインクルードは使いたくない、だってなんとなく拡張子は .html のままがいいし。
  • すべてのファイルを再構築したって構わないさ、MT 4.2 にしたら早くなったからね。
  • 「最近のブログ記事一覧」は SEO 的に重要なキーワードが多いから完全にスタティックがいいさ。

完成したソース

まず、最初に完成したソースです。

<mt:SetVar name="lastNumber" value="7">
<mt:TopLevelCategories>
<mt:SetVarBlock name="listCatLabel"><$mt:CategoryLabel$></mt:SetVarBlock>
<mt:Entries category="$listCatLabel" include_subcategories="1" lastn="$lastNumber">
<mt:SetVarBlock name="recentEntryDate"><$mt:EntryDate format="%Y%m%d%H%M"$></mt:SetVarBlock>
<mt:SetVarBlock name="resentEntry" key="$recentEntryDate"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></mt:SetVarBlock>
</mt:Entries>
</mt:TopLevelCategories>
<mt:Loop name="resentEntry" sort_by="key reverse">
<$mt:SetVar name="resentEntryLimit" index="$__counter__" value="$__value__"$>
</mt:Loop>
<dt>Recent Entries</dt>
<dd>
<ul class="recentEntries">
<mt:For var="i" from="1" to="$lastNumber">
<li><$mt:GetVar name="resentEntryLimit" index="$i"$></li>
</mt:For>
</ul>
</dd>

解説

では順番に解説していきます。

各カテゴリに属する最近のブログ記事のリストアップ

<mt:SetVar name="lastNumber" value="7">
<mt:TopLevelCategories>
<mt:SetVarBlock name="listCatLabel"><$mt:CategoryLabel$></mt:SetVarBlock>
<mt:Entries category="$listCatLabel" include_subcategories="1" lastn="$lastNumber">
<mt:SetVarBlock name="recentEntryDate"><$mt:EntryDate format="%Y%m%d%H%M"$></mt:SetVarBlock>
<mt:SetVarBlock name="resentEntry" key="$recentEntryDate"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></mt:SetVarBlock>
</mt:Entries>
</mt:TopLevelCategories>

1 行目の SetVar タグで、変数 lastNumber に 7 を代入しています。この数字を変更することにより、出力件数を変えることができます。

TopLevelCategories タグで囲むことによって、どのアーカイブにいても最上位のカテゴリからリストアップするようにしています。

3 行目の SetVarBlock タグで、変数 listCatLabel にカテゴリ名を代入します。

4 行目の Entries タグで、2 行目の変数 listCatLabel に代入されたカテゴリに属するエントリーをサブカテゴリに属するものも含めて( include_subcategories="1" )、最新 n 件( 1 行目に定義した変数 lastNumber の値)をリストアップします。

ここで最終的に出力したい件数をリストアップしておかないと、同じカテゴリへの投稿が続いた場合に対応できなくなります。

5 行目の SetVarBlock タグで、リストアップされているエントリーの投稿日時を 2008(年)09(月)01(日)05(時)58(分) の表示形式( format="%Y%m%d%H%M" )で変数 recentEntryDate に代入します。

6 行目の SetVarBlock タグで、リストアップされているエントリーについて、5 行目で取得した投稿日時を「キー」( key="$recentEntryDate" )、ブログ記事へのリンクを「値」として連想配列 resentEntry に代入します。

この動作を、すべてのトップレベルカテゴリについて繰り返します。

ハッシュ変数を配列変数に変換

<mt:Loop name="resentEntry" sort_by="key reverse">
<$mt:SetVar name="resentEntryLimit" index="$__counter__" value="$__value__"$>
</mt:Loop>

次に、「キー」で変数の値を取得できる連想配列(ハッシュ) resentEntry を、「インデックス(添字)」で変数の値を取得できる配列 resentEntryLimit に代入しなおします。

ここではインデックスに、Loop の繰り返し回数( __counter__ )を代入します。

最近のブログ記事一覧を出力

<dt>Recent Entries</dt>
<dd>
<ul class="recentEntries">
<mt:For var="i" from="1" to="$lastNumber">
<li><$mt:GetVar name="resentEntryLimit" index="$i"$></li>
</mt:For>
</ul>
</dd>

最後にここまでにリストアップしたエントリーを出力します。

4 ~ 6 行目の For タグで、配列 resentEntryLimit のインデックス 1 ~ 7 (変数 lastNumber の値)の値を出力します。

テンプレートモジュールのキャッシュ

さて、この「最近のブログ記事一覧」を、ブログ記事を投稿するたびにすべてのページに反映させるには、一度すべてのページを再構築しなければなりません。

しかし、このサブテンプレートをすべてのページで再構築してしまうと、再構築時間がこれまでにプラスしてグッと伸びてしまうでしょう。

そこで、MT 4.2 から使えるようになったモジュールのキャッシュを使います。

ブログ全体のモジュールのキャッシュの設定

まず、ブログでモジュールのキャッシュ機能が使えるように設定します。

「設定」>「公開」>「モジュールオプション」で、「テンプレートモジュールをキャッシュする」にチェックを入れればOKです。

module_cash_blogconfig.jpg

テンプレートモジュールのキャッシュの設定

次に、テンプレートモジュールの編集画面の「テンプレートの設定」で「作成または更新後に無効にする:」と「ブログ記事」をチェックします。これで、ブログ記事を新規作成または更新したときにモジュールのキャッシュが無効になります。

module_cash_config.jpg

再構築の順序

ブログ記事を保存(再構築)した後、すべてのページを再構築しましょう。

まとめ

最初にこのエントリーを投稿した時は、出力件数を制御するのに正規表現を使っていましたが、配列を使ってスマートにできたので文章を修正しました。

ハッシュ変数を配列変数に代入しなおすところがポイントだと思います。

以前のエントリーの正規表現を使っている部分は「display: none;」で非表示にしてあるので、正規表現に興味のある方はこちら(ソース解説)をご覧ください。大した記事ではありませんが。

以上です。

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