Movable Type 備忘録

WriteToFile プラグイン

Sep132008
Author: bzbell
Categories: Customize
Tags: 4.2, Ajax, Plugins, WriteToFile

Prev Page: RebuildIndexFilter プラグイン
Next Page: LastYearEntries プラグイン

こんにちわ^^

先日、The blog of H.Fujimoto さんとこで WriteToFile プラグインというものが公開されました。

テンプレートの再構築結果を部分的にファイルに出力するプラグイン

掻い摘んで言うと、MT タグの出力結果を任意のファイルに出力することが可能になります。
で、このプラグインを使用してページ分割をやってみました。

WriteToFile プラグインを使ったページ分割では、トップページ( index.php )は通常通り表示して、その他のページは一覧形式にしたりなど、ページ毎に変化を付けることができます。
WriteToFile プラグインを使った使用例を壱さんとこでご紹介してますので参考にしてください。

わたしのサイトでは Ajax を使ってページ分割やってみました。
トップページの下の方にある各ページへのリンクをクリックしてもらえれば、どんなかんじか分かると思います (●´∀｀●)

ということで、ここでは WriteToFile プラグインを使ってページ分割したページを Ajax で表示する方法をご紹介したいと思います。

メインページを Ajax でページ分割

デフォルトのメインページのテンプレートを WriteToFile プラグインを使ってページ分割( Ajax )したものを以下に記します。

メインページ

<mt:SetVar name="pagecnt" value="5">
<mt:SetVar name="entofs" value="0">
<$MTEntriesCount setvar="entcnt"$>
<mt:SetVarTemplate name="page_content">
<MTEntries offset="$entofs" lastn="$entcnt">
<$mt:Include module="<__trans phrase="Entry Summary">"$>
</MTEntries>
<div class="content-nav">
<ul>
<mt:For var="page_ctr" from="1" to="$pagecnt">
<mt:If name="page_ctr" eq="$pageno">
<li><span><$mt:GetVar name="page_ctr"$></span></li>
<mt:Else>
<li><a href="javascript:void(0);" onclick="javascript:ajaxpager.pager('<$MTBlogURL$>index_<$mt:GetVar name="page_ctr"$><$MTBlogFileExtension lower_case="1"$>', 'alpha-inner');"><$mt:GetVar name="page_ctr"$></a></li>
</mt:If>
</mt:For>
<li><a href="<$mt:Link template="archive_index"$>"><__trans phrase="Archives"></a></li>
</ul>
</div>
</mt:SetVarTemplate>
<mt:For var="pageno" from="1" to="$pagecnt">
<mt:SetVarBlock name="fname">index_<$mt:GetVar name="pageno"><$MTBlogFileExtension lower_case="1"$></mt:SetVarBlock>
<mt:If name="pageno" eq="1">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<$mt:Include module="<__trans phrase="HTML Head">"$>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
<title><$mt:BlogName encode_html="1"$></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js"></script>
<script type="text/javascript">
var ajaxpager = {
version: '1.00',
ajaxloader: ['<$MTBlogURL$>', 'ajax-loader.gif'].join(''),
boxid: 'alpha-inner',
url: '',
safari_escape: function(req) {
var text = req.responseText.replace(/\n/g,'');
if (navigator.appVersion.indexOf("KHTML") > -1) {
var esc = escape(text);
if (esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) {
text = decodeURIComponent(esc);
}
}
return text;
},
show_ajaxloader: function(enable) {
var elem = $(this.boxid);
if (enable) {
elem.innerHTML = '';
elem.style.height = '100px';
elem.style.background = 'transparent url('+this.ajaxloader+') no-repeat center center';
}
else {
elem.style.height = 'auto';
elem.style.background = 'none';
}
},
delay_request: function(effect) {
new Ajax.Request(ajaxpager.url, {
method: 'get',
onComplete: function(req) {
ajaxpager.show_ajaxloader(false);
$(ajaxpager.boxid).innerHTML = ajaxpager.safari_escape(req);
}
});
},
pager: function(url, boxid) {
this.boxid = boxid;
this.url = url;
this.show_ajaxloader(true);
new Effect.ScrollTo($(boxid), { afterFinishInternal: this.delay_request });
return false;
}
};
</script>
</head>
<body id="<$mt:BlogTemplateSetID$>" class="mt-main-index <$mt:Var name="page_layout"$>">
<div id="container">
<div id="container-inner">
<$mt:Include module="<__trans phrase="Banner Header">"$>
<div id="content">
<div id="content-inner">
<div id="alpha">
<div id="alpha-inner">
<$mt:GetVar name="page_content"$>
</div>
</div>
<$mt:Include module="<__trans phrase="Sidebar">"$>
</div>
</div>
<$mt:Include module="<__trans phrase="Banner Footer">"$>
</div>
</div>
</body>
</html>
</mt:If>
<MTWriteToFile file="$fname">
<$mt:GetVar name="page_content"$>
</MTWriteToFile>
<mt:SetVar name="entofs" value="$entcnt" op="+">
</mt:For>

青字の部分を追加してます。
カンタンに説明するとデフォルトテンプレート内の alpha-inner で囲まれた、23 行目～31 行目のブログ記事の概要表示のコードを上記 3 ～ 19 行目に移動してます。
なぜ移動したかというと、Ajax によるページ分割用にブログ記事概要だけをファイル出力するためです。

106 行目～108 行目で Ajax 用のページ分活ページをファイル出力してます。
110 行目で entofs にエントリのオフセットを entcnt( MT 管理画面の公開で設定したエントリ数 )で加算することで順次エントリを遡るようにしてます。

使い方

「メインページ」テンプレートを上記コードと差し替えます。
1 行目の pagecnt の値には分割したいページ数を指定します。
デフォルトでは 5 ページ分に分割されます。
38 行目には ajax loader イメージの URL を指定します。
デフォルトではメインページと同じ場所にある ajax-loader.gif が使用されます。
メインページを再構築します。

以上です。
後は各自のサイトデザインに合わせて CSS でページナビをスタイルするだけです。