Banner 样式 - 楠枝文档中心

For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /ethereal/appearance/banner-style.md.

楠枝文档中心

适用版本 ≥ 2.0.0 ｜后台路径：主题设置 → 样式设置 → Banner 样式 / 标题与副标题

素材与文案层：放什么图、怎么轮播、移动端用不用另一套图、标题怎么动。Banner 的形态（横幅 / 全屏 / 透明）在 Banner 里设置。

配置项

类型与素材

选项	默认值	说明
类型	单图/视频	单图/视频：按文件类型自动识别；多图轮播：多张静态图片循环
图片/视频	主题示例图	支持图片（GIF / WebP / APNG 动图）与视频（MP4 / WebM，静音循环）
显示暂停按钮	开启	视频模式下右下角显示播放 / 暂停按钮；关闭后只能自动静音循环
位置	居中	素材在 Banner 区域的取景位置：居中 / 顶部 / 底部，适合人像或天空占比较大的图

轮播设置（类型为多图轮播时）

选项	默认值	说明
轮播图片	空	按顺序循环；少于 2 张时按单图显示；支持外链
切换效果	淡入淡出	可选左右滑动
显示指示点	开启	右下角可点击的指示点
预加载数量	1	预加载当前图片之后的 N 张，0 表示不预加载（0~10）
停留时长	5000	每张停留毫秒数（1000~60000），不随动画速度档位变化

移动端

选项	默认值	说明
移动端独立来源	关闭	开启后为 < 768px 的设备单独设置素材；关闭时两端共用
类型（移动端）	单图/视频	可与电脑端不同，例如电脑端视频、移动端图片
图片/视频（移动端）	空	留空则回落到电脑端来源
轮播图片（移动端）	空	留空则回落到电脑端来源；行为参数沿用电脑端

标题与副标题

选项	默认值	说明
启用	开启	在 Banner 上显示标题与副标题，访客可在显示设置中覆盖
标题	Hello,Ethereal!	中间显示的主标题
标题字号	3.5rem	支持任意 CSS 单位（`3.5rem`、`48px`）
副标题	三行示例文案	每行一条，循环展示
副标题字号	1.5rem	支持 CSS 单位
副标题动效	打字机效果	可选文字下坠

版权信息与链接

选项	默认值	说明
版权 → 启用	关闭	在 Banner 角落显示版权文字
版权文字	© 2022 Ethereal	显示的文字
版权链接	空	点击跳转地址
Banner 链接	空	标题下方的图标行。条目可只填图标、只填名称，两者都空的条目不显示

推荐配法

一张大图 + 一句标题：类型选单图，关闭轮播与版权，标题字号 3.5rem、副标题留白或只留一行，首屏最干净。

多图轮播做首页封面墙：5 张以内的同风格图片，切换效果淡入淡出、停留 5000ms、预加载 1 张，兼顾流畅与流量。

视频背景：电脑端用 MP4 视频并保留暂停按钮，移动端开启独立来源改用静态图，避免手机端自动播放与流量问题。

人像 / 风景图：Banner 位置选顶部或底部，避免人脸被标题压住。

注意事项

轮播图少于 2 张时自动退化为单图，不会报错
外部随机图接口请使用无状态服务，否则同一会话可能反复拿到同一张图；重复链接会被附加参数单独请求
移动端「独立来源」开启但素材留空时，仍会回落到电脑端素材，不会出现空白
标题与副标题的字号支持 rem / px / vw，但过大的字号在小屏可能溢出，建议不超过 6rem
副标题是多行文本，每行一条，按行循环，不要在行内手动换行
Banner 图片会按屏幕宽度分档请求（见速度优化），原图宽度不足时只能缩小、无法放大