Vitepress 动态渲染 Markdown 代码块的实现方案

在基于 Vitepress 构建文档站点时，开发者可能会遇到需要根据部署环境动态显示不同代码内容的需求。例如，当文档同时部署在 GitHub 和 Gitee 平台时，希望代码块中的仓库地址能自动适配当前平台。

需求背景

现代文档系统经常需要跨平台部署，但不同平台的资源路径可能存在差异。传统静态 Markdown 无法实现条件渲染，这会导致开发者需要维护多份文档副本，增加了维护成本。

技术挑战

Vitepress 作为基于 Vite 和 Vue 的静态站点生成器，其核心优势在于服务端渲染（SSR）和静态生成。直接在 Markdown 中实现动态逻辑会破坏 SSR 的架构设计原则，导致以下问题：

1. 服务端渲染阶段无法访问浏览器环境变量
2. 破坏静态站点的可预测性
3. 增加客户端运行时负担

解决方案

Vitepress 提供了 Vue 组件与 Markdown 混合使用的能力，可以通过以下方式实现动态代码块：

```sh-vue
git clone {{ gitUrl }}

### 实现原理

1. 使用 `sh-vue` 语言标记，使代码块支持 Vue 模板语法
2. 通过 `<script setup>` 定义响应式变量
3. 在 `onMounted` 生命周期钩子中判断当前环境
4. 根据环境条件动态设置代码内容

## 进阶用法

这种模式可以扩展更多动态场景：

1. **多环境适配**：根据不同域名显示对应的 API 地址
2. **国际化**：根据语言设置显示对应命令
3. **用户偏好**：根据用户设置显示不同技术栈的示例代码

## 注意事项

1. 动态内容仅在客户端生效，SSR 阶段会显示默认值
2. 复杂的逻辑建议封装为独立组件
3. 对于简单的条件判断，也可以使用 Vitepress 的自定义容器语法

通过这种模式，开发者可以在保持 Vitepress 静态生成优势的同时，实现必要的动态内容展示需求。