nxxy335
a127d5a314
- 新增官方预设调色板 11 套（浅/深双套色板，玻璃/阴影自动跟随），强调色留空跟随配色 - Hero 一言独立颜色配置（浅/深）；文字显示效果：阴影/光晕/半透明遮罩/渐变遮罩/容器；默认无效果，移除自带散光 - /douban 适配 plugin-douban 1.2.6 SQLite 扁平化数据结构（item.spec.* -> item.*） - 友链卡片去掉 overflow:hidden，修复悬浮光圈被裁切；徽章简化为仅显示可达性 - 瞬间页顶图与首条卡片增加间距；theme-color 随配色/明暗联动
159 lines
6.3 KiB
Markdown
159 lines
6.3 KiB
Markdown
# 样式设置
|
||
|
||
样式设置控制 WarmIsland 主题的全局视觉表现，包括配色方案、强调色、圆角风格、容器宽度、动画效果以及自定义 CSS。通过这些配置，你可以快速打造出独一无二的站点外观。
|
||
|
||
## 配置项一览
|
||
|
||
| 配置项 | 类型 | 默认值 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| `color_scheme` | 单选 | `system` | 配色方案：`system` / `light` / `dark` |
|
||
| `color_palette` | 下拉 | `warm-island` | 主题配色（官方预设调色板，含深浅两套色板） |
|
||
| `accent_color` | 颜色 | — | 自定义强调色；留空跟随所选主题配色 |
|
||
| `border_radius` | 下拉 | `medium` | 圆角风格：`small` / `medium` / `large` |
|
||
| `layout_container_width` | 下拉 | `medium` | 容器宽度：`narrow` / `medium` / `wide` |
|
||
| `animation_enabled` | 开关 | `true` | 全局动画总开关 |
|
||
| `animation_breath` | 开关 | `true` | 呼吸动画效果 |
|
||
| `animation_scroll_reveal` | 开关 | `true` | 滚动渐入动画 |
|
||
| `animation_cursor_glow` | 开关 | `false` | 光感跟随效果 |
|
||
| `custom_css` | 代码 | — | 自定义 CSS 代码 |
|
||
|
||
## 详细说明
|
||
|
||
### 配色方案（color_scheme）
|
||
|
||
控制站点的明暗模式，提供三种选择：
|
||
|
||
| 值 | 说明 |
|
||
| --- | --- |
|
||
| `system` | 跟随系统偏好，自动适配用户操作系统的深色/浅色模式设置 |
|
||
| `light` | 始终使用浅色模式 |
|
||
| `dark` | 始终使用深色模式 |
|
||
|
||
::: tip
|
||
选择 `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 主题的灵魂，它会影响全站以下元素的颜色：
|
||
|
||
- 链接悬停色
|
||
- 按钮背景色
|
||
- 标签高亮色
|
||
- 进度条颜色
|
||
- 选中状态颜色
|
||
- Hero 区域渐变色的组成部分
|
||
|
||
留空时跟随上方「主题配色」自带的强调色（暖屿·赤陶配色即 `#d4764e` 暖橘色）。
|
||
|
||
::: tip
|
||
选择强调色时，建议同时考虑浅色和深色模式下的可读性。可以在 [CSS 变量](/customize/css-variables) 页面查看所有受影响的变量，进行更精细的调整。
|
||
:::
|
||
|
||
```yaml
|
||
# 常见强调色参考
|
||
accent_color: "#d4764e" # 暖橘（默认）
|
||
accent_color: "#6366f1" # 靛蓝
|
||
accent_color: "#10b981" # 翠绿
|
||
accent_color: "#f43f5e" # 玫红
|
||
accent_color: "#8b5cf6" # 紫罗兰
|
||
```
|
||
|
||
### 圆角风格（border_radius）
|
||
|
||
控制全站组件的圆角大小，影响卡片、按钮、输入框等元素：
|
||
|
||
| 值 | 说明 | 适用场景 |
|
||
| --- | --- | --- |
|
||
| `small` | 小圆角，偏硬朗风格 | 技术博客、极简风格 |
|
||
| `medium` | 中等圆角，平衡美观与严谨 | 通用场景（默认） |
|
||
| `large` | 大圆角，柔和亲切 | 生活博客、个人日记 |
|
||
|
||
### 容器宽度（layout_container_width）
|
||
|
||
控制页面主内容区域的最大宽度：
|
||
|
||
| 值 | 说明 |
|
||
| --- | --- |
|
||
| `narrow` | 窄容器，适合以文字阅读为主的站点 |
|
||
| `medium` | 中等宽度，兼顾阅读体验与信息密度（默认） |
|
||
| `wide` | 宽容器，适合图片较多的站点或需要更大展示空间的场景 |
|
||
|
||
### 动画效果
|
||
|
||
WarmIsland 提供了丰富的动画效果，所有动画都可以独立开关：
|
||
|
||
#### 全局动画总开关（animation_enabled）
|
||
|
||
关闭后，以下所有动画效果将一并禁用。适合追求极致性能或偏好静态页面的用户。
|
||
|
||
#### 呼吸动画（animation_breath）
|
||
|
||
启用后，Hero 区域的背景光球会产生缓慢的呼吸脉动效果，营造温暖柔和的氛围感。光球的大小和透明度会周期性变化。
|
||
|
||
#### 滚动渐入（animation_scroll_reveal）
|
||
|
||
启用后，页面元素在滚动进入视口时会以淡入+上移的方式渐次出现，增强浏览的节奏感。
|
||
|
||
::: tip
|
||
滚动渐入动画基于 Intersection Observer API 实现，对性能影响极小。如果页面内容较多，建议保持开启以提升浏览体验。
|
||
:::
|
||
|
||
#### 光感跟随（animation_cursor_glow）
|
||
|
||
启用后，鼠标移动时会在光标附近产生柔和的光晕跟随效果，为页面增添灵动感。
|
||
|
||
::: warning
|
||
光感跟随效果在移动端不会生效（因为移动端没有鼠标光标）。在低端设备上可能会影响渲染性能，如遇卡顿建议关闭。
|
||
:::
|
||
|
||
### 自定义 CSS（custom_css）
|
||
|
||
在此处编写自定义 CSS 代码，会注入到全站所有页面的 `<style>` 标签中。可以用来覆盖主题默认样式或添加全新样式。
|
||
|
||
```css
|
||
/* 示例：自定义卡片悬停效果 */
|
||
.post-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 示例：隐藏特定元素 */
|
||
.hero-scroll-indicator {
|
||
display: none;
|
||
}
|
||
```
|
||
|
||
::: tip
|
||
如需更系统地自定义样式，推荐使用 [CSS 变量](/customize/css-variables) 方式，只需修改变量值即可影响全站，无需逐个覆盖选择器。详见 [自定义 CSS](/customize/custom-css) 页面。
|
||
:::
|
||
|
||
## 相关页面
|
||
|
||
- [CSS 变量](/customize/css-variables) — 全部可用的 CSS 变量列表
|
||
- [自定义 CSS](/customize/custom-css) — 深入了解自定义样式的方法
|
||
- [基础设置](/config/basic) — 站点名称、Logo 等基础信息配置
|
||
- [导航栏](/config/navbar) — 导航栏样式与功能配置
|