发布于 2026年2月06日
MuseMVP 博客内容块
这是一篇 MuseMVP 博客内容块的实战说明文，逐块介绍每种内容块适合写什么、什么时候用，以及建议承载什么样的文案。
这篇文章不是品牌故事，而是一篇 MuseMVP 博客内容块的实时示例页。
下面每一节都会对应一种内容块，分别说明它适合承载什么内容、在什么场景下最好用，以及示例文案应该怎么写才更自然。
这篇文章怎么用
你可以把它当作写作说明，也可以把里面的块级结构直接复制到自己的博客文章里，再替换成你的主题内容。
推荐写法
正文大部分内容仍然建议先用普通 Markdown 写清楚，只有在需要强调、对比、导航或结构化表达时，再补充更强的内容块。
基础 Markdown 内容块
普通 Markdown 仍然是博客正文的默认层。连续叙事、背景说明、观点展开，这些内容最适合先用段落完成，而不是一开始就堆很多视觉块。
- 无序列表适合放结论摘要和短清单。
- 有序列表适合放步骤和顺序动作。
- 链接是跳转到相关页面最轻量的方式。
引用块适合承载一句原则、一条判断，或者一句值得被读者单独记住的话。
| 内容形态 | 默认推荐写法 | 典型场景 |
|---|---|---|
| 连续说明 | 段落 | 背景、原因、判断过程 |
| 短清单 | 列表 | 发布前检查、注意事项 |
| 小型对比 | 表格 | 套餐差异、方案比较、摘要汇总 |
如果你要看博客路由、frontmatter 和发布逻辑，可以直接看 博客配置文档。
Callout 高亮块
Callout 和 CalloutContainer 适合承载那些需要比普通正文更醒目的信息，比如提醒、警告、术语解释、关键结论、迁移说明或强建议。
适合放什么
当你想让读者在快速扫读时也能立刻看到某个重点，可以用简洁版 Callout。
不适合怎么用
不要把每一段都做成高亮块。高亮太多，读者反而抓不住真正重要的那一句。
什么时候用组合式更好
如果标题和正文需要分开控制，比如版本提示、上线说明、迁移建议，就更适合用 CalloutContainer + CalloutTitle + CalloutDescription。
Cards 导航卡片块
Cards 和 Card 适合用来承接阅读分流。也就是说，当你希望读者从当前文章继续跳到相关文档、产品页面或系列内容时，用卡片比单纯放一串链接更清楚。
博客配置
查看 frontmatter、发布逻辑和 Pro 内容分段配置。
Fumadocs 内容块
查看更完整的内容组件说明和对应示例。
MuseMVP 文档
查看内容系统如何和产品方法论、操作手册放在同一套体系里。
Tabs 切换块
标签切换块适合在同一屏空间里承载多个视角，比如不同包管理器命令、不同平台说明、不同方案比较，或者同一主题下的两种写法。
简写模式
Tabs + Tab 适合快速做两到三个分支切换。
pnpm install
pnpm dev高级模式
TabsList + TabsTrigger + TabsContent 更适合标题更明确、说明更完整的切换内容。
适合用在套餐差异、路线选择、方案比较这类需要并列切换的信息场景。
Steps 步骤块
Steps 和 Step 适合教程、接入流程、发布清单、操作指引。只要内容本身有明显先后顺序，就很适合用步骤块承载。
先写清楚标题和摘要，让博客列表页和 SEO 描述先把“这篇文章能解决什么问题”说清楚。
先用普通正文把主线写顺，再决定哪些地方真的需要更强的结构化表达。
最后再补图片、代码和导航块，让它们服务内容，而不是反过来抢正文注意力。
Files 文件树块
Files、Folder 和 File 适合解释仓库结构、配置落点和目录组织。只要“路径本身”是信息的一部分，文件树就会比内联路径更直观。
Accordion 折叠块
Accordions 和 Accordion 适合放 FAQ、边界条件、补充说明和排障内容。它的价值在于把“不是每个人都必须先看到的内容”折叠起来。
当某个问题只对部分读者重要，但你又希望它在文章里随时可查时，就很适合用折叠块。
Banner 横幅提示块
Banner 适合放短而醒目的公告、活动提示、版本更新或一行建议。它适合短句，不适合承载大段解释。
InlineTOC 局部导航块
长文里如果存在多个局部小节，InlineTOC 可以帮助读者在正文内部快速跳转，而不必只依赖页面侧边目录。
写作建议
只有在文章足够长、读者确实需要中途跳转时，才建议使用局部目录。短文章不需要额外导航负担。
命名建议
小节标题尽量具体。大多数读者会先扫标题，再决定是否继续读这一段。
什么时候别用
如果文章只有两三个短小节，局部目录带来的噪音通常会大于帮助。
代码展示块
代码块适合那些“必须看见准确语法”的内容。MuseMVP 博客支持普通代码围栏、CodeBlock、CodeBlockTabs 和 DynamicCodeBlock。
普通代码围栏
最简单的代码示例，直接用 Markdown 代码块就够了。
export const postMeta = {
title: "MuseMVP 博客内容块",
published: true,
} as const;CodeBlock 和 Pre
当你希望在 MDX 里显式控制代码展示时，可以用 CodeBlock + Pre。
# 发布前检查 pnpm type-check pnpm lint
CodeBlockTabs
当读者只需要多种代码版本里的其中一个时，CodeBlockTabs 是最适合的。
---
title: "示例文章"
excerpt: "用于博客列表展示的短摘要。"
published: true
---DynamicCodeBlock
如果代码片段更适合由字符串动态生成，可以用 DynamicCodeBlock。
export function formatSection(name: string) {return `section: ${name}`;}图片内容块
图片适合用来承载截图、结构图或视觉示例。在 MuseMVP 博客里，普通 Markdown 图片会自动获得放大能力，你也可以显式使用 ImageZoom。
TypeTable 结构化参数块
当你需要逐字段解释 frontmatter、接口参数、配置对象或回调定义时，TypeTable 会比一整段文字更清楚。
Prop
Type