开始之前

上一章vitepress教程 - 持续更新中~~ - 掘金 (juejin.cn)

为了让大家更快的认识vitepress如何快速开发，我就稍稍讲解一下我的理解。

给大家出一期误导图引导图

界面认识

nav - 导航栏

slider - 侧边栏

container - 内容展示区

footer - 底部

配置 - config.mts

常用的配置属性

lang - 选择语言

title - 网站标题

themeConfig - 主题配置

nav - 导航配置

slider - 侧边栏

docFooter - 底部展示

socialLinks - 社交链接

详细配置请参考官方文档vitepress配置

常规配置

title

文档标题 - 用于设置文档标题

值：string

description

描述 - 用于介绍网站

值：string

themeConfig

主题配置 - 主要用于配置网站导航，侧边栏，底部，和标题列表等

::: code-group

// nav 配置导航栏显示
nav:[
    {text:"首页",link:"./"},
    {text:"指引",link:"./start-before"},
    {text:"api",link:"./about"},
]

// search 是否开启搜索
search:{
    provider:'local', // 开启站内搜索 - 这里的搜索不是根据内容，而是根据标题进行搜索匹配
}

// slider 侧边栏
// 两种形式
// 第一种：一栏到底
slider：[
    {
        text:"指引", // 侧边栏标题
        items:[ // 侧边栏导航索引
            {text:'概要',link:'/start-before'},
            {text:'开始',link:'/starting'},
            ...
        ]
    }
]
// 第二种：分组
sidebar: [
      // 分组
      {
        text: '指引',
        items: [
          { text: '概要', link: '/start-before' },
          { text: '开始之前', link: '/starting' },
        ]
      },
      {
        text: '学习',
        items: [
          { text: '关于', link: '/about' },
        ]
      }
    ],

// docFooter 底部显示配置
docFooter: { 
      prev: '上一页', // 可以随意配置喜欢的
      next: '下一页', 
    }, 

// socialLinks 友情链接
socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ]

:::

markdown语法

请参考MarkDown官方教程

写在最后

// 大致的配置如下
import { defineConfig } from 'vitepress'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "My vitepress",
  description: "A VitePress Site",
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: '首页', link: '/' },
      { text: '指引', link: '/start-before' },
      { text: 'api', link: '/about' },
    ],
    search: { 
      provider: 'local'
    },
    outline: { 
      level: "deep", // 显示2-6级标题
      label: '大纲' // 文字显示
    },
   
    sidebar: [
      // 分组
      {
        text: '指引',
        items: [
          { text: '概要', link: '/start-before' },
          { text: '开始之前', link: '/starting' },
        ]
      },
      {
        text: '学习',
        items: [
          { text: '关于', link: '/about' },
        ]
      }
    ],
    docFooter: { 
      prev: '上一页', 
      next: '下一页', 
    }, 
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ]
  }
})

下一篇：vitepress中MarkDown扩展 - 掘金 (juejin.cn)