自部署 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 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 的时候，尽量使用。