在 vuepress 中，如何将一些 md 内容动态呈现为客户主题（vue 模板）

Question

在主题的一个 .vue 文件（组件）中，我只想在 .vue 模板中动态渲染一些 md 内容，如下所示

md 内容：

::: slot aaa
# Here is slot aaa
:::
- A Paragraph
- Another Paragraph
::: slot bbb
Here is slot bbb
:::

而vue主题模板是这样的：

<template>
  <div class="theme-container">
    <Content slot-key="aaa" />
   <br/>=============
    <Content />
   <br/>=============
    <Content slot-key="bbb" />
    <br />
  </div>
</template>

而md的内容我可以从一些后端api获取，我想在页面中动态渲染，怎么办。

非常感谢。

Answer 1

如果你想在 Vue 组件中渲染 markdown，你应该写一个 vuepress 插件。

我使用https://github.com/superbiger/vuepress-plugin-tabs 来源作为参考。 您需要：

• 在 markdown-it-container 插件中定义自定义 md 容器，它应该解析打开和关闭容器标签
• 在 client.js 中定义你的 vue 组件
• 为您的插件定义 index.js，它应该导出enhancedAppFiles 和chainMarkdown
• 在 .vuepress/config.js 中添加这个插件。