博客新增「Movies」页面
▲ 新的 Movies 页面（日间和夜间模式）
逛博客经常能刷到其他博友把自己的观影记录写成页面，作为博客内的独立项目存在。今天闲来无事，也想着写一套属于自己的。
列一下我看到后想要参考的案例：
- 书影音游（via 1900.live）
- NeoDB 书影音（via anotherdayu.com）
- Media Consumption（via pseudoyu.com）
可能还有其他的，但是已经记不起来，索性也不去深究。毕竟这种东西，还是要根据自己博客站内的特点去实现的。
针对 Bear Blog 的架构特性，我根据 1900 在 《Ghost博客实现豆瓣观影清单》 一文中介绍的 Douban sync for GitHub Actions 项目进行了实践。
🫘 第一步：同步豆瓣数据（GitHub Actions）
首先需要在 GitHub 创建一个仓库，用于存放豆瓣观影记录的个人数据。参考 Douban sync for GitHub Actions 这个项目的文档，在 .github/workflows 下创建同步任务，确保输出格式包含 JSON。设置每日定时任务之后，就能获得一份自己名下的豆瓣观影记录文件 movie.json。
🐻 第二步：在 Bear Blog 配置全局框架
由于 Bear Blog 主要支持静态页面，所以需要重样式渲染、轻数据逻辑。在全局的 Setting 中分别处理 Header 和 Footer。Header 主要用于定下 Movies 页面的框架样式，Footer 则用于编写脚本读取 JSON 并动态生成 HTML。
此方案完全使用原生 JS，不依赖任何第三方库，符合 Bear Blog 的轻量化理念。
🖼 第三步：创建挂载页面
最后一步只需要像写博文一样，在后台创建一个页面，并在页面正文中插入一个用于挂载电影列表的 div 容器即可。
🔩 第四步：细节的修补与调优
其实第四步才是最花时间的。有很多异常流需要在这一步发现并且调优：
- GitHub Actions 写入权限报错：最初执行脚本时出现了
403 Permission denied。这是因为 GitHub 默认禁止脚本修改仓库内容。解决方法是在仓库设置中手动开启了Workflow permissions的Read and write permissions。 - GitHub Raw 链接失效：直接引用 GitHub 的原始文件链接在境内访问极不稳定，导致页面经常无法加载。后来改用
jsDelivr作为 CDN 加速节点，确保了JSON数据能够稳定且快速地被浏览器读取。 - JSON 嵌套层级深：在 JavaScript 中加入了逻辑，自动识别并提取嵌套在
subject里的信息，并对不同格式的评分进行强制转换。 - 豆瓣图片拦截：在
Header中注入了核心指令<meta name="referrer" content="no-referrer">，让浏览器隐身请求，彻底绕过防盗链。 - 加载速度与视觉缓冲：移除了原生懒加载，改用 CSS 的
opacity渐变动画，配合海报框的背景色，实现了图片从灰色占位到平滑淡入的过渡。 - 全局样式干扰：通过 CSS 选择器优先级
!important强制取消了默认背景，并设计了轻量级的translateY向上浮动交互效果。 - 对齐错位：利用 CSS 的
min-height属性为标题固定了「两行高度」的展示空间，确保了整齐划一的网格视觉。 - 坏图容错：在图片层下方预埋了文字占位符，并通过
onerror脚本在图裂时自动切换显示，保证了页面的完整感。
至此，完成。