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~~ | |
`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 提供以下内置组件:
表格
标准 Markdown 表格开箱即用:
| Feature | Starter | Team |
|---------|------|-----|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
| Feature | Starter | Team |
|---|---|---|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
使用 Table 组件可实现行高亮、单元格对齐和跨列合并:
| Feature | Starter | Team |
|---|---|---|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
完整的组件文档(包括行/单元格高亮、列合并和样式选项)请参阅 Tables。
注释
添加不会出现在渲染输出中的注释:
{/* This is a comment - it won't be visible to readers */}
