唐诗三百首 · 互动全览站

单页互动应用：收录蘅塘退士本《唐诗三百首》全文，用顺序 / 诗人 / 时代 / 地图 / 隐喻 / 考点多条线索共享筛选、交叉串联，并配有 AI 生成的无文字意象图。

面向快速建立「全景印象」——适合复习总览，也适合随手翻阅。

在线访问

GitHub Pages 主页（图文分离、适合网页打开）：

https://weponusa.github.io/tangshi-300/

源码目录：docs/（index.html + imagery/）。

离线单文件

仓库根目录另有全内嵌离线包（一个文件带走）：

• 唐诗三百首.html（约 13MB，数据 + 界面 + 意象图全部打进 HTML）

双击用浏览器打开即可。手机可隔空投送后用 Safari / Chrome 打开。

本地开发

npm install
npm run data          # 生成 / 校验 JSON 数据
npm run dev           # 开发服务器
npm run build         # 产出全内嵌 唐诗三百首.html
npm run build:pages   # 更新 docs/（Pages）并再生成全内嵌包

仅轻量包（图外置到根目录 imagery/）：

EMBED_IMAGERY=0 npm run build

功能概览

线索	说明
考点	L3–L0 分级看板，课标高频与拓展分层
顺序	蘅塘退士本篇次浏览
诗人	作者网络与篇目联动
时代	初唐 / 盛唐 / 中唐 / 晚唐
地图	诗篇相关地点（基于简化唐域底图）
隐喻	月、柳、边塞等母题串联

打开诗篇详情可看正文、背景、考点提示、地点与意象图。

数据

路径	说明
data/raw/300.json	正文底稿，来自 xuchunyang/300
data/overrides/deep.json	课标/高频篇人工深标
data/places.json 等	地点、时代、隐喻等词典
public/data/*	构建产出（npm run data）
public/imagery/*.webp	每首一首意象图（AI 生成，无文字）

意象图说明

• 生成链路：全诗 → 英文场景简述 → 图像模型出图 → WebP 压缩
• 画面刻意避免书法/印章文字；若个别图仍有器物噪点，可用 npm run imagery -- --ids <n> --force 重跑
• 生图需要自行配置 API Key（见 scripts/gen-imagery.mjs），本仓库不包含密钥

考点层级

层级	含义
L3	课标 / 中考高频
L2	常见赏析
L1	拓展了解（轻量）
L0	辑录备查（仍有考点摘要）

技术栈

Vite + React + TypeScript；vite-plugin-singlefile + 自定义打包脚本生成可 file:// 打开的单 HTML。

许可

• 代码： MIT
• 唐诗正文属公有领域；底稿整理致谢 xuchunyang/300
• 意象图为 AI 生成素材，可随本项目一并使用；若商用请自行评估平台与模型条款