VitePress 文档搭建~

一、前言

node 建议16.20.0 起步pnpm

文档地址：vitepress.dev/zh/guide/wh…

二、初始化项目

创建 zhcx-docs 目录

mkdir zhcx-docs &&  cd zhcx-docs

初始化 package.json

npm init -y

安装 vitepress ，推荐使用 pnpm

pnpm add -D vitepress

假设选择在 ./docs 中搭建 VitePress 项目，生成的文件结构应该是这样的：

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

三、安装向导

VitePress 附带一个命令行设置向导，可以帮助你构建一个基本项目。安装后，通过运行以下命令

启动向导：

pnpm vitepress init

将需要回答几个简单的问题：

第 4 行 建议修改 ./docs

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

终端 pnpm run docs:dev 启动项目：

浏览器运行结果：http://127.0.0.1:5173/

四、配置介绍

详细地址参考：vitepress.dev/reference/d…

4.1、页头配置

修改 docs/.vitepress/config.mts 文件下的配置：

import { defineConfig } from "vitepress";

export default defineConfig({
   // 项目标题 
   title: "chuxin",

   // 项目描述
   description: "项目描述",

   // themeConfig 配置
   themeConfig: {
     // logo
     logo: "https://vitepress.dev/vitepress-logo-mini.svg",
     // 
     socialLinks: [
       { icon: "github", link: "https://github.com/chuxin-cs" }
     ],
     // 
     nav: [
       { text: "Home", link: "/" },
       { text: "Examples", link: "/markdown-examples" },
     ],
   },
});

最后

点击链接查看：www.yuque.com/chuxin-cs/i…