项目复盘
博客主页重构
这篇文章记录 2026 年 8 月 11 日对个人网站的重构。重构的目标，是把原来以文章列表为中心的 Jekyll Chirpy 博客，改成一个更适合展示个人经历、项目、课程、笔记、博客和简历的主页。
The full English text is not available yet
This article is currently using its Chinese source. Add a matching file under content_en/writing/posts/ to enable the English version.
博客主页重构
这篇文章记录 2026 年 8 月 11 日对个人网站的重构。重构的目标，是把原来以文章列表为中心的 Jekyll Chirpy 博客，改成一个更适合展示个人经历、项目、课程、笔记、博客和简历的主页。
这次改动主要分成四部分：技术基础、内容结构、界面设计、内容维护与发布。
一、技术基础
1. Next.js
Next.js 是一个基于 React 的网站开发框架。
React 更像是用来编写页面组件的工具，例如“项目卡片”“导航栏”“文章目录”。Next.js 在 React 之上继续提供了页面路由、构建、静态生成和部署相关能力，让这些组件可以组织成一个完整的网站。
这次使用 Next.js，主要是为了把主页、项目页、课程页、博客页和简历页拆成清晰的独立路由。例如：
/projects
/courses
/writing
/writing/archive
/cv
博客文章也可以根据 Markdown 文件自动生成独立页面。
2. Tailwind CSS
Tailwind CSS 是一个用于编写网页样式的工具。它把常见的字体、间距、颜色、边框、布局和响应式规则整理成可以直接组合的样式类。
这次主要用它处理以下内容：
- 桌面端和手机端的布局变化
- 左侧资料栏和右侧内容区的宽度
- 折叠侧栏后的阅读宽度
- 深色模式
- 卡片、按钮、标签和文章排版
它的作用不是自动决定页面应该长什么样，而是降低调整样式的成本。
3. PRISM
PRISM 是一个用于创建个人主页和研究主页的模板系统。它提供了基础的页面结构、内容读取方式、双语切换、论文和项目展示等能力。
这次并不是直接使用 PRISM 的默认样式，而是在它的基础上进行了改造：保留 Next.js、Tailwind 和静态内容管理方式，重新设计主页结构、个人信息栏、博客布局、归档页和页面宽度。
4. 静态导出
这个网站不需要登录、数据库或实时接口。文章、项目和简历内容在构建时就可以生成 HTML 文件，这种方式叫静态导出。
静态导出之后，网站可以直接部署到 GitHub Pages。访问者打开网页时，服务器不需要临时计算页面，部署结构比较简单，也方便通过 Git 保存每次修改。
二、内容结构：从博客列表变成个人主页
1. 原来的问题
原网站是 Jekyll Chirpy 博客，核心内容是文章。它适合记录学习笔记，但不适合完整展示个人项目、研究方向和求职信息。
如果只把文章放在首页，网站主要表达的是“最近写了什么”，而不是“我是谁、做过什么、正在关注什么”。
因此，这次首先调整了信息结构，而不是先调整颜色和字体。
2. 现在的页面划分
首页 About / Now
项目 Projects
课程 Courses
笔记 Notes
博客 Writing
简历 CV
首页只保留 About 和 Now。About 介绍个人背景、研究兴趣和工程方向；Now 记录最近正在进行的事情。
其他内容独立成页面，避免首页塞入过多信息。项目页展示项目经历，课程页组织课程资源，博客页管理文章，简历页提供正式经历。
3. 内容和页面分开
当前主要内容放在以下目录：
content/
├── config.toml
├── projects.toml
├── courses.toml
├── cv.md
└── writing/
└── posts/
TOML 文件主要保存结构化内容，例如项目、课程和导航；Markdown 文件主要保存 About、简历和博客正文。
这样做的好处是，修改文字时不需要修改 React 组件，调整页面布局时也不需要把内容重新写一遍。
博客文章使用日期和 slug 命名，例如：
content/writing/posts/2026-08-11-rebuilding-personal-homepage-with-prism.md
网站会自动读取文章、按照日期排序，并生成文章详情页和归档页。
三、界面设计：固定资料栏和独立内容区
这次界面设计的核心是“左侧保持身份信息，右侧专注当前内容”。
桌面端左侧栏包含头像、姓名、职位、学校、邮箱、GitHub、研究兴趣和页面导航。右侧是当前页面的内容区域。
左侧栏使用 sticky 定位，页面滚动时保持在视口附近。这样阅读项目或博客时，个人信息和导航不会完全消失。
侧栏也支持折叠。折叠后只保留一个小的控制入口，右侧内容不会直接拉满整个屏幕，而是保留一个适合阅读的最大宽度。这样可以避免文章段落过长，也让博客、项目、简历页面保持相近的左右边界。
顶部栏则尽量保持简单，只保留站点名、语言切换和主题切换。原来的主要页面导航移动到了左侧资料栏下方，减少顶部区域的干扰。
手机端不使用桌面双栏，而是保留顶部折叠菜单。这样同一套内容可以适应不同屏幕尺寸。
四、内容维护与发布：新站和旧博客如何共存
1. 分支安排
现在有两个主要版本：
main 旧 Chirpy 博客，作为稳定版本
codex/prism-portfolio 新 PRISM 主页，作为开发版本
旧博客没有直接删除。旧文章保存在 content/legacy-posts/ 中，Git 历史里也保留原网站的版本。这样新主页继续调整时，旧网站仍然可以作为备份和参考。
在 PRISM 完成确认之前，不直接修改或合并 main。等页面、内容、链接和部署都检查完成，再把 PRISM 合并到 main。
2. 博客文章的写作方式
以后写博客时，只需要在 content/writing/posts/ 下维护 Markdown 文件。当前已经准备了一个最简模板：
---
title: "文章标题"
date: YYYY-MM-DD 12:00:00 +0800
categories: []
tags: []
---
# 文章标题
<!-- 正文写在这里。 -->
文章正文由我自己完成，模板只负责保证标题、日期、分类、标签和文件命名格式一致。写完之后运行构建检查，再提交并 push 到当前 Codex 分支。
3. 这次重构暂时没有处理的内容
课程页面和笔记页面暂时保留现有结构，后续再继续整理。旧博客文章也没有逐篇全部迁移到新文章页。英文博客正文需要根据文章内容逐步补充，而不是先批量生成。
小结
这次重构的重点不是把博客换成一个新模板，而是重新建立一个适合长期维护的个人网站结构：
内容文件 → 页面组件 → 静态构建 → GitHub Pages
技术上，从 Jekyll Chirpy 迁移到了 Next.js、Tailwind CSS 和 PRISM；内容上，从单一博客扩展成 About、Projects、Courses、Notes、Writing 和 CV；维护上，保留旧博客，并用 Codex 分支承载新主页的持续开发。
这套结构先解决网站主页的基础问题，之后再继续完善课程资源、笔记系统和博客内容。