手把手带你拿下vitepress

先看看我的

• 偷用一个博主的主题插件，喜欢这种简洁直观的风格

• 附上地址，大家可以看看小小甘橘 (zhuhangfeng.github.io)

前期准备（官方说的）

• Node.js 18 及以上版本。

• 通过命令行界面 (CLI) 访问 VitePress 的终端。

• 支持 Markdown 语法的编辑器。

  • 推荐 VSCode 及其官方 Vue 扩展。

第一步

• 随便选择一种方式

npm add -D vitepress
pnpm add -D vitepress
yarn add -D vitepress
bun add -D vitepress

第二步

• 构建项目

npx vitepress init
pnpm vitepress init
yarn vitepress init
bun vitepress init

• 回答几个问题,后期都可以改，随便填

┌  Welcome to 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
└

第三步

• 运行

npm run docs:dev

• 界面如下，有点太素了，稍微美化一下下

第四步

• 安装主题和依赖，来自这个大佬VitePress 博客主题 | @sugarat/theme

pnpm add @sugarat/theme
pnpm add @element-plus/icons-vue element-plus vue sass

• 在配置文件.vitepress/config.ts (.js,mts等等均可) 中引入主题配置

import { defineConfig } from 'vitepress'

// 导入生成配置工具方法
import { getThemeConfig } from '@sugarat/theme/node'

// 主题独有配置，所有配置项，详见文档: https://theme.sugarat.top/
const blogTheme = getThemeConfig({}) 

export default defineConfig({
  // 继承博客主题配置
  extends: blogTheme, 
  // 省略VitePress其他配置
})

• 在布局配置文件.vitepress/theme/index.ts中引入主题布局

import BlogTheme from '@sugarat/theme'

export default BlogTheme

• 现在会变成这个样子，前提你得写好几篇文章。

第五步

• 使用一个大佬写的自动化添加sidebarvitepress自动生成侧边栏数据插件 - 掘金 (juejin.cn)

npm install vite-plugin-vitepress-auto-sidebar

//在config中添加
import AutoSidebar from 'vite-plugin-vitepress-auto-sidebar';
export default defineConfig({
 vite:{
    plugins:[
      // add plugin
      AutoSidebar(),
    ],
  },
})

第五步（搜索配置可有可无）

• 我使用的是algolia，配置如下

import { defineConfig } from 'vitepress'
import { getThemeConfig } from '@sugarat/theme/node'
export default defineConfig({
  themeConfig: {
    algolia:{
      appId: '',
      apiKey: '',
      indexName: '',
      placeholder: '搜索',
    },
  }
})

• 其中appId、apiKey、indexName需要去申请获取，申请地址DocSearch: Search made for documentation | DocSearch by Algolia，需要科学上网不然提交不了

第六步

• 写了这么多，估计也没人看，直接上源码得了zhuhangfeng/blogs_dev (github.com)
• 不知道写点啥，有没有大佬推荐推荐