6.52 Ajaxによるモジュール化 ★

P.637

●ajaxUtil.jsの作成

ajaxUtil.js

getFile = function(url, id) {
    url += "?" + (new Date()).getTime();
    new Ajax.Updater({success: id},
                     url, {
                         method: 'get',
                         onComplete: end,
                         onFailure: error
                     });
    return false;
};
end = function() {};
error = function() {};

●head要素にscript要素の追加

「ヘッダー」テンプレートモジュール（サンプルテンプレート）

...前略...
  <mt:if name="index_template">
    <mt:CCLicenseRDF />
  </mt:if>
<script type="text/javascript" src="<mt:blogURL />prototype.js"></script>
<script type="text/javascript" src="<mt:blogURL />ajaxUtil.js"></script>
</head>
...後略...

★「HTMLヘッダー」テンプレートモジュール（デフォルトテンプレート）

006～007を追加します。

    ...前略...
001:<link rel="stylesheet" href="<mt:BlogURL />litebox/css/lightbox.css" type="text/css" media="screen" />
002:<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
003:<link rel="start" href="<$mt:BlogURL$>" title="Home" />
004:<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
005:<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
006:<script type="text/javascript" src="<mt:BlogURL />prototype.js"></script>
007:<script type="text/javascript" src="<mt:BlogURL />ajaxUtil.js"></script>
008:<$mt:CCLicenseRDF$>

P.638

「最近のブログ記事」をAjaxモジュール化する

●インデックステンプレートの作成

テンプレート名：最近のブログ記事
テンプレートの内容：「最近のブログ記事」ウィジェットテンプレートの内容をそのまま設定
出力ファイル名：recentEntries.html
テンプレートの種類：カスタムインデックステンプレート
ファイルへのリンク：（任意）
再構築オプション：スタティック

「最近のブログ記事」インデックステンプレート（サンプルテンプレート）

<mt:entries lastn="10">
  <mt:entriesHeader>
<ul>
  </mt:entriesHeader>
  <li><a href="<mt:entryPermalink valid_html="1" />" title="<mt:entryTitle encode_html="1" />"><mt:entryTitle encode_html="1" /></a></li>
  <mt:entriesFooter>
<ul>
  </mt:entriesFooter>
</mt:entries>

「最近のブログ記事」インデックステンプレート（デフォルトテンプレート）

<mt:IfNonZero tag="BlogEntryCount">
  <mt:Entries lastn="10">
    <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
  <h3 class="widget-header">最近のブログ記事</h3>
  <div class="widget-content">
    <ul class="widget-list tree">
    </mt:EntriesHeader>
      <li class="widget-list-item tree-list<mt:entriesFooter> tree-list-end</mt:entriesFooter>"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
    <mt:EntriesFooter>
    </ul>
  </div>
</div>
    </mt:EntriesFooter>
  </mt:Entries>
</mt:IfNonZero>

P.639

●「最近のブログ記事」ウィジェットテンプレートの変更

「最近のブログ記事」ウィジェットテンプレート（サンプルテンプレート）

<mt:if tag="blogEntryCount">
<dt class="sidetitle">最近のブログ記事一覧</dt>
<dd id="entries" class="side"></dd>
<dd>
<script type="text/javascript">
//<![CDATA[
getFile('<mt:blogURL />recentEntries.html', 'entries');
//]]>
</script>
</dd>
</mt:if>

「最近のブログ記事」ウィジェットテンプレート（デフォルトテンプレート）

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('<mt:blogURL />recentEntries.html', 'entries');
//]]>
</script>

P.640

●dd要素（div要素）とid属性の設定

...前略...
<dd id="entries" class="side"></dd>
...後略...

<div id="entries"></div>
...後略...

「月別アーカイブ」ウィジェットテンプレート（サンプルテンプレート）

<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">月別アーカイブ一覧</dt>
<dd id="monthly" class="side"></dd>
<dd>
<script type="text/javascript">
//<![CDATA[
getFile('<mt:blogURL />monthly.html', 'monthly');
//]]>
</script>
</dd>
</mt:ifArchiveTypeEnabled>

「月別アーカイブ」インデックステンプレート（サンプルテンプレート）

<mt:archiveList archive_type="Monthly">
  <mt:archiveListHeader>
<ul>
  </mt:archiveListHeader>
  <li><a href="<mt:archiveLink />"><mt:archiveTitle /></a> [<mt:archiveCount />]</li>
  <mt:archiveListFooter>
</ul>
  </mt:archiveListFooter>
</mt:archiveList>