博客系统
配置博客发布与付费内容逻辑。当前博客已支持 Pro 分段、Fumadocs 富组件,以及 SSR 优先渲染。
博客模块渲染 content/posts/*.mdx 下的文章,内容由 Content Collections 编译。
相较旧版本,博客现在支持:
- SSR 优先的正文渲染
- 博客页使用 Fumadocs 富组件块
- Markdown GFM 表格语法(
remark-gfm)
快速开始
通过 config.ui.blog.enabled 控制博客路由开关。
// src/config/index.ts
ui: {
blog: { enabled: true },
}配置 i18n 导航菜单文案。
// src/config/index.ts
i18n: {
locales: {
zh: { headerMenuMap: { blog: "博客" } },
en: { headerMenuMap: { blog: "Blog" } },
},
}在 content/posts/*.mdx 中创建或编辑文章。
Frontmatter 字段说明
| 字段 | 必填 | 说明 |
|---|---|---|
title | 是 | 文章标题 |
date | 是 | 发布日期 |
authorName | 是 | 作者展示名 |
tags | 是 | 标签列表 |
published | 是 | 控制是否进入公开列表与 sitemap |
content | 派生字段 | 文章源内容(collection 输入) |
excerpt | 否 | 摘要 |
image | 否 | 封面图 |
authorImage | 否 | 作者头像 |
authorLink | 否 | 作者链接 |
categories | 否 | 分类信息 |
渲染架构
| 层级 | 文件 | 职责 |
|---|---|---|
| 路由页 | src/app/(landing-page)/[locale]/(cms)/blog/[...path]/page.tsx | 加载文章、检查权限、传入 |
| SSR 正文 | src/modules/landing-page/blog/components/PostContent.tsx | 博客正文 SSR 优先渲染 |
富组件支持
博客现已复用 Fumadocs 富组件映射。
组件映射入口:
src/modules/landing-page/blog/components/FumadocsRichMdxComponents.tsx
常用支持块包括:
Callout,CalloutContainerCards,CardTabs,Tab,TabsList,TabsTrigger,TabsContentCodeBlock,CodeBlockTabs,DynamicCodeBlockSteps,StepFiles,Folder,FileAccordions,AccordionBanner,InlineTOC,TypeTable,ImageZoom
Markdown 兼容性
博客编译链路已在 content-collections.ts 中启用 remark-gfm,Markdown 表格可直接渲染为 HTML table。
| 列 A | 列 B |
| --- | --- |
| A1 | B1 |图片规则
- 支持标准 Markdown 图片写法:
ImageZoom支持不写宽高的响应式写法:
<ImageZoom
src="/images/blog/cover.png"
alt="封面图"
className="h-auto w-full"
/>