vitepress-tree-hole

简述

vitepress-tree-hole是一个基于vitepress开发的博客主题，也是当前博客所使用的主题，它是仿照vuepress-reco的风格，目前仍在不断完善中，欢迎感兴趣的人加入。

vitepress-tree-hole

vitepress 博客主题

安装

npm

$ npm i @night-tea/vitepress-tree-hole

pnpm

$ pnpm i @night-tea/vitepress-tree-hole

yarn

$ yarn add @night-tea/vitepress-tree-hole

使用

首先引入主题

// .vitepress/theme/index.ts
import theme from "@night-tea/vitepress-tree-hole";
export default {
  extends: theme,
  // ....
} satisfies Theme;

如果没有额外扩展的需求，也可以这样写

import theme from "@night-tea/vitepress-tree-hole";
export default theme;

在配置文件中，将defineConfig更换为defineConfigWithTheme,并引入基本配置

// .vitepress/config.mts
import { defineConfig } from "vitepress"; 
import { defineConfigWithTheme } from "vitepress"; 
import baseConfig from "@night-tea/vitepress-tree-hole/baseConfig"; 
export default defineConfigWithTheme<ThemeConfig>({
  extends: baseConfig, 
  // ...
})

文件结构

.
├─ .vitepress
|  ├─ theme
|  |  └─ index.ts
│  └─ config.mts
├─ blogs // [!code ++]
├─ docs // [!code ++]
└─ pages // [!code ++]
└─ package.json

使用该主题，需要约束一定的文件结构，本主题将所页面分为三种情况：博客，文档，页面，需要分别放在blogs 、docs pages这三个文件夹中，其中，这三者的区别是：

1. 博客会被文章列表获取，并会在blog页面中展示，也会在标签 分类 时间线中展示
2. 文档不会在文章列表中展示，适用于库的API文档等非博客类文档
3. 页面主要是那些做首页、导航、时间线灯页面的md文档

下一步

1. 创建本主题的页面
2. 设置本主题的配置