【问题标题】:in vuepress how can I dynamically render some md content into cusomer theme (vue template)在 vuepress 中,如何将一些 md 内容动态呈现为客户主题(vue 模板)
【发布时间】:2020-08-14 08:11:02
【问题描述】:

在主题的一个 .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获取,我想在页面中动态渲染,怎么办。

非常感谢。

【问题讨论】:

    标签: vue.js markdown vuepress


    【解决方案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 中添加这个插件。

    【讨论】:

    • 您好 Weisskopf 非常感谢您的回复和指导。由于我是 vue&vuepress 的新手,请你帮忙分享更多细节或一些例子给我。非常感谢。还有一个问题,vuepress-plugin-tabs,在我们使用的时候,我们可以在我们的.md文件中编写示例md代码,然后在页面显示的时候渲染,但实际上我想动态渲染一些md内容在page中,例如在page中调用后端api,然后取回一些md内容,我希望这些md内容动态显示在page中。我的意思是它不应该在编译时完成。
    • 似乎我没有完全明白你的问题。我的回答(和 vuepress-plugin-tabs)是关于如何将静态 md 包装在自定义容器中,包括 Vue 组件。但是,据我所知,您需要在 Vue 组件中动态呈现 markdown。 Vuepress 是一个静态站点生成器,markdown 在服务器端进行解析和渲染。您能否更具体地说明您想从后端获取什么样的数据?是否只需要 Vue 组件进行后端交互?请看这个问题github.com/vuejs/vuepress/issues/452
    • 非常感谢您,先生!我想要做的是,在页面中有一个编辑器,可以编辑页面内容,并且一些页面内容实际上来自md文件,就像我的md文件一样,使用 ::: slot key1 :: :xxx ::: 并且编辑器默认值为原始md文件内容,当我把xxx改成yyy时,页面会自动改变。但是在您的指导下,所有 md 文件似乎都在服务器端编译,在页面中,当我生成一些动态 md 内容并想在页面中呈现它时,我不知道该怎么做
    • 在页面中,希望编辑器使用slot使内容可以在页面中分布式显示,也可以使用markdown语法。
    猜你喜欢
    • 2019-01-15
    • 1970-01-01
    • 2015-10-15
    • 1970-01-01
    • 1970-01-01
    • 2016-03-21
    • 1970-01-01
    • 2020-01-26
    • 1970-01-01
    相关资源
    最近更新 更多