ajaxでページ分割
ページ分割の方法としては、藤本壱氏のリアルタイム再構築プラグインとDivPageプラグインがあります。
詳しくは、「AjaxとPHPによるMovableType高速&最強システム構築法(技術評論社:刊、藤本壱:著)」をご覧ください。
なお藤本氏のサイトでも基本的な解説ページがあります。
- 【2009-10-29 追記】
- リアルタイム再構築を利用してページ分割に変更しました。
なお、テンプレートは
メインテンプレートが
<MTSetVar name="body_class" value="mt-main-index">
<MTSetVar name="main_template" value="1">
<MTSetVar name="main_index" value="1">
<MTSetVar name="sidebar" value="1">
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$></MTSetVarBlock>
<$MTInclude module="ヘッダー"$>
<h2 id="top"><$MTBlogName encode_html="1"$></h2>
<div id="entries_list">
<$MTInclude module="エントリー一覧(ブログメインページ用)"$>
</div>
<script type="text/javascript">
<!--
function load_page(page)
{
$("loading").style.display = 'inline';
$("loading").innerHTML = page + 'ページを読み込み中...';
if (page == 1) {
location.reload();
}
else {
new Ajax.Request('<$MTRealtimeRebuildCGIPath$>',
{ method : 'get',
parameters : '<$MTRealtimeRebuildQueryParam tmpl_name="エントリー一覧(ブログメインページ用)" ajax="1"$>&page=' + page,
onSuccess : entries_list_success,
onFailure : entries_list_failure });
}
return false;
}
function entries_list_success(obj)
{
$("entries_list").innerHTML = obj.responseText;
scrollTo(0, 0);
}
function entries_list_failure(obj)
{
$("entries_list").innerHTML = '読み込みに失敗しました';
scrollTo(0, 0);
}
-->
</script>
<noscript>
<div class="divpage-nav">
<p>javascriptを無効にしている場合、ページの移動が出来ません</p>
</div>
</noscript>
<$MTInclude module="フッター"$>
で、読み込むモジュールテンプレート"エントリー一覧(ブログメインページ用)"は
<$MTDivPagesInit per_page="5"$>
<MTEntriesDivPages lastn="5">
<$MTInclude module="ブログ記事の詳細"$>
<p class="to_top" title="このページの先頭に戻ります"><a href="#my_body">ページ先頭に戻る</a></p>
</MTEntriesDivPages>
<MTDivPagesIfMulti>
<div class="divpage-nav">
<form id="page_sel" action="get">
<p><MTDivPagesIfPrevPage><a href="./" title="トップページに移動します">トップページ</a>|<a href="#my_body" onclick="return load_page(<$MTDivPagesPrevPageNumber$>);" title="前の記事に移動します">前</a>|</MTDivPagesIfPrevPage>
<$MTDivPagesCount$>ページ中 <select name="page_num" onchange="load_page(document.forms['page_sel'].page_num.value);">
<MTDivPagesLoop all="1">
<option value="<$MTDivPagesNumber$>"<MTDivPagesIfCurPage> selected="selected"</MTDivPagesIfCurPage>><$MTDivPagesNumber$></option>
</MTDivPagesLoop>
</select> を表示
<MTDivPagesIfNextPage>|<a href="#my_body" onclick="return load_page(<$MTDivPagesNextPageNumber$>);" title="次の記事に移動します">次</a></MTDivPagesIfNextPage>
<span id="loading"> </span></p>
</form>
</div>
</MTDivPagesIfMulti>
としました。