摘要
Banner Featured Links 允许您创建链接横幅。
它提供了广泛的自定义选项。
该功能灵感来源于出色的 “Meta Branded” Discourse 主题。
功能
默认外观 – 使用主题颜色。
按钮可以单独设置样式：
您可以通过 plugin outlet 设置将链接放置在各种位置。
描述中提供了常见位置的列表。
我建议使用 开发者工具栏 主题组件来查看插件出口的位置！
例如，如果您想模仿 Meta Brand 主题，请使用 search-banner-below-input 出口。这假设您已经安装了 Search Banner 组件。
详情
当前样式可以通过以下设置实现：
我鼓励您尝试自己的样式！
设置
常规
| 名称 |
描述 |
links |
要在标题中显示的文本链接。 |
show_for_members |
为已登录用户显示链接。 |
show_for_anon |
为匿名用户显示链接。 |
display_on_mobile |
在移动设备上显示链接。 |
display_on_desktop |
在台式计算机上显示链接。 |
display on homepage |
在主页上显示链接。 |
url must contain |
输入应显示横幅的路径。在路径末尾添加 * 作为通配符。 |
plugin outlet |
显示链接的位置。
常见位置above-main-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-stream
Search Banner 组件：
search-banner-below-headlinesearch-banner-below-input |
links 设置：
| 名称 |
描述 |
| 图标 |
为链接显示的 FontAwesome 图标或表情符号。
快捷方式Windows: Win + . Mac: Cmd + Ctrl + Space ChromeOS: Launch + Shift + Space |
| 标题 |
链接的标题。 |
| URL |
要链接到的 URL。 |
| 目标 |
打开链接的文档：
_blank：在新窗口或选项卡中打开（默认值）
_self：在点击时所在的同一框架中打开
_parent：在父框架中打开
_top：在窗口的整个主体中打开。 |
您还可以为每个按钮单独设置样式。这将覆盖全局样式。
| 名称 |
描述 |
| 宽度 |
按钮的 width。
|
| 字体 |
按钮的 font。
|
| 圆角 |
应用于按钮的 圆角量。 |
| 背景 |
按钮的 背景颜色。 |
| 背景悬停` |
鼠标悬停时按钮的 背景颜色。 |
| 颜色` |
按钮的文本 颜色。 |
| 颜色悬停` |
鼠标悬停时按钮的文本 颜色。 |
| 边框 |
按钮的 边框。 |
| 边框悬停 |
鼠标悬停时按钮的 边框。 |
| 阴影 |
按钮的 阴影。 |
| CSS 类名 |
要应用于按钮的自定义 CSS 类。
如果您希望以不同方式设置按钮样式且现有设置不足，这将非常有用。
您可以使用 .banner-featured-links__link.your-classname {} 进行 targeting。 |
全局样式
自定义链接的默认间距和外观。
您可以为每个链接单独覆盖按钮样式。
按钮包装器样式
自定义链接的容器。
| 名称 |
描述 |
buttons wrapper max width |
按钮包装器的 最大宽度。 |
buttons wrapper margin |
按钮包装器的 外边距。 |
mobile buttons wrapper max width |
移动设备上按钮包装器的 最大宽度。 |
mobile buttons wrapper margin |
移动设备上按钮包装器的 外边距。 |
按钮间距 & 文本字体
自定义按钮的间距和文本字体大小。
| 名称 |
描述 |
buttons justify |
如何在链接之间和周围分配 空间。 |
buttons gap |
按钮之间的 间隙。 |
buttons font |
按钮的 字体。 |
mobile buttons justify |
如何在移动设备上在链接之间和周围分配 空间。 |
mobile buttons gap |
移动设备上按钮之间的 间隙。 |
mobile buttons direction |
移动设备上按钮的 方向。 |
mobile buttons font |
移动设备上按钮的 字体。 |
按钮样式
自定义按钮的默认外观。
| 名称 |
描述 |
button width |
按钮的 宽度。
|
button padding |
按钮的 内边距。
|
button rounding |
应用于按钮的 圆角量。 |
button background |
按钮的 背景颜色。 |
button background hover |
鼠标悬停时按钮的 背景颜色。 |
button color |
按钮的文本 颜色。 |
button colo hover |
鼠标悬停时按钮的文本 颜色。 |
button border |
按钮的 边框。 |
button border hover |
鼠标悬停时按钮的 边框。 |
button shadow |
按钮的 阴影。 |
高级自定义
您可以使用以下 CSS 进行进一步自定义：
.banner-featured-links {
&__wrapper {
}
&__wrapper-links {
}
&__link {
}
}
如果您为每个按钮提供自定义，可以在 CSS Classname 设置中提供类名。
然后，您可以按以下方式 targeting：
.banner-featured-links {
&__link.myclass {
}
}
有用链接
致谢
- Discourse 提供了灵感，源自出色的 Meta Branded 主题。
- Don 和 nolo – 他们制作了初始版本；我借鉴了他们的一些想法。
20 个赞
Jagster
(Jakke Flemming)
2
关于一个组件的介绍质量很高，但有一个元评论：来自移动设备的屏幕截图。这可以节省在选择有用性、优点和缺点时的时间。
3 个赞
没关系。我已经更新了致谢部分，使其更加清晰。谢谢！
3 个赞
如果您是第一次安装该组件，我已经推送了一个小修复。
我上次提交重命名了一个设置，但默认值未更新。
感谢 @manuel 报告此问题！
5 个赞
你好 @Arkshine，非常感谢你的这个插件！
我使用它已经有一段时间了，但今天添加另一个按钮后，它破坏了整个论坛，现在看起来是这样的：
你知道这可能是为什么吗？
2 个赞
嘿，那是不是意味着如果移除这个按钮，就不会出错了？
好吧，我不得不联系Discourse团队禁用该插件，所以现在一切都恢复正常了，是的。
我现在有点犹豫是否要恢复旧设置来验证这个理论 
2 个赞
我明白了，没关系。抱歉！您是第一个遇到此问题的人。您还记得为按钮输入了什么值吗？如果我能重现它，那将会有所帮助！
3 个赞
好的，非常感谢您的帮助！
这真的很奇怪，因为我最近做了一些更改，而且它运行得很好。
我删除了一个按钮并添加了一个新按钮：
如果日志有帮助的话，这是日志
[{“url”:“https://community.elfsight.com/tags/c/elfsight-changelog/48/new-widget?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=new-widget",“icon”:“:fire:”,“text”:“新组件”,“target”:“_self”,“button_color_hover”:“#197bff”},{“url”:“https://community.elfsight.com/tags/c/wishlist/8/In-Progress/l/votes?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=in-progress”,“icon”:“”,“text”:“进行中”,“target”:“_self”,“button_color_hover”:“#197bff”},{“url”:“https://community.elfsight.com/c/css-codes/158?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=css-codes”,“icon”:“”,“text”:"CSS 代码”,“target”:“_self”,“button_color_hover”:“#197bff”},{“url”:"Ask the Community - Elfsight Community ",“url”:“Elfsight Champion Program: Help us grow our community forum! - Announcements - Elfsight Community”}]
以前：[{“url”=>“Topics tagged new-widget”, “icon”=>“
”, “text”=>“New Widgets”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“Topics tagged In-Progress”, “icon”=>“”, “text”=>“In Progress”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“CSS Codes - Elfsight Community”, “icon”=>“”, “text”=>“CSS Codes”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“Ask the Community - Elfsight Community”, “icon”=>“”, “text”=>“Support”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“Elfsight Champion Program: Help us grow our community forum! - Announcements - Elfsight Community”, “icon”=>“
”, “text”=>“Join our Champion Program! “, “target”=>”_self”}]
3 个赞
在 @Helga_Razinkova 的 PM 帮助下，我得以重现该问题。
我已推送修复 
。
简而言之，该组件未预料到通过 设置编辑器 更新设置，并且缺少 icon 字段时会发生错误。
2 个赞
nathank
(Nathan Kershaw)
15
太棒了！它如此全面且可定制；您似乎考虑到了几乎所有事情。
我注意到一个小的 bug，图标有时不可见。
我的链接看起来是这样的：
当您执行以下操作时，会发生这种情况：
- 使用 Chrome（抱歉，我没有尝试过其他浏览器）
- 离开带有 Banner Featured Links 的页面
- 使用浏览器的“后退”按钮返回页面
您可以在 ehealthforum.nz 上自己演示这一点。
4 个赞
谢谢你，Nathan！我已经提交了一个修复。如果问题仍然存在，请告诉我！
4 个赞
nathank
(Nathan Kershaw)
17
太棒了！！！！全部修复了。
又发现了一个小的（但令人不安的）用户体验 bug：
按钮上的文本仍然被 :visited 伪类捕获，这意味着一旦每个链接被访问过，文本颜色在悬停时会表现异常。
这是未悬停状态：
这是访问前悬停状态（图标和文本都会改变）
这是访问后悬停状态（请注意，图标改变了，但文本没有）
3 个赞
@nathank 你能尝试更新一下看看是否有所改善吗？
2 个赞
nathank
(Nathan Kershaw)
19
这是在使用更新后的实例时出现的。搜索横幅有一个小的 PR，但此 TC 没有要应用的。尽管如此，我还是重新构建了。仍然存在！
它在隐身模式下不显示，我猜是因为它不保存我的访问状态。
4 个赞
MAR
(IOD)
20
此插件是否兼容 AIR 主题，以便在社区页面顶部显示链接到 WordPress 的按钮？
long
21
尝试将这些放在搜索栏下方（就像在这个网站上一样），通过为“插件插口”（Plugin outlet）使用 ‘search-banner-below-input’——与人工智能来回沟通后，它解释说现在因为搜索是核心而不是扩展，所以那个位置将不起作用。只是想知道这是否正确。
1 个赞
