VuePress config

时间:2019-03-04 10:25:55

标签: configuration static-site vuepress yaml-front-matter

我试图将我的文档站点从GitBook切换到Vuepress,并陷入前题变量。在GitBook中,您只需在config中添加变量,然后在页面上的任何位置将其用作{{ book.variable_name }}。乍一看,在Vuepress中,事情似乎比较棘手。

我需要配置在整个站点中使用的几个变量,因此将它们添加到每个页面将是一场噩梦。该文档没有介绍如何配置前题变量,但提供了指向Jekyll站点的链接。在Jekyll网站上,我发现this article正是我想要实现的。问题是我不知道如何在配置中使用此信息。

我们非常感谢您的帮助。我在official repo中问了这个问题,但这没有帮助。

1 个答案:

答案 0 :(得分:1)

要定义一些可以在站点中任何位置访问的变量,可以将它们添加到主题配置中。

如果还没有,请在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实例-您可以在其中定义所有组件的混合。

您可以在此混合中定义一些计算的属性,这些属性首先检查页面前内容数据中的值,然后返回到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

Vuepress config docs Vuepress app level enhancement