艺术史学者吕澎的学术档案网站

项目概要

2024 年初我处于自由职业阶段，艺术史学者、策展人吕澎委托我为他搭建个人官方网站。从需求梳理、内容建模、界面设计到开发部署由我一人完成，2024 年 1 月开始，3 月上线，此后持续维护至今。

这是一个学术档案型站点，把吕澎数十年的研究成果整理成个人简介、出版物、展览、文献、艺术家个案、教学六个板块，首页另有最新动态。所有内容由客户在 Sanity CMS 中自行维护，不需要我介入。

技术方案

整站基于 Astro，内容存放在 Sanity，所有 GROQ 查询都在构建期执行，产物是纯静态 HTML，运行时不再访问 CMS。客户因此不必承担服务器成本，站点也不会因为 CMS 出问题而不可用。

需要交互的地方才用 React 岛屿：展览轮播用 Swiper，图集灯箱用 yet-another-react-lightbox，列表页的鼠标悬停图片预览是自己写的。图集组件还用 IntersectionObserver 做了二次懒加载，进入视口才动态导入真正的实现，先渲染占位骨架。

内容建模与富文本渲染

客户的内容形态很杂，一个页面里可能同时有正文、图集、时间线、关联出版物和外部链接。我把详情页拆成可组合的区块系统，编辑在 CMS 里自由排列八种区块，前端按类型分发到对应组件，新增内容形态时只加一个分支。

正文用 Portable Text，但学术内容对富文本的要求高于默认能力，我在渲染层做了几处扩展。

• 学术脚注：正文标注与页尾注释区自动编号，可以双向跳转
• 站内引用：CMS 里的文档引用在构建期解析成真实路径，带缓存避免同一引用重复查询
• 自定义标记：加粗、斜体、下划线、站内链接、站外链接各用独立组件渲染，链接按内外自动加不同图标
• 内嵌区块：单图、图集、视频嵌入可以插在正文任意位置

图片处理与部署

客户上传的图片尺寸不受控，构建期统一用 sharp 转成 AVIF、WebP、JPEG 三种格式的响应式 srcset。单张图片转换失败会自动重试，重试仍失败就跳过这一张并记录日志，不让一张坏图中断整个构建。

站点部署在 Cloudflare Workers 的静态资源托管上。另外做了一个不进 sitemap 的内部状态页，显示构建时间、提交号和各类内容的条目数，客户改完内容可以自己确认有没有生效；部署成功或失败会通过 GitHub Actions 发邮件通知。

交付之后的维护

上线后网站一直在运行，我按需继续维护。2025 年下半年做了一轮较大的升级：Astro、Tailwind、React 跟进到当前大版本，重写样式层，补上结构化数据和 SEO，部署从 Cloudflare Pages 迁到 Workers。

工程上做了与规模相称的约束：Sanity 的数据结构在 TypeScript 里有对应类型定义，提交前自动跑 ESLint，分页这类纯逻辑抽成独立函数并写了单元测试。项目不大，我没有铺开完整的测试体系。