ブログ（MovableType）の個別ページに、Javascriptで最新記事を表示

カテゴリ毎の最新記事を、Javascriptで表示

ブログの個別記事ページには、検索エンジンなどから直接アクセスが来るので、できればそこに最新の記事へのリンクも表示したい。ただ、各記事は、静的なHTMLファイルとして保存されるので、javascript で動的に組み込むようにしてみます。

2006/8/12追記 : Prototype.jsを利用して、同じ機能を実現するスクリプトも書いたので、Prototype.jsなどを組み込めるかたは、そちらのやりかたがよいかもしれません。

• Prototype.js を使って、MovableTypeで最新記事を表示する

JSONテンプレートの作成

カテゴリー毎の最新の記事情報を、JSON形式で出力し、個別記事でカテゴリを指定して表示します。まずはJSONを出力する、新しいMovableTypeテンプレートを作成。

「テンプレート」> 「新規テンプレート作成」で、「recent_entries.js」という新しいテンプレートを作成。

以下のようなコードで、JSONを自動生成します。配列を作る時に、 <MTEntriesFooter>を使うとよいとコメントで教えていただきました。エントリーは<MTEntries lastn='1'> のような形で「,（カンマ）区切り」をうまく表現できます。ただ、 <MTCategories> ではそのようなタグが使えなそうなので、最後に「"id" : "end"」という無理矢理な要素をつけておきます。配列が中途半端に終わっていると、FireFoxはOKなのですが、Safari や IEではエラーで実行できないようですね。

var newEntries = {
<MTCategories>
  "<$MTCategoryID$>" : {
  	"id" : "<$MTCategoryID$>",
  	"label" : "<$MTCategoryLabel$>",
  	"links" : [
      <MTEntries lastn='5'>
      {"title" : "<$MTEntryTitle encode_js="1"$>"
        ,"url" : "<$MTEntryPermalink$>"
        , "excerpt" : "<$MTEntryExcerpt encode_js="1"$>"}
      <MTEntriesFooter> <MTElse>, </MTElse> </MTEntriesFooter>
      </MTEntries>
	 ]
  },
</MTCategories>
"id" : "end"
}
 

HTMLを表示するファンクション

次に最新記事のリストをHTMLで出力する javascriptのfunction を記述。これは、上記のJSONと同じ、「recent_entries.js」に記述。

function showNewEntries(cat_id)
{
    var myUl, myLi;
    var result = 0;

    myUl = document.getElementById("goodpic_new_entries");
	
    for (var j = 0; j < newEntries[cat_id].links.length; j++) 
	{
	myLi = document.createElement("div");
    	myLi.className = "section";
    	myLi.innerHTML = "<h3><a href=\""
             + newEntries[cat_id].links[j].url + "\">" 
	     + newEntries[cat_id].links[j].title + "</h3></a>"
	     + "<p>" +  newEntries[cat_id].links[j].excerpt
             + "</p>";		
    	myUl.appendChild(myLi);
    	result++;
	}	
    return result;
}   

上記の二つをテンプレートで保存して、再構築。ブログのURL/recent_entries.js にJavascriptのコードが正しく出力されているのを確認。

個別記事へのJavascript 組み込み

最後に、個別記事にJavascriptを組み込みます。「テンプレート」>「アーカイブ」>「Individual Archive」テンプレート内の、更新記事を表示したい場所に以下のようなHTMLを記入。

  
<div id="goodpic_new_entries"></div>
<script src="<MTBlogURL>recent_entries.js"
 type="text/javascript" language="javascript">
</script>
<script type="text/javascript" language="javascript">
<!--
var cat_id = <MTEntryCategories><$MTCategoryID$></MTEntryCategories>;
showNewEntries(cat_id);
//-->
</script>

2/3追記。複数のカテゴリを、一つの記事に指定している場合は、上記のコードだと動かないとの報告いただきました。以下のようなコードだと多分大丈夫かな？

<div id="goodpic_new_entries"></div>
<script src="<MTBlogURL>recent_entries.js"
 type="text/javascript" language="javascript">
</script>
<script type="text/javascript" language="javascript">
<!--
var cat_id = [<MTEntryCategories><$MTCategoryID$>,</MTEntryCategories>0];
showNewEntries(cat_id[0]);
//-->
</script>

Individual Archiveテンプレートを保存したら、一度、「すべてを再構築」します。そうすると、個別記事の上記のコードを組み込んだ場所に以下のようなHTML構造で、Javascriptで組み込まれます。

あとはCSSで、見栄えを調整。もちろん、HTMLを出力するJavascriptのファンクションを変更すれば、出力されるHTMLコードが変更できます。すべての記事ページを再構築しなくても、javascriptを変更するだけでOKです。このブログでも、すべての個別ページに、その記事のカテゴリ毎の最新記事を表示しています。script.aculo.usを使って、アニメーション処理などをつけるのもよし。クラスを指定するだけでアニメーションを適用する方法を、以前の記事で紹介しています。