为什么先搭建页面骨架
第一阶段只处理首页结构,让导航、内容区和页脚拥有稳定的组件边界。文章数据随后接入,不让内容文件承担页面布局职责。
页面组件负责展示,Markdown 文件负责内容。
目录划分
src/app保存路由与页面组合。src/components保存可复用的 UI 组件。src/lib保存文章读取和排序逻辑。content/posts保存 Markdown 与 MDX 文章。
首页如何读取文章
首页组件从文章数据层取得文章摘要,再按发布日期排序:
const posts = getAllPosts().slice(0, 4);
这样新增文章时,只需要在 content/posts 中添加文件。
下一步
后续可以在不修改文章内容的前提下调整列表、正文排版和导航样式。