FlatPaper 现在有了完整的首页 Hero 配置。它不只是给首页加一张大图，而是把标题、简介、头像、背景图、跳转箭头、社交链接、主题工具按钮和 sticker 贴纸组织成一个独立的开屏区域。

这个功能适合想让首页第一屏更有识别度的站点：个人博客可以放一张代表近期状态的照片，摄影站可以放作品封面，作品集可以用视觉图建立风格，轻量手账站也可以继续使用默认纸张背景和便签贴纸。

Stikcer 贴纸 可以拖动。

带背景的 预览 ：

开启 Hero

Hero 默认关闭，不影响已有站点。要启用它，在主题配置里设置：

1
2

home_hero:
  enable: true

开启后，Hero 只会在首页第一页显示。继续翻页或进入文章页时，页面会回到原本的列表和阅读布局。

文案与头像

Hero 默认会复用 profile 里的头像、简介、社交链接与 RSS。如果你想让首页开屏使用独立内容，可以在 home_hero 里覆盖：

1
2
3
4
5
6
7

home_hero:
  enable: true
  title: 我的手账
  subtitle: 今日份记录
  bio: 写给路过此处的你。
  avatar: /images/avatar.jpg
  avatar_shape: circle

这些字段的作用分别是：

• title：Hero 主标题，默认使用站点标题。
• subtitle：标题上方的小标签文字，默认可复用 profile role。
• bio：标题下方的简介文字，默认可复用 profile bio。
• avatar：头像图片路径。
• avatar_shape：头像形状，支持 circle 或默认方形。

如果没有配置头像，Hero 会显示一个主题内置的简化头像块，保证布局不会空掉。

背景图

Hero 可以保持默认纸张背景，也可以设置图片背景。最简单的配置是一张图：

1
2
3

home_hero:
  enable: true
  image: /images/hero.jpg

image 支持站内相对路径，也支持完整 URL。站内图片可以放在 Hexo 的 source/images/ 目录下，然后用 /images/hero.jpg 引用。

建议选择横向图，画面主体不要过于贴边。Hero 中央会叠加标题、简介、头像和社交链接，右上角还可能有工具按钮，所以图片需要给内容层留出空间。

随机背景图

如果想让首页每次打开都有一点变化，可以把 image 写成数组：

1
2
3
4
5
6

home_hero:
  enable: true
  image:
    - /images/hero-1.jpg
    - /images/hero-2.jpg
    - /images/hero-3.jpg

浏览器载入时会从数组里随机挑选一张。这个方式适合一组同风格图片，比如同一套摄影、同一个角色主题、同一个颜色主题，或者一组季节感封面。

图片遮罩

背景图好看不等于文字一定清楚。Hero 提供 image_overlay 来控制图片上方的暗色渐变遮罩：

1
2

home_hero:
  image_overlay: [0.22, 0.58]

数组里第一个值是顶部透明度，第二个值是底部透明度，范围是 0 到 1。数值越高，遮罩越深。

常见调整思路：

• 图片偏亮时，提高底部值，例如 [0.28, 0.66]。
• 图片本身已经很暗时，降低遮罩，例如 [0.12, 0.42]。
• 标题和简介不够清晰时，优先调高底部值。

跳转箭头

Hero 底部有一个向下的箭头，用来进入首页内容区。默认目标是首页文章列表区域，也可以自定义：

1
2

home_hero:
  cta_link: "#flatpaper-home-content"

如果你在首页放了自定义锚点，也可以把 cta_link 指向那个位置。

工具按钮与社交链接

Hero 右上角会显示主题工具按钮，例如明暗模式切换；如果启用了可拖动 sticker，还会显示重排 sticker 的按钮。社交链接区域则复用 profile.social 或主题全局 social 配置。

这样 Hero 不只是静态封面，也保留了进入站点内容、切换阅读模式和访问外部主页的入口。

Sticker 贴纸

Hero 仍然保留 FlatPaper 的手账感贴纸。内置便签和自定义图片 sticker 可以同时使用：

1
2
3
4
5
6
7
8
9
10

home_hero:
  stickers:
    enable: true
    draggable: true
    note_text: 今日
    items:
      - image: /images/stickers/github.png
        alt: GitHub
        size: 96
        link: https://github.com/yourname

stickers 的几个常用字段：

• enable：是否显示贴纸。
• draggable：是否允许拖动贴纸。
• note_text：内置便签贴纸的文字。
• items：自定义图片贴纸列表。
• size：单个图片贴纸尺寸。
• link：可选链接，配置后贴纸可以作为入口跳转；不配置时贴纸只是装饰。

配置了 link 的 sticker 不会在点击时立刻跳转，而是先弹出访问确认。这样在拖动贴纸、整理位置或误点时，不会直接离开当前页面；确认后才会打开对应链接。

自定义图片 sticker 最多渲染 5 张。加上内置便签后，Hero 最多显示 6 个 sticker。

完整示例

下面是一段较完整的 Hero 配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

home_hero:
  enable: true
  title: 我的手账
  subtitle: 今日份记录
  bio: 生活不是每天都精彩，但总有值得收藏的片段。
  avatar: /images/avatar.jpg
  avatar_shape: circle
  image:
    - /images/hero-1.jpg
    - /images/hero-2.jpg
  image_overlay: [0.22, 0.58]
  cta_link: "#flatpaper-home-content"
  stickers:
    enable: true
    draggable: true
    note_text: 今日
    items:
      - image: /images/stickers/github.png
        alt: GitHub
        size: 96
        link: https://github.com/yourname

移动端表现

在窄屏上，Hero 会优先保证文字、头像和操作入口的稳定性。图片背景不会强行压缩所有内容，也不会让正文入口被视觉元素遮住。这样桌面端可以更有开屏感，移动端仍然保持 FlatPaper 一贯的阅读节奏。

用工具生成配置

如果不想手写 YAML，可以使用 FlatPaper Tools 的 Hero 工具。它现在提供两个独立片段：

• 遮罩配置：生成 image_overlay，并用示例图预览遮罩效果。
• Sticker 配置：生成 stickers，填写图片地址后可以在底部预览贴纸图像。

复制出来的片段会带有 # home_hero: 注释作为定位提示。粘贴到已有 home_hero: 下方时，只需要保留子项缩进即可。

小结

新的首页 Hero 让 FlatPaper 有了更完整的第一屏表达：可以保持纸张与便签的默认气质，也可以用背景图、头像、简介、社交链接和贴纸组成更个人化的入口。它不会改变文章页的阅读体验，但会让首页更像一个有主题、有状态的站点门面。