我正在尝试将我的文档站点从GitBook切换到Vuepress,并且遇到了前端变量问题。在GitBook中,您只需在config中添加变量,然后在页面的任何位置使用它们作为{{ book.variable_name }}
。在Vuepress,乍一看,事情似乎更棘手。
我需要配置在整个站点中使用的几个变量,因此将它们添加到每个页面将是一个完整的噩梦。该文档没有说明如何配置前端事件变量,但有一个指向Jekyll站点的链接。在Jekyll网站上,我发现this article正是我想要达到的目标。问题是我不知道如何在配置中使用此信息。
任何帮助都非常感谢。我在official repo问了这个问题但是没有用。
要定义可以在站点中的任何位置访问的某些变量,可以将它们添加到主题配置中。
如果您还没有,请在config.js
创建一个.vuepress/config.js
文件。
此文件应导出对象。
你想为此添加一个themeConfig: {}
。
您在themeConfig
上设置的属性将在您的网站$themeConfig
上提供。
//- .vuepress/config.js
module.exports = {
themeConfig: {
//- Define your variables here
author: 'Name',
foo: 'bar'
}
}
{{ $themeConfig.author }} //- 'Name'
{{ $themeConfig.foo }} //- 'bar
您还可以通过使用全局计算函数轻松地在本地/每页覆盖。 (这也可以提供更简洁的方式来访问变量)
在与enhanceApp.js
相同的位置添加config.js
文件,可以访问Vue实例 - 您可以在其中为所有组件定义mixin。
您可以在此mixin中定义一些计算属性,首先检查页面前端数据中的值,然后回退到themeConfig中设置的值。允许您设置一些可以在每页本地覆盖的默认值。
//- .vuepress/enhanceApp.js
export default ({ Vue }) => {
Vue.mixin({
computed: {
author() {
const { $themeConfig, $frontmatter } = this
return $frontmatter.author || $themeConfig.author
},
foo() {
const { $themeConfig, $frontmatter } = this
return $frontmatter.foo || $themeConfig.foo
}
}
})
}
{{ author }} //- 'Name'
{{ foo }} //- 'bar