アーカイブ一覧をAjaxでツリー展開するカスタマイズ

今回のアップグレード/リニューアル作業で、Archive Indexページにちょっとしたカスタマイズをしてみました。 見ていただければわかると思うのですが、月別アーカイブ一覧のリストの項目をクリックする事で、その月のエントリー一覧を展開する事が出来るようになっています。 予告通り、カスタマイズの詳細を公開しておきます。基本的な考え方としては、MT側であらかじめ、ツリー展開する中身の部分だけを出力するためのアーカイブを作成し、静的なHTMLファイル群として出力しておき、リストの項目のクリック時に出力されたファイルを動的にロードして表示する、という仕組みです。 以下のような手順で作業を行いました。

ボックスの内側を表示する軽量なテンプレートを作る

簡素なブログ記事一覧をHTMLとして表示するようなテンプレートを、ブログ記事リストのアーカイブテンプレートとして作成します。この部分が、ツリー展開時に中身として表示されます。

<mt:entries>
    <mt:if __first__><ul></mt:if>
        <li><a href="<mt:entryPermalink>"><mt:entryTitle></a><p><mt:entryBody remove_html="1" trim_to="40">...</p></li>
    <mt:if __last__></ul></mt:if>
</mt:entries>

これだけを、テンプレートの内容として保存します。

アーカイブマッピングを設定する

作成したアーカイブテンプレートに、以下のようにマッピングを作成します。「skelton」の部分は何でも構いません。

%y/%m/skelton.html

これで、ツリー表示の内側部分を、月ごとに独立したHTMLファイルとして出力できます。マッピングの保存後、再構築しておきましょう。

アーカイブページでAjaxでの読み込みを行う

まず、jQueryをロードするためのコードを、Archive Indexテンプレートのhead部分に追加します。

<script src="<mt:StaticWebPath>jquery/jquery.js"></script>

今回は手抜きをしてMT5に同梱されているjQueryをロードしましたが、テーマに同梱する場合等を考えて、jQueryライブラリはブログディレクトリにアップロードし、それを読み込むようにした方がベターだと思います。 次に、リストの項目表示部分に「load-skelton」というクラスの指定を追加します。

<li class="load-skelton" url="<$mt:ArchiveLink$>skelton.html"><$mt:ArchiveTitle$></li>

そして、load-skeltonクラスの要素をclickした時に、先ほど作成した展開用テンプレートを読み込む動作を指定するためのjQueryのイベントを設定します。今回は、以下のようなコードを</body>タグの直前に追加しました。

<script type="text/javascript">
$('.load-skelton').click(function(){
    var toggle = $(this).attr('opened');
    if ( toggle > 0 ) {
        $(this).find('.preview-box').remove();
        $(this).removeAttr('opened');
    }
    else {
        var url = $(this).attr('url');
        $(this).append($('<div>').addClass('preview-box').load(url));
        $(this).attr('opened', 1);
    }
});
</script>

まとめ

カスタマイズは以上です。 肝は、MTのアーカイブを利用して事前に短い静的HTMLファイルを出力しておく事によって、ツリーの展開を動的に、かつ軽快に動作させることが簡単に実現できるという点だと思います。いやあ、MTって本当に便利ですね。enjoy!