vitepress搭建博客

vitepress搭建博客

之前使用的Hugo搭建了一个博客，感兴趣的可以看看Hugo搭建个人博客，使用了一段时间，配置完成后使用还是相对简单的，不过总感觉不够顺手，后来看到vitepress，就尝试了一下，感觉使用更顺手一些，所以打算换成vitepress，下面记录一下搭建的过程。

搭建博客流程

• 关于使用vitepress搭建博客的基本流程，官方文档已经写的很详细了，简单看一遍照着做就可以搭起来，这里不多赘述。
  官方文档链接：https://vitepress.dev/zh/guide/getting-started

• 下面记录几个特殊配置，方便使用。

关于顶部导航栏和侧边栏的配置

• 关于顶部导航栏和侧边栏的配置，官方文档只是给了一个简单示例，而且是统一都写在了一个config.mts配置文件中，如果后期博客多了，每次添加新博客，都要修改这个配置文件，而且都在一个文件，很多嵌套关系，很容易改错了，针对这个问题，我们可以把顶部导航栏和侧边栏的配置单独提出来分开进行管理，这样就不用每次都去修改config.mts文件了。

顶部导航栏单独提出

• 在.vitepress/目录下新建文件夹themeConfig，然后在themeConfig文件夹下新建文件nav.ts，下面代码中，我们定义了一个NavItem[]类型的nav,在其中配置我们自定义的导航栏，我们只需要在config.mts文件中引用这个nav就可以了。

nav.ts文件

import { DefaultTheme } from 'vitepress'
 
export const nav: DefaultTheme.NavItem[] = [
    { 
        text: '编程技术', 
        items: [
            { text: 'Git', link: '/tec/git/git使用.md' },
        ]
    },
    { 
        text: '工具', 
        items: [
            { text: '编程环境', link: '/tools/env/python安装及pip源切换.md' },
            { text: '记录', link: '/tools/notes/博客创建.md' }
        ]
    },
    { 
        text: '关于', link: '/about'
    }
]

• 在config.mts文件中引用这个nav

import { defineConfig } from 'vitepress'
import { nav } from './themeConfig/nav' // [!code ++]
 
export default defineConfig({
  ...
  themeConfig: {
    nav: nav, // [!code ++]
    ...
  }
})

侧边栏单独提出

• 侧边栏提出和导航栏方式类似，新建文件sidebar.ts，，下面代码中，我们定义了一个Sidebar类型的sidebar,在其中配置我们自定义的导航栏，这样，我们只需要在config.mts文件中引用这个sidebar就可以了。

• sidebar.ts文件

import { DefaultTheme } from 'vitepress'
 
export const sidebar: DefaultTheme.Sidebar = [
  {
    text: '笔记',
    items: [
      { text: '使用Github+PicGo搭建图床', link: '/tools/notes/使用Github+PicGo搭建图床' },
      { text: 'vitepress搭建博客', link: '/tools/notes/vitepress搭建博客' },
    ]
  }
]

• 但是随着博客和侧边栏配置变多，sidebar.ts文件会变得很大，也不容易管理，所以我们可以对sidebar.ts文件进行拆分，将每个分类的侧边栏单独拆分出来。

• 在themeConfig下新建文件夹sidebar\tools,新建文件notes.ts，下面的代码我们定义了一个SidebarItem[]类型的tools_notes,然后在notes.ts中配置我们笔记分类对应的侧边栏，并在sidebar.ts中引用这个tools_notes。

• 这样笔记分类下新添加博客时就可以只修改notes.ts文件就可以，里面的结构比不拆分清晰很多，容易修改，不易出错。

• notes.ts文件

import { DefaultTheme } from 'vitepress'
 
export const tools_notes: DefaultTheme.SidebarItem[] = [
    {
      text: '笔记',
      items: [
        { text: '使用Github+PicGo搭建图床', link: '/tools/notes/使用Github+PicGo搭建图床' },
        { text: 'vitepress搭建博客', link: '/tools/notes/vitepress搭建博客' },
      ]
    }
  ]
 

• 在sidebar.ts文件中引用这个tools_notes

import { DefaultTheme } from 'vitepress'
import { tools_notes } from './sidebar/tools/notes' // [!code ++]
import { self_talk } from './sidebar/self-talk'
 
export const sidebar: DefaultTheme.Sidebar = {
    ...
    // 工具->记录
    '/tools/notes/': tools_notes, // [!code ++]
 
    // 碎碎念
    '/self-talk/': self_talk
 
  }

• 其中'/tools/notes/': tools_notes,这句含义是当用户位于 /tools/notes/ 目录时，会显示此侧边栏。
  具体参考官方多侧边栏配置：https://vitepress.dev/zh/reference/default-theme-sidebar#multiple-sidebars

• 在config.mts文件中引用这个sidebar

import { defineConfig } from 'vitepress'
import { sidebar } from './themeConfig/sidebar' // [!code ++]
 
export default defineConfig({
  ...
  themeConfig: {
    sidebar: sidebar, // [!code ++]
    ...
  }
})

目录结构

• 最终目录结构大致如下：

├── .vitepress
│   ├── config.mts
│   ├── themeConfig
│   │   ├── nav.ts
│   │   ├── sidebar.ts
│   │   └── sidebar
│   │       └── tools
│   │           └── notes.ts

主题配置

默认主题

• 主题配置文件config.mts中，可以配置很多主题相关的配置，具体可以参考官方文档：https://vitepress.dev/zh/reference/default-theme-config

• 如下配置中，可以在官方文档查看各项配置的作用，都有详细说明。

import { defineConfig } from 'vitepress'
import { nav } from './themeConfig/nav'
import { sidebar } from './themeConfig/sidebar'
 
export default defineConfig({
  ...
  themeConfig: {
    nav: nav,
    sidebar: sidebar,
    logo: '/avatar.jpg',
    search: {
      provider: 'local'
    },
    socialLinks: [
      { icon: 'github', link: 'https://github.com/mazy699' }
    ],
    outline: {
      level: [2, 6],
      label: '目录'
    },
    lastUpdated: {
      text: '最后更新于',
      formatOptions: {
        dateStyle: 'full',
        timeStyle: 'medium'
      }
    },
    darkModeSwitchLabel: '主题',
    lightModeSwitchTitle: '切换到浅色模式',
    darkModeSwitchTitle: '切换到深色模式',
    sidebarMenuLabel: '菜单',
    returnToTopLabel: '返回顶部',
    docFooter: {
      prev: '上一页',
      next: '下一页'
    },
    footer: {
      copyright: 'MIT Licensed | Copyright © 2021-present Mazy'
    },
  }
})

Markdown相关

• 代码块显示行号, 具体可以参考官方文档：https://vitepress.dev/zh/guide/markdown#line-numbers

export default defineConfig({
  ...
  markdown: {
    lineNumbers: true
  },
  themeConfig: {
    ...
  }
})

• 更多Markdown相关配置，如代码高亮式样等等，可以参考官方文档：https://vitepress.dev/zh/reference/site-config#markdown
  默认的我使用感觉还可以，就没有修改了