Jan 6, 2004

Tips: Sidebar generation using MTList

既定のMovableTypeではサイドバーを静的に生成するようになっているが、すべてのページにこのサイドバーを付加・更新するためには、Rebuild Allする必要がある。かつ、RSS Feedのように動的に変化するコンテンツを付加したい場合には一定の頻度でRebuild Allする必要がある。まあ控えめに言っても現実的ではない。

これを安直に解決するには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>
...

とかしてもよい。

About Me

My Photo

つくばで働く研究者

Total Pageviews

Amazon

Copyright 2012 Ogawa::Buzz | Powered by Blogger
Design by Web2feel | Blogger Template by NewBloggerThemes.com