骏骏骏的博客

主题

骏骏骏2025-10-16
1011
4.8m
Get...

VitePress搭建 ​

项目创建 ​

vitepress官网：https://vitepress.dev/

1.创建项目文件夹 ​
bash
mikdir '文件夹名'
2.添加项目依赖 ​
bash
cd  '创建文件夹'

yarn：
yarn add -D vitepress

npm：
npm add -D vitepress
3.初始化项目 ​
bash
npx vitepress init

┌  Welcome to VitePress!
│
#  此配置为项目的根目录 会在改文件夹下面创建 ,vitepress  .vitepress 在什么位置什么位置就为项目根目录
◇  Where should VitePress initialize the config?
│  ./docs 
│
# 项目名称
◇  Site title:
│  My Awesome Project
│
/# 项目介绍
◇  Site description:
│  A VitePress Site
│
# 使用的主题
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└
4.启动项目 ​
yarn：
yarn docs:dev

npm：
npm run docs:dev

项目目录结构 ​

bash
.
├─ docs
│  ├─ .vitepress #当前项目根目录
│  │  └─ config.js #项目配置文件
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

配置文件 ​

javascript
/*
 * @Author: 芝士雪豹
 * @Date: 2023-12-21 13:20:26
 * @LastEditors: your name
 * @LastEditTime: 2023-12-21 20:06:51
 * @Description: 
 * @FilePath: /my-blog/docs/.vitepress/config.mjs
 */
import { defineConfig } from 'vitepress'
import { set_sidebar } from './autoSidebar'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  // 网站标题
  title: "骏骏骏的博客",
  description: "骏的个人博客",
  lang: 'zh-CN',
  // 显示更新的时间
  lastUpdated: true,
  lastUpdatedText: "最近更新",
  themeConfig: {
    //左上角的文字介绍
    siteTitle: "骏骏骏的博客",
     //左上角的logo,注意：放在public文件夹中 但是打包后 文件夹会消失 所以这里直接写 /logo.svg
    logo: "/logo.svg",
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      //text代表每一项的名字，link是连接的位置
      {
        text: "主页",
        link: '/index'
      },
      {
        //导航标签的名字
        text: "技术分享",
        // 子列表
        items: [
          { text: "java", link: "/skill/java/index", },
          { text: "nodejs", link: "/skill/nodejs/index" },
          { text: "vue", link: "/skill/vue/index" },
          { text: "其他", link: "/skill/other/index" },
        ]
      },
      {
        text: "代码笔记",
        link: '/code/index'
      },
      //这种是没有下拉菜单的版本
      { text: "其他", link: "/other/index" },
    ],
    // 路由列表 这个是使用了自动路由
    sidebar: {
      '/code': set_sidebar('/code'),
      '/other': set_sidebar('/other'),
      '/skill/java': set_sidebar('/skill/java'),
      '/skill/vue': set_sidebar('/skill/vue'),
      '/skill/nodejs': set_sidebar('/skill/nodejs'),
      '/skill/other': set_sidebar('/skill/other'),
    },
    // 平台连接 
    socialLinks: [
      { icon: "github", link: "https://github.com/1906789469" }
    ],
    // 页脚显示
    footer: {
      message: '愿你我都做生活的高手',
      copyright: '滇ICP备2023013772号-1'
    }
  }
})

index.md ​

markdown
---
# https://vitepress.dev/reference/default-theme-home-page
title: 骏骏骏的博客
layout: home
hero:
  name: 骏骏骏的博客
  text: 大学生一枚
  tagline: 懒癌患者，一个喜欢骑车的程序员
  image:
    src: /home.png
    alt: logo
  actions:
    - theme: brand
      text: 学习笔记 →
      link: /articles/basic/index
    - theme: alt
      text: 个人介绍
      link: /other/readme

features:
  - icon: ⚡️
    title: 技术分享
    details: 记录学习新技术的过程，记录分享一些自己踩过的坑
  - icon: 🖖
    title: 代码笔记
    details: 一些自己觉得有用的代码片段
  - icon: 🛠️
    title: 无聊吐槽
    details: 感悟人生
---

自动侧边栏 ​

代码来源

1.在.vitepress目录下新建autoSidebar.js文件 ​
2.代码如下 ​
javascript
/*
 * @Author: 芝士雪豹
 * @Date: 2023-12-21 14:19:25
 * @LastEditors: your name
 * @LastEditTime: 2023-12-21 14:43:10
 * @Description: 
 * @FilePath: /vitepress/docs/.vitepress/autoSidebar.js
 */
import path from 'node:path'
import fs from 'node:fs'

// 文件根目录
const DIR_PATH = path.resolve()
// 白名单,过滤不是文章的文件和文件夹
const WHITE_LIST = ['index.md', '.vitepress', 'node_modules', '.idea', 'assets','public','Web','.vscode']


// 判断是否是文件夹
const isDirectory = (path) => fs.lstatSync(path).isDirectory()

// 取差值
const intersections = (arr1, arr2) => Array.from(new Set(arr1.filter((item) => !new Set(arr2).has(item))))

// 把方法导出直接使用
function getList(params, path1, pathname) {
    console.log('params',params);
    console.log('path1',path1);
    console.log('pathname',pathname);

    // 存放结果
    const res = []
    // 开始遍历params
    for (let file in params) {
        // 拼接目录
        const dir = path.join(path1, params[file])
        // 判断是否是文件夹
        const isDir = isDirectory(dir)
        if (isDir) {
            // 如果是文件夹,读取之后作为下一次递归参数
            const files = fs.readdirSync(dir)
            res.push({
                text: params[file],
                collapsible: true,
                items: getList(files, dir, `${pathname}/${params[file]}`),
            })
        } else {
            // 获取名字
            const name = path.basename(params[file])
            // 排除非 md 文件
            const suffix = path.extname(params[file])
            if (suffix !== '.md') {
                continue
            }
            res.push({
                text: name.replace('.md',''),
                link: `${pathname}/${name}`,
            })
        }
    }
    
    return res
}

export const set_sidebar = (pathname) => {
    console.log(pathname);
    // 获取pathname的路径
    const dirPath = path.join(DIR_PATH, '/docs'+pathname)
    // 读取pathname下的所有文件或者文件夹
    const files = fs.readdirSync(dirPath)
    // 过滤掉
    const items = intersections(files, WHITE_LIST)
    // getList 函数后面会讲到
    return getList(items, dirPath, pathname)
}
最近更新