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

发表于 2025-06-05 更新于 2026-09-21 分类于插件工具阅读次数：

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

背景

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

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

这个过程重复且耗时。尤其当社团有十几个人都要发表评论时，手动整合评论与制作图片的工作量非常可观。此外，成员分散在不同设备上，如何统一收集评论、保证数据格式一致，也是一大难题。

于是就有了这套工具，将整个流程自动化。

方案概览

整套方案由两个项目协作完成，分别承担评论收集与图片生成两部分工作：

项目	形态	职责
Web 端评论收集工具	网页应用（前后端分离）	成员在线填写评论，导出 JSON
桌面端图片生成工具	Electron 桌面应用	整合评论，批量生成导视图片

二者通过统一格式的 JSON 文件交换数据，形成如下协作流程：

[社团成员] Web 端填写评论
       │
       ▼
    导出 JSON ──┐
                │
[负责人] 收集全部 JSON
       │
       ▼
   桌面端导入合并
       │
       ▼
   导出导视图片

Web 端解决「多人分散录入」的问题，桌面端解决「整合与出图」的问题。二者导出的 JSON 结构完全一致，可双向流通。

Web 端评论收集工具

定位

Web 端供社团成员在线填写评论，部署于服务器，成员通过浏览器访问即可使用，无需安装任何软件。

技术架构

前端：原生 HTML / CSS / JavaScript，纯静态页面
后端：Node.js + Express，提供番剧抓取与预览渲染接口
部署：可前后端分离部署至云服务器（推荐），亦支持 Vercel 托管

成员操作流程

打开 Web 端页面，输入季度代码（如 202607），点击「从 yuc.wiki 抓取」。
工具自动抓取当季全部动画信息（中文标题、日文标题、类型、播出时间、标签、视觉图等）。
在「默认信息」栏填写昵称与 QQ 号，系统自动获取对应头像。
在目标动画下点击「添加评论」或「添加[昵称]的评论」，填写评论内容并选择奖牌。
点击「预览」查看效果。
完成后点击「导出评论」，保存 JSON 文件发送给负责人。

主要特性

从 yuc.wiki 实时抓取指定季度番剧列表
输入 QQ 号自动获取头像
支持金牌、银牌、黑牌三种奖牌标记
编辑内容自动保存至浏览器本地存储
响应式布局，兼容桌面端与移动端

桌面端图片生成工具

定位

桌面端由负责人使用，负责整合所有成员提交的评论数据，并批量渲染导出导视图片。

技术架构

框架：Electron
模板引擎：EJS
截图工具：Puppeteer
网页解析：Cheerio
HTTP 请求：Axios

负责人操作流程

收集全部成员提交的 JSON 文件。
打开桌面端工具，抓取同一季度的番剧列表。
逐一点击「导入评论」，选择「合并」模式。
工具按动画标题自动匹配，将各成员的评论合并到对应动画下，并按昵称去重。
为每部动画选定视觉图。
点击「导出图片」，选择输出目录，工具自动生成全部选中动画的导视图。

主要特性

从 yuc.wiki 抓取番剧列表，支持批量手动添加
输入 QQ 号自动获取头像
评论中可插入图片，预览与导出时自动嵌入
实时预览渲染效果（iframe 内嵌展示）
一键批量导出全部选中番剧的导视图片
导入评论支持按标题合并或整体替换

界面详解（桌面端）

主界面布局

界面分为左右两栏：

左侧：编辑区，展示番剧列表与评论编辑器
右侧：预览区，点击「预览」后实时显示渲染效果
底部：日志区，输出处理过程中的日志，高度可拖拽调整

工具栏

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

默认评论者设置

在番剧列表上方设有「默认信息」栏，可设置：

昵称：填写后，点击「添加[昵称]的评论」将自动填充
QQ 号：填写后自动获取头像

该功能适用于为多个动画添加同一人的评论。

动画卡片

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

复选框：控制是否导出该动画的图片
标题编辑：中文标题与日文标题均可直接编辑
类型与标签：自动抓取的动画类型与标签
制作人员与声优：自动抓取的信息
播出信息：播出时间与平台
视觉图：可替换为本地图片或网络图片
评论区：管理该动画的全部评论

评论编辑器

每条评论包含：

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

奖牌样式：

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

预览区

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

实际使用案例

场景一：单机使用

仅一人完成全部工作：

打开桌面端工具，抓取番剧列表
逐一添加每位社团成员的评论
选择视觉图
导出图片

场景二：多人协作

适合社团多人参与：

负责人在群内发布通知与 Web 端地址：「请在网页中填写评论，导出 JSON 文件发给我」
每位成员按 Web 端流程操作，导出各自的 JSON 文件
负责人在桌面端逐个导入并合并
统一选择视觉图，导出图片
发布导视图到社团群

技术实现

技术栈

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

核心设计

收集与出图分离

Web 端只负责评论录入与数据导出，桌面端只负责整合与图片生成。两端通过 JSON 交换数据，职责清晰，互不干扰。

预览与导出分离

预览功能不经导出流程，直接在渲染进程中以 iframe 展示，不受选中状态影响，便于快速核对。

按标题匹配合并

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

评论去重

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

移动端整体缩放

Web 端预览采用固定设计宽度渲染，再按容器宽度等比缩放，保证在移动端查看时布局比例不失真。

自定义配置

字体替换（桌面端）

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

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

模板修改（桌面端）

编辑 src/page.ejs 可自定义页面布局、颜色与样式。当前设计宽度为 800px。

常见问题

Q: 抓取番剧列表失败如何处理？

依次检查季度代码是否正确、服务器能否访问 yuc.wiki、后端服务是否已启动。若问题持续，可改用「添加动画」手动录入。

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

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

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

桌面端工具依赖 Chrome 或 Edge 浏览器。若已安装但仍提示，可在 src/screenshot-html.js 的 BROWSER_PATHS 中手动指定浏览器路径。

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

合并依据动画标题进行匹配，请检查导入 JSON 中的标题与本地数据是否完全一致（包括标点符号与空格）。

Q: 评论数据会丢失吗？

Web 端数据保存在浏览器本地存储，桌面端不持久化存储。建议定期通过「导出评论」备份为 JSON 文件。

Q: 支持 macOS 吗？

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

获取工具

桌面端仓库：lizard0126/anime-preview-tool
作者邮箱：825456471@qq.com

欢迎 Star、Fork、Issue 和 Pull Request！

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