Question

已记录的VuePress的标准模板发生在Vue组件渲染期间。这意味着markdown编译器markdown-it将看不到渲染的模板结果，并且将无法对其进行操作。

这可能导致链接，代码块和许多其他极端情况下的变量替换问题。这个问题的一个常见答案是使用原始HTML标签。我发现这有点不合需要，因为它在错误的阶段（降价后编译）解决了该问题，并要求内容创建者应对Vue / HTML / framework的问题进行降价。

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

Answer 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
}

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

1 个答案: