本指南介绍了在您的 Discourse 站点上创建和自定义横幅的不同方法，从简单的可关闭横幅到更高级的选项。
所需用户权限：版主（可关闭横幅）、管理员
横幅是向站点访客传达重要信息的有效方式。本指南将引导您了解在 Discourse 站点上创建和自定义横幅的各种方法。
欢迎横幅
欢迎横幅通过友好的消息和醒目的搜索栏向新成员和老成员致意，让访客能够轻松找到他们想要的内容。
要启用并自定义欢迎横幅，请进入管理区域，并在侧边栏中选择 外观 > 欢迎横幅 链接。
在此区域，您会找到以下设置：
- 在以下主题上启用：允许您指定哪些当前激活的主题应显示欢迎横幅。
- 背景图片：上传一张图片作为欢迎横幅的背景。
- 文本颜色：如果由您的调色板控制的默认文本颜色与背景图片冲突，您可以在此选择新的颜色。请注意，此设置仅在您上传了背景图片时生效。
- 页面可见性：确定哪些页面显示欢迎横幅。默认情况下，它显示在
顶部菜单页面（即在 顶部菜单 站点设置中选择的页面）上，但您可以更改为：
仅主页：欢迎横幅仅显示在站点主页（即 顶部菜单 站点设置中列出的第一个页面）上。发现页面：欢迎横幅显示在所有 顶部菜单 页面上，即使它们未显示在站点的实际顶部菜单中（即未在设置中选中）。所有页面：欢迎横幅显示在站点的所有页面上。通常不建议这样做，因为它可能会导致主题页面视觉杂乱，从而分散成员阅读和参与的注意力。
- 位置：确定欢迎横幅在页面上的显示位置。默认情况下，它显示在
主题内容上方，但您也可以选择 站点页眉下方。两者的区别比较细微，如下图所示：
您还可以自定义欢迎横幅的文本，以更改问候语并为欢迎横幅添加更多说明性文字。
- 新成员标题：新成员首次登录您的站点时显示的主要问候语。
- 已登录成员标题：向回访成员显示的主要问候语。
- 匿名访客标题：向匿名（即未登录）成员显示的主要问候语。
- 已登录成员副标题：显示在回访成员标题下方的可选第二行文本。
- 匿名访客副标题：显示在匿名（即未登录）成员标题下方的可选第二行文本。
- 搜索占位符：显示在欢迎横幅搜索框中的占位符文本。
可关闭横幅
可关闭横幅是一种用户可以关闭的临时通知。创建方法如下：
- 在任何公开分类中创建或导航到一个主题。该主题顶部的原始帖子（OP）将成为您横幅的来源。
- 点击主题右侧或底部的扳手图标打开管理选项。
- 选择“固定主题…”
- 在新窗口中，选择
设为横幅主题
现在，横幅将出现在您的站点顶部。用户将看到一个可关闭的横幅。工作人员还将看到一个编辑源主题的链接。
有效可关闭横幅的技巧：
- 保持文本清晰简洁
- 最大高度为 20vh（可通过 CSS 编辑）
- 对于较长的文本，用户可以在横幅内滚动
- 考虑添加一个链接到相关的公开主题以获取更多信息
- 如果您想隐藏用作横幅的主题，可以使用主题的管理菜单将其取消列出
永久横幅
要创建一个始终可见且用户无法关闭的横幅：
- 在您的站点设置中，搜索
global_notice。
- 在此字段中输入您的横幅文本或 HTML。
永久横幅的技巧：
- 这种类型的横幅通常用于紧急的站点通信，但也可用于任何永久消息
- 此横幅对所有人可见，包括
login_required 站点上的匿名用户
- 可以通过重置
global notice 站点设置来移除此横幅
高级横幅
您可以使用主题组件来构建更高级的横幅。请注意，这些主题组件可能会与核心欢迎横幅功能发生冲突。
该组件允许您在横幅中添加自定义文本和 1-4 个链接。它提供多种自定义选项，包括：
- 选择横幅显示位置（主页、主题列表或所有页面）
- 添加带有 Font Awesome 图标的链接
- 根据用户信任级别限制可见性
- 自定义背景图片或颜色
- 调整文本和图标颜色
作为最受欢迎且维护良好的组件之一，多功能横幅通过界面提供广泛的自定义选项，包括：
- 限制横幅显示给
- 已登录或匿名用户
- 移动或桌面设备
- 主页、主题列表或所有页面
- 可关闭、可展开或持久显示选项
- 全浏览器宽度设置
- 颜色管理
- 使用 HTML 自定义标题和列
使用 CSS 自定义横幅
您可以使用 CSS 自定义所有类型的横幅。有关使用 CSS 自定义 Discourse 站点的更多信息，请参阅 使用 Discourse 主题的初学者指南。
43 个赞
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 个赞
大家好，
随着最新的 Discourse 更新，主题组件 Advanced Search Banner 不再受支持，并且似乎也不再维护。取而代之的是官方的 Welcome Banner 插件。
问题在于，在新的组件中，目前只能选择一个背景图像。而使用旧的 Advanced Search Banner 组件时，可以为亮色模式和暗色模式定义不同的背景图像，这对于不同的布局和主题来说当然是理想的选择。
我向社区提出的问题是：
- 是否有办法在 Welcome Banner 中复制此功能？
- 是否已经有人实现了一个扩展或变通方法来为亮色模式和暗色模式使用不同的背景图像？
- 开发者是否计划将来实现此功能？
我期待任何提示、技巧或想法！
提前感谢！
2 个赞
