多功能横幅

Discourse · 2019 年2 月 14 日 10:05


	摘要	Versatile Banner 为您的网站添加了一个可自定义的横幅。
	预览	在 Discourse Theme Creator 上预览
	仓库链接	https://github.com/discourse/discourse-versatile-banner
	初次使用 Discourse 主题？	Discourse 主题使用入门指南

安装此主题组件

功能

此主题组件是先前横幅努力的演进。目标是通过使用主题设置来提供更轻松和灵活的使用体验。

以下是功能的亮点：

限制显示给已登录用户或匿名用户
限制显示仅在移动设备或桌面设备上
限制显示在特定页面上
可关闭、可展开和始终可见的选项
全浏览器宽度选项
颜色管理
使用 HTML 自定义标题和列（详见下文）
持久状态选项（详见下文）

自定义横幅内容

横幅内容分为主标题和列。您的横幅最多可以有 5 列，但由于宽度限制，建议数量为 3 列或更少。提供了 HTML 模板，可以根据您的个人需求进行自定义。您还可以控制每列的宽度，并在每列的顶部添加任何图片或 Font Awesome 图标。

使用持久状态选项

持久状态选项将依赖最多两个 Cookie。这些 Cookie 将包含横幅的名称以及与横幅状态相关的 true/false 值。如果您对在网站上使用 Cookie 有任何顾虑，最好避免使用此设置。为 cookie_lifespan 设置选择相对时间选项，将确保在用户按下相应按钮后，横幅在该时间段内保持关闭/展开/折叠状态。如果没有此设置，横幅将在每次完整页面加载时重置。如果您对横幅进行了更改，并希望确保所有用户都能看到这些更改，即使那些之前关闭了横幅的用户，请务必更改 “cookie name”。这将基本上重置任何持久状态，然后允许用户再次关闭横幅

设置

名称	描述
对会员显示	对登录论坛的用户显示横幅
对匿名用户显示	对匿名用户显示横幅
在移动设备上显示	在移动设备上显示横幅
在桌面上显示	在台式电脑上显示横幅
在首页显示	在首页显示横幅
URL 必须包含	输入应显示横幅的路径。在路径末尾添加 `*` 作为通配符
可关闭	允许用户关闭横幅
可折叠	允许用户展开和折叠横幅
默认折叠状态	启用可折叠设置时的默认折叠状态
Cookie 生命周期	用于记住横幅是否已关闭、展开或折叠的 Cookie 的生命周期。如果设置为 “none”，此组件将不使用任何 Cookie，并且下次用户执行完整页面加载时，与该横幅相关的任何先前创建的 Cookie 都将被删除。值以单个单位测量，因此设置 “year” 将为一年，“week” 将为一周，依此类推。
Cookie 名称	当对横幅进行重要更改时，您必须更改 Cookie 名称以确保所有用户都能看到更改。
全宽横幅	以全浏览器宽度显示横幅
交换默认位置	如果有其他与横幅相关的组件处于活动状态，请使用此选项将其位置与 Versatile Banner 交换
插件出口	below-site-header 将其放在侧边栏上方，above-main-container 将其放在侧边栏旁边的内容上方
横幅背景图片	背景图片的来源 URL。提示：您可以将图片上传到您的主主题并使用该 URL，但请确保不要使用此组件的 “Uploads” 部分。每次更新此组件时，添加到此组件的任何上传都将被删除。
横幅背景图片深色模式	当检测到系统深色模式时，背景图片的来源 URL。
背景颜色	用作背景图片的替代
背景颜色深色模式	当检测到系统深色模式时，用作背景图片的替代。
主要文本颜色	横幅的主要文本颜色
主要文本颜色深色模式	当检测到系统深色模式时，横幅的主要文本颜色
次要文本颜色	图标和文本标题的文本颜色，以及按钮背景颜色。
次要文本颜色深色模式	当检测到系统深色模式时，图标和文本标题的文本颜色，以及按钮背景颜色。
链接文本颜色	横幅内链接的文本颜色
链接文本颜色深色模式	当检测到系统深色模式时，横幅内链接的文本颜色。

