TypePad の「上級者テンプレート」に[最近の記事]を表示させよう
TypePadの「上級者テンプレート」って、デザインを好きにカスタマイズできるのはいいんですが、デフォルトでは「最近の記事」のリストが表示されないんですよね。
でもそれはちょっと寂しいので、なんとかできないかと頑張ってみました。最初にトライしたのは、TypePadの機能で実現する方法です。
新規に「recent-posts」ってテンプレートモジュールを作って、以下のソースを張り付けて保存します。
<!-- recent comments module -->
<div class="module-recent-comments module">
<h2 class="module-header"><$MTTrans phrase="最近の記事"$></h2>
<div class="module-content">
<ul class="module-list">
<MTEntries lastn="10" sort_order="descend">
<li class="module-list-item"><MTEntry><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></MTEntry></li>
</MTEntries>
</ul>
</div><!-- .module-content -->
</div><!-- .module-recent-comments .module -->
次にインデックステンプレートやアーカイブテンプレートに以下のソースと追加して、保存すればＯＫ！
<$MTInclude module="recent-posts"$>
ところが、トップページや個別エントリーのページではうまく表示されるものの、月間アーカイブやカテゴリーアーカイブのページでは期待通りの内容が表示されません。
月間アーカイブではその月の中での新しいエントリーが、カテゴリーアーカイブではそのカテゴリー内での新しいエントリーが表示されてしまいます。これは困った。
そこで「どこかに最新のエントリーのリストは無いかいなぁ？」と考えて思いついたのが、RSSを利用する方法です。RSSのパースには、jkl-parsexml.js というjavascriptライブラリを使います。
「最近の記事」という名前でタイプリスト（メモ）を作成し、下記のソースを貼りつけて保存します。
<script type="text/javascript" src="/js/jkl-parsexml.js"></script>
<script type="text/javascript"><!--
var url = "/index.rdf";
var XmlParser = new JKL.ParseXML( url );
var obj = XmlParser.parse();
var list = "";
for(var i=0; i<10; i++){
list += '・<a href="'+obj['rdf:RDF'].item[i].link+'">'+obj['rdf:RDF'].item[i].title+'</a><br />';
}
document.write(list);
// --></script>
これをテンプレートモジュールの時と同様に、各ページのテンプレートに以下のソースを追加して読み込んでやればOKです。
<$MTListInclude name="最近の記事"$>
これでどのページでも最新の記事のリストが表示されるようになりました。
ですが、RSSを読み込んで処理している間、画面の表示（描画）が止まってしまうのはちょっといただけません。ウチみたいに左のサイドバーにセットしてると、その分本文の表示が遅れてしまいます。
そこで、非同期に動作するように変えてみました。ソースは以下のとおりです。
<div id="resent-entry"></div>
<script type="text/javascript" src="/js/jkl-parsexml.js"></script>
<script type="text/javascript"><!--
var url = "/index.rdf";
var XmlParser = new JKL.ParseXML( url );
var writelist = function(obj){
var list = "";
for(var i=0; i<10; i++){
list += '・<a href="'+obj['rdf:RDF'].item[i].link+'">'+obj['rdf:RDF'].item[i].title+'</a><br />';
}
document.getElementById('resent-entry').innerHTML = list;
}
XmlParser.async(writelist);
XmlParser.parse();
// --></script>
あとから にゅるん とリストが追加されるのが気になりますが、全体としての表示速度は早くなったので、これで良しとしましょう。
注意：
jkl-parsexml.js のパスとRSSファイルのパスは、ご自身の環境に合わせて変えてください。また、jkl-parsexml.js を利用するための準備作業については割愛させていただきました。
