Ogawa::Memoranda

これを安直に解決するにはdocument.write()のシーケンスからなるJavaScriptを使えばよい。問題はそのJavaScriptファイルをどのように生成するかということだが、mt-listプラグインを使えば実に簡単に実現できる。

tima thinking outloud. > Announcing mt-list.

以下に手順を示す。

• mt-list.plをMovableTypeのpluginsディレクトリに置く。
• MovableTypeのTemplate編集ページから、Create new index templateを選ぶ。
• Template nameは適当に入力し、Output fileはXX.js(例えばsidebar.js)、Rebuild this template automatically when rebuilding index templatesのチェックボックスは忘れずにチェックしておく。
• Template bodyは以下のように記述する。

  <MTList name="sidebar">
    <h2>Categories</h2>
    <ul>
    <MTArchiveList archive_type="Category">
    <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
    </MTArchiveList>
    </ul>
    
    <h2>Archives</h2>
    <ul>
    <MTArchiveList archive_type="Monthly" lastn="10">
    <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
    </MTArchiveList>
    </ul>
    
    <h2>Links</h2>
    <ul>
    <li>...</li>
    </ul>
    ...
  </MTList>
    
  <MTListLoop name="sidebar">
    document.write('<$MTListItem encode_js="1"$>');
  </MTListLoop>
  

• このIndex TemplateをSaveした後、Rebuildするとsidebar.jsが生成される。以降、IndexがRebuildされるタイミング(新規entryのポスト時など)でsidebar.jsが一緒にRebuildされるようになる。
• このsidebar.jsを利用するためにMain Index, Master Archive Index, Category ArchiveなどのTemplateを編集し、該当箇所を以下のように変更する。

  ...
  <div id="links">
    <script type="text/javascript" src="<$MTBlogURL$>sidebar.js"></script>
  </div>
  ...
  

• 最後にRebuild Allする。

表示内容はsidebar.jsのIndex Templateでコントロールできるのでさまざまなカスタマイズが可能。もちろん、以下のようにsidebarを生成する関数sidebar1(), sidebar2()をsidebar.jsには定義しておき、

function sidebar1() {
  document.write('<div id="links1">');
  <MTListLoop name="sidebar1">
    document.write('<$MTListItem encode_js="1"$>');
  </MTListLoop>
  document.write('</div>');
}
function sidebar2() {
  document.write('<div id="links2">');
  <MTListLoop name="sidebar2">
    document.write('<$MTListItem encode_js="1"$>');
  </MTListLoop>
  document.write('</div>');
}

ヘッダ部分でこのJavaScriptを読み込んで、sidebarを生成したい部分で

...
<div id="links">
  <script type="text/javascript">sidebar1();</script>
</div>
...
<div id="links">
  <script type="text/javascript">sidebar2();</script>
</div>
...

とかしてもよい。