翻译	默认值
close.title	关闭横幅
close.label	关闭
toggle.title	展开/折叠横幅
toggle.collapse_label	折叠
toggle.expand_label	展开

由我们托管？主题组件在我们的 Pro、Business 和 Enterprise 计划中均可用。

Dhruvi_Butti · 2021 年1 月 19 日 07:09

大家好！我想让所有文本左对齐，但 CSS 主题对我不起作用。谁能告诉我具体该怎么做？

tshenry · 2021 年1 月 19 日 19:04

这是否大致符合您的预期？

如果是的话，这里有一些快速而实用的 CSS 代码，希望能帮您入门：

.banner-box {
  h1,
  h2,
  h3,
  .row .single-box {
    text-align: left;
    
    & .banner-list {
      display: block;
      ul {
        margin: 0 0 9px 25px;
      }
    }
  }

  .section-header {
    .x-title {
      padding: 25px 15px;
    }
    .description p {
      text-align: left;
    }
  }
}

您需要创建一个名为“多功能横幅自定义”的新组件，并将上述 CSS 代码添加到“通用”部分。请确保将该新组件添加到任何使用“多功能横幅”的活跃主题中，以便应用这些自定义设置。

Dhruvi_Butti · 2021 年1 月 20 日 12:57

这对我很管用。非常感谢。

charlie788 · 2021 年2 月 11 日 20:33

您好，

是否可以将背景图像转换为可点击的图像？

感谢您的回复。

SidV · 2021 年2 月 16 日 02:36

你能举个例子吗？
你为什么要这么做？
我的意思是……所有的背景图片都会变成链接吗？
如果用户点击横幅的任何地方，都会被重定向到该链接。
我想不出这有什么用途。

Astra · 2021 年2 月 16 日 15:38

如何调整横幅的高度？

LeCoyote · 2021 年2 月 16 日 22:34

嗨 @tshenry，我正在使用 Versatile Banner 主题组件，但取消勾选“在桌面端显示”后，它便消失了。
我确实希望仅在移动设备上显示该横幅。

但当我取消勾选“在桌面端显示”时，桌面端和移动端的 Versatile Banner 都消失了。
如果您需要查看，这是网站链接：https://hec.fm

我是否遗漏了什么？

Astra · 2021 年2 月 17 日 09:56

是否有可能在移动设备上也将链接水平显示？我有点惊讶地发现它们是垂直排列的，而不是水平排列的。

tshenry · 2021 年2 月 23 日 02:37

感谢您的反馈！抱歉回复晚了。我可以复现您描述的问题。我大概知道问题出在哪里。我会在本周晚些时候查看并给您回复。

横幅的高度主要取决于其内容，但您可以根据需要使用自己的 CSS 进行任何调整。我不确定在移动设备上能否将三列水平排布得很好，但您当然也可以尝试使用自定义 CSS！欢迎访问 Making custom CSS changes on your site 查看一些技巧。

MrDavis97 · 2021 年2 月 24 日 02:33

我认为我的网站在通过 Cookie 生命周期维持展开/折叠状态时遇到了一个 bug。我希望我的网站能够记住用户何时折叠或展开横幅，并始终保持用户最后设定的状态。当我停留在首页或点击主题时，功能表现符合预期。然而，一旦我进入管理面板、用户设置、常见问题、关于、服务条款、隐私政策或文档页面，然后返回首页，情况就变得奇怪了：有时横幅的状态与之前设定的相反，有时甚至用于指示展开或折叠的箭头图标方向也错了。

这里，箭头图标是向上的：

但在点击“文档”并返回首页后，箭头图标的方向变成了相反状态。

这种行为看起来相当奇怪……

augustinecicc · 2021 年3 月 28 日 22:54

刚发现，我们的论坛（私密论坛）登录页面上不再像以前那样显示“多功能横幅”了。

组件设置中已勾选“为匿名用户显示横幅”。

查看 HTML 代码发现，在嵌套的 emberX 类 div 中有一个 banner-box 类的 div，但该 div 内部没有任何内容——这与已登录用户的 HTML 不同。

请问大家知道可能是什么原因吗？

