Skip to Content
首页第一屏

第一屏 home_banner

开关

配置项名称：home_banner.enable

类型可选值默认值
布尔值true | falsetrue

背景图片样式

配置项名称：home_banner.style

本配置项用于设置第一屏的背景图片样式，分为 static 和 fixed 两种。

类型可选值默认值
字符串static | fixedstatic

static 样式

static 样式为静态样式，即第一屏的背景图片会随着首页滚动而滚动。

fixed 样式

fixed 样式为固定样式，即第一屏的背景图片会作为背景固定在首页，不会随着首页滚动而滚动。同时本样式会让背景图片向下滑动时自动模糊，推荐使用。

背景图片

亮色模式

配置项名称：home_banner.image.light

类型备注示例
字符串本地相对链接/图片外链/images/wallhaven-wqery6-light.webp

暗色模式

配置项名称：home_banner.image.dark

类型备注示例
字符串本地相对链接/图片外链/images/wallhaven-wqery6-dark.webp

主标题

配置项名称：home_banner.title

类型备注示例
字符串无Theme Redefine

副标题

文字内容

配置项名称：home_banner.subtitle.text

有打字机动画效果，可以配置多个字符串，每个字符串会在打字机动画中循环显示。

如果需要开启一言，请先在本项随便写入一些内容。

类型备注示例
数组请用英文逗号分隔["This is the first message", "This is the second message", "etc"]

一言

副标题自动获取一言，详见一言 。

如果需要本项开启，请先在 home_banner.subtitle.text 中随便写入一些内容，防止因为网络问题导致的无法显示问题。 比如可以在 home_banner.subtitle.text 中写入 ['Loading...']

  • home_banner.subtitle.hitokoto.enable：开关
  • home_banner.subtitle.hitokoto.api：一言 API 地址
  • home_banner.subtitle.hitokoto.show_author：是否显示作者

API 地址可以指定句子类型，详见一言 API 。

高级：打字动画设置

  • typing_speed：打字速度（每毫秒打印的字母数）
  • backing_speed：退格速度（每毫秒退格的字母数）
  • starting_delay：开始延迟（毫秒）
  • backing_delay：退格延迟（毫秒）
  • loop：是否循环
  • smart_backspace：是否智能退格

文字颜色

设定标题和副标题的文字颜色。

亮色模式

配置项名称：home_banner.text_color.light

类型备注示例
字符串请填写 Hex 色值#fff

暗色模式

配置项名称：home_banner.text_color.dark

类型备注示例
字符串请填写 Hex 色值#d1d1b6

文字样式

标题字体大小

配置项名称：home_banner.text_style.title_size

类型备注示例
字符串请填写 CSS 支持的字体大小2.8rem

副标题字体大小

配置项名称：home_banner.text_style.subtitle_size

类型备注示例
字符串请填写 CSS 支持的字体大小1.5rem

标题与副标题行高

配置项名称：home_banner.text_style.line_height

类型备注示例
字符串请填写 CSS 支持的行高1.2

自定义字体

开关

配置项名称：home_banner.custom_font.enable

类型可选值默认值
布尔值true | falsefalse

字体名称

配置项名称：home_banner.custom_font.family

类型备注示例
字符串会作用在主标题和副标题上Noto Sans SC

字体 CSS 文件链接

配置项名称：home_banner.custom_font.url

类型备注示例
字符串字体样式文件地址（CSS）https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap

社交链接

开关

配置项名称：home_banner.social_links.enable

类型可选值默认值
布尔值true | falsefalse

链接

配置项名称：home_banner.social_links.links

社交链接支持三种类型的图标：

1. 预定义平台图标

对于常见平台，可以直接使用平台名称：

_config.redefine.yml
links:
    github: https://github.com/username
    twitter: https://twitter.com/username
    facebook: https://facebook.com/username
    instagram: https://instagram.com/username

2. FontAwesome 图标

对于 fa-brands 图标，直接输入图标名称。对于其他 FontAwesome 图标，使用全名：

_config.redefine.yml
links:
    fa-solid fa-wand-magic-sparkles: https://example.com
    fa-regular fa-music: https://example.com

可以前往 Font Awesome  查看图标名称。

3. 本地/外部图片图标

使用本地图片文件或外部图片链接作为图标：

_config.redefine.yml
links:
    /images/icon/coolapk.png: https://www.coolapk.com/u/123456
    /images/icon/bilibili.svg: https://space.bilibili.com/123456
    https://example.com/custom-icon.png: https://example.com

完整示例：

_config.redefine.yml
links:
    github: https://github.com/username
    twitter: https://twitter.com/username
    fa-solid fa-music: https://music.example.com
    /images/icon/coolapk.png: https://www.coolapk.com/u/123456
    /images/icon/custom-platform.svg: https://custom.example.com

本地图标要求

使用本地图片图标时，请遵循以下指南：

  • 文件位置：将图标放在 source/images/ 目录或子目录中
  • 文件大小：建议 20×20 像素（图标显示为 20×20px）
  • 文件格式：支持 PNG、SVG、JPG、WEBP
  • 背景：使用透明背景以获得最佳效果
  • 文件路径：必须以 / 开头（例如：/images/icon/example.png）

图标迁移指南

如果您有现有的仅使用 FontAwesome 图标的配置，它们将继续工作。只需在现有配置中添加本地图标：

_config.redefine.yml
# 之前（仍然有效）
links:
    github: https://github.com/username
    fa-solid fa-music: https://music.example.com
 
# 之后（增强了本地图标）
links:
    github: https://github.com/username
    fa-solid fa-music: https://music.example.com
    /images/icon/coolapk.png: https://www.coolapk.com/u/123456

二维码

配置项名称：home_banner.social_links.qrs

可选，可添加你的二维码，格式如下，

如果是 fa-brands 图标，可以直接填写 Brands 图标名称，比如 weixin。

但是如果用的不是 fa-brands 图标，比如 fa-solid，则需要填写全名，比如 fa-solid fa-wand-magic-sparkles。

_config.redefine.yml
qrs:
    [fontawesome 图标名称(不是 HTML 代码)]: [二维码图片地址]

示例配置：

_config.redefine.yml
qrs:
    weixin: https://example.com/weixin.png
最后更新于
首页导航栏