Horizon主题中主题卡片上显示标签

功能
,
1

在看到这个之前，我没有注意到 Horizon 主题的主题列表中的主题卡片上没有显示标签：

如果能显示它们，肯定会非常有帮助，所以我支持这个！ :+1:

2 个赞
The Horizon theme does not display tags on topic lists
3

同意！能够启用/禁用标签的显示将非常棒。

编辑：一些对我们来说效果很好的变通方法 CSS（正在进行中）

通用 CSS：

/* Horizon 主题列表元数据 + 胶囊标签 */
.topic-list-body .topic-list-item {
  row-gap: var(--space-2);
}

.topic-list-body .topic-list-item .link-bottom-line .badge-category__wrapper  {
  display: none;
}

.topic-list-body .topic-list-item td.main-link .link-bottom-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: var(--space-1);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  font-size: var(--font-0) !important;
  line-height: 1.35;
  grid-column: 2 / -2;
}

.topic-list-body .topic-list-item td.main-link .discourse-tags {
  display: inline-flex!important;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.topic-list-body .topic-list-item td.main-link .discourse-tag,
.topic-list-body .topic-list-item td.main-link .discourse-tag.box {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-1) * 1.25) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--primary-low-mid);
  background: var(--secondary);
  color: var(--primary-high);
  font-weight: 500;
  box-shadow:
    inset 0 1px 0 var(--secondary-very-high),
    inset 0 -1px 0 var(--primary-low);
  text-decoration: none;
  margin-right: var(--space-1);
}

.topic-list-body .topic-list-item td.main-link .discourse-tag:hover,
.topic-list-body .topic-list-item td.main-link .discourse-tag.box:hover {
  border-color: var(--primary-low);
  background: var(--secondary-high);
}

移动端 CSS：

    .topic-list-body .topic-list-item .badge-category__wrapper {
        font-size: var(--font-down-1);
    }
    .topic-list-item .discourse-tags {
    font-weight: normal;
    font-size: var(--font-down-2);
}
3 个赞
The Horizon theme does not display tags on topic lists
4

太棒了！

您有没有兴趣将其打包成一个主题组件并分享？

1 个赞
5

我宁愿将其作为一项设置直接集成到 Horizon 主题中，这样会更合适。否则，我们将不断添加一个又一个单一功能的 TC。

我会看看是否以及如何提交 PR……但不要指望它。

3 个赞
6

我不是专业人士，所以 CSS 操作对我来说有点难…… :sob: 是否可以将此标签显示功能打包为 Horizon 主题的内置设置？或者将其实现为一个独立的主题组件？如果有可能，我愿意等待！如果有一丝希望，如果您能及时通知我，我将不胜感激。非常感谢！

7

或者，您能否告诉我应该在网站的哪个位置添加此 CSS？我在我的 Horizon 主题中找不到任何可以编写 CSS 的地方（抱歉，您可以看到我不是专业人士，所以我缺乏这些编程基础 :sob: :cry: ）。

8

您可以将自己的主题组件添加到具有自定义 CSS 的主题中

1 个赞
9

只是想通知一下，我们正在积极处理此事。目前还没有确切的时间表，但它即将来临。

1 个赞