Ank's Blog

在 Jekyll 上使用 Valine 作為評論系統/留言版

  • 2021年 03月11日

本章目的

在我的靜態 Blog 上新增一個簡潔、易用、無廣告的評論區/留言版

image

我從一開始使用 Gitalk 作我的留言版、再轉到了 Disqus ，最後選了 Valine

這裡記錄一下我為什麼會有這樣的轉換，還有我做了哪些的抉擇

吐槽

我會把吐槽寫在一開始，表示我本身是很喜歡 Gitalk 或者 Disqus 的，可以說是逼不得已我才要把評論系統改變，也希望我日後不用再為評論系統折騰太多的時間。

如果想了解我當初如何折騰設定 Gitalk 和 Disqus ，可以點這裡

放棄 Gitalk

先說我放棄 Gitalk 作為作論區的原因，是因為我有一天發現了 Gtalk 出現了 Error: Request failed with status code 403 錯誤，在爬文後得知，大概是從2021年1月31日起，開發者為了降低訪問量，限制了部分功能。雖然可以透過搭建 proxy 去解決該問題，但這也成為了我放棄 Gitalk 的導火線。我本來十分喜歡 Gitalk 的風格 ，實在非常可惜。

放棄 Disqus

Disqus 可以說是功能最全面，而且比較穩定可以安心長期使用的評論系統，至於放棄 Disqus 的原因也十分簡單，就是 它 有 廣 告 !

我建這個 Blog 的初衷，就是我想建立一個無廣告的簡潔部落格，所以這是我無法忍受的一點，雖然可以升級成付費版的 Disqus 來取消廣告，但我選擇了放棄 Disqus。

image

Valine 的優點

簡潔

  • 留言板完全沒有多餘的東西，十分的簡潔。

可匿名留言/無需登入

  • 如果要先登入，或者要做什麼驗證才能留言是十分反人性的，搞不好原來想留個什麼言到最後都不想留了。
  • 不過同時也要弊端，無法阻擋惡意/垃圾言論。無法得知對方留言和回覆時對方無法得知。

無廣告

  • 這對我來說可是十分重要的。

依賴少

  • 基本上它只依賴 leancloud ，像 Gitalk 就是要依賴 issue 這個 API 導致目前受到了限制。依賴少表示出毛病的機率也低。

Valine 的安裝和配置

1. 註冊 leancloud

它有區分 國際版 和 國內版，如果選擇國內版的話，好像需要經過備案。不過我是選擇了國際版(international)

特別要留意，註冊 leancloud 後需要驗證 Email 和 Phone number 才可以開始 Create app

2. Create App on Leancloud

a. 填入App name ，選擇 Developer (免費)

image

b. Setting -> App keys ，得到你的 AppID 和 AppKey

image

c. 到 server 端，編輯你 jekyll 的 _config.yml 文檔

comments:
  provider: valine # false (default), "disqus", "gitalk", "valine", "custom"


...(內容略)


  ## Valine
  # please refer to https://valine.js.org/en/ for more info.
  valine:
    app_id      : TypeYourAppIDHere # LeanCloud App id
    app_key     : TypeYourAppKKeyHere # LeanCloud App key
    placeholder : 歡迎討論和加入你想法 # Prompt information
    visitor     : # false (default)
    meta        : # "[nick, mail, link]" (default) nickname, E-mail, Personal-site

記得在你寫的 .md 文章裡面，加入 key : XXX 這樣的頭信息屬性來開啟該頁評論。

2022/01 更新: 有關於 valine 因國際版域名問題導致失效

其實我留意到 valine 失效了已經有一段時間，一直沒修，今天爬了一下文章看到了解決辦法。

其實失效原因是 LeanCloud 官方的 us.avoscloud.com 域名已經下線，如果繼續使用國際版 LeanCloud 作為 Valine 評論的後端的話，則必須指定自定義服務器 URL 才能正常使用。

但由於我是用 jekyll，所以解法稍微有點不一樣，怕我日後忘記所以這邊記錄一下：

1.先登入 LeanCloud 後台找出 REST API 服務器地址

螢幕截圖 2022-01-14 下午8 26 19

2.編譯 jekyll 的 valine 設定文件

位置在 ： jekyll-TeXt-theme-tech/_includes/comments-providers/valine.html

別人都是編譯 _config.yml 便可，但因為我的 _config.yml 文件對 valine 的定義是來自 valine.html 這個文件

添加 serverURLs :

var _config = {
  el: '#vcomments',
  appId:  '',
  appKey: '',
  serverURLs: 'https://xxxxxxxx.api.lncldglobal.com', # xxxxxxxx 其實就是 appID 的前 8 位#
  verify: true,
};

重新進入你所寫的文章網站，更新一下:

image

看到 Valine 的評論區，大功告成!!

Valine 的擴充

可以說是優化 Valine ，但又可以是解決 Valine 的便宜性所帶來的另一個問題，安全性。

這裡也記錄一下我以後需要優化 Valine 的一些地方

  • 頭像
    • 我想每一則留言都有個頭像，即便是 Anonymous。
  • 必填選項
    • 想加入一些必填選項，比如說 NickName 和 E-mail。
  • 安全性
    • 沒有登入系統就無法區分留言的用戶，包括無法區分管理員的留言。
    • 目前知道刪除留言的其中一個方法，是進入 Leancloud 的後台進行管理。
搜索