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

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

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

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


configuration static-site vuepress yaml-front-matter
person Anton Zolotukhin    schedule 04.03.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

Если у вас его еще нет, создайте файл 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 Улучшение уровня приложения Vuepress

person Frank-    schedule 07.03.2019
comment
Фрэнк большое спасибо, это именно то, чего я хотел добиться. Вот только одна проблема — Markdown в vuepress не конвертирует автоматически ссылки, взятые из переменных, и отображает их в виде строк: [Google.com](https://google.com) Это ожидается? - person Anton Zolotukhin; 07.03.2019
comment
Я думаю, этого и следовало ожидать, но вы также можете использовать компоненты Vue и элементы HTML в своих файлах уценки. Таким образом, вы могли бы сделать <a :href="$themeConfig.link">Link text</a> или, если бы это была внутренняя ссылка, вы могли бы даже использовать маршрутизатор Vue, например <router-link :to="$themeConfig.link">Link Text</router-link>. - person Frank-; 07.03.2019
comment
Хорошо понял. Спасибо за вашу помощь! - person Anton Zolotukhin; 07.03.2019