Skip to content

Config.js文件拆分

/docs/.vitepress/conf.d/目录下创建各个部分的配置文件:

ts
// head.ts 标题配置
import type { HeadConfig } from 'vitepress'
export const head: HeadConfig[] = [
  ['meta', { name: 'theme-color', content: '#3eaf7c' }],
  ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
  ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
  ['link', { rel: 'apple-touch-icon', href: '/favicon.ico' }],
  ['link', { rel: 'mask-icon', href: '/favicon.ico', color: '#3eaf7c' }],
  ['meta', { name: 'msapplication-TileImage', content: '/favicon.ico' }],
  ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
]

// nav.ts 右上角导航配置
import type { DefaultTheme } from 'vitepress'
export const nav: DefaultTheme.Config['nav'] = [
  { text: '前端导航', link: '/nav/' },
  { text: '茂茂主页', link: 'https://fe-mm.com' },
  {
    text: '茂茂物语',
    link: 'https://notes.fe-mm.com',
  },
  { text: 'mmPlayer', link: 'https://netease-music.fe-mm.com' },
  {
    text: '油猴脚本',
    link: 'https://github.com/maomao1996/tampermonkey-scripts',
  },
]
// 另一种写法,已验证
import { DefaultTheme } from 'vitepress';
export const nav: DefaultTheme.NavItem[] = [
	{ text: '首页',link:'/'},
    { text: '前端导航',link:'/nav/'}
]

// sidebar 侧边栏配置
import type { DefaultTheme } from 'vitepress'
export const sidebar: DefaultTheme.Config['sidebar'] = {}
// 另一种写法,已验证
import { DefaultTheme } from 'vitepress';
export const sidebar: DefaultTheme.Sidebar = {
  // /VPDocs/表示对这个文件夹下的所有md文件做侧边栏配置
  '/VPDocs/': [
     // 第一部分
    {
      text: '简介',
      collapsed: false,
      items: [
        {
          text: '前言',
          link: '/VPDocs/前言'
        },
        {
          text: 'VitePress 是什么?',
          link: 'https://vitepress.dev/zh/guide/what-is-vitepress'
        }
      ]
    },
    // 第二部分
    {
      text: '基础配置',
      collapsed: false,
      items: [
        {
          text: '快速开始',
          link: '/VPDocs/getting-started'
        },
        {
          text: '静态资源处理',
          link: '/VPDocs/静态资源处理'
        }
      ]
    },
  ]
};

/docs/.vitepress/conf.d/index.ts文件中导出以上配置

提示

这一步不是必须的

ts
export * from './head'
export * from './nav'
export * from './sidebar'

最后在/docs/.vitepress/config.js文件中导入

ts
import { defineConfig } from 'vitepress'

import { head, nav, sidebar } from './configs'

export default defineConfig({
    ...
})