快速开始

版本兼容性

1.0.9 及之前的版本仅适用于 VitePress 1.6.4。如果你使用 VitePress 2.x，请等待主题后续版本适配。

版本警告

1.0.10 版本的代码块折叠展开功能存在问题，已废弃，请升级到 1.0.11 及以上版本。

安装

在你的 VitePress 项目中安装主题包：

npm

npm install @fuxishi/vitepress-theme

pnpm

pnpm add @fuxishi/vitepress-theme

yarn

yarn add @fuxishi/vitepress-theme

同时需要安装以下 peerDependencies：

npm install vitepress

配置主题

1. 注册主题

创建或修改 .vitepress/theme/index.ts：

import FxTheme from "@fuxishi/vitepress-theme"
import "@fuxishi/vitepress-theme/style.css"

export default FxTheme

2. 继承配置

创建或修改 .vitepress/config.mts：

import { defineConfigWithTheme } from "vitepress"
import fxConfig from "@fuxishi/vitepress-theme/config"
import type { FxThemeConfig } from "@fuxishi/vitepress-theme/config"

export default defineConfigWithTheme<FxThemeConfig>({
  extends: fxConfig,
  lang: "zh-CN",
  title: "我的文档站",
  description: "使用 @fuxishi/vitepress-theme 构建的文档站",
  themeConfig: {
    // 在这里添加你的导航、侧边栏等配置
    nav: [{ text: "指南", link: "/guide/" }],
    sidebar: {
      "/guide/": [{ text: "介绍", link: "/guide/" }],
    },
  },
})

3. 启动开发服务器

npx vitepress dev

打开浏览器即可看到应用了主题的文档站。

主题预设

fxConfig 预设了以下基础配置：

配置项	预设值	说明
outline	[2, 3]	仅显示 h2、h3 大纲
markdown.lineNumbers	true	代码块显示行号
vite.ssr.noExternal	自动配置	确保 Element Plus、canvas-confetti、node-vibrant、@fuxishi/vitepress-theme 在 SSR 中正确工作

你可以在 defineConfigWithTheme 中覆盖任何预设值。

下一步

• 配置参考 — 了解所有可配置项
• 样式定制 — 通过 CSS 变量自定义主题外观
• 音乐球 — 配置悬浮音乐播放器