通知横幅

:information_source: 概要 Notification Banners 主题组件提供了一种可自定义且灵活的方式来在您的网站上共享消息。
:eyeglasses: 预览 Theme Creator
:hammer_and_wrench: 仓库
GitHub - gormus/discourse-notification-banners: Helps admins create notification banners in various plugin outlets.
:question: 安装指南 如何安装主题或主题组件
:open_book: 首次使用 Discourse 主题? Discourse 主题使用入门指南

安装此主题组件

Notification Banners 主题组件提供了一种可自定义且灵活的方式来在您的网站上共享消息。

以下是一些主要功能:

  • 完全可自定义:根据您的需求定制每个横幅,包括内容、样式和行为。
  • 灵活的显示选项:以堆叠或旋转轮播的方式显示横幅,方便浏览。
  • 定向消息:仅向特定用户组显示横幅,确保个性化通信。
  • 主题支持:横幅会自动适应浅色或深色主题,或者您可以设置自定义颜色。
  • Markdown 支持:轻松使用 Markdown 格式化您的横幅消息。
  • 由 Splide 驱动的轮播:轮播功能由 Splide JavaScript 库提供支持,每个横幅都有单独的设置。
  • 调度:设置横幅显示的具体开始和结束日期。
  • 轻松设置显示顺序:通过简单的设置控制横幅的显示顺序。

该组件使您能够通过视觉吸引力强、个性化且组织良好的通知轻松吸引您的受众。

安装

  1. 按照官方说明将此主题组件添加到您的主题:
    Beginner's guide to using Discourse Themes

  2. theme authorized extensions 设置更改为包含 cssjs 文件扩展名。

功能

每个通知横幅可能具有以下功能:

  • 标题,可选,显示为消息上方的 H2 标题
  • 消息,500 个字符的简单通知消息。支持 Markdown。
  • 受众,选择用户组作为通知的受众。
  • 类别;选择要在其上显示横幅的类别。留空则显示在所有类别上。
  • 背景颜色,可设置为与其他横幅区分开。
  • 插件出口,将通知设置在站点标题上方或下方,或使用 top-notices 出口与原生主题横幅一起显示。
  • 在轮播中显示,选中后,每个出口中的所有横幅都将显示在轮播中。每个出口至少需要选择 2 个横幅。
  • 可关闭,选中后,用户可以关闭横幅,横幅将对他们隐藏。
  • 开始和结束日期,如果定义了,横幅的可见性将遵循这些日期。因此,您可以提前设置一个横幅,但它仅在设定的日期和时间对选定的受众可见;或者类似地,您可以通过横幅应显示的最后日期自动删除该横幅。
  • 显示顺序,定义哪个横幅应显示在顶部,哪个应显示在底部。从 v1.3.0 开始,使用原生的 重新排序 按钮。

轮播

幻灯片或轮播功能由 Splide 库提供;它已获得 MIT 许可。

可以使用主题组件页面上的 Splide 选项 配置每个轮播。

横幅颜色

默认情况下,横幅将使用与 banner-topic 相同的颜色:

.notification-banner {
    background: var(--tertiary-low);
    color: var(--primary);
}

但是,当在横幅设置中定义了背景颜色时,根据其亮度,会自动选择黑色或白色作为前景色。

可用的 CSS 类

.notification-banners--above-site-header,
.notification-banners--below-site-header,
.notification-banners--top-notices {

  .notification-banner {

    &__wrapper {
    }

    &__close {
    }

    &__header {
    }

    &__content {
    }
  }

  &.splide {
    .notification-banner {
    }
  }
}

.notification-banners--top-notices {
  .notification-banner {

    &__content {
    }
  }
}

v1.3.0 包含重大更改(对某些用户而言)

在更新生产站点之前,请不要忘记测试更改并检查您的自定义设置。

28 个赞

太棒了!这看起来太棒了——而且超级灵活。

您是否考虑过将其限制在某个类别/某些类别?

9 个赞

谢谢!

实际上,我曾考虑包含我之前使用我的 Filtered Topic Lists 主题组件所做的工作;请参阅“Show on”部分。

我担心这可能会使其更加复杂,因此我没有包含该选项。相反,我选择使用用户组作为横幅的受众。

但如果需要,我很乐意将其包含在内。

5 个赞

非常棒 @gormus,感谢您与社区分享此组件。 :discourse: :clap:

3 个赞

谢谢 @Lilly,很荣幸 : )

3 个赞

当单击 X 按钮关闭此横幅弹出窗口时,是否有办法使其再次显示?我已选择横幅背景重复:repeat;repeat-x;repeat-y,但它不起作用?

2 个赞

太好了!我会实际试用一下,看看是否真的需要,然后再向您打扰。

4 个赞

目前还没有。我没有考虑过用户会想要恢复已关闭的通知。
您认为应该有此选项吗?

您能澄清一下您的意思吗?

2 个赞

我明白你的意思了,谢谢!

3 个赞

我也对这个功能感兴趣(可以指定到特定的类别)。感谢您的考虑。

4 个赞

现在支持将类别作为目标受众。每个横幅可以为单个或多个类别进行选择。
请告诉我您的想法 : )

5 个赞

我当前的 Discourse 页面运行的是 ver 3.4.0.beta3-dev,在安装横幅时出现错误,页面无法显示。请您再次检查并尽早为社区更新。感谢您的分享。

2 个赞

您好 @hoangphuctran93

感谢您报告此问题,我已通过在 Discourse 3.4.0.beta3-dev (d3f09f8f61) 上干净安装 Notification Banners 来确认此问题。

我刚刚推送了一个修复程序,请更新您网站上的实例,如有必要请强制刷新页面。

2 个赞

谢谢,它们效果很好,期待您的新想法和更新。我有一些建议如下。

  1. 扩展输入框
  2. 除了使用 HTML 设计外,还允许快速选择图片。
  3. 添加一个用于命名横幅的数据字段,而不是将其与标题一起使用,这有助于在应用多个横幅时进行分类和管理。

这是应用程序在我们 discourse 页面上的结果:https://businesslab.vn

1 个赞

我对这部分有问题 - 链接在这里断开了。我该如何在我的网站上授权这些扩展名?

谢谢!

您需要将 meta.discourse.org 替换为您的论坛的 URL。您无法在此处访问管理区域。
https://meta.discourse.org/admin/site_settings/category/files?filter=theme%20authorized%20extensions

或者,您可以导航到您的站点设置并搜索 theme authorized extensions

5 个赞

啊是的,谢谢 :slight_smile:

还有一个问题——当您说安排时,有没有办法让横幅每周在同一时间出现?我们有每周一次的办公时间,我希望横幅在这段时间内显示,这样网站上的任何人都可以看到办公时间目前正在进行,并可以根据需要加入。

1 个赞

您可以启用一个横幅,使其在指定的日期和时间开始显示,并在另一个日期和时间移除。

因此,您只能有一个开始和结束日期及时间的计划。

您所要求的需要一个更复杂的计划功能,而通知横幅不提供此功能。

但是,您可以通过创建相同的横幅副本,并使用不同的开始和结束日期来实现您的需求。

我强烈建议您在上线生产环境之前测试此场景。

请记住,无论您身处哪个时区,日期时间值都必须以 UTC 格式输入,并且必须与字段说明中的格式匹配。

4 个赞

感谢您的反馈!

我希望这里能有更自动化的解决方案,因为我们每周有 3 个不同的办公时间段,每个星期都一样,为所有这些时段制作重复的横幅将是相当多的手动工作。

我也查看了 Automations 插件作为另一个选项,但横幅自动化也只允许“即时”操作,而不是“重复”操作。

2 个赞