コメント機能をつける

Tinkerer では内部ではコメント管理の機能を持っていないため、外部のコメント管理用サービスを利用してコメントを扱います。

Tinkererのドキュメントでは、 Disqus を利用してコメント機能をつける方法と、 Facebook Comments を利用した方法が紹介されています。

まず Disqus を試してみたのですが、コメントを投稿してから反映されるのがかなり遅かったり、コメントを削除してもカウンターのほうでユーザー名入りの履歴が残ってしまったりといろいろ微妙な感じでした。

Facebook Comments のほうは安定しているのですが、匿名ユーザからコメントを受け付けることが出来ません。でもまあこのブログではそれでもいいかな、ということでFacebook Comments を利用することにしました。

52 # Add other Sphinx extensions here
53 extensions = ['tinkerer.ext.blog', 'tinkerer.ext.disqus']

52 # Add other Sphinx extensions here
53 extensions = ['tinkerer.ext.blog', 'tinkerer.ext.fbcomments']

cd <...>/myblog
mkdir _template
vi _template/page.html

{% extends "!page.html" %}

{%- block extrahead %}
    <meta property="fb:app_id" content="$(YOUR_APP_ID)"/>
    {{ super() }}
{% endblock %}

サイドバーを拡張する

デフォルトだとサイドバーが寂しいので、いろいろ増やします。

67 # Add templates to be rendered in sidebar here
68 html_sidebars = {
69     "**": ["recent.html", "categories.html", "tags.html", "searchbox.html"]
70 }

cd <...>/myblog
mkdir _template
vi _template/twitter.html

{#-
    twitter.html
    ~~~~~~~~~~~~

    Show Twitter Widget to Sidebar.

-#}

<div class="widget">
    <h1>Twitter</h1>
    <a class="twitter-timeline" width="250" height="500" href="https://twitter.com/apirakun" data-widget-id="$(YOUR_WIDGET_ID)">@$(YOUR_ID) からのツイート</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

67 # Add templates to be rendered in sidebar here
68 html_sidebars = {
69     "**": ["twitter.html", "recent.html", "categories.html", "tags.html", "searchbox.html"]
70 }

ページを拡張する

ページ本体も少し拡張したいです。ここでは Twitter のツイートボタンを追加します。

まず、テンプレートの拡張ファイルを配置するディレクトリ _template を作成し、そこに page.html を作成します。このあたりはこれまでの手順をやっていれば出来ていると思うので、もしあったらスキップしてください。

cd <...>/myblog
mkdir _template
vi _template/page.html

page.html に ツイートボタン用の定義 [6] を追加します。

{%- block body %}
    {{ timestamp(metadata.date, timestamp_format) }}
    {{ body }}
    <br/>
    <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    {{ post_meta(metadata) }}
    {{ comments }}
{% endblock %}

ページ本体を拡張する場合は、 {%- block body %} 内に定義を追加します。で、実は最初はもっとシンプルに、以下のように親テンプレートの定義にアペンドする、という定義をやってみたのですが...

{%- block body %}
    {{ super() }}
    追加する定義部分...
{% endblock %}

これだと、コメント機能が有効になっている場合にはコメント欄をクリックしないとツイートボタンが見られない、という状態になってしまいました。そこで少し微妙ですが、親の定義を完全に上書きし、本文の直後にツイートボタンがくるよう設定しました。

(追記)と、書いてみたのですが、どうもまだこのあたりの挙動が思ったとおりいっていない感じですね...。

Google Analyticsを設定する

最後に、Google Analyticsを設定します [7] 。

まず Google Analyticsのサイト [8] にいき、アカウントを作成します。

アカウント作成後にJavaScriptのスクリプトが画面に表示されるので、スクリプト文字列をコピーしておきます。この時の注意点で、 <script> タグの部分に囲まれた文字列が出力されますが、タグ自身はコピーせず、タグの中身だけをコピーしてください。

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34761823-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

_static/google_analytics.js というファイルを作成して、これにコピーしたスクリプト文字列を貼り付けて保存します。

cd <...>/myblog
mkdir _static
vi _static/google_analytics.js

次に今までと同様、 _template/page.html を編集します(なければ作ります)。

{% extends "!page.html" %}

{% set script_files = script_files + ["_static/google_analytics.js"] %}

これまでの手順のどれかを実施済みであれば {% extends "!page.html" %} はすでにあるはずなので、 {$ set... の部分だけを追加します。

この状態でビルドしたコンテンツをホストにアップすると、Google Analyticsが有効になります。手元ではリアルタイム検索で数秒で情報が反映されていました。

動作していないと思ったら、JavaScriptがうまく設定できていないか疑ってみてください。コピペミスでJavaScriptエラーなどが出ているかもしれません（私はそれで少しはまりました）。

今後は...

とりあえず基本的なカスタマイズ方法を通してみました。

あとはCSSもカスタマイズしたいなーと思っていますが、その辺りは結構疎いので、はたしてやるかどうか...。