如何在 Hugo 中安裝 Disqus 系統，以 PaperMod 主題為例

在 Hugo PaperMod 主題中安裝 Disqus 評論系統的完整步驟教學，從註冊帳號到本地確認。

Steven Chang

2025年6月18日 01 Min read

補充：本站現在改用 Astro 架設，這篇記錄的是當時使用 Hugo 的做法。

這邊記錄一下如何在 Hugo 中安裝 Disqus 評論系統，佈景主題為 PaperMod。

安裝步驟

在 Disqus 註冊帳號並創建一個新的網站。
在 Disqus 的網站設定中，找到 Shortname，這是用來識別你的網站的。

在你的 Hugo 網站的 config.toml 或 config.yaml 中添加以下配置：

[params]
  disqusShortname = "your_disqus_shortname"
  comments = true

或者如果你使用的是 YAML 格式：

params:
  disqusShortname: your_disqus_shortname
  comments: true

確保你的 Hugo 佈景主題支持 Disqus。PaperMod 佈景主題已經內建支持 Disqus，所以只需要確保上述配置正確即可。
複製 themes/PaperMod/layouts/partials/comments.html 到 layouts/partials/comments.html 確認 Disqus 的代碼已經包含在內。

如果沒有，你可以手動添加以下代碼到你的 layouts/partials/comments.html：

{{- /* Comments area start */ -}}
<div class="disqus markdown">{{ partial "disqus.html" . }}</div>
{{- /* Comments area end */ -}}

建立 layouts/partials/disqus.html 檔案，並添加以下內容：

{{ if .Site.Params.disqusShortname }}
<div id="disqus_thread"></div>
<script>
  var disqus_config = function () {
    this.page.url = "{{ .Permalink }}"; // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = "{{ .File.Path }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
  };
  (function () {
    // DON'T EDIT BELOW THIS LINE
    var d = document,
      s = d.createElement("script");
    s.src = "https://{{ .Site.Params.disqusShortname }}.disqus.com/embed.js";
    s.setAttribute("data-timestamp", +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>
<noscript
  >Please enable JavaScript to view the
  <a href="https://disqus.com/?ref_noscript"
    >comments powered by Disqus.</a
  ></noscript
>
{{ end }}