交互式博客组件展示

这篇文章演示了所有可在 MDX 博客文章中使用的交互组件。 滚动页面时右侧目录会高亮当前章节，顶部有阅读进度条，代码块可以一键复制。

提示框（Callout）

---

步骤引导（Steps）

---

标签页（Tabs）

---

数据可视化

柱状图

折线图（多系列）

React

Vue

Svelte

饼图

• TypeScript45%
• React25%
• Node.js15%
• Rust10%
• 其他5%

---

交互 Demo

---

算法可视化

冒泡排序可视化 —— 点击「冒泡排序」观察排序过程，随机重置后再次尝试。

---

代码示例（带复制按钮）

鼠标悬停在代码块上即可看到右上角的复制按钮。

// 使用 Astro Content Collections 获取博客文章
import { getCollection } from 'astro:content';

const posts = await getCollection('blog', ({ data }) => {
  return !data.draft && data.date <= new Date();
});

// 按日期降序排列
posts.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());

# 本地开发
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

---

在你的文章中使用

在任意 .mdx 文件顶部导入需要的组件：

import { Callout } from '@/components/mdx/Callout';
import { BarChart } from '@/components/mdx/Chart';
import { Steps, Step } from '@/components/mdx/Steps';
import { Tabs, TabItem } from '@/components/mdx/Tabs';
import { Counter } from '@/components/mdx/InteractiveDemo';
import DemoBox from '@/components/mdx/DemoBox.astro';

<Callout type="tip">这是一个提示！</Callout>

<Steps client:visible>
  <Step title="第一步">描述内容...</Step>
  <Step title="第二步">描述内容...</Step>
</Steps>

<Tabs client:visible>
  <TabItem label="选项一">内容A</TabItem>
  <TabItem label="选项二">内容B</TabItem>
</Tabs>

<BarChart client:visible title="我的数据" data={[...]} />

<DemoBox title="计数器">
  <Counter client:load />
</DemoBox>