节操新番导视 - 社团新番导视自动化工具

发表于 更新于 分类于 阅读次数：

一个专为 天央动漫社节操部新番导视活动 打造的自动化配图工具。
作者: 蜥蜴

背景

作为动漫社团的成员，每个季度我们都会制作新番导视图，用来向社团成员推荐当季值得一看的动画。传统的做法是：

  1. 在新番列表网站上查找当季动画
  2. 手动整理番剧信息（标题、类型、播出时间等）
  3. 收集社团成员的评论和头像
  4. 用 Photoshop 或 Canva 一张张制作图片

这个过程重复且耗时，尤其是当社团有十几个人都要发表评论时，手动整合评论和制作图片的工作量非常大。

于是我就开发了这款工具，让这个过程自动化。

工具定位

本工具经历了多次迭代，从最初简单的”选择word文档→生成图片”，发展成了现在的”多人协作评论编辑器 + 自动化图片生成器“。

核心功能是：多人分别添加评论，最后合并导出图片。

使用流程

工具的使用流程分为三个角色：成员 和 负责人。

成员流程

每个社团成员在自己的电脑上操作：

  1. 打开工具，输入季度代码（如 202607），点击”从 yuc.wiki 抓取”
  2. 工具会自动抓取当季所有动画的信息，包括中文标题、日文标题、类型、播出时间、标签、视觉图等
  3. 在”默认信息”栏输入自己的昵称，选择头像
  4. 在想要评论的动画下，点击”添加默认评论”，会自动填充昵称和头像
  5. 输入评论内容，可以选择是否添加奖牌（金牌/银牌/黑牌）
  6. 可以点击”预览”查看生成效果
  7. 完成所有评论后，点击”导出评论”，保存为一个 JSON 文件

负责人流程

  1. 收集所有成员的 JSON 文件
  2. 打开工具，抓取同一季度的番剧列表
  3. 点击”导入评论”，选择合并模式
  4. 工具会自动按动画标题匹配，将每个人的评论合并到对应的动画下
  5. 导入时会根据昵称去重，同一人的评论不会重复
  6. 为每部动画选择视觉图
  7. 点击”导出图片”，选择输出目录
  8. 工具自动生成所有动画的导视图并保存为 PNG 图片

界面详解

主界面布局

界面分为左右两栏：

  • 左侧：编辑区，显示番剧列表和评论编辑器
  • 右侧：预览区，点击”预览”后实时显示生成效果

工具栏

按钮 功能
从 yuc.wiki 抓取 自动获取当季番剧列表
添加动画 手动添加一个动画条目
导入评论 导入 JSON 评论文件（合并或替换）
导出评论 导出当前所有评论为 JSON 文件
导出图片 生成所有选中动画的导视图
全选/取消全选 控制所有动画的选中状态
清除全部 清空所有数据

默认评论者设置

在番剧列表上方有一个”默认信息”栏，可以设置：

  • 昵称：输入后，点击”添加默认评论”会自动填充
  • 头像：选择头像图片

这个功能在需要为多个动画添加同一个人评论时非常有用。

动画卡片

每个动画以卡片形式展示，包含：

  • 复选框：控制是否导出该动画的图片
  • 标题编辑：中文标题和日文标题可以直接编辑
  • 类型和标签：自动抓取的动画类型和标签
  • 制作人员和声优：自动抓取的信息
  • 播出信息：播出时间和平台
  • 视觉图：可以选择替换视觉图
  • 评论区：管理该动画的所有评论

评论编辑器

每个评论包含：

  • 昵称：评论者的名字
  • 奖牌：金牌、银牌、黑牌或无奖牌
  • 头像：评论者的头像图片
  • 评论内容：支持多行文本
  • 插入图片：可以在评论中插入图片
  • 删除：移除该评论

奖牌的样式：

  • 金牌 🏅：金色渐变背景
  • 银牌 🥈：银色渐变背景
  • 黑牌 ⚫：黑色渐变背景

预览区

点击任意动画的”预览”按钮，右侧会实时显示该动画的导视图效果。预览会嵌入所有字体和图片资源，所见即所得。

实际使用案例

场景一：单机使用

一个人完成所有工作：

  1. 抓取番剧列表
  2. 逐一添加每个社团成员的评论
  3. 选择视觉图
  4. 导出图片

场景二：多人协作

适合社团多人参与：

  1. 在群里发布通知：”请各位在工具中添加评论，导出 JSON 文件发给我”
  2. 每个人按照”成员流程”操作
  3. 负责人收集所有 JSON 文件，导入合并
  4. 统一选择视觉图，导出图片
  5. 发布导视图到社团群

技术实现

技术栈

技术 用途
Electron 桌面应用框架
Node.js 后端运行环境
EJS HTML 模板引擎
Puppeteer 网页截图
Cheerio 网页解析
Axios HTTP 请求

核心设计

预览和导出分离

预览功能不经过导出流程，直接在渲染进程中用 iframe 显示，不受选中状态影响。

按标题匹配合并

导入评论时按动画标题匹配，而不是按数组索引。这样即使番剧列表变动，评论也能正确对应。

评论去重

根据昵称去重，避免同一人的评论被重复导入。

自定义配置

字体替换

将 src/fonts/ 目录下的字体文件替换为自定义字体：

字体文件 用途
label.ttf “新番速递”标签
title.ttf 动画标题
footer.ttf 底部版权文字

模板修改

编辑 src/page.ejs 可以自定义页面布局、颜色、样式等。

常见问题

Q: 预览时显示”生成 HTML 失败”？

A: 检查字体文件是否存在，以及视觉图路径是否正确。

Q: 导出图片时提示找不到浏览器？

A: 工具需要 Chrome 或 Edge 浏览器。如果安装了但还提示，可以手动指定浏览器路径。

Q: 导入评论后评论没有合并到对应的动画？

A: 检查导入的 JSON 中的动画标题与本地数据是否完全一致（包括标点符号和空格）。

Q: 如何备份当前工作？

A: 点击”导出评论”保存为 JSON 文件，下次导入即可恢复。

Q: 支持 macOS 吗？

A: 开发环境支持 macOS，但打包目前只测试了 Windows。

获取工具

欢迎 Star、Fork、Issue 和 Pull Request！

🎉 希望这个工具能帮助更多社团轻松制作番剧导视图！