总结一下我们对话里涉及到的页面加载优化思路：

1. 内容与目录分离

• 正文：统一放在 articles.json，每篇文章用 slug 定位，字段里有 title、date、tags、contentHtml。
• 目录页数据：额外生成一个轻量的 articles_index.json（或带 meta 的 articles_index_with_meta.json），只包含 slug、title、excerpt、date、tags。 👉 好处：
  • 首页/列表页加载更快（不用一次性读取所有正文）。
  • 渲染逻辑更清晰：目录页负责“导航”，正文页负责“阅读”。

2. 首页加载优化

• 首页调用 articles_index_with_meta.json，只展示标题、摘要、日期、标签。
• 点击后跳转到详情页，再去加载正文。
• 避免首页直接加载全部 contentHtml，减小首屏数据体积。

3. 详情页加载逻辑

• 根据路由中的 slug 去 articles.json 查找对应的文章。
• 渲染 title、date、tags、contentHtml。
• contentHtml 已经是预处理好的 HTML，可以直接用 dangerouslySetInnerHTML（React）或 v-html（Vue）输出。

4. 性能和体验提升点

• 减少网络传输：列表页只传输摘要，正文需要时才加载。
• 结构清晰：一份大库（articles.json）存内容，一份目录（articles\_index.json）存索引。
• 前后端解耦：数据格式统一后，前端代码只需按 slug 去查找，无需关心文件来源。