GitHubのコメントシステムをブログに使う #JavaScript

Talariaというものがあります。これは、GitHubのコミットログを参照し、そこへのコメントを表示します。

使い方は、以下のとおりです。jekyllルートを前提に解説します。

注意点は多いですが、GitHubユーザーとしてはとても使いやすいコメントシステムなので、おすすめです。

$ pwd
~/jekyll

$ bower install m2w/talaria
$ bower install async

$ vim bower_components/talaria/dist/talaria.js
    var CONFIG = {},
        DEFAULTS = {
            COMMENTABLE_CONTENT_PATH_PREFIX: '_posts/',
            CONTENT_SUFFIX: '.md',
            CACHE_TIMEOUT: 60 * 60 * 1000, // cache github data for 1 hour
            PAGINATION_SCHEME: /\/xe4muteighiizi9U\d+\//,
            LOCAL_STORAGE_SUPPORTED: false,
            PERMALINK_IDENTIFIER: 'a.permalink',
            PERMALINK_STYLE: /[\.\w\-_:\/]+\/(\d+)\/(\d+)\/(\d+)\/([\w\-\.]+)$/
        };

ここで、_posts/の部分がリポジトリのbranch:masterにあるポストディレクトリを指定します。

<head>
    <link rel="stylesheet" href="/bower_components/talaria/dist/talaria.css" type="text/css">
    <script type="text/javascript" src="/bower_components/bluebird/js/browser/bluebird.js"></script>
    <script type="text/javascript" src="/bower_components/talaria/dist/talaria.js"></script>
</head>

次に、コメントを表示したい場所に、以下のコードを入れます。article内が良いでしょう。リポジトリ名とユーザー名を指定。

  <script type="text/javascript">
    talaria.init({REPOSITORY_NAME: 'syui.github.io', GITHUB_USERNAME: 'syui'});
  </script>

最後に、記事のa hrefにclass="permalink"を指定します。

<a href="{{ page.url }}" class="permalink"># {{ page.title }}</a>

注意点

ただし、使用するサイトジェネレーターによっては、ブランチを指定できないので、厄介な問題を引き起こします。例えば、hugoでサイトを構築している場合は、ビルド後の./publicをmasterに置くことがあります。

この場合、ポストディレクトリはjekyll用ではなく一般用にビルドされているため、そのままではこのコメントシステムを使えません。したがって、幾つかの工夫が必要になります。

config.toml

contentdir = "themes/{hugo-theme}/static/content"

このように記事を置いて、以下の様な指定をする必要があります。

$ vim bower_components/talaria/dist/talaria.js
COMMENTABLE_CONTENT_PATH_PREFIX: 'content/post/'

また、コミットを分けてpushする必要も出てきます(わかり易さのため)。

$ hugo
$ cd public
$ git add content
$ git commit -m "update:post"

$ git add -A
$ git commit -m "update:web"
$ git push

例えば、werckerなどを使ってpushしている場合はさらに厄介なことになりますね。

branch:gh-pagesを使う場合は、branch:masterにソースコードを置けるため、この問題は小さくなります。