phoenix-power

1
2
3
$ curl -o ~/octopress/source/javascripts/jquery.githubRepoWidget.min.js https://raw.githubusercontent.com/JoelSutherland/GitHub-jQuery-Repo-Widget/master/jquery.githubRepoWidget.min.js -o ~/octopress/plugins/githubwidget.rb https://raw.githubusercontent.com/sotsy/githubrepo-octopress/master/githubwidget.rb

$ vim ~/octopress/source/_includes/head.html

</head>の上に以下のタグを挿入します。

~/octopress/source/_includes/head.html
1
2
3
4
5
<script src="{{ root_url }}/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="{{ root_url}}/javascripts/jquery.githubRepoWidget.min.js"></script>
<script>
  $.noConflict()
</script>

私の場合、リポジトリのタイトルは、h3タグではなくh5タグを使うことにします。

これについては、../source/javascripts/jquery.githubRepoWidget.min.jsを書き換えてください。

次に、CSSも設定しておきます。

1
2
3
4
5
6
7
8
h5 {
word-wrap:break-word;font-family:helvetica,arial,sans-serif;font-weight:normal;font-size:16px;color:gray;margin:0;padding:10px 10px 10px 60px;background:url("http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Logos-Github-icon.png") 7px center no-repeat; width: auto;
}

h5 .repo {font-weight:bold}
h5 .repo {display:block}

.github-box {margin-bottom: 25px}

使い方は簡単で、以下の記述方式が使えるようになります。

1
{% githubrepo sotsy/githubrepo-octopress %}