From 411e9dc41d906eeb113451a1ea0c885f0a6e932c Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Wed, 17 Apr 2024 12:17:05 +0800 Subject: [PATCH] docs: update docs --- docs/.vuepress/navbar.ts | 1 + docs/.vuepress/notes.ts | 12 ++++++ docs/en/README.md | 2 +- docs/notes/theme/config/notes配置.md | 11 +++-- docs/notes/theme/config/导航栏配置.md | 7 +++- docs/notes/theme/guide/markdown/进阶.md | 3 ++ docs/notes/theme/guide/自定义首页.md | 56 +++++++++++++++++++++++-- 7 files changed, 83 insertions(+), 9 deletions(-) diff --git a/docs/.vuepress/navbar.ts b/docs/.vuepress/navbar.ts index 1fded558..e13c3537 100644 --- a/docs/.vuepress/navbar.ts +++ b/docs/.vuepress/navbar.ts @@ -33,6 +33,7 @@ export const zhNavbar = [ text: '更多', icon: 'icon-park-outline:more-three', items: [ + { text: '主题工具', link: '/tools/' }, { text: '友情链接', link: '/friends/' }, { text: 'Vuepress', diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts index 46528174..e930fa9f 100644 --- a/docs/.vuepress/notes.ts +++ b/docs/.vuepress/notes.ts @@ -124,6 +124,18 @@ export const zhNotes = definePlumeNotesConfig({ }, ], }, + { + dir: 'tools', + link: '/tools/', + sidebar: [ + { + text: '工具', + icon: 'tabler:tools', + link: '/tools/', + items: ['home-hero-tint-plate', 'caniuse'], + }, + ], + }, ], }) diff --git a/docs/en/README.md b/docs/en/README.md index dcc45ac1..b9f038a7 100644 --- a/docs/en/README.md +++ b/docs/en/README.md @@ -5,7 +5,7 @@ config: - type: hero full: true - background: filter-blur + background: tint-plate hero: name: Theme Plume tagline: Vuepress Next Theme diff --git a/docs/notes/theme/config/notes配置.md b/docs/notes/theme/config/notes配置.md index 39987023..8726e347 100644 --- a/docs/notes/theme/config/notes配置.md +++ b/docs/notes/theme/config/notes配置.md @@ -121,9 +121,13 @@ interface NotesSidebarItem { */ items?: NotesSidebar /** - * 侧边栏图标 + * - 支持 iconify 图标，直接使用 iconify name 即可自动加载 + * @see https://icon-sets.iconify.design/ + * + * - 如果 iconify 图标不满足您的需求，也可以支持传入 svg 字符串。 + * - 还支持使用 本地图片 或 远程图片，本地图片的路径需要以 `/` 开头。 */ - icon?: string + icon?: string | { svg: string } } ``` @@ -135,7 +139,8 @@ interface NotesSidebarItem { ### 侧边栏图标 -主题不仅可以通过 侧边栏配置中 `icon` 配置图标，还可以通过 文件中的 frontmatter 中 `icon` 字段 配置图标。 +主题不仅可以通过 侧边栏配置中 `icon` 配置图标，还可以通过 文件中的 frontmatter 中 `icon` 字段 配置图标， +与 侧边栏配置中的 `icon` 一致。 ```md --- diff --git a/docs/notes/theme/config/导航栏配置.md b/docs/notes/theme/config/导航栏配置.md index 3d77e96d..567f0a83 100644 --- a/docs/notes/theme/config/导航栏配置.md +++ b/docs/notes/theme/config/导航栏配置.md @@ -91,10 +91,13 @@ type NavItem = string | { */ link: string /** - * 支持 iconify 图标，直接使用 iconify name 即可自动加载 + * - 支持 iconify 图标，直接使用 iconify name 即可自动加载 * @see https://icon-sets.iconify.design/ + * + * - 如果 iconify 图标不满足您的需求，也可以支持传入 svg 字符串。 + * - 还支持使用 本地图片 或 远程图片，本地图片的路径需要以 `/` 开头。 */ - icon?: string + icon?: string | { svg: string } /** * 控制元素何时被激活 */ diff --git a/docs/notes/theme/guide/markdown/进阶.md b/docs/notes/theme/guide/markdown/进阶.md index 5ef2a619..d8fc7e1b 100644 --- a/docs/notes/theme/guide/markdown/进阶.md +++ b/docs/notes/theme/guide/markdown/进阶.md @@ -327,6 +327,9 @@ export default defineUserConfig({ @[caniuse](feature) ``` +为了方便使用，主题提供了工具支持：[caniuse 特性搜索](/tools/caniuse/)，你可以直接使用该工具 +帮助生成 markdown 代码。 + ### 语法 ``` md diff --git a/docs/notes/theme/guide/自定义首页.md b/docs/notes/theme/guide/自定义首页.md index b694bf55..4a6dda50 100644 --- a/docs/notes/theme/guide/自定义首页.md +++ b/docs/notes/theme/guide/自定义首页.md @@ -144,6 +144,8 @@ config: 适用于 文档 类型站点，放置于 首位。 +**工具支持： [首页背景色板配置工具](/tools/home-hero-tint-plate/)** + ```ts interface PlumeThemeHomeHero extends PlumeHomeConfigBase { type: 'hero' @@ -158,14 +160,36 @@ interface PlumeThemeHomeHero extends PlumeHomeConfigBase { } } /** - * 背景图片，"filter-blur" 为预设效果 + * 背景图片，"tint-plate" 为预设效果, 也可以配置为图片地址 */ - background?: 'filter-blur' | string + background?: 'tint-plate' | string + + /** + * 当 background 为预设背景时，可以配置 RGB 值，用于调整背景 + * 该配置仅在 `background` 为 `tint-plate` 时生效 + */ + tintPlate?: TintPlate /** * 如果是非预设背景，可以设置背景图片的滤镜效果 */ filter?: string } +interface TintPlateObj { + // value 表示 基准色值，范围为 0 ~ 255 + // offset 表示 基准色值的偏移量，范围为 0 ~ (255 - value) + r: { value: number, offset: number } + g: { value: number, offset: number } + b: { value: number, offset: number } +} +type TintPlate = + | number // 210 + | string // '210,210,210' => red,green,blue + // { r: { value: 220, offset: 36 }, g: { value: 220, offset: 36 }, b: { value: 220, offset: 36 } } + | TintPlate + // { light: 210, dark: 20 } + // { light: '210,210,210', dark: '20,20,20' } + | { light: number | string, dark: number | string } + | { light: TintPlate, dark: TintPlate } ``` **示例：** @@ -177,7 +201,7 @@ config: - type: hero full: true - background: filter-blur + background: tint-plate hero: name: Theme Plume tagline: Vuepress Next Theme @@ -200,6 +224,32 @@ config: Theme Plume ::: +当 `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`