我正在尝试设置一个插件来更改开发服务器和生产版本上 VuePress markdown 文件的内容。根据文档,我应该能够将 _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
期间进行这种内容交换>
最佳答案
这些页面对象中的信息在编译 markdown 之后和 Vue 组件渲染期间使用。内容比较多,仅供引用,修改不会达到你想要的效果。
这也把我绊倒了。
所有 markdown 文件都经过处理以获取信息,但实际的编译是通过 webpack 进行的。一般流程是:
.md
-> markdown-loader
-> vue-loader
-> ...
我的建议和我所做的是创建一个自定义的 webpack 加载器来修改内容,然后再通过 VuePress markdown 加载器。我使用这种方法通过 Nunjucks 运行我的 Markdown 文件以模板化预 Markdown 编译。在找到正确的方法后,这样做会非常容易 :) 这是一种可行的方法:
配置文件:
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
}
关于vue.js - 如何通过插件更改 VuePress 页面的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55046233/