开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第16天，点击查看活动详情

前言

学习的时候我们一般要记笔记，毕竟‘好记性不如烂笔头’，现在有些人会选择记电子笔记，比起纸质它更加方便，可以记笔记的文档格式也多种多样，比如word、md等，记笔记的多了，文档也多了起来，整理查询也复杂起来了，如果能把这些资源整合起来，岂不是方便很多，这时候我们就可以借用VitePress创建自己的文档页面。

VitePress

vitePress是由vite+vue驱动的静态页面生成器，它是VuePress的兄弟。我们可以用vitePress生成一个文档页面，并利用导航栏、侧边栏进行分类导航。接下来我们跟着步骤一起来创建。

初始化

初始化项目。新建一个文档，用编辑器打开，初始化项目，然后下载vitePress，选择自己喜欢的工具包进行操作：

  //初始化
   yarn init
  //下载
  yarn add vitepress --dev

下载完成我们创建一个docs文件夹再创建一个index.md文件，随便写一些内容。我们写的内容都是在md文件中vitepress会将md文件转换为html文件渲染出来。

我们在package.json中添加以下配置用来启动项目：

     "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },

然后输入命令行启动项目：

   yarn docs:dev

在浏览器打开网页我们就能得到一个静态页面。

设置主题

到此我们就得到了‘首页’内容，下面我们利用vitepress自带的主题，做出导航栏与侧边栏，在docs文件夹下面创建一个.vitepress文件夹，然后再创建一个config.ts文件，config文件用来配置主题相关项目。

创建thmeConfig对象进行主题设置，然后配置一下属性：

setTitle:用来设置首页标题。
logo:用来设置logo。

export default {
themeConfig: {
siteTitle: '躺平使者',
logo:'./logo.png'
}
};

如果我们想要设置网页标签栏的标题跟logo，直接用title跟logo设置：

export default {
title: '躺平使者',
logo: './logo.png',
};

nav:用来设置导航栏，接收一个数组，数组元素是对象，包含以下属性：
text:导航标题。
link:链接文档。
items：子导航数组，依旧通过text设置标题跟链接
activeMatch:定义链接的高亮状态，可以定义正则表达式。我们可以将导航值用一个函数进行设置：

 //nav属性
    themeConfig: {
    nav: nav(),
  }
   //导航栏 text标题 单个link链接到的文件 层级菜单用items activeMatch高亮菜单
    function nav() {
      return [
        { text: 'vue学习笔记', link: '/study/studyLink', activeMatch: '/study/' }
      ];
    }

文档的路径不需要加上.md后缀，设置好的值我们要将对应的文件创建出来。

sidebar:用来设置侧边栏。sidebar也是接收一个数组，数组元素属性跟nav一样，在我们写路径时，以‘/’结尾，会定位到index.md文件。

  themeConfig: {
    sidebar: [
      {
        text: '侧边栏',
        //展示study/index.md的内容 没有的话就是404
        link: '/study/'
      }
    ]
  }

侧边栏可以跟导航栏结合起来，这时候sidebar接收一个对象，属性key值是设置导航栏的文件夹名称，我们在study导航下设置侧边栏，将侧边栏的值用函数返回。

  themeConfig: {
   //对象形式
    sidebar: {
      '/study/': sidebarStudy()
    }
  }
  
   //侧边栏
    function sidebarStudy() {
      return [
        {
          text: '学习链接',
          link: '/study/studyLink'
        },
        {
          text: '工具',
          link: '/study/vue'
        }
      ];
    }

items表示子侧边栏，当有子侧边栏时，我们可以用collapsible设置可以折叠的侧边栏菜单。

上面涉及到的路径我们一定要建立对应的文件，最终我们的文件夹与配置项如下：启动项目我们就能得到以下页面：

总结

以上就是用vitepress创建个人文档的步骤，如果我们想要拥有一个自己的文档网页，就根据步骤去创建吧，记录各种学习笔记等还是挺不错的。

VitePress——创建个人文档

前言

VitePress

初始化

设置主题

总结