emaction，但适配pjax（附新版教程）

前言

各位也发现了，本站的版权声明下方添加了一个类似于 GitHub 的点赞功能的按钮，就是 emaction
这个点赞功能基本上 1:1 还原了 GitHub 的点赞功能，因此很久之前我就想搞这个了
之前这个功能在我的博客上一段时间，不过由于这玩意不适配pjax
并且我用很多AI工具给这玩意适配pjax，结果都是以失败告终，我才放弃这个的
直到今天，才用Qoder搞定这玩意的pjax适配，并且在我的博客上将这个功能“复活”

下面没啥好说的，直接开始教程吧！

教程开始！

部署后端

前提：

• 需要有 Cloudflare 账号
• 电脑中需要有 Node.js 环境

首先去 Cloudflare 创建一个名为：emaction 的 D1 数据库
复制此数据库的 id，如：acf6da62-7777-4459-a579-123456789012

之后点击右上角的 Explore Data

在下面这个框里面输入创建数据表的命令：

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
  )

点击 Run ，出现下面的结果，数据表就创建完成了：

然后在本地电脑中克隆代码：

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

安装依赖包：

cd emaction.backend

# 安装 packages
npm install

# 全局安装 Wrangler
npm install -g wrangler

PS：这里有同学反应需要全局 -g 安装 Wrangler
如果没有添加这个 -g ，那么这下面的命令不是直接运行 wrangler ，而是 npx 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 Worker：

wrangler deploy

然后登录 Cloudflare Worker ，就能找到一个名为 api-emaction 的 Worker 了。
这个名称与克隆代码中的 package.json 文件中的名字对应，可自行选择是否修改。
记住此 Worker 的域名：https://api-emaction.xxxxxxx.workers.dev。
如果用户大多数为国内的，可能需要绑定一个自定义域名才能友好访问。

前端使用（原版）

前端使用时，跟 emaction/emaction.frontend 的说明文档一样即可。
只是需要把自定义的 endpoint 传参给 JS 代码。

在 HTML 中引入 JS Module。
这个 JS 是可以下载下来自行修改和部署的：

<script type="module" src="https://cdn.jsdelivr.net/gh/emaction/frontend.dist@1.0.7/bundle.js"></script>

在 HTML 使用这个 Module：

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

这个 endpoint 没有防呆设计，不要输入末尾的 “/” 斜杠。
自定义 ID reacttargetid 可选修改，在同一页面内有多个 Reactions 的时候，尽量使用。

前端使用（适配pjax的版本）

下载我上面提到的适配了pjax的js文件：emaction.pjax.js
按照上面的方法引入：

<script type="module" src="/js/emaction.esm.js"></script>

然后在 HTML 使用这个 Module （跟上面的方法一样）：

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

这个js的 endpoint 我已经添加了防呆设计，也就是说末尾的 “/” 斜杠加不加都可以。
自定义 ID reacttargetid 跟上面一样，也是可选修改

还有，这个js适配了亮暗色模式的自动适配，可以通过 data-theme="dark" 自动检测亮暗色模式了
并且可以通过组件级别控制亮暗色模式：

<emoji-reaction theme="dark"></emoji-reaction>
<emoji-reaction theme="light"></emoji-reaction>
<emoji-reaction theme="system"></emoji-reaction>