サイドバーの最新記事を「Ajax によるモジュール化」に変更
バージョンアップを機会に、サイドバーの最新記事の表示を、小粋空間に掲載されているAjax によるモジュール化を利用する方法に変更しました。
これはAjaxを使ってあらかじめ記事の更新のたびに再構築されたテンプレートを読み込んでいるものです。
準備
必要なファイル
Prototype JavaScript Frameworkから、prototype.jsをダウンロードし、scriptフォルダへアップロード
次のコードをajaxUtil.jsとして保存してscriptフォルダへアップロード
function getFile(url, id) {
url = url + "?" + Math.random();
new Ajax.Updater({success: id},
url, {
method: 'get',
onComplete: end,
onFailure: error
});
return false;
}
テンプレートの作成
サイドバーに表示させるインデックステンプレートを、最近のブログ記事(recent_entries.html)として作成。
表示させたいテンプレートの箇所に次のコードを挿入
<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('<$mt:Link template="最近のブログ記事"$>', 'entries');
//]]>
</script>
小粋空間では、getFile('<MTBlogURL>テンプレートのファイル名', 'entries');
で、テンプレートを指定していますが、私の場合は、getFile('<$mt:Link template="テンプレート名"$>', 'entries');
でテンプレートを取得しています。
スクリプトの呼び出し
HTMLヘッダーテンプレートのHEAD要素内に次のコードを記述。なお、私の場合はマルチブログになっているので、MTBlogHostタグを使っています。
<script type="text/javascript" src="http://<$mt:BlogHost$>/script/prototype.js"></script>
<script type="text/javascript" src="http://<$mt:BlogHost$>/script/ajaxUtil.js"></script>
以上で再構築すれば完成です。
詳しくは、「Movable Type WEBデザインの新しいルール」(翔永社:刊、荒木 勇次郎・松永 英明:共著)をご覧ください。
コメント