@fuxishi/vitepress-theme 1.0.5 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +127 -119
- package/dist/chunk/FxHeroImageBg-BgS1cNDu.js +886 -0
- package/dist/chunk/FxMusicBall-BruAGB47.js +185 -0
- package/dist/config.d.ts +4 -0
- package/dist/config.js +17 -2
- package/dist/index.js +6 -2
- package/dist/style.css +1 -1
- package/package.json +6 -5
- package/dist/chunk/FxMusicBall-B_F7Q9VQ.js +0 -171
- /package/dist/chunk/{FxHomeFeatureBefore-DUbsbVTj.js → FxHomeFeatureBefore-B-_BJxjO.js} +0 -0
package/README.md
CHANGED
|
@@ -1,119 +1,127 @@
|
|
|
1
|
-
# @fuxishi/vitepress-theme
|
|
2
|
-
|
|
3
|
-
精美的 VitePress 文档站主题扩展，毛玻璃质感，紫蓝渐变，动效丰富，开箱即用。
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## 特性
|
|
8
|
-
|
|
9
|
-
- 🎵
|
|
10
|
-
- 🎊
|
|
11
|
-
-
|
|
12
|
-
- ✨
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
import
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
//
|
|
70
|
-
|
|
71
|
-
//
|
|
72
|
-
// confetti: {
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
109
|
-
##
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
1
|
+
# @fuxishi/vitepress-theme
|
|
2
|
+
|
|
3
|
+
精美的 VitePress 文档站主题扩展，毛玻璃质感，紫蓝渐变，动效丰富，开箱即用。
|
|
4
|
+
|
|
5
|
+
[English](./README_EN.md)
|
|
6
|
+
|
|
7
|
+
## 特性
|
|
8
|
+
|
|
9
|
+
- 🎵 **悬浮音乐球** — 毛玻璃质感的浮动播放器，支持单曲/列表模式，紫蓝渐变进度环与四重播放动效
|
|
10
|
+
- 🎊 **点击彩纸** — 全局点击彩纸特效，支持金色星星、彩色烟花和自定义 Emoji
|
|
11
|
+
- 🎨 **Hero 图片取色** — 自动提取首页 hero 图片颜色，动态应用到背景光晕、标题渐变、代码块光束和音乐球
|
|
12
|
+
- ✨ **Feature 光效** — 首页 Feature 卡片鼠标追踪光晕效果
|
|
13
|
+
- ✨ **光束边框** — 暗色模式下代码块和导航 hover 时展示紫青品牌色光束旋转边框
|
|
14
|
+
- 🔄 **主题切换动画** — View Transition API 实现亮暗模式圆形扩散动画
|
|
15
|
+
- 📜 **平滑滚动** — 右侧大纲导航点击时平滑滚动，指示条丝滑过渡
|
|
16
|
+
- 🎨 **标题装饰** — h1-h4 各有不同颜色的下划线装饰
|
|
17
|
+
- ⚙️ **类型安全** — 完整的 TypeScript 类型定义，IDE 友好
|
|
18
|
+
|
|
19
|
+
## 安装
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @fuxishi/vitepress-theme
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
需要安装以下 peerDependencies：
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install vitepress
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## 使用
|
|
32
|
+
|
|
33
|
+
### 1. 注册主题
|
|
34
|
+
|
|
35
|
+
创建 `.vitepress/theme/index.ts`：
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import FxTheme from "@fuxishi/vitepress-theme";
|
|
39
|
+
import "@fuxishi/vitepress-theme/style.css";
|
|
40
|
+
|
|
41
|
+
export default FxTheme;
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 2. 继承配置
|
|
45
|
+
|
|
46
|
+
创建 `.vitepress/config.mts`：
|
|
47
|
+
|
|
48
|
+
```ts
|
|
49
|
+
import { defineConfigWithTheme } from "vitepress";
|
|
50
|
+
import fxConfig from "@fuxishi/vitepress-theme/config";
|
|
51
|
+
import type { FxThemeConfig } from "@fuxishi/vitepress-theme/config";
|
|
52
|
+
|
|
53
|
+
export default defineConfigWithTheme<FxThemeConfig>({
|
|
54
|
+
extends: fxConfig,
|
|
55
|
+
lang: "zh-CN",
|
|
56
|
+
title: "我的文档站",
|
|
57
|
+
themeConfig: {
|
|
58
|
+
nav: [{ text: "指南", link: "/guide/" }],
|
|
59
|
+
sidebar: {
|
|
60
|
+
"/guide/": [{ text: "快速开始", link: "/guide/" }],
|
|
61
|
+
},
|
|
62
|
+
// 启用音乐球
|
|
63
|
+
musicBall: {
|
|
64
|
+
enable: true,
|
|
65
|
+
autoplay: false,
|
|
66
|
+
loop: true,
|
|
67
|
+
src: "/music/my-song.mp3",
|
|
68
|
+
},
|
|
69
|
+
// 启用彩纸效果
|
|
70
|
+
confetti: true,
|
|
71
|
+
// 彩色烟花
|
|
72
|
+
// confetti: { shape: "firework" },
|
|
73
|
+
// 自定义 Emoji
|
|
74
|
+
// confetti: { shapes: ["🌸", "🎀"] },
|
|
75
|
+
// 启用 hero 图片取色
|
|
76
|
+
heroImageColor: true,
|
|
77
|
+
// 启用平滑滚动
|
|
78
|
+
smoothScroll: true,
|
|
79
|
+
},
|
|
80
|
+
});
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### 3. 启动开发服务器
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
npx vitepress dev
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## 配置
|
|
90
|
+
|
|
91
|
+
### FxThemeConfig
|
|
92
|
+
|
|
93
|
+
继承自 VitePress `DefaultTheme.Config`，新增以下字段：
|
|
94
|
+
|
|
95
|
+
| 配置项 | 类型 | 默认值 | 说明 |
|
|
96
|
+
| -------------------- | ---------------------- | -------- | ------------------------------------------------------ |
|
|
97
|
+
| `musicBall.enable` | `boolean` | `true` | 是否启用音乐球 |
|
|
98
|
+
| `musicBall.visible` | `boolean` | `true` | 是否可见 |
|
|
99
|
+
| `musicBall.autoplay` | `boolean` | `false` | 自动播放 |
|
|
100
|
+
| `musicBall.loop` | `boolean` | `true` | 循环播放（单曲模式） |
|
|
101
|
+
| `musicBall.src` | `string` | `''` | 单首音乐地址 |
|
|
102
|
+
| `musicBall.list` | `MusicItem[]` | — | 多首音乐列表 |
|
|
103
|
+
| `confetti` | `boolean \| object` | `true` | 启用彩纸效果 |
|
|
104
|
+
| `confetti.shape` | `'star' \| 'firework'` | `'star'` | 预设形状 |
|
|
105
|
+
| `confetti.shapes` | `string \| string[]` | — | 自定义 Emoji 形状 |
|
|
106
|
+
| `heroImageColor` | `boolean` | `false` | 自动提取 hero 图片颜色（影响光晕、标题、光束、音乐球） |
|
|
107
|
+
| `smoothScroll` | `boolean` | `false` | 启用平滑滚动和大纲指示条过渡动画 |
|
|
108
|
+
|
|
109
|
+
## 导出
|
|
110
|
+
|
|
111
|
+
| 导出路径 | 说明 |
|
|
112
|
+
| ------------------------------------ | ---------------------- |
|
|
113
|
+
| `@fuxishi/vitepress-theme` | 主题（Layout + 样式） |
|
|
114
|
+
| `@fuxishi/vitepress-theme/config` | VitePress 基础配置预设 |
|
|
115
|
+
| `@fuxishi/vitepress-theme/style.css` | 独立样式文件 |
|
|
116
|
+
|
|
117
|
+
## 文档
|
|
118
|
+
|
|
119
|
+
完整文档请访问：
|
|
120
|
+
|
|
121
|
+
[https://fuxishi-vitepress-theme.fuxizjxzy.cn](https://fuxishi-vitepress-theme.fuxizjxzy.cn)
|
|
122
|
+
|
|
123
|
+
## License
|
|
124
|
+
|
|
125
|
+
[MIT](./LICENSE)
|
|
126
|
+
|
|
127
|
+
> 后续将在 GitHub 开放源码。
|