@fuxishi/vitepress-theme 1.0.4 → 1.0.6
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 +25 -15
- package/dist/chunk/FxConfetti-BA6pwd1S.js +116 -0
- package/dist/chunk/FxHeroImageBg-BgS1cNDu.js +886 -0
- package/dist/chunk/{FxMusicBall-B_F7Q9VQ.js → FxMusicBall-DE820HSu.js} +62 -57
- package/dist/config.d.ts +10 -1
- package/dist/config.js +17 -2
- package/dist/index.js +4 -2
- package/dist/style.css +1 -1
- package/package.json +4 -2
- package/dist/chunk/FxConfetti-DIy1zU6g.js +0 -51
- /package/dist/chunk/{FxHomeFeatureBefore-DUbsbVTj.js → FxHomeFeatureBefore-B-_BJxjO.js} +0 -0
package/README.md
CHANGED
|
@@ -7,7 +7,8 @@ A beautiful VitePress theme extension with frosted glass effects, purple-blue gr
|
|
|
7
7
|
## 特性 / Features
|
|
8
8
|
|
|
9
9
|
- 🎵 **悬浮音乐球 / Floating Music Ball** — 毛玻璃质感的浮动播放器，支持单曲/列表模式，紫蓝渐变进度环与四重播放动效 / Frosted glass floating player with single/playlist mode, purple-blue gradient progress ring and four playback animations
|
|
10
|
-
- 🎊 **点击彩纸 / Click Confetti** —
|
|
10
|
+
- 🎊 **点击彩纸 / Click Confetti** — 全局点击彩纸特效，支持金色星星、彩色烟花和自定义 Emoji / Global click confetti effect with gold stars, colorful fireworks, and custom Emoji
|
|
11
|
+
- 🎨 **Hero 图片取色 / Hero Image Color** — 自动提取首页 hero 图片颜色，动态应用到背景光晕、标题渐变、代码块光束和音乐球 / Auto-extract colors from hero image for background glow, title gradient, code block beams, and music ball
|
|
11
12
|
- ✨ **Feature 光效 / Feature Glow** — 首页 Feature 卡片鼠标追踪光晕效果 / Mouse-tracking glow effect on homepage Feature cards
|
|
12
13
|
- ✨ **光束边框 / Beam Border** — 暗色模式下代码块和导航 hover 时展示紫青品牌色光束旋转边框 / Purple-cyan brand color beam border on code blocks and navigation in dark mode on hover
|
|
13
14
|
- 🔄 **主题切换动画 / Theme Switch Animation** — View Transition API 实现亮暗模式圆形扩散动画 / Circular spread animation for light/dark mode switching using View Transition API
|
|
@@ -66,6 +67,12 @@ export default defineConfigWithTheme<FxThemeConfig>({
|
|
|
66
67
|
},
|
|
67
68
|
// 启用彩纸效果 / Enable confetti
|
|
68
69
|
confetti: true,
|
|
70
|
+
// 彩色烟花 / Colorful fireworks
|
|
71
|
+
// confetti: { shape: "firework" },
|
|
72
|
+
// 自定义 Emoji / Custom Emoji
|
|
73
|
+
// confetti: { shapes: ["🌸", "🎀"] },
|
|
74
|
+
// 启用 hero 图片取色 / Enable hero image color extraction
|
|
75
|
+
heroImageColor: true,
|
|
69
76
|
},
|
|
70
77
|
})
|
|
71
78
|
```
|
|
@@ -82,23 +89,26 @@ npx vitepress dev
|
|
|
82
89
|
|
|
83
90
|
继承自 VitePress `DefaultTheme.Config`，新增以下字段 / Extends VitePress `DefaultTheme.Config` with the following fields:
|
|
84
91
|
|
|
85
|
-
| 配置项 / Option
|
|
86
|
-
|
|
|
87
|
-
| `musicBall.enable`
|
|
88
|
-
| `musicBall.visible`
|
|
89
|
-
| `musicBall.autoplay`
|
|
90
|
-
| `musicBall.loop`
|
|
91
|
-
| `musicBall.src`
|
|
92
|
-
| `musicBall.list`
|
|
93
|
-
| `confetti`
|
|
92
|
+
| 配置项 / Option | 类型 / Type | 默认值 / Default | 说明 / Description |
|
|
93
|
+
| -------------------- | ---------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
94
|
+
| `musicBall.enable` | `boolean` | `true` | 是否启用音乐球 / Enable music ball |
|
|
95
|
+
| `musicBall.visible` | `boolean` | `true` | 是否可见 / Visibility |
|
|
96
|
+
| `musicBall.autoplay` | `boolean` | `false` | 自动播放 / Autoplay |
|
|
97
|
+
| `musicBall.loop` | `boolean` | `true` | 循环播放（单曲模式）/ Loop (single mode) |
|
|
98
|
+
| `musicBall.src` | `string` | `''` | 单首音乐地址 / Single music URL |
|
|
99
|
+
| `musicBall.list` | `MusicItem[]` | — | 多首音乐列表 / Multi-song playlist |
|
|
100
|
+
| `confetti` | `boolean \| object` | `true` | 启用彩纸效果 / Enable confetti |
|
|
101
|
+
| `confetti.shape` | `'star' \| 'firework'` | `'star'` | 预设形状 / Preset shape |
|
|
102
|
+
| `confetti.shapes` | `string \| string[]` | — | 自定义 Emoji / Custom Emoji shapes |
|
|
103
|
+
| `heroImageColor` | `boolean` | `false` | 自动提取 hero 图片颜色（影响光晕、标题、光束、音乐球）/ Auto-extract hero image colors (affects glow, title, beams, music ball) |
|
|
94
104
|
|
|
95
105
|
## 导出 / Exports
|
|
96
106
|
|
|
97
|
-
| 导出路径 / Export Path
|
|
98
|
-
|
|
|
99
|
-
| `@fuxishi/vitepress-theme`
|
|
100
|
-
| `@fuxishi/vitepress-theme/config`
|
|
101
|
-
| `@fuxishi/vitepress-theme/style.css`
|
|
107
|
+
| 导出路径 / Export Path | 说明 / Description |
|
|
108
|
+
| ------------------------------------ | ----------------------------------------------------- |
|
|
109
|
+
| `@fuxishi/vitepress-theme` | 主题（Layout + 样式）/ Theme (Layout + Styles) |
|
|
110
|
+
| `@fuxishi/vitepress-theme/config` | VitePress 基础配置预设 / VitePress base config preset |
|
|
111
|
+
| `@fuxishi/vitepress-theme/style.css` | 独立样式文件 / Standalone style file |
|
|
102
112
|
|
|
103
113
|
## 文档 / Documentation
|
|
104
114
|
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { defineComponent as e, onMounted as t } from "vue";
|
|
2
|
+
import n from "canvas-confetti";
|
|
3
|
+
//#endregion
|
|
4
|
+
//#region .vitepress/components/FxConfetti.vue
|
|
5
|
+
var r = /* @__PURE__ */ e({
|
|
6
|
+
__name: "FxConfetti",
|
|
7
|
+
props: { confetti: { type: [Boolean, Object] } },
|
|
8
|
+
setup(e) {
|
|
9
|
+
let r = e, i = typeof r.confetti == "object" ? r.confetti : {}, a = i.shape || "star", o = i.shapes ? Array.isArray(i.shapes) ? i.shapes : [i.shapes] : null, s = [];
|
|
10
|
+
t(() => {
|
|
11
|
+
o && (s = o.map((e) => n.shapeFromText({
|
|
12
|
+
text: e,
|
|
13
|
+
scalar: 2
|
|
14
|
+
}))), window.addEventListener("click", (e) => {
|
|
15
|
+
let t = e.clientX / (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth), n = e.clientY / (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);
|
|
16
|
+
s.length > 0 ? u(t, n) : a === "firework" ? l(t, n) : c(t, n);
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
let c = (e, t) => {
|
|
20
|
+
let r = {
|
|
21
|
+
spread: 360,
|
|
22
|
+
ticks: 50,
|
|
23
|
+
gravity: 0,
|
|
24
|
+
decay: .94,
|
|
25
|
+
startVelocity: 10,
|
|
26
|
+
colors: [
|
|
27
|
+
"FFE400",
|
|
28
|
+
"FFBD00",
|
|
29
|
+
"E89400",
|
|
30
|
+
"FFCA6C",
|
|
31
|
+
"FDFFB8"
|
|
32
|
+
],
|
|
33
|
+
origin: {
|
|
34
|
+
x: e,
|
|
35
|
+
y: t
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
function i() {
|
|
39
|
+
n({
|
|
40
|
+
...r,
|
|
41
|
+
particleCount: 4,
|
|
42
|
+
scalar: 1.2,
|
|
43
|
+
shapes: ["star"]
|
|
44
|
+
}), n({
|
|
45
|
+
...r,
|
|
46
|
+
particleCount: 10,
|
|
47
|
+
scalar: .75,
|
|
48
|
+
shapes: ["circle"]
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
setTimeout(i, 0), setTimeout(i, 50), setTimeout(i, 100);
|
|
52
|
+
}, l = (e, t) => {
|
|
53
|
+
let r = {
|
|
54
|
+
spread: 360,
|
|
55
|
+
ticks: 50,
|
|
56
|
+
gravity: 0,
|
|
57
|
+
decay: .94,
|
|
58
|
+
startVelocity: 10,
|
|
59
|
+
colors: [
|
|
60
|
+
"#FF1461",
|
|
61
|
+
"#18FF92",
|
|
62
|
+
"#5A87FF",
|
|
63
|
+
"#FBF38C",
|
|
64
|
+
"#FF6B35"
|
|
65
|
+
],
|
|
66
|
+
origin: {
|
|
67
|
+
x: e,
|
|
68
|
+
y: t
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
function i() {
|
|
72
|
+
n({
|
|
73
|
+
...r,
|
|
74
|
+
particleCount: 10,
|
|
75
|
+
scalar: 1.2
|
|
76
|
+
}), n({
|
|
77
|
+
...r,
|
|
78
|
+
particleCount: 10,
|
|
79
|
+
scalar: .75,
|
|
80
|
+
shapes: ["circle"]
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
setTimeout(i, 0), setTimeout(i, 50), setTimeout(i, 100);
|
|
84
|
+
}, u = (e, t) => {
|
|
85
|
+
let r = {
|
|
86
|
+
spread: 360,
|
|
87
|
+
ticks: 50,
|
|
88
|
+
gravity: 0,
|
|
89
|
+
decay: .94,
|
|
90
|
+
startVelocity: 10,
|
|
91
|
+
shapes: s,
|
|
92
|
+
origin: {
|
|
93
|
+
x: e,
|
|
94
|
+
y: t
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
function i() {
|
|
98
|
+
n({
|
|
99
|
+
...r,
|
|
100
|
+
particleCount: 10,
|
|
101
|
+
scalar: 1.5,
|
|
102
|
+
flat: !0
|
|
103
|
+
}), n({
|
|
104
|
+
...r,
|
|
105
|
+
particleCount: 10,
|
|
106
|
+
scalar: .75,
|
|
107
|
+
shapes: ["circle"]
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
setTimeout(i, 0), setTimeout(i, 50), setTimeout(i, 100);
|
|
111
|
+
};
|
|
112
|
+
return (e, t) => null;
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
//#endregion
|
|
116
|
+
export { r as default };
|