古诗词网站不缺。缺的是一种让人愿意停下来看的方式。
原文、注释、译文当然重要,但如果页面只剩整齐排列的字,诗里的月色、孤舟、长安与河洲很容易再次变成需要完成的阅读任务。
所以我做了「诗词图集」。
把唐诗、宋词与《诗经》放进同一套视觉档案,用电影感画面重新打开诗句里的时空。
https://shici.ryderlab.work/
三部经典放在一起
现在站里有 373 首唐诗、441 阙宋词和《诗经》305 篇,共 1,119 篇作品、1,406 帧电影感画面。
它最早只是《唐诗三百首》的配图计划。做完第一批之后,我发现真正值得保留的不是某一套选本,而是那条跨越两千年的线:从周初歌谣,到盛唐山水与边塞,再到两宋的酒席、风雨和寒灯。
于是项目从「唐诗三百图集」扩成了今天的「诗词图集」。三部分共用一套阅读体验,但各自保留不同的视觉基调。
不是给每首诗套一张图
每篇作品会先拆解意象、时空、人物、情绪和叙事重心,再决定需要一帧还是多帧。
唐诗偏向开阔的山水和盛唐空间,宋词区分婉约与豪放,《诗经》则约束在先秦农耕、礼乐与服饰语境里。每帧画面还要经过筛选、编辑和校色。它不是诗意的标准答案,只是进入文字的另一扇门。
除了图像,站内还提供目录、诗人与词牌浏览、拼音搜索、阅读历史、注释译文、赏析、朗读、主题音乐和分享海报。每一篇都有独立链接,可以直接搜索和分享。
静态站也能承载一千多篇内容
整个站使用 Next.js 15 App Router、React 19 和 TypeScript 构建。作品与图片计划都保存在版本控制内的 JSON 数据中,构建时合并并生成静态页面。
图片不进入 Vercel 构建产物。原图经过 Sharp 预处理成 AVIF / WebP 的三档尺寸,再上传到 Cloudflare R2,通过自定义 CDN 域名交付。这样一千多张画面不会拖慢部署,浏览器也只加载当前屏幕需要的规格。
每篇作品都有独立 metadata、sitemap、JSON-LD 和动态 OG 图。页面本身以 SSG 为主,没有用户系统,也不依赖运行时数据库。内容变更后重新构建即可上线。
最费时间的是一致性
做好一张图不难。让一千多张图放在一起仍然像同一个项目,才是长期工作。
图片计划记录每一帧的状态、资产路径和场景方向;上传脚本用 HEAD 请求跳过已有对象;slug 和拼音索引在数据变化时重新生成。视觉、内容和资源管线各自有明确的事实来源,项目才能在持续扩充时不失控。
这个项目仍会继续补充校勘、声音和视觉细节,但主体已经可以完整浏览。
直接访问诗词图集。欢迎告诉我哪一帧让你重新读了一遍那首诗。