如何在 VuePress 中预处理 markdown 文件？答案

【问题标题】：How can I pre-process markdown files in VuePress?如何在 VuePress 中预处理 markdown 文件？
【发布时间】：2019-12-18 15:59:56
【问题描述】：

VuePress 的标准模板，如文档所述，发生在 Vue 组件渲染期间。这意味着markdown编译器markdown-it将看不到渲染的模板结果，也无法对其进行操作。

这可能会导致链接、代码块和许多其他边缘情况中的变量替换出现问题。这个问题的一个常见答案是使用原始 HTML 标记。我觉得这有点不受欢迎，因为它在错误的阶段（降价后编译）解决了问题，并且要求内容创建者在降价与 Vue/HTML/框架问题之间兼顾。

如何以适合开发/构建管道的方式在 markdown 编译之前处理 markdown 文件？

【问题讨论】：

标签： vuepress

【解决方案1】：

VuePress 当前在 webpack 管道中处理 markdown 文件。这个过程的要点是：

.md -> markdown-loader(VuePress 自定义) -> vue-loader -> ...

我将展示一个示例，说明如何使用 Nunjucks 渲染 markdown 模板在它被传递到 markdown 加载器进行编译。

为了预处理降价，我们需要在第一个 VuePress 加载器之前插入一个加载器。幸运的是，我们可以通过公开的插件/配置 API 做到这一点：

.vuepress/config.js

chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use(path.resolve(__dirname, './nunjucks'))
        .loader(path.resolve(__dirname, './nunjucks'))
        .end()
},

.vuepress/nunjucks.js

const nunjucks = require('nunjucks')

// Change start/end tokens so they don't collide with the Vue syntax
nunjucks.configure({
    autoescape: false,
    tags: {
        blockStart: '{{{%',
        blockEnd: '%}}}',
        variableStart: '{{{',
        variableEnd: '}}}',
        commentStart: '{{{#',
        commentEnd: '#}}}'
      }
})

const config = {
    apiVersion: 32,
}

module.exports = function(source) {
    const rendered = nunjucks.renderString(source, config)
    return rendered
}

【讨论】：

请指教。我尝试了这样的降价：[链接文本]（github.com/org/repo/tree{{ $themeConfig.my_version }}/rest/of/path）。字符串在之前和之后呈现相同。我将“返回渲染”更改为“返回'teststring'”并且没有任何变化，这表明没有调用nunjucks。还有什么需要做的吗？
您可以在此处的 Rundeck 文档存储库中查看生产设置：github.com/rundeck/docs/tree/3.3.x/docs/.vuepress。检查 nunjucks.js 和 config.js 文件。