创建横幅以在您的网站顶部显示

:bookmark: 本指南介绍在您的 Discourse 站点上创建和自定义横幅的不同方法,从简单的可关闭横幅到更高级的选项。

:person_raising_hand: 所需用户级别:版主(可关闭横幅)、管理员

横幅是向您的网站访问者传达重要信息的有效方式。本指南将引导您完成在 Discourse 站点上创建和自定义横幅的各种方法。

欢迎横幅

欢迎横幅会向新成员和回访成员展示友好的问候语和一个醒目的搜索栏,使访问者能够快速找到他们想要的内容。

要启用和自定义欢迎横幅,请转到管理区域,然后在侧边栏中选择 外观 > 欢迎横幅 链接。

在此区域,您将找到以下设置:

  • 在主题中启用…: 这允许您指定哪些活动主题应显示欢迎横幅。
  • 背景图片: 上传一张图片作为欢迎横幅的背景。
  • 文本颜色: 如果由您的调色板控制的默认文本颜色与您的背景图片冲突,您可以在此处选择新颜色。请注意,此设置仅在您上传了背景图片时适用。
  • 页面可见性: 这决定了哪些页面显示欢迎横幅。默认情况下,它显示在 顶部菜单页面(即 顶部菜单 站点设置中选择的页面),但您可以更改为:
    • 仅主页: 欢迎横幅仅显示在站点主页上(即 顶部菜单 站点设置中列出的第一个页面)。
    • 发现页面: 欢迎横幅显示在所有 顶部菜单 页面上,即使它们没有显示在您站点的实际顶部菜单中(即未在设置中选中)。
    • 所有页面: 欢迎横幅显示在您站点的所有页面上。这通常是不推荐的,因为它可能会在主题页面上造成视觉混乱,分散成员的注意力,使他们无法阅读和参与。
  • 位置: 这决定了欢迎横幅在页面上的显示位置。默认情况下,它显示在 主题内容上方,但您也可以选择 站点标题下方。区别有点微妙,如下面的截图中所示:

您还可以自定义欢迎横幅的文本,以更改问候语并向欢迎横幅添加更多说明性文本。

  • 新成员的标题: 首次登录您的站点时向新成员显示的主要问候语。
  • 已登录成员的标题: 向回访成员显示的主要问候语。
  • 匿名访客的标题: 向匿名(即未登录)成员显示的主要问候语。
  • 已登录成员的副标题: 可选的第二行文本,显示在回访成员的标题下方。
  • 匿名访客的副标题: 可选的第二行文本,显示在匿名(即未登录)成员的标题下方。
  • 搜索占位符: 显示在欢迎横幅搜索字段中的占位符文本。

可关闭横幅

可关闭横幅是用户可以关闭的临时通知。以下是创建方法:

  1. 在任何类别(公共或私有)中创建或导航到主题。主题顶部的原始帖子 (OP) 将是您横幅的来源。
  2. 通过单击主题右侧或底部的扳手图标打开管理选项。
  3. 选择“固定主题…”
  4. 在新窗口中,选择 :pushpin: 设为横幅主题

横幅现在将显示在您的站点顶部。用户将看到一个可关闭的横幅。工作人员还将看到一个编辑源主题的链接。

:information_source: 有效的可关闭横幅提示:

  • 保持文本清晰简洁
  • 最大高度为 250px(可通过 CSS 编辑
  • 对于较长的文本,用户可以在横幅内滚动
  • 考虑添加一个指向相关公共主题的链接以获取更多信息

永久横幅

要创建始终可见且用户无法关闭的横幅:

  1. 在您的站点设置中,搜索 global_notice
  2. 在此字段中输入您的横幅文本或 HTML。

:information_source: 永久横幅提示:

  • 此类横幅通常用于紧急站点通信,但也可用于任何永久消息
  • 此横幅对所有人可见,包括 login_required 站点上的匿名用户
  • 通过重置 global notice 站点设置可以移除此横幅

高级横幅

您可以通过使用主题组件来构建更高级的横幅。请注意,这些主题组件可能与核心欢迎横幅功能冲突。

欢迎链接横幅

此组件允许您向横幅添加自定义文本和 1-4 个链接。它提供各种自定义选项,包括:

  • 选择在何处显示横幅(主页、主题列表或所有页面)
  • 添加带有 Font Awesome 图标的链接
  • 根据用户信任级别限制可见性
  • 自定义背景图片或颜色
  • 调整文本和图标颜色

多功能横幅

Versatile Banner 是最流行和维护最好的组件之一,通过界面提供广泛的自定义选项,包括:

  • 横幅显示限制为
    • 已登录用户或匿名用户
    • 移动设备或桌面设备
    • 主页、主题列表或所有页面
  • 可关闭、可展开或持久化选项
  • 浏览器全宽设置
  • 颜色管理
  • 使用 HTML 进行标题和列自定义

使用 CSS 自定义横幅

您可以使用 CSS 自定义所有类型的横幅。有关使用 CSS 自定义 Discourse 站点的更多信息,请参阅 Discourse 主题使用入门指南

42 个赞