前言
各路大佬用了各种方式实现了文章的点赞功能。 有的是博客系统自带的; 有的是评论系统集成的; 有的通过统计代码的 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
然后在本地电脑中克隆代码:
代码语言:javascript复制git clone https://github.com/emaction/emaction.backend.git
安装依赖包:
代码语言:javascript复制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:
代码语言:javascript复制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:
代码语言:javascript复制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 是可以下载下来自行修改和部署的:
代码语言:javascript复制<script type="module" src="https://cdn.jsdelivr.net/gh/emaction/frontend.dist@1.0.7/bundle.js"></script>
在 HTML 使用这个 Module:
代码语言:javascript复制<emoji-reaction endpoint="https://api-emaction.xxxxxx.workers.dev"></emoji-reaction>
这个 endpoint
没有防呆设计,不要输入末尾的 “/
” 斜杠。
自定义 ID reacttargetid
可选修改,在同一页面内有多个 Reactions 的时候,尽量使用。