时间戳

首页 > 解决方案 > 在 vuepress 中，如何将一些 md 内容动态呈现为客户主题（vue 模板）

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

问题描述

在主题的一个 .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>

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

非常感谢。

标签： vue.jsmarkdownvuepress

解决方案

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

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

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

推荐阅读