用Waline取代Cusdis

Why?
#

Cusdis的留言有點醜，layout也不是很好，不動手滑看不到其他人的留言，且需要手動approve才會顯示。改用Waline也是問Gemini的建議，他長得比較接近大家熟悉評論區，支援表情符號以及愛心(like)，但設定就比Gusdis複雜。
它的架構是必須有一個資料庫(Supabase)存你的留言，Waline是UI，程式碼要下載到github的repository，而中間需要另一個平台(vercel)去執行Waline的程式(在github)，從資料庫讀寫，將結果呈現在網頁上。

準備 Supabase 資料庫
#

註冊 Supabase：訪問 Supabase.com，建議使用 GitHub 帳號登入。
建立新專案 (New Project)
- 選擇你的帳號
- Name
- Passwords, 不要用特殊符號! 記住這個密碼
- Region選你最近的地方
選左側Database icon
- 上方有connect的button, 點擊進入
- 選ORM，往下拉會看到Connection string，把postgresql....那串記下，並把PASSWORD換成你的密碼(建立專案那個passwords)

資訊

Connection string的格式是postgresql://postgres.[專案ID]:[你的密碼]@aws-1-ap-southeast-1.pooler.supabase.com:6543/postgres?pgbouncer=true&sslmode=require

aws-1-ap-southeast-1.pooler.supabase.com是Host
6543是port

在 Vercel 部署 Walline
#

點擊部署連結：Waline官方Vercel部屬，點選Deploy
選擇你的帳號
github scope裡選Add github account
Install Vercel裡面選擇All repositorie,下拉按Create
Github scope裡就會有你的github帳號，選擇你的帳號，然後填repository name, 這邊請填一個新的名稱，它會自動幫你在github建立一個respository(請讓他保持private)
新增environment variables. 到Vercel你的專案下 -> Settings -> Environment Variables
- JWT_SECRET，用線上密碼產生器產生一個32bit的密碼當作值
- PG_USER，填postgres.[專案ID]
- PG_DB，填postgres
- PG_PORT，填6543
- PG_HOST，填aws-1-ap-southeast-1.pooler.supabase.com
- PG_PASSWORD,填你在Supabase的密碼

部屬完成後，在Deployment頁面會顯示留言板畫面，點進去註冊，第一個註冊的就是waline的admin，可掌控後台數據。但註冊時我遇到了error 500:

error: 500: relation “wl_users” does not exist…
500: null value in column “username”…..

上述問題，和Gemini以及Grok聊天後，用下面解法搞定:

Fix error 500

到Supabase進入SQL Editor，手動建立wl_users、wl_comment和wl_counters三個表格

-- 1. 建立管理員資料表 (並放寬 username 限制)
CREATE TABLE IF NOT EXISTS "wl_users" (
    "id" SERIAL PRIMARY KEY,
    "username" VARCHAR(255) UNIQUE, -- 已移除 NOT NULL，防止註冊報錯
    "email" VARCHAR(255) UNIQUE NOT NULL,
    "password" VARCHAR(255) NOT NULL,
    "display_name" VARCHAR(255),
    "url" VARCHAR(255),
    "type" VARCHAR(255) DEFAULT 'user',
    "label" VARCHAR(255),
    "avatar" TEXT,
    "created_at" TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
    "updated_at" TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
);

-- 2. 建立評論資料表
CREATE TABLE IF NOT EXISTS "wl_comment" (
    "id" SERIAL PRIMARY KEY,
    "user_id" INTEGER,
    "parent_id" INTEGER,
    "root_id" INTEGER,
    "url" VARCHAR(255) NOT NULL,  -- 文章路徑 (must)
    "nick" TEXT,                  -- username (must)
    "mail" TEXT,                  -- must 
    "link" TEXT,                  -- 個人網站(must)
    "insertedat" TEXT,            -- date (must)  
    "pid" INTEGER,                -- 父留言(must, 回留言時會用到)
    "rid" INTEGER,                -- 根留言ID (must)
    "like" INTEGER DEFAULT 0,
    "comment" TEXT NOT NULL,
    "ip" VARCHAR(255),
    "ua" TEXT,
    "status" VARCHAR(255) DEFAULT 'approved',
    "sticky" BOOLEAN DEFAULT FALSE,  -- 至頂? (must)
    "created_at" TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
    "updated_at" TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
);

-- 3. 建立計數器資料表 (文章閱讀量)
CREATE TABLE IF NOT EXISTS "wl_counter" (
    "id" SERIAL PRIMARY KEY,
    "url" VARCHAR(255) UNIQUE NOT NULL,
    "time" INTEGER DEFAULT 0,
    "created_at" TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
    "updated_at" TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
);

更新到網頁上
#

在layouts/partials/comments.html下添加下面程式碼:

<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
<div id="waline"></div>
<script type="module">
  import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
  init({
    el: '#waline',
    serverURL: 'https://你的Vercel專案網址', // https://xxx.vercel.app
    // 這裡可以自定義網友留言的必填欄位
    // nick = 暱稱, mail = 郵箱, link = 網址
    requiredFields: ['nick'], // nickname必填
  });
</script>

如果想要在local測試，必須把http://localhost:1313/放到vercel的環境變數裡，不然會被vercel擋掉. 新增SITE_URL，把你local端的網址和發布後的網址加上，中間用逗號隔開。
回到網頁程式碼，在config/params.toml新增下面內容:

[article]
  ....
  showComments = true
[comments]
  enabled = true
  provider = 'waline'

[comments.waline]
  serverURL = 'https://你的Vercel專案網址'
  emoji = true
  pageview = true
  dark = 'auto'

Why? #

準備 Supabase 資料庫 #

在 Vercel 部署 Walline #

更新到網頁上 #

Why?
#

準備 Supabase 資料庫
#

在 Vercel 部署 Walline
#

更新到網頁上
#