网站开发日志 - 支持系列文章和分类导航
🎯 重构目标
之前的博客结构比较简单,所有文章都放在 posts 文件夹下,虽然有标签系统,但缺乏清晰的内容分类。随着内容的增加,我决定重新设计网站结构,主要目标是:
- 支持系列文章:将相关文章组织成系列,方便读者系统性学习
- 清晰的内容分类:技术文章、生活随笔、建站日记等内容分开管理
- 保持简洁性:避免过度复杂的分类,保持网站结构清晰易懂
- 更好的用户体验:通过导航菜单提供清晰的内容入口
📁 新的文件夹结构
原有结构
text
docs/
├── index.md
├── pages/about.md
└── posts/
├── 位运算.md
├── 操作系统调度的机制.md
└── 我的第一篇博客.md重构后结构
text
docs/
├── index.md # 首页
├── pages/ # 单页面
│ └── about.md # 关于我
├── posts/ # 技术文章(保持原有结构)
│ ├── index.md # 文章列表页面
│ ├── 位运算.md # 具体文章
│ ├── 操作系统调度的机制.md # 具体文章
│ └── 我的第一篇博客.md # 具体文章
├── series/ # 系列文章
│ └── index.md # 系列文章总览
├── life/ # 生活随笔
│ └── index.md
├── building/ # 建站日志
│ ├── index.md
│ └── 网站结构重构.md # 本文
└── public/ # 静态资源
└── robots.txt🧭 导航结构设计
顶级导航
text
首页 | 随便写写 | 系列 | 生活 | 建站日记 | 关于我当前实现的导航菜单
系列菜单:
- 系列文章(总览)
💡 设计亮点
1. 目录 index.md 支持
利用 VitePress 对 index.md 的默认支持,每个分类都有自己的首页:
/posts/→/posts/index.md/series/→/series/index.md/life/→/life/index.md/building/→/building/index.md
2. 系列文章管理
专门的 series 目录用于管理成体系的文章:
- 每个系列有完整的学习路径
- 支持章节编号和顺序阅读
- 便于读者系统性学习
3. 内容分类清晰
- 随便写写:技术文章和随笔的集合
- 系列文章:成体系的学习内容
- 生活分类:生活随笔和感悟
- 建站日记:网站建设和技术记录
4. 可扩展性
- 新增内容分类:直接新建文件夹和对应的 index.md
- 新增系列:在
series下新建文件夹 - 导航配置集中在
config.mts中
🔧 技术实现
导航配置
typescript
nav: [
{ text: '首页', link: '/' },
{ text: '随便写写', link: '/posts/' },
{
text: '系列',
items: [
{ text: '系列文章', link: '/series/' },
]
},
{ text: '生活', link: '/life/' },
{ text: '建站日记', link: '/building/' },
{ text: '关于我', link: '/pages/about' }
]📝 总结:这次重构采用了简洁实用的方案,既保持了原有的简单结构,又为博客的发展提供了清晰的分类框架。通过合理的目录划分和导航设计,为不同类型的内容提供了专门的展示空间,为博客的持续发展奠定了良好基础。