第一屏 (home_banner)

开关

配置项名称：home_banner.enable

背景图片样式

配置项名称：home_banner.style

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

static 样式

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

fixed 样式

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

背景图片

亮色模式

配置项名称：home_banner.image.light

暗色模式

配置项名称：home_banner.image.dark

主标题

配置项名称：home_banner.title

副标题

文字内容

配置项名称：home_banner.subtitle.text

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

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

一言

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

如果需要本项开启，请先在 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

暗色模式

配置项名称：home_banner.text_color.dark

文字样式

标题字体大小

配置项名称：home_banner.text_style.title_size

副标题字体大小

配置项名称：home_banner.text_style.subtitle_size

标题与副标题行高

配置项名称：home_banner.text_style.line_height

自定义字体

开关

配置项名称：home_banner.custom_font.enable

字体名称

配置项名称：home_banner.custom_font.family

字体 CSS 文件链接

配置项名称：home_banner.custom_font.url

社交链接

开关

配置项名称：home_banner.social_links.enable

链接

配置项名称：home_banner.social_links.links

links 为数组，顺序即展示顺序。每一项包含 icon 与 url。

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

1. 预定义平台图标

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

links:
  - icon: github
    url: https://github.com/username
  - icon: twitter
    url: https://twitter.com/username
  - icon: facebook
    url: https://facebook.com/username
  - icon: instagram
    url: https://instagram.com/username

2. FontAwesome 图标

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

links:
  - icon: fa-solid fa-wand-magic-sparkles
    url: https://example.com
  - icon: fa-regular fa-music
    url: https://example.com

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

3. 本地/外部图片图标

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

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

完整示例：

links:
  - icon: github
    url: https://github.com/username
  - icon: twitter
    url: https://twitter.com/username
  - icon: fa-solid fa-music
    url: https://music.example.com
  - icon: /images/icon/coolapk.png
    url: https://www.coolapk.com/u/123456
  - icon: /images/icon/custom-platform.svg
    url: https://custom.example.com
  - icon: email
    url: you@example.com

当 icon 为 email 时会使用 @ 图标，url 未以 mailto: 开头将自动补齐。

本地图标要求

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

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

旧格式迁移（已弃用）

旧版使用对象映射（键为图标，值为链接）。由于 Hexo 合并配置会导致顺序不稳定，该格式已弃用并将在下一个大版本移除，qrs 同理。

# 旧格式（已弃用）
links:
  github: https://github.com/username
  twitter: https://twitter.com/username

# 新格式（推荐）
links:
  - icon: github
    url: https://github.com/username
  - icon: twitter
    url: https://twitter.com/username

二维码

配置项名称：home_banner.social_links.qrs

可选，可添加你的二维码。qrs 为数组，顺序即展示顺序。每一项包含 icon 与 qr，填写规则与 links 相同。

qrs:
  - icon: weixin
    qr: https://example.com/weixin.png
  - icon: /images/icon/custom-platform.svg
    qr: https://example.com/custom-qr.png