vuepress - 如何在 VuePress 中预处理 markdown 文件？

Question

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

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

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

Answer 1

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

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

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

为了预处理降价，我们需要在第一个 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
}