|
|
@ -1,25 +1,33 @@
|
|
|
|
# vitepress 自定义主题
|
|
|
|
# vitepress 自定义主题
|
|
|
|
可以直接克隆,也可以使用下面方法一步步自定义实现
|
|
|
|
可以直接克隆,也可以使用下面方法一步步自定义实现
|
|
|
|
|
|
|
|
## 克隆demo项目
|
|
|
|
克隆地址
|
|
|
|
克隆地址
|
|
|
|
```shell
|
|
|
|
```shell
|
|
|
|
git clone http://git.ppst.top/pp/custom-vitepress-theme-demo.git
|
|
|
|
http://git.ppst.top/pp/custom-vitepress-theme-demo
|
|
|
|
```
|
|
|
|
```
|
|
|
|
## 安装 vitepress
|
|
|
|
## 展示
|
|
|
|
|
|
|
|
![首页](http://img.ppst.top/custom-vitepress-theme/custom-vitepress-theme/1.png)
|
|
|
|
|
|
|
|
![归档](http://img.ppst.top/custom-vitepress-theme/custom-vitepress-theme/2.png)
|
|
|
|
|
|
|
|
![搜索](http://img.ppst.top/custom-vitepress-theme/custom-vitepress-theme/3.png)
|
|
|
|
|
|
|
|
![分类](http://img.ppst.top/custom-vitepress-theme/custom-vitepress-theme/4.png)
|
|
|
|
|
|
|
|
![黑夜模式](http://img.ppst.top/custom-vitepress-theme/custom-vitepress-theme/5.png)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 自定义使用
|
|
|
|
|
|
|
|
### 安装 vitepress
|
|
|
|
```shell
|
|
|
|
```shell
|
|
|
|
pnpm install vitepress
|
|
|
|
pnpm install vitepress
|
|
|
|
```
|
|
|
|
```
|
|
|
|
## 安装主题
|
|
|
|
### 安装主题
|
|
|
|
|
|
|
|
|
|
|
|
```shell
|
|
|
|
```shell
|
|
|
|
pnpm install custom-vitepress-theme
|
|
|
|
pnpm install custom-vitepress-theme
|
|
|
|
```
|
|
|
|
```
|
|
|
|
## 安装读取文档插件
|
|
|
|
### 安装读取文档插件
|
|
|
|
```shell
|
|
|
|
```shell
|
|
|
|
pnpm install markdown-from-posts
|
|
|
|
pnpm install markdown-from-posts
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 目录结构
|
|
|
|
### 目录结构
|
|
|
|
|
|
|
|
|
|
|
|
```md
|
|
|
|
```md
|
|
|
|
.vitepress
|
|
|
|
.vitepress
|
|
|
@ -37,7 +45,7 @@ public
|
|
|
|
index.md
|
|
|
|
index.md
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### .vitepress文件夹
|
|
|
|
#### .vitepress文件夹
|
|
|
|
|
|
|
|
|
|
|
|
config.ts - 配置自定义vitepress导航以及标题等
|
|
|
|
config.ts - 配置自定义vitepress导航以及标题等
|
|
|
|
|
|
|
|
|
|
|
|