Astro MDX 组件使用完全指南 • 时光与我

mdx 组件使用实例#

在 Astro 中使用 .mdx 格式写文章，最大的好处是可以引入主题内置的交互组件，丰富排版。

引用示例#

用到哪个组件就引用那个组件，按需选择，注意区别导入来源from 'astro-pure/user'或from 'astro-pure/advanced'。

import { Aside, Tabs, TabItem, Steps, Timeline, Spoiler, Icon } from 'astro-pure/user'
import { GithubCard, LinkPreview } from 'astro-pure/advanced'

plaintext

组件总览表#

组件名	导入来源	功能	典型场景
`Aside`	`astro-pure/user`	提示框（note/tip/danger 等类型）	文中加提示、警告
`Card`	`astro-pure/user`	卡片容器，可放列表/任意内容	信息分组展示
`Collapse`	`astro-pure/user`	折叠展开块	FAQ、隐藏细节
`Tabs` / `TabItem`	`astro-pure/user`	选项卡切换	多语言/多方案对比
`Timeline`	`astro-pure/user`	时间线	履历、版本更新记录
`Steps`	`astro-pure/user`	步骤列表	教程操作步骤
`CardList`	`astro-pure/user`	卡片列表	资源/链接汇总
`Button`	`astro-pure/user`	按钮（支持 link / pill 样式）	行动召唤按钮
`Spoiler`	`astro-pure/user`	剧透遮挡（hover 显示）	隐藏答案、剧透内容
`FormattedDate`	`astro-pure/user`	格式化日期	统一日期展示
`Label`	`astro-pure/user`	小标签徽章	状态/分类标记
`Svg`	`astro-pure/user`	SVG 加载器	内联矢量图
`Icon`	`astro-pure/user`	主题内置图标（github/bilibili/rss 等 40+）	社交链接、装饰图标
`MdxRepl`	`astro-pure/user`	MDX 代码演示器	实时预览代码渲染结果
`Quote`	`astro-pure/advanced`	随机名言（支持 Quotable / 一言 API）	页脚随机语录
`GithubCard`	`astro-pure/advanced`	GitHub 仓库卡片	展示开源项目
`LinkPreview`	`astro-pure/advanced`	链接预览卡片（自动抓取 OG 信息）	友链、推荐文章
`QRCode`	`astro-pure/advanced`	二维码生成	扫码跳转
`Toast`	`astro-pure/advanced`	轻提示	复制成功等反馈
`Medium Zoom`	`astro-pure/advanced`	图片灯箱放大	文中图片点击放大

1. 提示框#

Aside 组件用于在文中插入醒目的提示，支持 note（默认）、tip、danger 等类型。

示例，可直接复制使用：

<Aside type='tip' title='小技巧'>
写代码前先喝口水。 
</Aside>

<Aside type='danger' title='警告'>
不要在生产服务器上跑 `rm -rf /`。
</Aside>

plaintext

实际渲染效果：

2. 选项卡#

Tabs 和 TabItem 组合使用，适合展示多语言或多方案的对比。

示例，可直接复制使用：

<Tabs>
  <TabItem label='npm'>
bash
npm install astro

  </TabItem>
  <TabItem label='pnpm'>
bash
pnpm add astro

  </TabItem>
  <TabItem label='yarn'>
bash
yarn add astro

  </TabItem>
</Tabs>

plaintext

实际渲染效果：

bash npm install astro

3. Steps —— 步骤列表#

自动识别有序列表并渲染为步骤样式 示例，可直接复制使用：

<Steps>

1. 安装依赖
2. 启动开发服务器
3. 编写第一篇文章
4. 构建并部署

</Steps>

plaintext

实际渲染效果：

安装依赖
启动开发服务器
编写第一篇文章
构建并部署

4. Timeline —— 时间线#

示例，可直接复制使用：


<Timeline events={
  [
    { date: 'August 2021', content: 'Hello' },
    { date: 'August 2022', content: '<i>World!</i>' },
  ]
} />

plaintext

实际渲染效果：

August 2021
Hello
August 2022
World!

更多请移步 Docs文档

💡 更多请移步 Docs文档···