Disqusでblogにコメント欄をつけてみた

2017/01/02

このblogはHugoで生成されています。 HugoのようなStatic Site Generatorはサーバーサイドにロジックを持たないので、コメント欄が欲しかったら外部サービスの力を借りることになります。

今回はDisqusを使ってコメント欄をつけてみることにしました。

DisqusはWebサイトにコメント機能を提供してくれるサービスです。 導入の手軽さや高機能さが支持されて、この手のサービスではぶっちぎりの一番手のようですね。 Hugo - Comments in Hugoでも言及されています。

ググるとWordPressへの導入方法ばかりヒットしますが、普通のHTMLでも問題なく導入できます。 基本的にはDisqusの公式サイトで案内されている通りにすれば大丈夫。日本語だったらKazunori Miura - TumblrにDisqusコメントを導入するメリットや設置方法などあたりが参考になるでしょうか。

Load Disqus on demandを参考に遅延読み込みさせる形で導入しました。 「コメント欄を表示する」ボタンが押されてからDisqusのJavaScriptを読み込みます。こうすることで初期表示時の負荷をちょっとでも下げよう、という目論見。

disqus.htmlとscripts.htmlが別々なのはjQuery読み込みタイミングの影響です。このblogではbody内のかなり下のほうでjQueryをロードしているので、disqus.htmlが表示されるタイミングではjQueryが未ロードなんですよね。なので、Script部分を別に分けてjQueryロードの後に差し込んでいるわけです。普通にheadタグあたりでjQueryをロードしている場合はdisqus.htmlとscripts.htmlをひとまとめにしてしまうほうがシンプルです。

あと、ShortCodeはconfig.tomlではなくてソース内にベタ書きでもOK。この辺は好みの問題ですね。

こんな感じで、とてもシンプルなコードでblogにコメント欄をつけることができました。




関連(するかもしれない)記事


おススメ