Hexo架构+Redefine主题|书影音

写在前面

一、 前端实现思路（效果与逻辑）

1. 前端最终呈现的所有效果

• 双视图无刷新切换：页面顶部提供“瀑布流视图”与“动态详情视图”两个切换按钮。点击后，页面在不刷新的情况下，在“封面海报网格”与“详细图文卡片”之间自由切换。
• 瀑布流网格展示：以整齐的网格海报墙展示书影音封面，悬浮时带有轻微的位移悬停动画，适合快速浏览。
• 动态详情卡片：展示条目的完整信息，包括封面、标题（含外部跳转链接）以及用户填写的评论或打分内容。
• 防剧透/敏感内容折叠：自动识别动态评论内容。若评论中包含 spoiler 或 剧透 关键字，会自动将其放入折叠框内，需要用户手动点击展开才能查看，避免被剧透。
• PJAX 单页无刷新兼容：在 Redefine 等使用了 PJAX 路由的主题下，切换页面时动态组件能够自动重新渲染，不会出现页面空白或事件失效的情况。

2. 前端效果的实现方式

• 双视图切换：通过原生 JavaScript 操纵 CSS display 属性（grid 与 flex / none 的切换），实现视图的实时显隐。
• 防剧透逻辑：在 JS 遍历解析 JSON 数据时，使用正则表达式/字符串判断函数（.includes()）匹配关键字；若匹配成功，使用原生 HTML <details> 与 <summary> 标签将评论包裹后输出。
• 事件绑定的稳健性：放弃在 HTML 中直接写 onclick 内联事件（防止 Hexo/Markdown 编译器转义代码），改为在 JS 中通过 document.getElementById().onclick 或 addEventListener 方式进行绑定。
• 路由监听：在 JS 逻辑外层同时监听 DOMContentLoaded 事件与 PJAX 专有的 pjax:complete 事件，确保页面加载或异步跳转时均能触发渲染逻辑。

二、 后端实现思路（抓取与传递）

1. 后端抓取的数据内容

通过后端构建脚本，主要提取了 NeoDB 平台上用户公开的“书影音标记”数据，具体包含：

• 条目标题 (title)：书影音的名称。
• 封面图片 URL (cover)：海报或图书封面的图片链接。
• 详情页链接 (link)：跳转至 NeoDB 对应条目的完整 URL。
• 用户评论/感想 (comment)：用户在 NeoDB 上记录的文字动态（用于前端的剧透过滤与展示）。
• 用户评分与分类 (rating / category)：条目的星级打分以及所属类别（电影/图书/音乐等）。

2. 数据的抓取方式

• 构建期抓取（Hexo Generator）：放弃了容易受 CORS（跨域）限制的前端抓取，改为在 Hexo 根目录的 scripts/ 下编写 Node.js 插件脚本，利用 Hexo 编译构建（hexo generate 或 hexo server）的过程在服务端/本地执行。
• HTTPS 节点请求：利用 Node.js 原生的 https 模块，向 NeoDB 的公开 API 发起 HTTP GET 请求。在请求头中伪造/配置标准 User-Agent 与 Accept: application/json，直接获取原生的 JSON 响应体。

3. 传递数据给前端的方式

• 生成静态 JSON 数据源：后端 Node.js 脚本在抓取并清洗数据后，利用 Hexo 的 hexo.extend.generator.register API，将清洗后的数组对象序列化为 JSON 字符串，并在站点生成的根目录下直接输出一个静态文件 /neodb_data.json。
• 同源 Fetch 调取：前端直接通过同源相对路径 fetch('/neodb_data.json') 请求本地该文件。这种方式完全避免了浏览器的跨域资源共享（CORS）限制、第三方 RSS 代理不稳定以及 API Token 泄露等风险。

三、 其他关键总结要点

1. “防防御性设计”与降级处理：
   • 在后端抓取环节加入了 try...catch 异常捕获。即使 NeoDB 网络超时或接口失效，Hexo 编译也不会卡死报错，而是降级输出空数组或提示信息，保证了整个博客构建流程的稳定性。
2. 前后端架构分离：
   • 该实现方案本质上将“数据获取（Node.js 爬虫/生成器）”与“视图渲染（前端 DOM 节点拼接）”彻底解耦。后端只负责更新 neodb_data.json 文件，前端只负责读取 JSON 并渲染，极大降低了后续样式修改或更换主题时的维护成本。