快轉到主要內容

在 Hugo 網站加入 Disqus

·
類別 
Hugo網站相關
標籤 
Hugo
Eason Chiu
作者
Eason Chiu
一個不做筆記就容易忘記的工程師
目錄

在 Hugo 網站中加入 Disqus 評論系統,讓部落格文章下方可以顯示留言區,提升讀者互動

建立 Disqus 帳號並取得 shortname
#

  1. 前往 Disqus 官網 註冊帳號。
  2. 建立一個新的網站,取得你的 shortname

新增 Disqus partial 檔案
#

建立好專案後,點擊左上角Installation,因為選項沒有Hugo,所以選擇下方的Universal Code install instructions

接著將代碼複製起來,在 layouts/partials/ 目錄下建立 disqus.html,內容如下:

html
<div style="margin-top: 4rem;"></div>
<hr style="margin-bottom: 2rem; border-top: 1.5px solid #ccc;" />
<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = '{{ .Permalink }}';
        this.page.identifier = '{{ .File.Path }}';
    };
    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://你的-shortname.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>
    請啟用 JavaScript 以檢視
    <a href="https://disqus.com/?ref_noscript" target="_blank" style="color:#1976d2; text-decoration:underline; cursor:pointer;" onmouseover="this.style.color='#1565c0'" onmouseout="this.style.color='#1976d2'">由 Disqus 提供的評論</a>
</noscript>

記得將 你的-shortname 替換成你自己的 Disqus shortname

在文章模板插入 partial
#

打開 layouts/_default/single.html,在文章內容{{ .Content }})之後插入:

go
{{ partial "disqus.html" . }}

設定 config.toml
#

在網站根目錄config.toml 加入:

toml
disqusShortname = "你的-shortname"

重啟Hugo查看顯示效果
#

完成上述步驟後,重新啟動 Hugo 網站,文章下方就會出現 Disqus 留言區

注意事項
#

  • 若要自訂顯示條件,可用 if 判斷只在特定文章顯示。
  • 若留言區未顯示,請檢查 shortname 是否正確、網路是否可連 Disqus

相關文章

Hugo 網站的 SEO 優化與 Google 分析
類別 
Hugo網站相關
標籤 
SEO Hugo Google Search Console Google Analytics
Hugo + Github Page 快速建立自己的部落格網站
類別 
Hugo網站相關
標籤 
Github Hugo
把 Codepen 嵌入 Hugo文章上
類別 
Hugo網站相關
標籤 
Codepen Hugo