ko2ic Blog

悩みがネタ

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

| Comments

概要

OctopressのサイドバーにQitaの投稿した記事を表示します。
自分はブログとは別にQiitaに記述しています。
他人にQiitaに書いていることを一見してわかってもらうことが目的です。

方法

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

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

./source/_includes/custom/head.html
1

<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


<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/ko2ic/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 ===  - 1){
            break;
          }
        }
      });
    });
  </script>
</section>
  1. ./_config.ymlに記述する
_config.yml
1
2
3
4

qiita_user: user_name
qiita_display_count: 5

default_asides:[custom/asides/qiita.html]

まとめ

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


両方に対応したソースは、github におきました。
なにかあれば、pull requestでもお願いします。

Comments