MuseMVP 文档

博客系统

配置博客发布与付费内容逻辑。当前博客已支持 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, CalloutContainer
  • Cards, Card
  • Tabs, Tab, TabsList, TabsTrigger, TabsContent
  • CodeBlock, CodeBlockTabs, DynamicCodeBlock
  • Steps, Step
  • Files, Folder, File
  • Accordions, Accordion
  • Banner, InlineTOC, TypeTable, ImageZoom

Markdown 兼容性

博客编译链路已在 content-collections.ts 中启用 remark-gfm,Markdown 表格可直接渲染为 HTML table

| 列 A | 列 B |
| --- | --- |
| A1 | B1 |

图片规则

  • 支持标准 Markdown 图片写法:
![封面图](/images/blog/cover.png)
  • ImageZoom 支持不写宽高的响应式写法:
<ImageZoom
  src="/images/blog/cover.png"
  alt="封面图"
  className="h-auto w-full"
/>

相关文档