Jamdesk Documentation logo

MDX 基础

使用 Markdown 编写文档,并嵌入 Card、Tabs、Accordion 等 React 组件。这是每个 Jamdesk 页面背后的语法。

每个 Jamdesk 页面都是一个 .mdx 文件:标准 Markdown 加上 <Card>、<Tabs> 和 <Accordion> 等 JSX 组件。

什么是 MDX?

MDX 让你在同一个文件中编写标准 Markdown 并嵌入 JSX 组件。用 Markdown 编写标题、列表和代码块,然后在需要交互的地方插入 <Card> 或 <Tabs> 等组件。

MDX 是 AI 工具可以原生读写的纯文本。它可以用 Git 进行版本控制,并且无需专有格式即可承载组件。

# Welcome to My Docs

This is regular **Markdown** with a component below:

<Card title="Quickstart" icon="rocket" href="/quickstart">

  Jump right in with our quickstart guide.

</Card>

免费的 MDX Validator 可以在构建前发现语法错误。 免费的 MDX Formatter 可以整理间距和缩进。 无需运行 CLI,粘贴页面内容即可检查或整理。

页面结构

每个 MDX 页面都以 frontmatter 开头,即位于三个短横线之间的元数据:

---
title: My Page Title
description: A brief description for search and previews
---

Your content starts here...

title 和 description 会显示在搜索结果、浏览器标签页和社交媒体预览中。

Markdown 基础

标题

主要章节使用 ##,子章节使用 ###。Jamdesk 会根据你的标题生成目录。

## Main Section
Content under the main section.

### Subsection
More detailed content here.

第一个标题从 ##(h2)开始。frontmatter 中的页面标题即为 h1。

文本格式

语法效果
**bold**bold
*italic*italic
~~strikethrough~~strikethrough
`inline code`inline code

列表

Unordered list:
- First item
- Second item
  - Nested item

Ordered list:
1. First step
2. Second step
3. Third step

引用块

> This is a blockquote. Use it for callouts or
> highlighting important information.

This is a blockquote. Use it for callouts or highlighting important information.

添加组件

组件是可以在 MDX 中任意位置使用的 JSX 元素。它们可以是自闭合的,也可以包裹内容:

{/* Self-closing component */}
<Card title="Example" icon="star" href="/introduction" />

{/* Component wrapping content */}
<Accordion title="Click to expand">

  This content is inside the accordion.

</Accordion>

可用组件

Jamdesk 提供以下内置组件:

Cards

突出功能并创建导航

Tabs

将内容组织为可切换的面板

Accordion

用于可折叠的可选内容区域

Steps

编号的操作步骤和教程

表格

标准 Markdown 表格开箱即用:

| Feature | Starter | Team |
|---------|------|-----|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
FeatureStarterTeam
Pages10Unlimited
Custom domainNoYes

使用 Table 组件可实现行高亮、单元格对齐和跨列合并:

FeatureStarterTeam
Pages10Unlimited
Custom domainNoYes

完整的组件文档(包括行/单元格高亮、列合并和样式选项)请参阅 Tables。

注释

添加不会出现在渲染输出中的注释:

{/* This is a comment - it won't be visible to readers */}

接下来做什么?

SEO Optimization

提升可发现性和元数据

Frontmatter

定义标题、描述和 SEO 字段