tshenry · 2021 年3 月 30 日 02:06

我刚向该组件推送了一个小更新。

上述更新应已修复此问题。很抱歉修复花费了这么长时间。再次感谢你的反馈！

你需要在主题的“网址必须包含”设置中添加 /login。更多详情请参阅此帖子。

这个问题过去曾被报告过一两次。遗憾的是，我始终未能复现它。一旦有机会，我会按照你提供的确切步骤再试一次，看看能否复现。

Dimitri_Nightmare · 2021 年4 月 2 日 07:36

我正在使用多功能横幅，并尝试将其变成一个指向其他网站的重定向巨型链接。该如何操作？

我尝试通过脚本修改：api.changeWidgetSetting('banner-content-widget', 'href', '<site_adresse>')，但多功能横幅因此停止工作了。

augustinecicc · 2021 年4 月 2 日 20:42

谢谢，太棒了！现在完全正常了！

tshenry · 2021 年4 月 2 日 21:49

您可能可以这样做：

<script type="text/discourse-plugin" version="0.10.0">
  // 为标题添加链接
  api.reopenWidget("banner-box-widget", {
    html(attrs) {
      let bannerBox = this._super();
      bannerBox[0].children[1].tagName = "A";
      bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
      return bannerBox;
    }
  });
  
  // 为其余内容添加链接
  api.reopenWidget("banner-content-widget", {
    html(attrs) {
      let bannerContent = this._super();
      bannerContent.tagName = "A";
      bannerContent.properties.href = "https://meta.discourse.org";
      return bannerContent;
    }
  });
</script>

并添加一条 CSS 规则来调整链接颜色：

.banner-box a {
    color: var(--primary);
}

除非您需要“通用横幅”提供的特定功能，否则我想知道您是否不如直接在新组件中创建一个简单的自定义 HTML 横幅。大致示例如下：

将以下内容添加到“通用”部分的“页眉之后”区域：

<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>这是一个自定义横幅！</h2>
  </div>
</a>

并将以下内容添加到“通用”部分的"CSS"区域：

.custom-banner {
   display: flex;
   justify-content: center;
   align-items: center;
   width: $large-width; // 1110px
   height: 200px;
   margin-bottom: 15px;
   background: grey;
   color: white;
 }

这将为您提供一个完全可点击的简单横幅：

mercury233 · 2021 年5 月 11 日 00:41

我正在从 Git 安装此组件，但似乎没有获取到最新的代码。FIX: Work with new sticky header and move away from deprecated $.cookie · discourse/discourse-versatile-banner@0939120 · GitHub 在我的网站 https://ygobbs.com/ 上未更新。

tshenry · 2021 年5 月 11 日 02:36

这是因为您正在运行 Discourse 版本 2.6.0.beta2。您链接的提交需要 2.6.0.beta3 或更高版本。您会注意到，您链接的提交已添加了一个 discourse-compatibility 文件，以确保您不会更新到与您的 Discourse 版本不兼容的提交。

mercury233 · 2021 年5 月 11 日 02:45

哇，太棒了！Discourse 竟然为我找到了旧版本，而不是阻止我安装该组件。谢谢！

gassim · 2021 年6 月 29 日 09:53

嗨 @tshenry，
我想多次安装该组件，以便为不同类别设置不同的横幅。因此，我禁用了“在首页显示”选项，并使用了“URL 必须包含”的条件，但这导致我原本用于仅在首页显示的主组件无法正常工作。您能否提供一个替代方案，或者这是否是一个 Bug？谢谢！(:

话题		回复	浏览量
Welcome Link Banner Theme component official , welcome-link-banner	39	15879	2025 年7 月 9 日
Category Banners Theme component official , category-banners	85	49757	2025 年11 月 11 日
Notification Banners Theme component	50	2453	2025 年11 月 19 日
An update changed our versatile banner - I don't know where we can add CSS Support	30	762	2023 年8 月 22 日
Discourse Persistent banner Theme component	9	540	2024 年10 月 20 日

多功能横幅

功能

自定义横幅内容

使用持久状态选项

设置

相关话题