多功能横幅

Discourse · 2019 年2 月 14 日 10:05


	摘要	Versatile Banner 为您的网站添加可自定义的横幅。
	预览	在 Discourse 主题创建器中预览
	仓库链接	https://github.com/discourse/discourse-versatile-banner
	Discourse 主题新手？	使用 Discourse 主题的入门指南

安装此主题组件

功能特性

此主题组件是先前横幅功能的演进。其目标是通过使用主题设置，提供更便捷和灵活的使用体验。

以下是功能亮点：

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

自定义横幅内容

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

使用持久状态选项

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

设置

名称	描述
show for members	为登录论坛的用户显示横幅
show for anon	为匿名用户显示横幅
display on mobile	在移动设备上显示横幅
display on desktop	在桌面计算机上显示横幅
display on homepage	在首页显示横幅
url must contain	输入应显示横幅的路径。在路径末尾添加 `*` 作为通配符
dismissible	允许用户关闭横幅
collapsible	允许用户展开和折叠横幅
default collapsed state	启用 collapsible 设置时的默认折叠状态
cookie lifespan	用于记住横幅是否已关闭、展开或折叠的 Cookie 的有效期。如果设置为"none"，此组件将不使用任何 Cookie，并且任何与此横幅相关的已创建 Cookie 将在用户下次执行完整页面加载时删除。数值以单个单位衡量，因此设置"year"表示一年，"week"表示一周，以此类推。
cookie name	当对横幅进行重要更改时，您必须更改 Cookie 名称，以确保所有用户都能看到这些更改。
full width banner	以全浏览器宽度显示横幅
swap default positioning	如果还有其他横幅相关组件处于活动状态，请使用此选项将其位置与 Versatile Banner 互换
plugin outlet	below-site-header 将其置于侧边栏上方，above-main-container 将其置于侧边栏旁边的内容上方
banner background image	背景图片的源 URL。提示：您可以将图片上传到主主题并使用该 URL，但请确保不要使用此组件的"Uploads"部分。添加到此组件的任何上传内容在更新时都会被删除。
banner background image dark	检测到系统深色模式时背景图片的源 URL。
background color	用作背景图片的替代
background color dark	检测到系统深色模式时用作背景图片的替代
primary text color	横幅的主要文本颜色
primary text color dark	检测到系统深色模式时横幅的主要文本颜色
secondary text color	图标和文本标题的文本颜色，以及按钮背景颜色。
secondary text color dark	检测到系统深色模式时图标和文本标题的文本颜色，以及按钮背景颜色。
link text color	横幅内链接的文本颜色
link text color dark	检测到系统深色模式时横幅内链接的文本颜色

翻译	默认值
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	42	15541	2025 年7 月 9 日
Category Banners Theme component official , category-banners	87	48922	2025 年11 月 11 日
Notification Banners Theme component	50	2077	2025 年11 月 19 日
An update changed our versatile banner - I don't know where we can add CSS Support	30	736	2023 年8 月 22 日
Discourse Persistent banner Theme component	9	507	2024 年10 月 20 日

多功能横幅

功能特性

自定义横幅内容

使用持久状态选项

设置

相关话题