交互内容实验室#

这篇文章的重点不是“介绍 MDX 是什么”，而是直接验证一件事：

现在这个博客已经可以在文章内容里直接引入 Vue 组件。

也就是说，后面你不只是能写普通段落、图片和代码块，还可以把图表、流程图、交互可视化、Canvas 动画直接塞进文章正文。

基础内容能力#

在接入 MDX + Vue 之前，这个博客本来就已经支持一批很适合写长文的基础表达能力。这些内容我也一起合并到这篇文章里，方便以后拿它当总样板。

标题层级、强调与链接#

正文里支持粗体、斜体、~~删除线~~、行内代码、超链接这些基础表达。

四级标题示例#

长文章里把内容拆成多层标题后，右侧目录会更好用，文章结构也会更清楚。

列表、引用与表格#

无序列表：

适合整理要点
适合快速扫读
适合做摘要

有序列表：

定义主题
拆出结构
补齐细节

引用：

好的内容页不只是堆信息，而是让文字、图表和交互都能顺着叙事往前走。

能力	当前状态	适合展示什么
Markdown 基础格式	已支持	博客正文、笔记、教程
Mermaid	已支持	流程图、时序图、架构图
ECharts	已支持	折线图、柱状图、饼图、仪表盘
Canvas	已支持	背景动效、自由动画、可视化实验
图片灯箱	已支持	截图、封面、插图
页面切换动画	已支持	页面跳转过渡

图片、提示块与公式#

普通 Markdown 图片：

博客预览图

原生 HTML 图片：

NOTE
这篇文章现在既是内容能力展示页，也是交互组件实验页。

TIP
以后你写新文章时，可以直接从这里复制需要的段落、图表和组件用法。

WARNING
如果文章里塞很多大型交互组件，首屏体积会明显上升，最好按模块控制加载方式。

行内公式示例：阅读时间可以近似写成 $t \approx \frac{w}{r}$ 。

块级公式示例：

T = \lceil W / 200 \rceil

代码块与嵌入内容#

1
type Feature = {
2
  name: string;
3
  enabled: boolean;
4
};
5

6
const features: Feature[] = [
7
  { name: "mermaid", enabled: true },
8
  { name: "echarts", enabled: true },
9
  { name: "canvas", enabled: true },
10
];
11

12
console.log(features.filter((item) => item.enabled));

1
pnpm install
2
pnpm dev
3
pnpm check
4
pnpm build

这个主题也能容纳 iframe 内容：

Mermaid：流程图 / 时序图 / 架构表达#

Mermaid 很适合在文章里放流程、调用链、系统关系图。

文章发布流程

下面这个是时序图示例：

页面访问时的渲染时序

ECharts：折线图、柱状图、饼图#

图表这部分现在也已经适合直接进文章了。你只需要在 MDX 里准备一个 option 对象，再把它传给组件。

一周访问趋势

文章分类占比

站点模块健康度

ECharts 本身就自带动画能力，所以像数值过渡、柱状图生长、折线缓动这些效果，不需要你额外再造一套轮子。

Canvas：更自由的视觉动画#

如果你想要的不是标准图表，而是更自由的视觉效果，比如背景动效、粒子、波浪、轨道动画，那就更适合用 Canvas。

Canvas Waves

Canvas Particles

Canvas Orbits

这种方式很适合做：

文章头部的氛围动画
项目页里的可视化背景
数据故事里的轻量交互效果
不适合用标准图表表达的动态内容

这套写法以后怎么用#

以后你写文章时，大概就是这个工作流：

新建 .mdx 文章
在文件顶部 import 你要用的 Vue 组件
在正文里像写普通标签一样直接插入组件
用 client:load、client:visible 这类指令控制 hydration 时机

适合继续扩展的方向#

既然现在已经走到 MDX + Vue 了，后面你还可以继续加：

可交互的时间线组件
代码执行结果可视化组件
音频频谱或波形组件
地图、网络拓扑、节点关系图
带参数控制面板的小型 Demo

如果你愿意，我下一步可以继续帮你把这套能力再往前推一层，比如：

做一个统一的 ChartCard / DiagramCard 组件库
给文章增加可折叠 Demo 区
做一个专门展示所有交互组件的实验页