在网页上展示书影音记录，支持手动更新、从 Bangumi 导入数据、同步 Bangumi 更新。

📫 点击查看 Demo

项目分为前端、后端、工具脚本三部分。

1、克隆项目到本地

git clone https://github.com/muzuiyo/bangumi

并上传到 Github。

2、参数配置

打开 frontend/site.config.ts，设置前端站点标题、用户（显示在页脚）、主页链接（用于页脚超链接）。

打开仓库项目文件夹，依次执行以下命令。

# 命令行进入 backend 初始化目录
cd backend
pnpm install

登录 cloudflare

pnpm wrangler login

设置 USERNAME（用于bangumi同步）、ADMIN_TOKEN（前端登录密码） 密钥，根据提示完成密钥创建。

pnpm wrangler secret put USERNAME
pnpm wrangler secret put ADMIN_TOKEN

创建 D1 数据库

pnpm wrangler d1 create media-log

初始化数据库

pnpm wrangler d1 execute media-log --remote --file=./schema.sql

部署到 cloudflare worker。

pnpm wrangler deploy

打开 vercel 官网，部署新项目，选中仓库 frontend 目录，框架选用 NextJS，环境变量根据 frontend/.env.example 参考设置如下：

# 后端 API 地址
NEXT_PUBLIC_API_BASE_URL=http://localhost:8787
# 想要的设置路径，默认为 settings
NEXT_PUBLIC_SETTING_PATH=settings

点击部署。

添加 frontend/.env、backend/.dev.vars 文件，用于本地参数设置，内容参考 .env.examlple 与 .dev.vars.example。

打开仓库项目文件夹，依次执行以下命令。

# 命令行进入 backend 初始化目录
cd backend
pnpm install

登录 cloudflare

pnpm wrangler login

设置 USERNAME（用于bangumi同步）、ADMIN_TOKEN（前端登录密码） 密钥，根据提示完成密钥创建。

# 设置的值应与 .dev.vars 一致
pnpm wrangler secret put USERNAME
pnpm wrangler secret put ADMIN_TOKEN

创建 D1 数据库

pnpm wrangler d1 create media-log

初始化数据库

pnpm wrangler d1 execute media-log --local --file=./schema.sql

运行服务器

pnpm run dev

注意调整 .env 文件 API 地址参数，开发时应为本地地址。

安装依赖

cd frontend
pnpm install

运行页面

pnpm run dev

根据前面设置的 NEXT_PUBLIC_SETTING_PATH 参数，前往前端站点 /NEXT_PUBLIC_SETTING_PATH=sumiko 路径，进入设置页面，输入在后端服务器设置的 ADMIN_TOKEN 进行登录。

登陆后，激活以下功能，新增、导入、导出、删除、更新条目的功能。

后端站点可以进入 /docs 查看 API 接口文档。

此处 Bangumi 为 Bangumi 番组计划。

本地运行 tools/exportBangumi.js 脚本，该命令会生成用户收藏数据的 json 文件（已适配站点接口）。

node exportBangumi.js <username> [token]

username 为用户唯一标识符，token 应前往 Bangumi 个人令牌 获取。

导入生成的 JSON 文件到站点即可同步 Bangumi 收藏数据。

将 tools/exportBangumi.js 脚本添加到站点组件或者油猴脚本，在个性化面板 收藏记录一栏 设置参数保存后，用户在 Bangumi 收藏的时候，会同步发送数据到站点。