config.js文件

1. 基础配置项

title 网站的标题

srcDir 储存Markdown页面的目录，相对于根目录而言

base

默认：/

站点部署的基本url，如果放在子路径下必须配置，例如子路径为demo，则为/demo/，必须前后都要有斜线

lang 配置语言

description 网站的描述，在页面 HTML 中呈现为标记。

export default {
  // app level config options
  lang: 'en-US',
  title: 'VitePress',
  description: 'Vite & Vue powered static site generator.',
  base: '/demo/'
}

2. 关于主题配置项

https://vitepress.qzxdp.cn/reference/site-config.html

一般情况使用默认主题就能满足绝大数功能。

在.vitepress下的配置文件config.js中配置，使用themeConfig去配置相关内容

export default {
   lang: 'en-US',
   title: 'VitePress',
   description: 'Vite & Vue powered static site generator.',
   
   // 配置主题信息
   themeConfig: {
   logo: '/logo.svg', // logo
   nav: [...], // 顶部导航
   sidebar: { ... }, // 侧边栏导航
   }
}

1. nav导航栏

export default {
   themeConfig: {
      nav: [
         { text: 'Guide', link: '/guide' },
         {
            text: 'Dropdown Menu',
            items: [
               { text: 'Item A', link: '/item-1' },
               { text: 'Item B', link: '/item-2' },
               { text: 'Item C', link: '/item-3' }
            ]
         }
      ]
   }
}

其中text代表标题、link代表跳转的路径。可以即是链接也能是下拉菜单，当是下拉菜单时使用items数组，里面包含所有的链接。

2. sidebar侧边栏

简单的是一个数组对象形式，text代表标题，items是实际的链接。假如说想要根据不同路径有不同的侧边栏，则是一个对象形式，key为路径。

基础形式

export default {
   themeConfig: {
      sidebar: [
         {
            text: 'Guide',
            items: [
               { text: 'Introduction', link: '/introduction' },
               { text: 'Getting Started', link: '/getting-started' },
               ...
            ]
         }
      ]
   }
}

多个侧边栏, 多个侧边栏可以跟nav导航栏联动使用

export default {
    themeConfig: {
        sidebar: {
        // This sidebar gets displayed when a user
        // is on `guide` directory.
        '/guide/': [
            {
                text: 'Guide',
                items: [
                    { text: 'Index', link: '/guide/' },
                    { text: 'One', link: '/guide/one' },
                    { text: 'Two', link: '/guide/two' }
                ]
            }
        ],
          // This sidebar gets displayed when a user
          // is on `config` directory.
          '/config/': [
            {
              text: 'Config',
              items: [
                { text: 'Index', link: '/config/' },
                { text: 'Three', link: '/config/three' },
                { text: 'Four', link: '/config/four' }
              ]
            }
          ]
        }
    }
}

3. 添加搜索功能

在.vitepress/config.ts文件中将themeConfig.search.provider选项设置为local

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local'
    }
  }
})