概要
OctopressのサイドバーにQitaの投稿した記事を表示します。
自分はブログとは別にQiitaに記述しています。
他人にQiitaに書いていることを一見してわかってもらうことが目的です。
方法
1.Qiitaと同じアイコンを使いたいので、Font Awesomeを使う。
今回は、CDNを使うが、ダウンロードして配置してもよい。
./source/_includes/custom/head.html1
| <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.html1
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>
|