Discourse 热门标签侧边栏

此主题组件在宽度大于 767px 的屏幕(大多数平板电脑和桌面设备)上,于固定侧边栏中显示某个分类下最热门的标签。

:warning: 您必须在网站上启用“按标签筛选”设置,此主题组件才能正常工作。

我可以使用此主题组件做什么?

  • 为每个分类在侧边栏中显示 3 到 30 个热门标签
  • 将侧边栏设置为左侧或右侧
  • 阻止侧边栏在某些分类中显示
  • 更改“热门标签”标题文本

自定义 CSS

每个侧边栏都包裹在一个包含分类名称的类中,因此对于 UX 分类,该类为 .ux-sidebar。您可以使用这些类来为各个侧边栏设置样式。

在包含侧边栏的页面上,html 标签也会添加一个类,因此您可以使用 html.custom-sidebar 为所有包含侧边栏的页面应用样式。

安装此主题组件

43 个赞

如果它能显示每个分类和标签页中最常用的内容,并将其放置在页面顶部的横幅或其他位置,这将是一个极其强大的导航工具。

3 个赞

做得很好。

我只能在类别列表中的第一个类别页面看到侧边栏。

如何为所有类别启用它?

1 个赞

显示在父类别上的标签侧边栏同时包含父类别标签和子类别标签。若要在所有类别和子类别中启用此功能,您需要修改此处代码:https://github.com/awesomerobot/discourse-popular-tag-sidebar/blob/master/desktop/header.html。

2 个赞

目前,它仅在分类页面的第一个分类中显示。

那么,我需要修改代码的哪一部分,才能让它在所有页面都生效?

请提供详细帮助。抱歉,谢谢。

您能帮我完成这个修改吗?我对编程不太了解。请帮忙。

它仅在分类列表的第一个分类中显示,其他分类均不显示。请帮忙。

2 个赞

有没有办法把它显示在主题列表的上方?

如果您还不了解,原生 Discourse 中已经有一个可选的标签下拉菜单(如上图所示),它显示在主题列表上方。

image

3 个赞

我理解,但出于我的目的,我想显示一个列表或某种标签云。

3 个赞

是的,我也遇到了同样的问题。有解决办法吗?

我看到它现在在分类页面可以正常工作。但是有没有办法让它也在“最新主题”页面生效?

您能再详细描述一下这个问题吗?侧边栏是否只在一个分类中显示,而在其他分类中不显示?

您尝试的所有分类中是否都有包含超过 3 个标签的主题?如果某个特定分类中的标签少于 3 个,侧边栏将不会显示。

是的,我想我可以添加对其他页面的支持。

1 个赞

只是有个问题……当我点击标签侧边栏中的标签时,URL 是 https://www.example.id/tags/c/sub-categoriy/Tags-name

如果直接点击(在同一页面)没有问题,但当我右键点击并在新标签页中打开时,会显示消息:“哎呀!该页面不存在或为私密页面。

为什么 URL 格式不像正常的标签 URL,即 https://www.example.id/tags/tag-name?

另一个问题,如何在文本(标签)之间添加 2 个单位的间距(不确定是 1 还是 1.5,但我想设为 2)。

非常感谢

1 个赞

我已添加了一个功能,可选择在顶部菜单页面(最新、热门、新帖等)显示标签侧边栏。默认情况下该功能已禁用,您可以在主题组件的设置中启用它。

https://github.com/awesomerobot/discourse-popular-tag-sidebar/commit/75b3eacba7d23d76198f6adf1209f66e1da4e4f2

这是我的疏忽,我没有考虑到子分类,现在已重新调整 URL 结构以适配。问题已修复。

该 URL 会显示所有分类下的所有标签。当您在某个分类内并点击侧边栏中的标签时,我希望您能查看该标签在当前分类上下文中的内容。

我不太确定您的具体意思,能否提供一个具体的示例?

1 个赞

哇……现在在新标签页中打开时它就能正常工作了……非常感谢……

抱歉我的英语不太好 :grinning:

“添加空格”是指将行间距(就像在 MS Word 中一样)改为 2,目前看起来像是 1 或 1.5,这样标签之间的间距会更大。

另外,我可以更改标签文本的颜色吗?从蓝色改为灰色。

还有一个问题,热门标签能否始终可见?

当我向下滚动时,“热门标签”这几个字就看不到了,只能看到标签列表。

image

再次……非常感谢您的帮助

哦,明白了。你可以向你的主题添加一些 CSS(管理 > 自定义 > 主题),例如:

.tag-sidebar a:nth-of-type(2) {
    margin-top: 5px;
}

文本颜色也类似:

.tag-sidebar a {
    color: red;
}

这可能是你当前主题的问题。你可以像这样调整侧边栏的顶部位置:

.topic-list.with-sidebar > .tag-sidebar {
  top: 120px;
}

这些都是通用的 CSS 修改……如果你想进行更多类似的美化调整,建议跟随一些 CSS 教程学习。CSS styling basics - Learn web development | MDN 是一个很好的免费资源!

5 个赞

你好,我在第 31 行遇到了问题:discourse-popular-tag-sidebar/desktop/header.html at master · awesomerobot/discourse-popular-tag-sidebar · GitHub

能帮我检查一下这个错误吗?

最多 30 个标签的原因是什么?

嗨,Kris!
我在想 number_of_tags 这个选项会不会在这个提交中丢失了?:thinking:

2 个赞

如果将标签最大数量增加到 100 个,并以响应式自适应高度的气泡词云形式按字母顺序展示,那将非常棒。换句话说,标签越热门,其字体越大,即“前 100 个”标签。

另外,如果能在移动端将其水平放置在分类列表上方就更好了。我真的很希望移动端能实现这个功能。:star_struck:

您好,

如何在标题下方显示热门标签列表?请给我一些建议。

谢谢

1 个赞

不幸的是,此组件与 Discourse Tag Sidebars 存在冲突。当我同时启用它们时,所有标签都会挤成一行,如下所示:

并且标签侧边栏根本不显示。

这很不幸,因为它们本应是互补的:用于“所有标签”视图(可能还有“无标签”)的标签列表,以及用于_特定_标签的侧边栏。事实上,也许可以将它们合并成一个组件?

1 个赞