Cover Image

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

這邊記錄一下如何在 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 }} 在 local 確認是否有完成

June 18, 2025 · 1 分鐘 · Steven Chang