Hugo Part 3 - Hugo にコメント欄を導入

Part 1Part 2 で Hugo を用いて github.io にブログを立ち上げましたが、コメント欄が無いので導入したい!!

Comments in Hugo を参考にして早速、導入していこうとおもったが、 もっと楽にやりたいので、Part 1 で利用していた theme の hyde を変えて超簡単に導入する。

全てが終われば yourblog のようにコメント欄が作成できる。

Step 1 theme を変える

今まで通り、themes に中に theme を git clone してもいいのだが、 とりあえず今回は themes ディレクトリを利用しないことにする。

なので config.tomltheme 設定を削除する

title = "My New Hugo Site"
baseurl = "http://syati.github.io/yourblog"
languageCode = "ja-jp"
theme = "hyde"  //この行はもう不要なので削除する

[params]
  description = "This is yourblog"
  author = "your name"

[taxonomies]
  category = "categories"
  tag = "tags"

theme を Syati/greyshade に変更する。 git clone して yourblog のメインテーマにする

$ git clone git@github.com:Syati/greyshade.git
$ tree -L 1 #こんなディレクトリ構成
.
├── greyshade
└── yourblog

$ cd greyshade
$ cp -R archetypes images layouts static ../yourblog
$ cd ../yourblog
$ rm -rf themes # 必要無いのでとりあえず削除
$ hugo server # テーマが変わっていることが確認できる

Step 2 Disqus を導入

導入が楽なので Disqus を利用する。

Disqus に Sign up して http://[username].github.io でサイトを登録して ゴニョゴニョすると、Choose your platform とかでる画面になるので Universal Code をクリックすると、以下のコードをコメント欄を表示 させたいところに入れてね!と記載があるが、以下の [disqus_shortname] だけ覚えておく。

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = [disqus_shortname];
    
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

Step 3 config.toml を変更する

テーマの設定 を config.toml にコピペして、編集。 Step 2 で覚えておいた [disqus_shortname] を設定に入れる。以下サンプル

title = "My New Hugo Site"
baseurl = "http://syati.github.io/yourblog"
languageCode = "ja-jp"
canonifyurls = true

[author]
name = "your name"
# email will use for gravatar
email = ""

[taxonomies]
category = "categories"

[params]
# site description, will show under navigation
description = "This is yourblog"

# RSS / Email (optional) subscription links (change if using something like Feedburner)
subscribe_rss = "/index.xml"
subscribe_email = ""

# social links
facebook_user = ""
googleplus_user = ""
twitter_user = ""
github_user = ""
coderwall_user = ""
stackoverflow_user = ""
stackoverflow_user_id = ""
linkedin_user = ""
pinterest_user = ""
delicious_user = ""
pinboard_user = ""
quora_user = ""
instagram_user = ""
behance_user = ""
douban_user = ""

# share links
facebook_like = true
twitter_tweet_button = true
google_plus_one = "true"
addthis_profile_id = ""

# Disqus Comments
disqus_short_name = "[disqus_shortname]" #ここに part2 で覚えた[disqus_shortname]を入れる
disqus_show_comment_count = false

# google analytics
google_analytics_tracking_id = ""

Step 4 記事にパラメータを加える

最後に記事のパラメータに comments = true といれれば、disqus を読み込んでコメント欄が入る。 ただし、localhost では読み込まないようにしているので、記事ページ下部 に Comments とだけでてくる。

+++
date = "2015-06-06T17:20:38+09:00"
title = "first"
comments = true

+++

first page.

Step 5 新規記事のテンプレートを変更しておく

毎回コマンド( hugo new post/new_post.md ) で新規記事作成後に、 comments = true とパラメータ設定するのは面倒くさいので yourblog/archetypes/default.md を以下のように変更しておくと楽ができる

+++
Description = ""
Tags = []
Categories = []
comments = true
+++

Comments