博客

和文档使用同一套内容流水线。默认启用并附带测试文章,替换内容后即可发布。

Saavo 模板已经内置博客列表和文章页面,并与文档系统共用 Content Collections 管理内容。博客功能默认启用,可以通过 /blog 展示和访问文章。

如果产品需要博客,替换测试文章,并按照支持的语言添加自己的内容即可。博客采用基于文件的内容管理方式,不依赖独立的 CMS,也没有提供后台可视化编辑器。

已有功能

模板初始化后,博客路由默认已经启用:

功能默认值说明
开关enabled: trueconfig/deploy.ts → content.blog
路由/blog列表,文章为 /blog/:slug
内容目录/content/blog按语言分子目录
草稿状态status: 'draft'列表和 sitemap 不展示,但知道 URL 时仍能访问

启用后会注册以下路由:

/blog
/blog/:slug

博客页面会根据当前语言使用不同的访问路径,默认语言直接使用 /blog,其他语言则使用 /{code}/blog。启用博客功能后,已经发布的文章会自动加入 Sitemap。

模板在 content/blog/en、content/blog/zh-Hans 和 content/blog/zh-Hant 下各提供了一篇 000_test-post.mdx,用于验证列表和详情页。正式发布前应替换或移除这些测试文章。

先体验博客

启动开发服务器后,打开 /blog,应能看到默认语言的测试文章,并进入文章详情页。

切换到简体中文或繁体中文后,也可以检查对应的测试文章。不需要博客时,将 content.blog.enabled 设为 false,重启后 /blog 不再注册。

博客列表

配置博客

配置在 config/deploy.ts:

content: {
    blog: {
        enabled: true,
        baseUrl: '/blog',
        contentDir: '/content/blog',
    },
}

需要博客时:

  1. 保持 enabled: true。
  2. 在 content/blog/{locale}/ 中替换测试文章,增加语言时创建对应目录。
  3. 编写自己的 MDX,并维护对应的 meta.json。
  4. 运行 npm run dev 预览,必要时执行 npm run gen:collections。

frontmatter 与文档类似,常见字段包括 title、description、可选的 date、dateModified、imageUrl、tags、categories 和 author。status 可为 draft、published、archived 或 featured。

当前列表实现只特别处理 draft 和 featured:draft 被过滤,featured 进入精选区,其余状态都会进入普通文章列表。因此,archived 目前不会隐藏文章。需要下线内容时,请移除该文章或修改列表与详情页的过滤逻辑。

文章 URL 只有一段 slug,不支持 /blog/category/post 这种多级路径。排序前缀规则与文档相同,见文档。

不需要博客就关闭该功能,不要为了“以后可能写”而挂一个空列表。

发布和管理文章

博客是内容驱动页面,没有单独的业务 service 需要你在 API 里调用。

运营侧要做的是写 MDX。列表页会跳过 draft,featured 会作为精选展示,并与普通文章分别按 date 倒序排列。产品页面若要链到文章,使用已生成的 /blog/:slug 即可。

不要把产品更新日志硬写进 React 组件里再假装成博客。Changelog 有自己的模块,博客适合相对独立的文章。

上线检查

博客是公开内容,上线前建议至少确认:

  • 不需要博客时,enabled 已设为 false,/blog 不可访问。
  • 需要博客时,每个启用语言都有内容或你能接受缺页。
  • 列表能打开,已发布文章的 slug 可以直达。
  • 草稿不会出现在列表和 sitemap 中,同时没有把草稿 URL 对外公开。
  • 没有误用 archived 隐藏文章,当前实现仍会展示该状态。
  • 文章标题、描述和封面已经换成自己的品牌,而不是占位内容。

修改 enabled 后需要重新构建,因为 collections 在构建时读取配置。

常见问题

接下来

根据接下来要开发的功能,可以继续阅读:

如果暂时没有内容计划,可以先关闭博客。

有文章再打开开关,避免上线后出现空的博客频道。