preface

The configuration options for the default theme only apply to the default theme. If you are using a custom theme, the options may be different.

The default theme

The default topic configuration is explained in terms of the directory structure, home page, navigation bar, sidebar, and search box.

The directory structure

Home page

The default theme provides a layout of a Homepage. To use it, specify home in the project docs> readme. md YAML front Matter: If the content is not used, you can disable it by setting NULL. YAML Front Matter content will be rendered as normal Markdown and inserted after YAML Front Matter.

---
home: true
heroImage: /hero.png
heroText: Fast intellectual island The title
tagline: Quick Wisdom Island subtitle
actionText: Quick learning -
actionLink: /zh/guide/
features:
- title: Simple is the highest
  details: In order to Markdown A centered project structure that helps you focus on writing with minimal configuration.
- title: Vue drive
  details: enjoy Vue + webpack The development experience in Markdown The use of Vue Components that can be used at the same time Vue To develop custom themes.
- title: A high performance
  details: VuePress Generate static pre-renders for each page HTML, meanwhile, will be used as the page is loaded SPA Run.
footer: MIT Licensed | Copyright © 2021-present Xunzhaotech
---
Copy the code

The navigation bar

The navigation bar may contain your page title, search box, navigation bar links, multilingual switching, warehouse links, depending on your configuration.

  • The navigation bar Logo

You can add a navigation bar logo with themeConfig. Logo, which can be placed in a public file directory

The sample code

// .vuepress/config.js
module.exports = {
  themeConfig: {
    logo: '/assets/img/logo.png',}}Copy the code
  • Navigation link

You can add some navigation links via themeConfig. Nav. The external link tag will by default include target=”_blank” rel=”noopener noreferrer”. They will be added as features to the tag

The sample code

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [{text: 'home'.link: '/' },
      { text: 'sample'.link: '/example/'.target:'_blank'},
      { text: 'extension'.link: 'https://google.com'.target:'_self'.rel:' '},
      // Set the drop-down list through the Items array
      {
        text: 'Languages'.ariaLabel: 'Language Menu'.items: [{text: 'Chinese'.link: '/language/chinese/' },
          { text: 'Japanese'.link: '/language/japanese/'}},// Set groups in the nested items drop-down list
      {
        text: 'Languages'.items: [{text: 'Group1'.items: [/ * * /] {},text: 'Group2'.items: [/ * * /]}]}}Copy the code
  • Disable navigation

You can disable the navigation bar on all pages using themeConfig. Navbar

The sample code

// .vuepress/config.js
module.exports = {
  themeConfig: {
    navbar: false}}Copy the code

You can also disable the navigation bar for a given page with YAML Front Matter

---
navbar: false
---
Copy the code

The sidebar

Sidebar takes effect and needs to be configured themeConfig. Sidebar. Basic configuration requires an array containing multiple links

The search box

Last Updated

Previous/next link

Links to previous and next articles are automatically retrieved in the order of the sidebar on the current page, and can be disabled globally by passing themeConfig. NextLinks and themeConfig. PrevLinks.

  • Js code configuration
module.exports = {
  themeConfig: {
    // The default is true. Set to false to disable the next link on all pages
    nextLinks: false.// The default is true. Set to false to disable previous links on all pages
    prevLinks: false
  }
Copy the code
  • YAML front matterconfiguration
---
prev: ./some-other-page
next: false
---
Copy the code

Git repository and edit links

When you provide themeconfig. repo, it will automatically generate a GitHub link in the navigation bar of each page and an “Edit this Page “link at the bottom of the page.

  • Js code configuration
// .vuepress/config.js
module.exports = {
  themeConfig: {
    // GitHub is assumed. It can also be a full GitLab URL
    repo: 'vuejs/vuepress'.// Customize the warehouse link text. Is automatically inferred from 'themeConfig. Repo' by default
    // "GitHub"/"GitLab"/"Bitbucket", or "Source".
    repoLabel: 'View source code'.// The following are the optional edit link options

    // If your document repository is not in the same repository as the project itself:
    docsRepo: 'vuejs/vuepress'.// If the document is not in the root directory of the repository:
    docsDir: 'docs'.// If the document is placed under a specific branch:
    docsBranch: 'master'.// Default is false, set to true to enable
    editLinks: true.// Default is "Edit this page"
    editLinkText: 'Help us improve this page! '
  }
Copy the code
  • YAML front matterconfiguration
---
editLink: false
---
Copy the code

Page scrolling

You can enable the page scroll effect with the themeConfig. SmoothScroll option. However, the configuration takes effect after 1.2.0+.

  • Js code configuration
// .vuepress/config.js
module.exports = {
  themeConfig: {
    smoothScroll: true}}Copy the code