MDX 演示

这是一篇真正的 .mdx 文档。源文件位于 src/content/docs/examples/mdx.mdx，可以对照页面查看组件如何嵌入文章。

.mdx 组件演示

1. 导入组件

MDX 支持 Markdown 内容，也可以导入组件。导入语句放在 frontmatter 后面，例如：

import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
  <Card title="练习目标">完成一个片段，并留下练习记录。</Card>
  <Card title="复盘结果">写下观察到的问题和下一步行动。</Card>
</CardGrid>

实际效果如下：

练习目标

完成一个片段，并留下练习记录。

复盘结果

写下观察到的问题和下一步行动。

2. 使用选项卡

点击下面的栏目名称，在同一区域切换内容。这些选项卡由 Starlight 组件提供交互。

整理一个表达，写下例句和需要复习的问题。

前往德语学习

对应的基本结构：

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="主题一">主题一的内容。</TabItem>
  <TabItem label="主题二">主题二的内容。</TabItem>
</Tabs>

3. 使用 JavaScript 表达式

本篇在文件顶部声明了一个栏目数组。下面的数量与列表都由同一份数据生成：

当前共有 3 个学习与设计栏目。

对应写法：

export const topics = [
  { title: '德语学习', href: '/german/' },
  { title: '吉他学习', href: '/guitar/' },
  { title: 'PCB Layout 设计', href: '/pcb-layout/' },
];

当前共有 **{topics.length}** 个学习与设计栏目。

<ul>
  {topics.map((topic) => (
    <li key={topic.href}><a href={topic.href}>{topic.title}</a></li>
  ))}
</ul>

4. 展示操作步骤

Steps 组件可以把有序列表显示成步骤：

创建文件：在对应栏目中添加 .mdx 文件，并填写 frontmatter。
编写内容：导入需要的组件，加入正文与示例。
检查效果：保存文件，查看页面，并运行 npm run build。

import { Steps } from '@astrojs/starlight/components';

<Steps>

1. 创建文件。
2. 编写内容。
3. 检查效果。

</Steps>

5. 加入原生折叠内容

下面的折叠区域使用 HTML 的 details 与 summary 标签，可以点击展开或收起：

点击查看记录模板的提示

先写目标，再保存过程、结果和下一步。较长的补充说明可以放进折叠区域。

<details>
  <summary>点击查看补充内容</summary>
  <p>这里填写补充说明。</p>
</details>

6. 如何选择文件格式

需求	可以使用
正文、表格、代码块与普通笔记	`.md`
导入卡片、选项卡或步骤组件	`.mdx`
在文章中使用 JavaScript 表达式	`.mdx`

查看 Markdown 演示对照学习常用的 Markdown 写法。

返回使用指南了解文件路径、文章创建和侧边栏维护。