本指南介绍了在 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 主题使用入门指南。


