华粹新学

用新视角读懂中国文化 —— 取其精华，去其糟粕

华粹新学是一个中国传统文化学习网站，将古典文献翻译为白话文，配以国风漫画插画，以现代视角重新审视诸子百家思想。

在线访问： https://huacui.vercel.app/

功能特性

• 原文白话对照：左原文、右白话，左右联动高亮，鼠标悬浮同步关联
• 国风SVG漫画：每篇配有水墨风格的国风漫画插画，辅助理解文意
• 注释弹窗：原文中的生僻字词悬浮即可查看注释
• 阅读模式切换：支持"对照""仅原文""仅白话"三种阅读模式
• 面包屑导航：清晰的层级导航（诸子思想 → 道家 → 庄子 → 篇章）
• 现代视角解读：每篇附精华与糟粕辨析、思考题、延伸阅读
• 组件化架构：header/footer 统一组件化，便于全局更新维护

已完成内容

诸子思想 · 道家 · 《庄子》

分类	篇目	数量
内篇	逍遥游、齐物论、养生主、人间世、德充符、大宗师、应帝王	7 篇
外篇	骈拇、马蹄、胠箧、在宥、天地、天道、天运、刻意、缮性、秋水、至乐、达生、山木、田子方、知北游	15 篇
杂篇	庚桑楚、徐无鬼、则阳、外物、寓言、让王、盗跖、说剑、渔父、列御寇、天下	即将推出

技术栈

• 纯静态 HTML/CSS/JS：无构建依赖，开箱即用
• CSS 变量：全局设计令牌管理，便于主题维护
• 组件注入：通过 common.js 实现客户端 header/footer 组件注入
• 响应式设计：适配桌面与移动端

项目结构

huacuixinxue/
├── index.html              # 诸子思想首页（网站入口）
├── daoism-index.html       # 道家思想介绍页
├── zhuangzi-index.html     # 《庄子》书籍总览页
├── zhuangzi-xiaoyaoyou.html  # 庄子内篇·逍遥游
├── ...                     # 庄子其他篇章
├── assets/
│   ├── common.css          # 全局样式与CSS变量
│   └── common.js           # 组件注入与交互逻辑
└── .gitignore

本地预览

无需安装任何依赖，直接在项目目录下启动一个静态服务器即可：

# 使用 Python
python3 -m http.server 8765

# 或使用 Node.js
npx serve .

然后访问 http://localhost:8765 即可。

部署

本项目部署在 Vercel 上，自动从 GitHub 仓库 main 分支构建部署。

线上地址：https://huacui.vercel.app/

内容规划

• 诸子思想总览页
• 道家思想介绍页
• 《庄子》内篇七篇
• 《庄子》外篇十五篇
• 《庄子》杂篇十一篇
• 儒家经典
• 法家经典
• 兵家经典
• 更多流派...

许可

本项目内容（白话翻译、漫画插画、现代解读）均为原创，供学习交流使用。