近期网站折腾记录：父亲的站点、后台整合与 ESA 缓存

距离上次更新又将近了一个半月。

这篇水文就把最近几个相对成型的改动做一次记录：一是给父亲做了一个网站，用于存放他写的文章，顺便激发他的写作热情；二是把本站散落在不同项目里的数据维护和发布动作，逐步收拢到一个新的管理后台里；三是最近才真正把 ESA 边缘加速配置好了。

另外还有一个很小的更新：动态页面的热力图在同一天存在多种动态类型时，用多色扇形来显示，而不是只用一个单色点概括。

给父亲做了一个网站

前段时间给父亲做了一个独立站点并注册备案了 guoan.cc 域名，也是目前我所持有的最短域名了。这个站点的目的很简单：把父亲以前写过、以后还会继续写的文章，以更稳定的方式留存下来。

最终仍然选择了Hugo，静态化带来的稳定性、速度和维护成本都比较符合我的需求。父亲的站点内容形态更纯粹，本质上就是文字和少量图片资源。但麻雀虽小、五脏俱全，仍然为父亲的网站定制了一个后台内容发布系统，可对文章、页面和整站配置进行可视化修改设置。

为了让父亲后续分享和阅读更方便，也定制了一些我认为比较实用的功能。比如文章页提供字体大小调整、打印、复制链接以及海报分享。海报分享这一块前后也迭代了几轮，最后保留了预览图和原图两个下载入口：预览图保持真正的 1x，原图则输出 2x，按钮上也会显示对应文件大小。

目前虽已完成 ICP 备案，但正处于公安备案环节，所以暂未开放评论功能。

本站管理后台重构

本站之前不同功能的数据来源和维护方式比较分散：文章发布、友情链接、动态数据（美食点评、音乐、唱片、影视、运动等）、足迹记录、发布工作流等，都是各自的入口和脚本。

这次的是把它们收拢到一个管理页面中。按模块组织了文章、友链、动态、足迹、发布、工作流和设置等功能，后台则对应统一的管理 API。

文章编辑器这一块变化比较大。最开始我曾经尝试过更重的富文本或 Markdown 编辑器，但后面还是回到了更轻的自建编辑器。

所以现在的文章编辑模块更强调“够用”和“贴近前台”：本地 Markdown 编辑、预览、图片引用、figure / figure-group 等 shortcode 预览，以及移动端不再强行分屏。图片预览也做了懒加载和缓存复用，避免每次翻页或切换预览都重新扫一遍资源。

友情链接、动态和足迹管理也逐步统一了交互方式。比如列表分页、表格横向滚动、移动端隐藏不必要统计信息、足迹地图预览位置调整等，都是在实际使用时逐步完善的。

静态资源迁移到 OSS 后，重新补上 ESA 缓存规则

本站和父亲的站点都是将静态资源托管到了阿里云 OSS，并通过 ESA 做边缘加速。但以前并没觉得这种方式效果有多好。

最近才发现，我这之前是完全不会用……

静态博客的资源类型并不完全一样。HTML 页面、JSON 数据、CSS/JS、图片、搜索索引文件，它们对缓存的要求差别很大。如果只是笼统开启加速，而没有按路径和文件类型配置缓存规则，很多资源可能依然频繁回源，或者该及时更新的内容被缓存太久。

动态热力图的小更新

动态页面之前已经把文章、说说、音乐、唱片、电影、美食、运动等来源聚合到一起，并在页面顶部提供类似日历热力图的展示。但原来的热力点只能表达“这一天有动态”，如果一天里同时有好几种类型，就只能被压缩成一个单色点。

改动后：当同一天存在多种动态类型时，热力点会用 conic-gradient 生成多色扇形，不同扇区代表不同类型。鼠标悬停时，还能看到当天包含哪些动态，以及某类动态出现了几次。

这个功能是在 Codex 额度已经达到上限后，用 MiniMax 模型完成的。实现并不算复杂，但效果还挺直观：同一天的记录不再被一个点抹平，热力图也更像是对生活碎片的一种索引。