第 10 章
多页面网站：不止一个页面
你的个人主页只有一页。这一章教你怎么做出有多个页面的完整网站——主页、博客、项目展示，页面之间互相跳转。
单页面 vs 多页面
你现在只有一个 个人主页.html。多页面就是有多个 .html 文件，通过链接互相跳转。
多页面网站结构
🏠 index.html
主页 / 个人介绍
↔
📝 blog.html
博客文章列表
↔
📂 projects.html
项目展示
↔
📬 about.html
关于我
每个页面是独立的 .html 文件，通过导航栏的链接互相跳转。
怎么让 WorkBuddy 帮你做
分步来，不要一次要太多：
第一步：设计导航栏
基于我现有的个人主页代码，在页面顶部加一个导航栏。
导航栏包含四个链接：首页 | 博客 | 项目 | 关于
点击每个链接跳转到对应的页面（blog.html, projects.html, about.html，这些页面稍后创建）。
导航栏风格跟主页统一，简洁干净。第二步：创建子页面
帮我创建一个"博客"页面（blog.html）。要求：
- 顶部有同样的导航栏
- 页面内容：一个文章列表，包含 3 篇示例文章（标题+日期+简短摘要）
- 风格跟主页统一
- 代码写在一个独立的 HTML 文件里第三步：重复创建其他页面
用同样的方式创建 projects.html 和 about.html。
文件结构长什么样
📁 my-website/
├── index.html ← 主页
├── blog.html ← 博客
├── projects.html ← 项目展示
└── about.html ← 关于我
全部放在同一个文件夹里，这样链接就能互相找到。
🔗 链接是怎么工作的
在 HTML 里，<a href="blog.html">博客</a> 这个标签就是跳转链接。
href="blog.html" 的意思是"跳转到同级目录下的 blog.html 文件"。你不用记这些——WorkBuddy 会帮你写。你只需要告诉它"导航栏里加一个跳转到 blog.html 的链接"。
部署多页面网站
跟第 9 章一样，只不过这次上传整个文件夹（所有 .html 文件），而不仅仅是一个 index.html。
本章小结
| 要点 | 说明 |
|---|---|
| 多页面原理 | 多个 .html 文件，通过链接互相跳转 |
| 做法 | 先加导航栏 → 逐个创建子页面 → 保证每页都有导航栏 |
| 文件结构 | 所有 .html 放同一个文件夹 |
| 部署 | 整个文件夹上传到 GitHub Pages 或 Vercel |