+
@@ -188,9 +192,9 @@ useHomeHeroFilterBackground(canvas, computed(() => props.background === 'filter-
top: 0;
left: 0;
width: 100%;
- height: 20%;
+ height: 100%;
content: "";
- background: linear-gradient(var(--vp-c-bg) 0, transparent 100%);
+ background: linear-gradient(to bottom, var(--vp-c-bg) 0, transparent 40%, transparent 60%, var(--vp-c-bg) 140%);
}
.bg-filter canvas {
diff --git a/theme/src/client/components/Nav/NavBarMenuLink.vue b/theme/src/client/components/Nav/NavBarMenuLink.vue
index a82bc13f..57c4134e 100644
--- a/theme/src/client/components/Nav/NavBarMenuLink.vue
+++ b/theme/src/client/components/Nav/NavBarMenuLink.vue
@@ -3,6 +3,7 @@ import { usePageData } from 'vuepress/client'
import type { NavItemWithLink } from '../../../shared/index.js'
import { isActive } from '../../utils/index.js'
import AutoLink from '../AutoLink.vue'
+import VIcon from '../VIcon.vue'
defineProps<{
item: NavItemWithLink
@@ -23,7 +24,7 @@ const page = usePageData()
:href="item.link"
:no-icon="true"
>
-
+
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroup.vue b/theme/src/client/components/Nav/NavScreenMenuGroup.vue
index 8f2d0139..d935b243 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroup.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuGroup.vue
@@ -1,11 +1,12 @@
+
+
+ ![]()
+
+
+
+
+
diff --git a/theme/src/client/composables/home.ts b/theme/src/client/composables/home.ts
index 24132e04..93537c77 100644
--- a/theme/src/client/composables/home.ts
+++ b/theme/src/client/composables/home.ts
@@ -1,10 +1,30 @@
import type { Ref } from 'vue'
import { computed, onMounted, onUnmounted } from 'vue'
+import type { PlumeThemeHomeHero } from '../../shared/index.js'
import { useDarkMode } from './darkMode.js'
-export function useHomeHeroFilterBackground(
+export interface TintPlate {
+ r: { value: number, offset: number }
+ g: { value: number, offset: number }
+ b: { value: number, offset: number }
+}
+
+const lightTint = {
+ r: { value: 200, offset: 36 },
+ g: { value: 200, offset: 36 },
+ b: { value: 200, offset: 36 },
+}
+
+const darkTint = {
+ r: { value: 32, offset: 36 },
+ g: { value: 32, offset: 36 },
+ b: { value: 32, offset: 36 },
+}
+
+export function useHomeHeroTintPlate(
canvas: Ref
,
enable: Ref,
+ tintPlate: Ref,
) {
const isDark = useDarkMode()
@@ -12,7 +32,61 @@ export function useHomeHeroFilterBackground(
let t = 0
let timer: number
- const F = computed(() => isDark.value ? 32 : 220)
+ const plate = computed(() => {
+ const defaultTint = isDark.value ? darkTint : lightTint
+ if (!tintPlate.value)
+ return defaultTint
+
+ const plate = tintPlate.value
+ if (typeof plate === 'string' || typeof plate === 'number') {
+ if (isDark.value)
+ return darkTint
+ const values = toPlate(plate)
+ return values.length !== 3 ? lightTint : toTint(values)
+ }
+
+ if (typeof plate === 'object') {
+ if ('r' in plate) {
+ if (isDark.value)
+ return darkTint
+ return toNumber({ ...lightTint, ...plate })
+ }
+ const key = isDark.value ? 'dark' : 'light'
+ if (key in plate) {
+ const _plate = plate[key]
+ if (typeof _plate === 'string' || typeof _plate === 'number') {
+ const values = toPlate(_plate)
+ return values.length !== 3 ? lightTint : toTint(values)
+ }
+ return toNumber({ ...defaultTint, ...plate })
+ }
+ }
+ return defaultTint
+ })
+
+ function toPlate(plate: number | string) {
+ return typeof plate === 'number' || Number(plate) === Number.parseInt(plate)
+ ? [plate, plate, plate].map(n => Number(n))
+ : plate.includes(',') ? plate.replace(/\s/g, '').split(',').map(n => Number(n)) : []
+ }
+
+ function toTint([r, g, b]: number[]) {
+ return { r: toColor(r), g: toColor(g), b: toColor(b) }
+ }
+
+ function toColor(num: number) {
+ const offset = 256 - num
+ return { value: num, offset: offset > 64 ? 64 : offset }
+ }
+
+ function toNumber(tint: TintPlate): TintPlate {
+ Object.keys(tint).forEach((key) => {
+ const p = tint[key]
+ p.value = Number(p.value)
+ p.offset = Number(p.offset)
+ })
+ return tint
+ }
onMounted(() => {
if (canvas.value && enable.value) {
@@ -43,14 +117,17 @@ export function useHomeHeroFilterBackground(
}
function R(x: number, y: number, t: number) {
- return (Math.floor(F.value + 36 * Math.cos((x * x - y * y) / 300 + t)))
+ const r = plate.value.r
+ return (Math.floor(r.value + r.offset * Math.cos((x * x - y * y) / 300 + t)))
}
function G(x: number, y: number, t: number) {
- return (Math.floor(F.value + 36 * Math.sin((x * x * Math.cos(t / 4) + y * y * Math.sin(t / 3)) / 300)))
+ const g = plate.value.g
+ return (Math.floor(g.value + g.offset * Math.sin((x * x * Math.cos(t / 4) + y * y * Math.sin(t / 3)) / 300)))
}
function B(x: number, y: number, t: number) {
- return (Math.floor(F.value + 36 * Math.sin(5 * Math.sin(t / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100)))
+ const b = plate.value.b
+ return (Math.floor(b.value + b.offset * Math.sin(5 * Math.sin(t / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100)))
}
}
diff --git a/theme/src/shared/frontmatter.ts b/theme/src/shared/frontmatter.ts
index 5a4ff0ff..0778f061 100644
--- a/theme/src/shared/frontmatter.ts
+++ b/theme/src/shared/frontmatter.ts
@@ -36,11 +36,22 @@ export interface PlumeThemeHomeBanner extends Pick
+ 
:::
+当 `background` 配置为 `tint-plate` 时，还可以额外配置 `tintPlate` 调整 背景色调，范围为 `0 ~ 255`：
+
+```md
+---
+home: true
+config:
+ -
+ type: hero
+ full: true
+ background: tint-plate
+ tintPlate: 210
+---
+```
+
+`tintPlate` 用于配置 RGB 值：
+
+- 配置为单个值时，表示配置 red,green,blue 三个颜色值为相同值，范围： 0 - 255。示例： `210`。
+- 配置为三个值时，表示配置 red,green,blue 三个颜色值为不同值，范围： 0 - 255。示例： `210,210,210`。
+- 配置为 `TintPlate`，则可以更加灵活的控制每个颜色值和对应的偏移量。
+- 还可以配置为 `{ light, dark }`，在深色模式和浅色模式下使用不同的颜色值。
+
+::: info
+为了便于用户配置 美观的个性化的背景，主题还提供了 [首页背景色板配置工具](/tools/home-hero-tint-plate/)
+进行可视化操作，生成配置内容，你可以直接复制它们用于自己的项目中。
+:::
+
### features
- 类型： `PlumeThemeHomeFeatures`
diff --git a/docs/notes/tools/README.md b/docs/notes/tools/README.md
new file mode 100644
index 00000000..ca92add8
--- /dev/null
+++ b/docs/notes/tools/README.md
@@ -0,0 +1,15 @@
+---
+title: 主题工具包
+author: pengzhanbo
+createTime: 2024/04/16 16:27:03
+permalink: /tools/
+---
+
+## 概述
+
+主题工具包 旨在帮助用户在使用本主题提供的一些功能时，降低其使用门槛。
+
+## 工具列表
+
+- [caniuse 特性搜索](./caniuse.md)
+- [首页背景色板配置](./home-hero-tint-plate.md)
diff --git a/docs/notes/tools/caniuse.md b/docs/notes/tools/caniuse.md
new file mode 100644
index 00000000..e9ec65ee
--- /dev/null
+++ b/docs/notes/tools/caniuse.md
@@ -0,0 +1,15 @@
+---
+title: caniuse 特性搜索
+author: pengzhanbo
+icon: fa-brands:css3
+createTime: 2024/04/16 12:41:26
+permalink: /tools/caniuse/
+readingTime: false
+editLink: false
+contributors: false
+lastUpdated: false
+---
+
+本工具用于帮助搜索 caniuse 中的特性。并生成 caniuse markdown 代码。
+
+