Стандартные значения по умолчанию в конфигурации VuePress - PullRequest
Новая
       89

Стандартные значения по умолчанию в конфигурации VuePress

0 голосов
/ 04 марта 2019

Я пытаюсь переключить свой сайт документации с GitBook на Vuepress и застрял с внешними переменными.В GitBook вы просто добавляете переменные в конфигурацию, а затем используете их в любом месте страницы как {{ book.variable_name }}.В Vuepress, на первый взгляд, все выглядит сложнее.

Мне нужно настроить несколько переменных, которые используются по всему сайту , поэтому их добавление на каждую страницу будет полным кошмаром.Документация ничего не говорит о том, как настроить внешние переменные, но содержит ссылку на сайт Jekyll.На сайте Jekyll я нашел эту статью , именно этого я и хочу достичь.Проблема в том, что я понятия не имею, как использовать эту информацию в конфигурации.

Любая помощь высоко ценится.Я задал этот вопрос в официальном репо 1011 *, но это не помогло.

1 Ответ

0 голосов
/ 07 марта 2019

Чтобы определить некоторые переменные, к которым вы могли бы получить доступ в любом месте вашего сайта, вы можете добавить их в конфигурацию вашей темы.

Если у вас ее еще нет, создайте файл config.js в .vuepress/config.js,

Этот файл должен экспортировать объект.

Вы хотите добавить к этому themeConfig: {}.

Свойства, заданные для объекта themeConfig, будут доступны на протяжении всего вашегоsite on $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 - где вы можете определить миксин длявсе компоненты.

Вы можете определить некоторые вычисленные свойства в этом миксине, которые сначала проверяют значение в данных frontmatter страниц, а затем возвращаются к значению, установленному в 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 Повышение уровня приложения Vuepress

...