Hugoで作ったブログにDisqusを使ってコメント欄を追加した

2020-01-13 技術系

Hugo公式でコメント欄を追加する方法として紹介されていたDisqusを使ってコメント欄を追加しました。

Disqusの設定

GET STARTEDをクリックしてアカウントを作成します。
I want to install Disqus on my siteを選択してサイトを登録して、URL等の情報を入力します。。
Select a planページでは Basicを選択します。
What platform is your site on?ページでは、I don't see my platform listed, install manually with Universal Codeを選択します。
サイトに埋め込むためのスクリプトが表示されますが、無視して、Configureをクリックします。
設定項目を入力します。最後に表示されている‘shortname‘をコピーしておきます。

自分のサイトにコメント欄を追加

Hugoの公式に書かれていることをやっていきます。

config.tomlにdisqusShortname = "yourdiscussshortname"を追加します。
layouts/partials/disqus.htmlを追加します。

<div id="disqus_thread"></div>
<script type="text/javascript">

(function() {
    // Don't ever inject Disqus on localhost--it creates unwanted
    // discussions from 'localhost:1313' on your Disqus account...
    if (window.location.hostname == "localhost")
        return;

    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    var disqus_shortname = '{{ .Site.DisqusShortname }}';
    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">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>