前言

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

選 Cusdis 的原因

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

  • 用戶無需登入即可留言

  • 有免費 Service 可以用,不用額外開資料庫,你要自架也可以

  • 導入簡單

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

Free plan 服務每個月允許使用

  • 一個網站

  • Approve 100 則留言

  • Quick Approve 10 則留言(不知道這怎麼用

cudis-free-plan.png

想說應該滿夠用的,就來試試看,有興趣可以參考 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

  1. 註冊登入 Disqus

  2. Comments > Get Started

    disqus-get-started.png

  3. 輸入你的網站名稱,設定網站網址

    disqus-set-site.png

  4. 你會獲得一個 Shortname

    disqus-shortname.png

  5. 回到 config.yaml

    1. services 底下加上 disqus: shortnane: <你的 Shortname>

      services:
        disqus:
          shortname: skyaching
      
    2. params 底下加上 comments: truedisqusShortname: skyaching

      params
        comments: true
        disqusShortname: skyaching
      
  6. layouts > partials 路徑底下新增 comments.html

    disqus-comments-html-setting.png

    內容如下

    {{- /* Comments area start */ -}} {{- if site.Params.comments }} {{ template
    "_internal/disqus.html" . }} {{- end }} {{- /* Comments area end */ -}}
    
  7. 每一篇文的 front matter 加上 comments: true

    disqus-config-setting.png

    或是有設定 archetypes front matter 的記得加上去!

    disqus-archetypes-setting.png

  8. Server 啟動後,最底下就會看到

    Disqus comments not available by default when the website is previewed locally.

    disqus-local-server.png

    沒事的,推上 Github repo 就可以看到成品囉!

  9. 完成

    disqus-comments-production.png

    雖然電腦可以留言,但不知為何手機留言會失敗

    disqus-mobile-comments-failed.jpeg

2. Cusdis

  1. 先到官網註冊帳號(這是給你管理評論用的)

  2. 創建一個新網站,

    cusdis-create-site.png

  3. 獲得 data-app-id

    Embeded code > Copy

    cusdis-get-data-app-id.png

  4. 在 Hugo 中加入程式碼:

    1. 修改 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>
      
    2. 確認 themes/PaperMod/layouts/_default/single.html 檔案中已經有引用

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

      cusdis-single-html.png

  5. 回到 config.yaml

    params 底下加上 comments: true

    params
      comments: true
    
  6. 在你想要開啟評論的文章 front matter 中加入

    ---
    title: "文章標題"
    comments: true
    ---
    
  7. Done !!

    cusdis-comments-production.png

  8. 如果有人來留言,你會在 Comments 裡面看到 > Approve

    cusdis-comments-approve.png

  9. 回網站就可以看到留言囉!

    cusdis-comments-approve-comment.png

  10. 結果不甚理想,好醜,需要美化一下

  11. 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 */ -}}
    
  12. 新增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;
    }
    

還是有點醜,但比剛剛好多囉!

cusdis-comments-stylish.png

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

感想

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

Reference

  1. Hugo Comments