本指南介绍在您的 Discourse 站点上创建和自定义横幅的不同方法，从简单的可关闭横幅到更高级的选项。
所需用户级别：版主（可关闭横幅）、管理员
横幅是向您的网站访问者传达重要信息的有效方式。本指南将引导您完成在 Discourse 站点上创建和自定义横幅的各种方法。
欢迎横幅
欢迎横幅会向新成员和回访成员展示友好的问候语和一个醒目的搜索栏，使访问者能够快速找到他们想要的内容。
要启用和自定义欢迎横幅，请转到管理区域，然后在侧边栏中选择 外观 > 欢迎横幅 链接。
在此区域，您将找到以下设置：
- 在主题中启用…: 这允许您指定哪些活动主题应显示欢迎横幅。
- 背景图片: 上传一张图片作为欢迎横幅的背景。
- 文本颜色: 如果由您的调色板控制的默认文本颜色与您的背景图片冲突，您可以在此处选择新颜色。请注意，此设置仅在您上传了背景图片时适用。
- 页面可见性: 这决定了哪些页面显示欢迎横幅。默认情况下，它显示在
顶部菜单页面（即顶部菜单站点设置中选择的页面），但您可以更改为：
仅主页: 欢迎横幅仅显示在站点主页上（即顶部菜单站点设置中列出的第一个页面）。发现页面: 欢迎横幅显示在所有顶部菜单页面上，即使它们没有显示在您站点的实际顶部菜单中（即未在设置中选中）。所有页面: 欢迎横幅显示在您站点的所有页面上。这通常是不推荐的，因为它可能会在主题页面上造成视觉混乱，分散成员的注意力，使他们无法阅读和参与。- 位置: 这决定了欢迎横幅在页面上的显示位置。默认情况下，它显示在
主题内容上方，但您也可以选择站点标题下方。区别有点微妙，如下面的截图中所示：您还可以自定义欢迎横幅的文本，以更改问候语并向欢迎横幅添加更多说明性文本。
- 新成员的标题: 首次登录您的站点时向新成员显示的主要问候语。
- 已登录成员的标题: 向回访成员显示的主要问候语。
- 匿名访客的标题: 向匿名（即未登录）成员显示的主要问候语。
- 已登录成员的副标题: 可选的第二行文本，显示在回访成员的标题下方。
- 匿名访客的副标题: 可选的第二行文本，显示在匿名（即未登录）成员的标题下方。
- 搜索占位符: 显示在欢迎横幅搜索字段中的占位符文本。
可关闭横幅
可关闭横幅是用户可以关闭的临时通知。以下是创建方法：
- 在任何类别（公共或私有）中创建或导航到主题。主题顶部的原始帖子 (OP) 将是您横幅的来源。
- 通过单击主题右侧或底部的扳手图标打开管理选项。
- 选择“固定主题…”
- 在新窗口中，选择
设为横幅主题
横幅现在将显示在您的站点顶部。用户将看到一个可关闭的横幅。工作人员还将看到一个编辑源主题的链接。
有效的可关闭横幅提示：
- 保持文本清晰简洁
- 最大高度为 250px（可通过 CSS 编辑）
- 对于较长的文本，用户可以在横幅内滚动
- 考虑添加一个指向相关公共主题的链接以获取更多信息
永久横幅
要创建始终可见且用户无法关闭的横幅：
- 在您的站点设置中，搜索
global_notice。- 在此字段中输入您的横幅文本或 HTML。
- 此类横幅通常用于紧急站点通信，但也可用于任何永久消息
- 此横幅对所有人可见，包括
login_required站点上的匿名用户- 通过重置
global notice站点设置可以移除此横幅高级横幅
您可以通过使用主题组件来构建更高级的横幅。请注意，这些主题组件可能与核心欢迎横幅功能冲突。
欢迎链接横幅
此组件允许您向横幅添加自定义文本和 1-4 个链接。它提供各种自定义选项，包括：
- 选择在何处显示横幅（主页、主题列表或所有页面）
- 添加带有 Font Awesome 图标的链接
- 根据用户信任级别限制可见性
- 自定义背景图片或颜色
- 调整文本和图标颜色
多功能横幅
Versatile Banner 是最流行和维护最好的组件之一，通过界面提供广泛的自定义选项，包括：
- 横幅显示限制为
- 已登录用户或匿名用户
- 移动设备或桌面设备
- 主页、主题列表或所有页面
- 可关闭、可展开或持久化选项
- 浏览器全宽设置
- 颜色管理
- 使用 HTML 进行标题和列自定义
使用 CSS 自定义横幅
您可以使用 CSS 自定义所有类型的横幅。有关使用 CSS 自定义 Discourse 站点的更多信息，请参阅 Discourse 主题使用入门指南。
42 个赞
我找不到这个选项……这是 Beta 版本中的新功能吗？
在构建版本 3.6.0.beta1-dev (e44347414a) 中存在一个错误。
更改此站点文本对搜索栏中的文本没有影响，它始终显示为“Search”。已在运行 Chrome 的 Windows 10 x64 上进行测试。
3 个赞
7 个赞
太棒了，谢谢您——问题解决了！
2 个赞
欢迎横幅的背景图片出现问题。
我正在使用 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 个赞
我认为我终于让 CSS 覆盖生效了。问题在于，它本不需要覆盖。
如果您使用 Cloudflare S3 托管，横幅代码似乎使用了错误的资源。
您的覆盖是什么？
我们这边可以在 CSS 中确保只应用 URL 路径名 /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg：
background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)
我相信这个规则对您来说应该有效，而无需任何覆盖？
我的整个覆盖是：
.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 个赞