Hexo架构+Redefine主题|利用Neodb打造书影音页面

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

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

双视图切换：通过原生 JavaScript 操纵 CSS display 属性（grid 与 flex / none 的切换），实现视图的实时显隐。
防剧透逻辑：在 JS 遍历解析 JSON 数据时，使用正则表达式/字符串判断函数（.includes()）匹配关键字；若匹配成功，使用原生 HTML <details> 与 <summary> 标签将评论包裹后输出。
事件绑定的稳健性：放弃在 HTML 中直接写 onclick 内联事件（防止 Hexo/Markdown 编译器转义代码），改为在 JS 中通过 addEventListener 方式进行监听。
路由监听：在 JS 逻辑外层同时监听 DOMContentLoaded 事件与 PJAX 专有的 pjax:complete 事件，确保页面加载或异步跳转时均能触发渲染逻辑。
时间轴实现：
1. HTML / DOM 结构设计：前端使用 fetch('/neodb_data.json') 获取本地数据后，利用 JS 遍历数组。在拼装 DOM 字符串时，优先将 JSON 里的时间字段解析并填充到 .timeline-date 标签中，接着将可能包含关键字（如 spoiler 或 剧透）的评论包裹进 <details> 展开框内，最后追加到时间轴容器中。
2. CSS 伪元素绘制轴线：利用外层容器 .timeline-container 的相对定位（position: relative），结合 CSS 伪元素 .timeline-container::before 绘制一条绝对定位（position: absolute）、固定宽度（如 2px）的贯穿垂直线，无需额外的 HTML 标签。

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

构建期抓取（Hexo Generator）：放弃了容易受 CORS（跨域）限制的前端抓取，改为在 Hexo 根目录的 scripts/ 下编写 Node.js 插件脚本，利用 Hexo 编译构建（hexo generate 或 hexo server）的过程在服务端/本地执行。
携带 Access Token 的 API 鉴权请求：利用 Node.js 原生的 https 模块，向 NeoDB API 发起 GET 请求。在 HTTP 请求头（Headers）中加入获取到的访问令牌（如 Authorization: Bearer <Your_Token>），获得官方接口的合法访问权限，从而直接调取并解析完整的 JSON 格式书影音数据。

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

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