自部署 GitHub 風格的 Reactions 點讚功能

前言#

各路大佬用了各種方式實現了文章的點讚功能。
有的是博客系統自帶的；
有的是評論系統集成的；
有的通過統計代碼的 API 實現的；
有的通過第三方 SaaS 服務實現的。

直到最近空白大佬的 Memos 中得知了 emaction/emaction.frontend 。
這個項目還提供了後端代碼，emaction/emaction.backend 。

雖然這個後端代碼暫時沒有提供初始化數據庫的代碼，不過通過源代碼逆向出了初始化 Cloudflare D1 的命令。

Why this?#

為什麼選擇了這個點讚功能呢。
這是模仿的 GitHub 的點讚功能的，基本上 1:1 還原了。
GitHub 即正義！

步驟#

1. 部署後端（可選）#

部署後端不是必需的，用官方提供的 API 就可以使用了。

前提：

需要有 Cloudflare 帳號
電腦中需要有 Node.js 環境

首先去 Cloudflare 創建一個名為：emaction 的 D1 數據庫
複製此數據庫的 id，如：acf6da62-7777-4459-a579-123456789012

然後在本地電腦中克隆代碼：

git clone https://github.com/emaction/emaction.backend.git

安裝依賴包：

cd emaction.backend

# 安裝 packages
npm install

# 全局安裝 Wrangler
npm install -g wrangler

PS：這裡有同學反應需要全局 -g 安裝 Wrangler，我不明白為什麼。

修改克隆代碼 wrangler.toml 文件中的 database_id 為自己的：

name = "api-emaction"
main = "src/worker.js"
compatibility_date = "2023-07-25"
usage_model = "bundled"
env = { }

[[d1_databases]]
binding = "d1" # i.e. available in your Worker on env.DB
database_name = "emaction"
database_id = "acf6da62-7777-4459-a579-123456789012" # 修改成自己的

[triggers]
crons = [ ]

登錄 Wrangler：

wrangler login

在彈出的瀏覽器頁面中，點 Allow 授權就可以了。

在自己電腦上的終端的當前項目中（不是 Cloudflare 網頁上）給數據庫（假設名為：emaction）創建數據表：

wrangler d1 execute emaction \
  '--command=CREATE TABLE reactions (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    target_id TEXT NOT NULL,
    reaction_name TEXT NOT NULL,
    count INTEGER NOT NULL DEFAULT 0, 
    created_at INTEGER NOT NULL,
    updated_at INTEGER NOT NULL
  )'

部署項目到 Cloudflare Worker：

wrangler deploy

然後登錄 Cloudflare Worker ，就能找到一個名為 api-emaction 的 Worker 了。
這個名稱與克隆代碼中的 package.json 文件中的名字對應，可自行選擇是否修改。
記住此 Worker 的域名：https://api-emaction.xxxxxxx.workers.dev。
如果用戶大多數為國內的，可能需要綁定一個自定義域名才能友好訪問。

2. 前端使用#

前端使用時，跟 emaction/emaction.frontend 的說明文件一樣即可。
只是需要把自定義的 endpoint 傳參給 JS 代碼。

在 HTML 中引入 JS Module。
這個 JS 是可以下載下來自行修改和部署的：

<script type="module" src="https://cdn.jsdelivr.net/gh/emaction/[email protected]/bundle.js"></script>

在 HTML 使用這個 Module：

<emoji-reaction endpoint="https://api-emaction.xxxxxx.workers.dev"></emoji-reaction>

這個 endpoint 沒有防呆設計，不要輸入末尾的 “/ ” 斜杠。
自定義 ID reacttargetid 可選修改，在同一頁面內有多個 Reactions 的時候，盡量使用。