Hugo 網站留言區設定：Disqus vs Cusdis

前言

希望正在閱讀的你，在有想法的當下可以直接寫下來，所以這個留言區就非開不可拉，不然我會錯過你想說的話！

選 Cusdis 的原因

他除了醜一點，大致上符合我的需求

用戶無需登入即可留言
有免費 Service 可以用，不用額外開資料庫，你要自架也可以
導入簡單

但他有個缺點，就是需要你 Approve 留言，留言才會顯示。

Free plan 服務每個月允許使用

一個網站
Approve 100 則留言
Quick Approve 10 則留言（不知道這怎麼用

想說應該滿夠用的，就來試試看，有興趣可以參考 Cusdis Hugo

不想用其他留言服務的原因

Disqus 留言還要登入太麻煩惹，目標是希望用戶可以想說話時就一鍵送出。

若以不登入為前提，有

但是他們都要有伺服器如 Heroku 才能運行。尤其 Staticman 設定起來超級無敵麻煩，看一看我就 fade out 惹。

再來看看 Utterances，跟啟發自 Utterances 的 Giscus，他們都是免費的 open source，利用 GitHub 來做 comments & reactions。但是！！他們都需要 public 的 Github repo。崩潰 QQQ

除此之外，Uterrances 也需要用戶用 Github 登入才行。

我是先實作 Disqus 才改成 Cusdis，所以還是稍微介紹一下，畢竟他超級無敵簡單，如果嫌 Cusdis 醜的人，可以裝 Disqus。

兩種留言導入方式

1. Disqus

註冊登入 Disqus
Comments > Get Started
輸入你的網站名稱，設定網站網址
你會獲得一個 Shortname
回到 config.yaml
1. 在 services 底下加上 disqus: shortnane: <你的 Shortname>
```
services:
  disqus:
    shortname: skyaching
```
2. 在 params 底下加上 comments: true 跟 disqusShortname: skyaching
```
params
  comments: true
  disqusShortname: skyaching
```

在 layouts > partials 路徑底下新增 comments.html

內容如下

{{- /* Comments area start */ -}} {{- if site.Params.comments }} {{ template
"_internal/disqus.html" . }} {{- end }} {{- /* Comments area end */ -}}

每一篇文的 front matter 加上 comments: true
或是有設定 archetypes front matter 的記得加上去！
Server 啟動後，最底下就會看到
Disqus comments not available by default when the website is previewed locally.
沒事的，推上 Github repo 就可以看到成品囉！
完成
雖然電腦可以留言，但不知為何手機留言會失敗

2. Cusdis

先到官網註冊帳號（這是給你管理評論用的）
創建一個新網站，
獲得 data-app-id
點 Embeded code > Copy

在 Hugo 中加入程式碼：

修改 layouts/partials/comments.html

<div
  id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="380b0de2-31bf-4a64-9de6-a9058c45b9d4"
  data-page-id="{{ .File.UniqueID }}"
  data-page-url="{{ .Permalink }}"
  data-page-title="{{ .Title }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

確認 themes/PaperMod/layouts/_default/single.html 檔案中已經有引用

{{- if (.Param "comments") }} {{- partial "comments.html" . }} {{- end }}

回到 config.yaml
在 params 底下加上 comments: true
```
params
  comments: true
```
在你想要開啟評論的文章 front matter 中加入
```
---
title: "文章標題"
comments: true
---
```
Done !!
如果有人來留言，你會在 Comments 裡面看到 > Approve
回網站就可以看到留言囉！
結果不甚理想，好醜，需要美化一下

在layouts/partials/comments.html檔案中加入class="post-comments"

{{- /* Comments area start */ -}} {{- if site.Params.comments }}
<div
  id="cusdis_thread"
  class="post-comments"
  <---
  加入這一行
  data-host="https://cusdis.com"
  data-app-id="380b0de2-31bf-4a64-9de6-a9058c45b9d4"
  data-page-id="{{ .File.UniqueID }}"
  data-page-url="{{ .Permalink }}"
  data-page-title="{{ .Title }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
{{- end }} {{- /* Comments area end */ -}}

新增assets/css/extended/blank.css 檔案

.post-comments {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--secondary);
  background: var(--entry);
  height: 100%;
  overflow: visible;
}

還是有點醜，但比剛剛好多囉！

恭喜你有自己的留言板惹 🎉

感想

有時間想研究一下 Staticman，畢竟把留言的資料放在自己的 database 還是好一些

Reference

Hugo Comments

前言#

選 Cusdis 的原因#

不想用其他留言服務的原因#

兩種留言導入方式#

1. Disqus#

2. Cusdis#

感想#

Reference#

前言