Hexo 主题 Flatpaper 现在支持设置开屏大图(Hero Image)了。 Hero 部分的信息默认复用站点标题、简介、头像、社交链接，也支持自定义显示的信息。 支持设置背景图片，也可以不设置。还支持放一些 Sticker 贴纸，可以拖动。
这个功能适合想让首页第一屏更有识别度的站点：个人博客可以放一张代表近期状态的照片，摄影站可以放作品封面，作品集可以用视觉图建立风格，轻量手账站也可以继续使用默认纸张背景和便签贴纸，不需要的话也可以直接关闭，关闭后不会输出样式文件到站点中。
效果查看本站 首页 即可。
演示网站关闭了背景图片： Flatpaper Demo ，下面是配置说明。
开启 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 来控制图片上方的暗色渐变遮罩，主题的默认是 0.2 - 0.2 的均匀遮罩：
可以根据图片效果调整
1
2
| home_hero:
image_overlay: [0.2, 0.2]
|
数组里第一个值是顶部透明度，第二个值是底部透明度，范围是 0 到 1。数值越高，遮罩越深，当数值不同时，会有自上而下的渐变效果。
常见调整思路：
- 图片偏亮时，增大数字，例如
[0.25, 0.35]。 可以形成上浅下深的渐变遮罩。 - 图片本身已经很暗时，降低数字，例如
[0.1, 0.1]。
当然你无需每次重启服务器，可以在这里提前预览调整 ：FlatPaper Tools - Hero
跳转箭头
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: 下方时，只需要保留子项缩进即可。
]]>
