如何在 VuePress 中预处理降价文件？

Question

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

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

如何以适合 dev/build 管道的方式在 markdown 编译之前处理 markdown 文件？

Answer 1

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

.md -> markdown-loader（VuePress 自定义） -> vue-loader -> ...

我将展示如何使用 Nunjucks 渲染 markdown 模板的示例在它被传递到 markdown 加载器进行编译之前。

为了预处理降价，我们需要在第一个 VuePress 加载器之前插入一个加载器。幸运的是我们可以通过暴露的 plugin/config 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
}

如何在 VuePress 中预处理降价文件？

How can I pre-process markdown files in VuePress?

vuepress