あわせて読みたいをブログのテーマに合わせて表示する Movable Type編

なるべくシンプルなブログデザインにしたいので、あわせてよみたいをテキストベースでいれています。プラグイン書くの面倒なのでテンプレートなどにベタに書いてるんですがちょっとそのやり方を簡単に紹介。

1. ウィジェットテンプレートでこういうのを書いてメニューに入れる。

<MTSetVar name="use_awasete_widget" value="1">
  <div class="widget-awasete widget">
  <h3 class="widget-header"><a href="http://awasete.com/">awasete yomitai</a></h3>
  <div class="widget-content"><ul id="awasete-blog-list"><li class="awasete_loading">LOADING...</li></ul></div>
  <div class="widget-footer">powered by <a href="http://awasete.com/show.phtml?u=<$MTBlogURL encode_url="1" $>">awasate.com</a></div>
</div>

これだけだと当然、

<ul id="awasete-blog-list"><li class="awasete_loading">LOADING...</li></ul>

しか表示されないので更新するものを書く。

2. あわせて読みたいを取得するおまじないをいれる
フッターのテンプレートあたりに以下を入れる。

<MTIf name="use_awasete_widget">
<script type="text/javascript">
function awasete_yomitai(blogs) {
  // var blogs = [{titile:,url:,favicon:,more:},...];
  var el = document.getElementById('awasete-blog-list');
  if (el) {
    var max = 10, a = [], len = Math.min(max,blogs.length);
    for (var i=0; i<len; i++) {
      var b = blogs[i];
      a.push('<li style="background:transparent url('+b.favicon+') no-repeat left"><a href='+b.url+'>'+b.title+'<\/a><\/li>');
    }
    el.innerHTML = a.join('');
  }
}
</script>
<script type="text/javascript" src="http://api.awasete.com/showjson.phtml?u=<$MTBlogURL encode_url="1"$>"></script>
</MTIf>

軽く解説すると、あわせて読みたい側でjsonp用のAPI(http://api.awasete.com/showjson.phtml)が用意されておりこれを読み出すと、awasete_yomitaiという関数が呼び出される。

引数にfavicon,url,titleなどが入った配列がもらえるのでそれでリストを作る。max=10が最大10個ならべるというコードなので必要に応じて数も変えられる。（繰り返しだけど面倒なのでプラグイン化しないでハードコーディング・・・）
ちょっとしたこだわりはfaviconをvertical:centerにしたいので、img要素を入れるのではなくリストアイテムのbackground-imageにねじ込んでいるところ。

3. 適宜スタイルを書く
kwlogではこんなcssを書いています。所詮ulのリストなのでブログのテーマに併せてお好きにどーぞという感じです。

ul#awasete-blog-list { list-style: none; }
ul#awasete-blog-list li { text-align:left; padding-left:20px; }
.awasete_loading { background: url(images/loading.gif) no-repeat left center; line-height:16px; padding-left:20px; }
.widget-awasete .widget-content{ margin-bottom:5px; }
.widget-awasete .widget-footer { text-align:right; }