安装

TIP

主题尚未发布 npm 包，目前只支持手动安装

全新安装

若全新安装，建议直接 Clone / Fork Github 仓库作为模板

安装到现有 VitePress

INFO

安装主题不会影响现有的 VitePress 正常运行(部分 CSS 样式会被覆盖)，可以放心安装

安装依赖

pnpm add fast-glob gray-matter less medium-zoom remove-markdown @waline/client -D

下载主题

1. 将 Github 仓库中的 src 文件夹复制到你的 VitePress 根目录中
2. 将 .vitepress/theme/index.ts 复制到你的 VitePress 对应位置

必要配置

以下配置均在 .vitepress/config.ts 中

导入主题类型

导入 defineConfigWithTheme 与 ThemeConfig

import { defineConfigWithTheme } from 'vitepress';
import type { ThemeConfig } from '../src/types';

export default defineConfigWithTheme<ThemeConfig>({});

导入文章列表

导入 usePosts 方法，该方法用于获取博客的所有文章并生成文章列表，可以传入一个对象进行自定义配置，详见 usePosts 配置

返回的 posts 为文章列表，rewrites 为 VitePress 自带的路由重写功能，可用于重写文章的链接，本主题用 rewrites 实现永久链接功能，详见永久链接配置

import { usePosts } from '../src/composables/usePosts';

const { posts, rewrites } = await usePosts({});

主题配置

在 themeConfig 对象中进行主题的配置，详见 themeConfig 。其中 posts 的配置项是必须的，该项由 usePosts 返回

最小化配置

import { defineConfigWithTheme } from 'vitepress';
import { usePosts } from '../src/composables/usePosts';
import type { ThemeConfig } from '../src/types';

const { posts, rewrites } = await usePosts({});

export default defineConfigWithTheme<ThemeConfig>({
  rewrites,
  themeConfig: {
    posts
  }
});

启动

通过 pnpm dev 启动，首次运行后，会根据文章目录以及子目录中的所有 Markdown 文件在根目录中生成 index.md page-1.md page-2.md 等文件，这些 Markdown 文件将作为引导页或文章列表。

因此博客的所有文章需要创建在文章目录下（默认为 posts 目录，可在 usePosts 方法参数中进行修改，详见 usePosts)。目录下的每个 Markdown 文件代表一篇文章，还需要在文章顶部添加 frontmatter 用于描述文章标题、发布时间等等。

而其余目录的 Markdown 文件，则作为文档，在 .vitepress/config.ts 中为其配置 Sidebar 即可。