OctopressのサイドバーにQiitaに投稿した人気記事を表示させる方法

このページで表示しているものです。
http://ko2ic.github.io/

方法

1.Qiitaと同じアイコンを使いたいので、Font Awesomeを使う。

今回は、CDNを使うが、ダウンロードして配置してもよい。

/source/_includes/custom/head.html

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

2./source/_includes/custom/asidesに本体を記述する

Qiitaに人気の投稿を取得するAPIがないので、全記事を取得してソートしています。

qiita.html

{% if site.qiita_user %}
<section>
<h1>Qiita 人気の投稿</h1>
<ul id="qiita_post" class="post">
</ul>
  <script type="text/javascript">
    $(document).ready(function(){
      $.getJSON("https://qiita.com/api/v1/users/{{site.qiita_user}}/items",function(response){

        # 全投稿を取得して人気順に並び替える
        response.sort(function(a, b){
          a = a.stock_count;
          b = b.stock_count;
          return b - a;
        });
        for(var i = 0; i < response.length ; i++){
          var data = response[i];
          var aTag = $("<a/>").text(data.title).attr("href",data.url);

          var iStockTag = $("<i/>").css({"color":"#000","margin-right":"1em"}).attr("class","fa fa-folder-o");
          iStockTag.append("  " + data.stock_count);

          var iCommentTag = $("<i/>").css({"color":"#000"}).attr("class","fa fa-folder-o");
          iCommentTag.append("  " + data.comment_count);

          var pTag = $("<p/>");
          pTag.append(iStockTag);
          pTag.append(iCommentTag);

          var liTag = $("<li/>").attr("class","post").attr("data-qiita-stock",data.stock_count).append(aTag).append(pTag);
          $("#qiita_post").append(liTag);

          # 指定した投稿数だけ表示する
          if(i === {{site.qiita_display_count}} - 1){
            break;
          }
        }
      });
    });
  </script>
</section>
{% endif %}

1. ./_config.ymlに記述する

_config.yml

qiita_user: user_name
qiita_display_count: 5

default_asides:[custom/asides/qiita.html]

まとめ

全記事を取得しているので、投稿数が多い場合はパフォーマンスが悪くなると思います。

その場合は、最近の記事を表示するのものいいでしょう。
両方に対応したソースは、githubにあります。
https://github.com/ko2ic/octopress-qiita-aside
なにかあれば、pull requestでもお願いします。