在Vuepress中，我如何动态地将一些md内容呈现为cusomer主题（vue模板）

Question

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

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>

还有我可以从某些后端api获取的md内容，我想在页面中动态呈现它，我该怎么做。

非常感谢。

Answer 1

如果要在Vue组件内渲染markdown，则应编写一个vuepress插件。

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

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