2005.02.19
Movabletypeの軽量化・・・(Movabletype)
Blogもエントリー数が増えて、かつ個別アーカイブのページなどにもメインページと表示を合わせるためにサイドパネルを付けていると、Rebuild作業が長くなりイライラする。
このためにMTPagenateというツールを使ってアーカイブの分割を行ったり、最近のコメントの内容をphpファイルでモジュール化して外部に追い出すなどの記事がネット上で多く見られる。
私のところも既にphpが動く環境になっていたので、試みたが従来のhtmlファイルへのアクセスをRedirectしてphpファイルにアクセスを行わせるため.htaccessファイルを作ったり、アーカイブファイルの名前を変えたり手間が掛かる。
その割にはドラスティックな効果とは言えないと思われ、正規に行うべきか否か悩んでいたが、fenrirさんがJavaScriptを使ってサイドパネルの内容を共通化するという記事を見つけ、やってみることにした。
最初はfenrirさんの記事のとおりに最近のコメントを追い出したが、 <MTComments lastn=”10″ sort_order=”descend”>
で、lastnの数を増やすとエラーになり、さんざん悩み、ついにfenrirさんに質問までしたが、最後にエントリータイトルに”(ダブルクォート)が含まれているものが見つかり、文字を変更して綺麗に動作するようになった。
方法を記すと、
テンプレートの一覧の表示画面で、「新しいテンプレートを作る」をクリックし、開いた画面で「テンプレートの名前」に「共通サイドバー」といれ出力ファイル名をsidebar.jsとして、下記の内容を入れて保存する。
fenrirさんと違い、使い慣れたオーソドックスとするため以下のようなものとした。
function getRecentComment(){
var html = "<h2>最近のコメント</h2><ul>";
<MTEntries recently_commented_on="100">
html += "<li><a href='<$MTEntryPermalink$>'><$MTEntryTitle$>
</a><br>";
<MTComments lastn="10">
html += "<$MTCommentAuthor$>
[<$MTCommentDate format="%m/%d %X"$>]<br />";
</MTComments>
html += "</li>";
</MTEntries>
html += "</ul>";
return html;
}
そして、保存に続いてこのファイルを再構築すると、sidebar.jsが吐き出される。
その後、各ページ(メインページ、カテゴリー・アーカイブ、個別エントリーアーカイブ、日付アーカイブ)の<head>の直前に以下を挿入する。
<script language="javascript" type="text/javascript" src="<$MTBlogURL$>sidebar.js"></script>
さらに、最近のコメントを表示する部分を以下で置き換える。
<script language="javascript" type="text/javascript"> <!-- document.write(getRecentComment()); //--> </script>
そして、サイトの再構築して、最近のコメントが現れるのを確認して完了。
あまりに、うまくいったのでサイドパネルで「外部リンク」を除き全て追い出した。
「外部リンク」だけ残したのは、リンクの付け方を やっと覚えた初心者を混乱させないためである。
私の作った共通サイドバーの右側部分を示すと以下のとおりである。
function getCounter(){
var html = "<div class="counter"><center>";
html += "<img
src="/cgi-bin/Count.cgi?df=tejima.dat&srgb=00ff00&prgb=ceb684">";
html += "</center></div>";
return html;
}
function getCalendar(){
var html = "<div id="calendar">";
html += "<table><caption><$MTDate
format='%B %Y'$></caption>";
html += "<tr>";
html += "<th abbr='日曜日'>日</th>";
html += "<th abbr='月曜日'>月</th>";
html += "<th abbr='火曜日'>火</th>";
html += "<th abbr='水曜日'>水</th>";
html += "<th abbr='木曜日'>木</th>";
html += "<th abbr='金曜日'>金</th>";
html += "<th abbr='土曜日'>土</th>";
html += "</tr><tr>";
<MTCalendar>
<MTCalendarWeekHeader>
html += "<tr>";
</MTCalendarWeekHeader>
html += "<td>";
<MTCalendarIfEntries>
<MTEntries lastn="1">
html += "<a href='<$MTEntryPermalink$>'><$MTCalendarDay$>
</a>";
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
html += "<$MTCalendarDay$>";
</MTCalendarIfNoEntries>
<MTCalendarIfBlank>
html += " ";
</MTCalendarIfBlank>
</MTCalendar>
html += "</td></tr></table></div>";
return html;
}
function getTrackBack(){
var html = "<h2>最近のトラックバック</h2>";
html += "<ul>";
<MTPings lastn="10">
html += "<li><a href='<$MTPingURL$>'><$MTPingTitle$></a>";
html += "<br> from <$MTPingBlogName$></li>";
</MTPings>
html += "</ul>";
return html;
}
function getRecentComment(){
var html = "<h2>最近のコメント</h2><ul>";
<MTEntries recently_commented_on="100">
html += "<li><a href='<$MTEntryPermalink$>'><$MTEntryTitle$>
</a><br>";
<MTComments lastn="10">
html += "<$MTCommentAuthor$>[<$MTCommentDate
format="%m/%d %X"$>]<br />";
</MTComments>
html += "</li>";
</MTEntries>
html += "</ul>";
return html;
}
これで、表示部分は以下のように、すっきりしたものとなる。
<script language="javascript" type="text/javascript"> <!-- document.write(getCounter()); document.write(getCalendar()); document.write(getTrackBack()); document.write(getRecentComment()); //--> </script>
左側のサイドパネルの要素も追加して、ブログ全体の再構築を行ったら、実行時間が大幅に短縮され、感動的であった。
さいごに、下記に私のところの共通サイドバーの全体を載せておく：Download file
