本指南介绍了在 Discourse 站点上创建和自定义横幅的各种方法，从简单的可关闭横幅到更高级的选项。
所需用户级别：版主（可关闭横幅）、管理员
横幅是向网站访问者传达重要信息的有效方式。本指南将引导您完成在 Discourse 站点上创建和自定义横幅的各种方法。
欢迎横幅
欢迎横幅会向新老访客显示友好问候语和醒目的搜索栏，方便访客快速找到他们想要的内容。
要启用欢迎横幅：
- 在管理区域，点击侧边栏中的 外观 > 主题和组件 链接。
- 找到您当前激活的主题，然后点击 编辑。
- 找到
启用欢迎横幅 设置，并确保其已勾选。
这将为此主题启用欢迎横幅。如果您提供多个用户可选主题，则需要为每个主题重复此过程。
自定义欢迎横幅
您可以自定义欢迎横幅以更改其在社区中的外观。在管理区域，当您转到 所有站点设置 时，可以搜索“欢迎横幅”以查找以下自定义选项：
欢迎横幅位置：这决定了欢迎横幅在页面上的显示位置。默认情况下，它显示在“主题内容上方”，但您也可以选择“站点标题下方”。两者之间的区别很微妙，如下面的屏幕截图所示：
欢迎横幅页面可见性：这决定了欢迎横幅显示在哪些页面上。默认情况下，它显示在“顶部菜单页面”（即 顶部菜单 设置中选择的页面），但您可以更改为：
- “主页”：欢迎横幅仅显示在网站主页上（即
顶部菜单 设置中列出的第一个页面）。
- “发现”：欢迎横幅显示在所有
顶部菜单 页面上，即使它们未显示在您网站的实际顶部菜单中（即未在设置中选择）。
- “所有页面”：欢迎横幅显示在您网站的所有页面上。这通常不推荐，因为它可能会在主题页面上造成视觉混乱，分散访客的阅读和参与注意力。
您还可以自定义欢迎横幅的文本，以更改问候语并为欢迎横幅添加更多说明性文本。要自定义横幅文本：
- 在管理区域，点击侧边栏中的 外观 > 站点文本 链接。
- 搜索您想要调整的文本字符串：
js.welcome_banner.header.logged_in_members — 登录访客在欢迎横幅上看到的主要问候语。js.welcome_banner.header.anonymous_members — 未登录（匿名）访客在欢迎横幅上看到的主要问候语。js.welcome_banner.subheader.logged_in_members — 显示在登录访客在欢迎横幅上看到的标题下方的可选第二行文本。js.welcome_banner.subheader.anonymous_members — 显示在未登录（匿名）访客在欢迎横幅上看到的标题下方的可选第二行文本。js.welcome_banner.search_placeholder — 显示在欢迎横幅搜索字段中的占位符文本。
- 点击 编辑 按钮。
- 按需更新文本。
- 点击 保存更改。
可关闭横幅
可关闭横幅是用户可以关闭的临时通知。以下是创建方法：
- 在任何类别（公开或私有）中创建或导航到一个主题。主题顶部的原始帖子（OP）将是您横幅的来源。
- 通过点击主题右侧或底部的扳手图标打开管理选项。
- 选择“固定主题…”
- 在新窗口中，选择
设为横幅主题。
横幅现在将显示在您网站的顶部。用户将看到一个可关闭的横幅。工作人员还将看到一个编辑源主题的链接。
有效可关闭横幅的技巧：
- 保持文本清晰简洁
- 最大高度为 250px（可通过 CSS 进行编辑）
- 对于较长的文本，用户可以在横幅内滚动
- 考虑添加指向相关公共主题的链接以获取更多信息
永久横幅
要创建用户无法关闭的永久可见横幅：
- 在您的站点设置中，搜索
global_notice。
- 在此字段中输入您的横幅文本或 HTML。
永久横幅的技巧：
- 此类横幅通常用于紧急站点通信，但也可用于任何永久性消息
- 此横幅对所有人可见，包括在
login_required 站点上的匿名用户
- 可以通过重置
global notice 站点设置来移除横幅
高级横幅
您可以通过使用主题组件来构建更高级的横幅。请注意，这些主题组件可能与核心欢迎横幅功能冲突。
此组件允许您在横幅中添加自定义文本和 1-4 个链接。它提供了各种自定义选项，包括：
- 选择显示横幅的位置（主页、主题列表或所有页面）
- 添加带有 Font Awesome 图标的链接
- 根据用户信任级别限制可见性
- 自定义背景图片或颜色
- 调整文本和图标颜色
作为最受欢迎且维护良好的组件之一，多功能横幅通过界面提供了广泛的自定义选项，包括：
- 横幅显示限制为
- 已登录或匿名用户
- 移动或桌面设备
- 主页、主题列表或所有页面
- 可关闭、可展开或永久选项
- 全浏览器宽度设置
- 颜色管理
- 使用 HTML 自定义标题和列
使用 CSS 自定义横幅
您可以使用 CSS 自定义所有类型的横幅。有关使用 CSS 自定义 Discourse 站点的更多信息，请参阅Discourse 主题使用入门指南。
41 个赞
leopedrini
(Leonardo Zanoni Pedrini)
21
我找不到这个选项……这是 Beta 版本中的新功能吗？
leopedrini
(Leonardo Zanoni Pedrini)
22
更新：从 3.4.6 更新到 3.5.0 后，它就可见了：
2 个赞
RBoy
(RBoy)
23
在构建版本 3.6.0.beta1-dev (e44347414a) 中存在一个错误。
更改此站点文本对搜索栏中的文本没有影响，它始终显示为“Search”。已在运行 Chrome 的 Windows 10 x64 上进行测试。
3 个赞
tknospdr
(David Muszynski)
27
欢迎横幅的背景图片出现问题。
我正在使用 Cloudflare R2 S3 存储桶来存储相关网站的对象。
当我在管理部分上传背景图片时，它显示正确，如果我点击全屏显示，它也能正常工作。右键在新标签页中显示图片也能正常工作，并且可以使用公共存储桶 URL：
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg
但是，它注入到 CSS 中的 URL 是：
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg
我的另一个使用本地存储的网站，其横幅背景图片工作正常。
这是代码中的错误，还是我做错了什么？
经过进一步研究，我发现控制背景图片的 CSS 是：
如果我在检查器中手动替换 URL，它就能正常工作。
我尝试使用以下方法覆盖它：
.custom-search-banner-wrap .welcome-banner__wrap {
background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}
但这不起作用。感觉还是个 bug。
1 个赞
yuriy
(Yuriy Kurant)
28
@tknospdr，我不太明白您遇到了什么问题？
我检查了您的网站 https://eu.technospider.com，发现背景图片按预期渲染：
tknospdr
(David Muszynski)
29
我认为我终于让 CSS 覆盖生效了。问题在于，它本不需要覆盖。
如果您使用 Cloudflare S3 托管，横幅代码似乎使用了错误的资源。
yuriy
(Yuriy Kurant)
30
您的覆盖是什么？
我们这边可以在 CSS 中确保只应用 URL 路径名 /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg：
background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)
我相信这个规则对您来说应该有效，而无需任何覆盖？
tknospdr
(David Muszynski)
31
我的整个覆盖是：
.welcome-banner {
background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
border-radius: 20px;
}
.welcome-banner__title {
font-size: var(--font-up-4);
max-width: 900px;
}
.welcome-banner__subheader {
font-size: 17px;
padding-bottom: 20px;
}
在用户界面中，我唯一能做的就是上传图片，所以我认为需要进行代码更改才能删除我的 CSS 覆盖声明。
我很乐意尝试您愿意实现的任何修复。
1 个赞
