如何通过插件更改 VuePress 页面的内容

Question

我正在尝试设置一个插件来更改开发服务器和生产版本上的 VuePress 降价文件的内容。根据文件，我应该能够使用_content和_strippedContent可用给我用extendPageData

以下代码是我在插件中设置的用于执行此操作的代码。

module.exports = (options = {}, context) => ({
  extendPageData($page) {
    const {
      _filePath, // file's absolute path
      _computed, // access the client global computed mixins at build time, e.g _computed.$localePath.
      _content, // file's raw content string
      _strippedContent, // file's content string without frontmatter
      key, // page's unique hash key
      frontmatter, // page's frontmatter object
      regularPath, // current page's default link (follow the file hierarchy)
      path, // current page's real link (use regularPath when permalink does not exist)
    } = $page

    $page._content = "replaced"
    $page._strippedContent = "replaced"
  }
})

我能说的最好的是，这段代码应该在更新时工作，$page._content但它没有显示testing，而是显示原始内容。

我知道我正在console.log从文件中进入这段代码，它显示在控制台中。

我担心这$page._content是不可变的，想知道是否有办法在dev或期间进行这种内容交换build

Answer 1

这些页面对象中的信息在 Markdown 编译后和 Vue 组件渲染期间使用。内容更多的是供参考，修改不会达到你想要的效果。

这也让我绊倒了。

所有 markdown 文件都经过处理以获取信息，但随后通过 webpack 进行实际编译。一般流程是：

.md-> markdown-loader-> vue-loader-> ...

我的建议和我所做的就是创建一个自定义 webpack 加载器，以在内容通过 VuePress markdown 加载器之前修改内容。我使用这种方法通过 Nunjucks 运行我的 Markdown 文件，以模板化预 Markdown 编译。在找到正确的方法后，做到这一点非常容易:)这是一种可行的方法：

配置.js：

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

然后一个简单的加载器可以如下所示（删节）：

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