ITオムライス

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

2020-01-13 技術系

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

Disqus

Disqusの設定

  1. GET STARTEDをクリックしてアカウントを作成します。

  2. I want to install Disqus on my siteを選択してサイトを登録して、URL等の情報を入力します。。

  3. Select a planページでは Basicを選択します。

  4. What platform is your site on?ページでは、I don't see my platform listed, install manually with Universal Codeを選択します。

  5. サイトに埋め込むためのスクリプトが表示されますが、無視して、Configureをクリックします。

  6. 設定項目を入力します。最後に表示されている‘shortname‘をコピーしておきます。

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

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

  1. config.tomldisqusShortname = "yourdiscussshortname"を追加します。

  2. 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>
  1. layoutsのsingle.htmlに{{ partial "disqus.html" . }}を追加します。

参考

Disqus

HugoブログにDisqusでコメント欄をつけた - 行けたら行く

Hugoにコメント欄を追加できるDISQUSを導入 - チラシのすきま