一、关于我
大家好，我是这个作品的创作者，一名研究生。
我完全不会写代码。这个网站的想法在我脑子里躺了很久——小时候读课文，每次看到一个陌生的词汇，求知欲就翻涌而出。“这个作者是谁？，为什么这么厉害”“这个事情真的发生过吗？发生的背景是什么”，小时候的我百思不得解，好奇心逐渐被时间淡化。长大后读微信公众号、图文，看抖音里各种的科普视频，同样陌生的词汇让我潜藏的好奇心再度燃起。前一阵子开始使用agent让我对自己去做一个小工具去帮助小时候的自己有了一定的信心，而TRAE的创造力大赛让我真正有了把它做出来的勇气和信念。
初赛我用 TRAE 做出了基础的 Demo。复赛阶段，我把它从“能看的 Demo”打磨成了“能真正用起来的完整产品”：内容补齐到覆盖一至六年级全量教材，新增了卡片复习、AI问答、随堂小测、阅读足迹、知识图谱等一整套学习工具。这件事让我相信：不会写代码的人，只要有好工具，也能把想法变成真正有用的产品。
本次参赛，我想证明一件事——借助 AI 工具，一个不懂代码的研究生，也能从零做出一个内容完整、功能可用的教育产品。
二、产品简介
是什么
「课文背后的故事」是一个面向小学生的语文课文背景知识网站。它不转载教材原文，而是为每一篇课文配上原创导读、历史背景、作者故事、有趣冷知识和思考题，帮孩子把课文读得更有兴趣。
产品形态：Web 网站（Astro 静态站点 + Cloudflare Pages 部署，支持 PWA 离线安装）。
面向谁
• 小学生：课前预习、课后拓展
• 家长：亲子共读时的背景知识参考
• 语文老师：备课时的课外素材补充
完整功能清单
相比初赛 Demo 的升级
初赛阶段仅有约400多篇课文和基础浏览功能。复赛版本完成了以下升级：
• 内容与插画：补齐一至六年级全量教材，为全部课文配齐2张原创手绘水彩插图
• 学习工具：新增卡片复习（Leitner系统）、随堂小测（AI生成6种题型）、知识图谱、时间轴、课文对比
• AI功能：新增AI问答助手“小文”（Cloudflare Functions + 大模型API）
• 阅读追踪：新增阅读足迹系统，含进度追踪、成就徽章、阅读等级、每周报告
• TTS朗读：新增课文语音朗读，优化自然度与停顿节奏
• 教材目录：新增出版社二级目录，按“出版社→年级分册→单元”分层展示，为后续扩展其他出版社教材预留
• 体验打磨：修复XSS漏洞、CORS安全加固、拼音切换优化、进度条修复、柔和音效系统等数十项体验改进
• 部署升级：从 GitHub Pages 迁移到 Cloudflare Pages，支持 Functions 后端与 PWA 离线安装
三、产品演示视频/图文
视频已上传至B站，时长约5分钟，完整展示了从首页浏览、课文阅读、AI问答、卡片复习到阅读足迹的核心流程。
图文演示：
首页
课文库-书架视图
课文库-单元视图
知识图谱
卡片复习
阅读足迹
课文正文内容
AI助手小文
AI智能出题
四、产品创作历程
灵感来源
这个项目的起点很简单：读课文时，我注意到在孩子这课文只是“入口”——孩子真正好奇的是课文背后的人和事。《草船借箭》里诸葛亮为什么能借到箭？《圆明园的毁灭》里那些文物后来去哪了？这些问题课文不会展开讲，但恰恰是激发阅读兴趣的关键。
课文背后的世界很大，但这些信息散落在百科、教辅和家长的零碎讲解里，没有一个地方把它们整理成孩子能读懂的样子。
从想法到 Demo
初赛阶段，我用 TRAE 把这个想法变成了一个能跑的 Demo——基础的内容浏览、搜索和筛选功能。这个 Demo 证明了一件事：用AI辅助，一个不懂代码的人也可以做出一个真正能用的教育产品。
从 Demo 到完整作品
复赛阶段，目标从“证明想法成立”变成“做出一个真正能被使用的完整产品”。核心升级方向有三个：
第一，内容要全。要做到覆盖一至六年级全量教材。这意味着要处理469篇课文的内容结构、生字词提取、插画配图、教材目录映射。这个过程让我深刻体会到：内容产品的壁垒不在技术，而在内容的系统化和可持续维护。
第二，功能要闭环。初赛只有“读”的功能，复赛要让孩子能学、能练、能追踪。所以我加入了卡片复习（间隔重复记忆法）、随堂小测（AI生成题目）、阅读足迹（进度追踪和成就系统），让“读课文”变成一个有反馈的学习循环。
第三，体验要稳。初赛允许有小瑕疵，复赛必须经得起评审反复操作。这个阶段我花了大量时间修复安全漏洞（XSS、CORS加固）、优化交互细节（拼音切换、进度条遮挡、音效系统）、重构数据结构（教材目录出版社分级、时间轴分类调整）。
关键技术决策
• 选Astro而非React/Vue：课文内容以Markdown为主，Astro的Content Collections天然适合内容驱动型站点，构建产物是纯HTML/CSS/JS，性能极佳。
• Cloudflare Pages部署：免备案、免费额度充足、Functions支持AI API端点。
• Web Audio合成音效：不引入外部音频文件，用代码合成柔和的答对/答错/翻面音效，保持项目轻量。
• Leitner间隔复习：卡片复习采用经典的5盒子间隔重复算法，比简单随机复习更科学。
五、TRAE 实践过程
整个项目完全使用 TRAE IDE 开发。以下是关键开发步骤：
1. 项目初始化与架构搭建
使用TRAE创建 Astro 项目，并使用自带skills，搭建基础页面。
Session ID：
476555669672928:5cbf65923d01892e47d4a88414369c32_6a35f07ff2e0fd4580739d0c.6a3a3c02eeb94d89d5d4b897.6a3a3c01eeb94d89d5d4b895:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/6/23 15:55:46)
2. 课文内容批量生成与结构化
使用 TRAE 的 AI 能力批量生成课文背景故事内容，包括原创导读、背景故事、连珠小故事、冷知识等。每篇课文通过 Markdown frontmatter 定义结构化字段（年级、主题、作者、时代、生字词等），由 Astro schema 校验保证一致性。
Session ID：
476555669672928:e269eb8aed7ad420b0d86b1c3b19d0d7_6a35f07ff2e0fd4580739d0c.6a3ced10a8450961888bd663.6a3ced10a8450961888bd661:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/6/25 16:55:44)
3. 学习工具功能开发
在 TRAE IDE 中开发各个功能模块：卡片复习系统（Leitner算法）、知识图谱可视化、时间轴、AI问答接口、TTS朗读等。利用 TRAE 的多文件编辑和智能补全能力高效完成前后端开发。
Session ID：
476555669672928:0a70c858af2dbee05554e221075da8e0_6a65a6f3448ee1d934166e3c.6a6af9705546c0b58906f78b.6a6af96f5546c0b58906f788:TraeWork CN.0.1.45.no_sid.no_ppe.T(2026/7/30 15:12:48)
4. 安全加固与体验优化
使用 TRAE 进行代码审查，修复XSS漏洞、CORS配置、输入验证等安全问题，优化拼音切换、进度条、音效等交互细节。
Session ID：
476555669672928:26e3ccd5ac0a33e361e1cd2662d4d22e_6a65a6f3448ee1d934166e3c.6a6ffad15e08afd2f7324107.6a6ffad15e08afd2f7324105:TraeWork CN.0.1.45.no_sid.no_ppe.T(2026/8/3 10:20:01)
Session ID：
476555669672928:7304b5c9eb391956517787dcfe171fe2_6a70041a5e08afd2f73242cf.6a70069d5e08afd2f732441d.6a70069d5e08afd2f732441c:TraeWork CN.0.1.45.no_sid.no_ppe.T(2026/8/3 11:10:21)
技术栈
• 框架：Astro 5（静态站点生成，667个页面全量预渲染）
• 内容：Astro Content Collections + Markdown + Schema校验
• 部署：Cloudflare Pages + Functions
• AI：Cloudflare Functions + 大模型API（OpenAI兼容协议）
• PWA：可安装、离线可访问
• SEO：JSON-LD结构化数据、Sitemap、RSS、Open Graph
网站体验地址
后续规划
• 增加更多出版社教材（苏教版、北师大版等）
• 开发亲子共读模式
• 增加老师备课卡片
• 探索错题式自适应小测
如果你是家长或老师，欢迎在评论区交流你觉得课文还可以怎么拓展。这个项目会持续更新，每一篇课文背后的故事都值得被讲出来。