feat(v1.2.0): 主题配色系统 + Hero 文字效果/一言颜色;修复 /douban 500、友链悬浮光圈裁切、瞬间顶图间距;Halo 版本要求 2.26+
- 新增官方预设调色板 11 套(浅/深双套色板,玻璃/阴影自动跟随),强调色留空跟随配色 - Hero 一言独立颜色配置(浅/深);文字显示效果:阴影/光晕/半透明遮罩/渐变遮罩/容器;默认无效果,移除自带散光 - /douban 适配 plugin-douban 1.2.6 SQLite 扁平化数据结构(item.spec.* -> item.*) - 友链卡片去掉 overflow:hidden,修复悬浮光圈被裁切;徽章简化为仅显示可达性 - 瞬间页顶图与首条卡片增加间距;theme-color 随配色/明暗联动
This commit is contained in:
@@ -13,7 +13,17 @@ Hero 首屏是 WarmIsland 主题的标志性区域,占据首页首屏的全部
|
||||
| `hero_hitokoto_api` | URL | `https://v1.hitokoto.cn/` | 一言 API 地址 |
|
||||
| `hero_hitokoto_categories` | 多选 | `d, i, k` | 一言句子类型 |
|
||||
| `hero_custom_description` | 多行文本 | — | 自定义描述文案 |
|
||||
| `hero_hitokoto_auto_refresh` | 开关 | `false` | 一言自动刷新 |
|
||||
| `hero_hitokoto_refresh_interval` | 下拉 | `10000` | 一言刷新间隔(秒) |
|
||||
| `hero_background_image` | 附件 | — | 背景图片 |
|
||||
| `hero_background_image_dark` | 附件 | — | 深色模式背景图片 |
|
||||
| `hero_title_color_light` | 颜色 | — | 大标题颜色(浅色模式),留空使用主题默认 |
|
||||
| `hero_title_color_dark` | 颜色 | — | 大标题颜色(深色模式),留空使用主题默认 |
|
||||
| `hero_subtitle_color_light` | 颜色 | — | 副标题颜色(浅色模式),留空使用主题默认 |
|
||||
| `hero_subtitle_color_dark` | 颜色 | — | 副标题颜色(深色模式),留空使用主题默认 |
|
||||
| `hero_quote_color_light` | 颜色 | — | 一言文字颜色(浅色模式),留空使用主题默认 |
|
||||
| `hero_quote_color_dark` | 颜色 | — | 一言文字颜色(深色模式),留空使用主题默认 |
|
||||
| `hero_text_effect` | 下拉 | `none` | 文字显示效果:`none` / `shadow` / `glow` / `scrim` / `gradient` / `frame` |
|
||||
|
||||
## 详细说明
|
||||
|
||||
@@ -102,6 +112,31 @@ hero_custom_description: "用文字记录生活,用代码构建世界。"
|
||||
背景图片会自动应用模糊和暗化处理,以确保前景文字的可读性。建议选择色彩柔和、不包含大量细节的图片作为背景,避免干扰文案阅读。
|
||||
:::
|
||||
|
||||
### 文字颜色
|
||||
|
||||
标题、副标题、一言的颜色均可分别配置浅色 / 深色模式的取值,留空使用主题默认:
|
||||
|
||||
- **`hero_title_color_light` / `hero_title_color_dark`** — 大标题颜色。
|
||||
- **`hero_subtitle_color_light` / `hero_subtitle_color_dark`** — 副标题颜色。
|
||||
- **`hero_quote_color_light` / `hero_quote_color_dark`** — 一言文字颜色(`hero_description_mode` 为 `hitokoto` 或 `custom` 时生效)。
|
||||
|
||||
### 文字显示效果(hero_text_effect)
|
||||
|
||||
为 Hero 文字(标题 / 副标题 / 一言)叠加辅助可读效果。**默认 `none` 不使用任何效果**——v1.2.0 起,文字周围默认不再有淡淡的白色散光投影:
|
||||
|
||||
| 值 | 效果 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| `none` | 无效果(默认) | 纯净文字,无任何附加投影与衬底 |
|
||||
| `shadow` | 阴影 | 文字下方叠加柔和的深色投影,适合复杂背景图 |
|
||||
| `glow` | 光晕 | 文字周围叠加白色光晕,暗色背景图上更醒目 |
|
||||
| `scrim` | 半透明遮罩层 | 文字背后垫一块毛玻璃圆角衬底,整体提升可读性 |
|
||||
| `gradient` | 渐变遮罩 | 文字背后垫斜向渐变衬底,左深右浅自然过渡 |
|
||||
| `frame` | 容器 | 把文字"装"进一个带半透明边框的圆角矩形,加大内边距与字距留白 |
|
||||
|
||||
::: tip
|
||||
遮罩类(`scrim` / `gradient`)与容器(`frame`)作用于整个文字区块,浅色模式为白色系衬底、深色模式为黑色系衬底;`frame` 会在浅色模式下使用墨色描边、深色模式下使用白色描边。
|
||||
:::
|
||||
|
||||
## 视觉效果
|
||||
|
||||
Hero 区域包含以下精心设计的视觉效果:
|
||||
|
||||
+25
-2
@@ -7,7 +7,8 @@
|
||||
| 配置项 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| `color_scheme` | 单选 | `system` | 配色方案:`system` / `light` / `dark` |
|
||||
| `accent_color` | 颜色 | `#d4764e` | 全局强调色 |
|
||||
| `color_palette` | 下拉 | `warm-island` | 主题配色(官方预设调色板,含深浅两套色板) |
|
||||
| `accent_color` | 颜色 | — | 自定义强调色;留空跟随所选主题配色 |
|
||||
| `border_radius` | 下拉 | `medium` | 圆角风格:`small` / `medium` / `large` |
|
||||
| `layout_container_width` | 下拉 | `medium` | 容器宽度:`narrow` / `medium` / `wide` |
|
||||
| `animation_enabled` | 开关 | `true` | 全局动画总开关 |
|
||||
@@ -32,6 +33,28 @@
|
||||
选择 `system` 时,主题会监听操作系统的 `prefers-color-scheme` 媒体查询,实时响应用户的系统设置变化。访问者也可以通过导航栏的主题切换按钮手动覆盖当前模式。
|
||||
:::
|
||||
|
||||
### 主题配色(color_palette)
|
||||
|
||||
v1.2.0 起主题内置配色系统,提供 11 套官方预调配色,每套均包含浅色与深色两套完整色板(背景、文字、分隔线、强调色、玻璃拟态、阴影色调等会整体联动):
|
||||
|
||||
| 值 | 名称 | 色彩倾向 |
|
||||
| --- | --- | --- |
|
||||
| `warm-island` | 暖屿 · 赤陶(默认) | 暖橘陶土,米白纸感 |
|
||||
| `matcha` | 抹茶 | 清新草绿,米绿纸感 |
|
||||
| `indigo` | 黛蓝 | 沉稳蓝调,冷白纸感 |
|
||||
| `sakura` | 樱粉 | 柔和粉调,樱白纸感 |
|
||||
| `violet` | 暮紫 | 温柔紫调,淡紫纸感 |
|
||||
| `sea` | 海盐 | 青碧蓝绿,浅青纸感 |
|
||||
| `amber` | 琥珀 | 蜂蜜金黄,暖黄纸感 |
|
||||
| `plum` | 梅酒 | 酒红梅紫,粉白纸感 |
|
||||
| `graphite` | 石墨 | 中性灰黑,极简无彩 |
|
||||
| `cocoa` | 可拿铁 | 咖啡可可,奶咖纸感 |
|
||||
| `azure` | 天青 | 明快天蓝,浅蓝纸感 |
|
||||
|
||||
::: warning
|
||||
下方「强调色」留空时,将使用所选配色自带的强调色。**老站点升级前如果保存过强调色(默认 `#d4764e`),切换配色后强调色不会变化——清空强调色并保存即可恢复跟随配色。**
|
||||
:::
|
||||
|
||||
### 强调色(accent_color)
|
||||
|
||||
强调色是 WarmIsland 主题的灵魂,它会影响全站以下元素的颜色:
|
||||
@@ -43,7 +66,7 @@
|
||||
- 选中状态颜色
|
||||
- Hero 区域渐变色的组成部分
|
||||
|
||||
默认值 `#d4764e` 是暖屿标志性的暖橘色,与主题的温暖气质相呼应。
|
||||
留空时跟随上方「主题配色」自带的强调色(暖屿·赤陶配色即 `#d4764e` 暖橘色)。
|
||||
|
||||
::: tip
|
||||
选择强调色时,建议同时考虑浅色和深色模式下的可读性。可以在 [CSS 变量](/customize/css-variables) 页面查看所有受影响的变量,进行更精细的调整。
|
||||
|
||||
Reference in New Issue
Block a user