スポンサードリンク

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 -->

 次にインデックステンプレートやアーカイブテンプレートに以下のソースと追加して、保存すればOK!

<$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 を利用するための準備作業については割愛させていただきました。

参照リンク
 ・javascript で XML をパースしよう 「jkl-parsexml.js」

スポンサードリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿
トラックバック

このページのトラックバックURL:
http://www.typepad.com/services/trackback/6a01310f1f31c0970c0120a8da2883970b

このページへのトラックバック一覧 TypePad の「上級者テンプレート」に[最近の記事]を表示させよう:


プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER


  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク