Discourse类别标题主题组件

此 PR 支持深色模式分类徽标:

这个小问题也困扰了我一下。一点自定义 CSS 就能解决:

// 让“关于分类”标题的“阅读更多”链接使用与摘要文本相同的颜色

.category-about-url a {
  color: inherit;

}
2 个赞

我的“阅读更多”链接的剩余愿望:仅当确实存在更多内容时才显示它。我有一些很长的“关于”分类页面,也有一些很短的页面,我宁愿不提供一个指向没有额外内容的链接。

(我不知道这是否可行。对 TC 来说可能要求太多了。)

1 个赞

当显示完整的类别描述时,我在主题创建器和我的开发实例上也遇到了这个问题。我正在调查。我怀疑是因为路由发生了变化,但跟踪的变量没有。

更新:我在这里为类别描述添加了展开/折叠功能。@nathank 还修复了以下错误:

在 Ask Discourse 的一点提示下,使用了 willDestroy 和路由器服务。

2 个赞

哇,Nate!:open_mouth: 55 个提交和 1 个 PR 在一个晚上……太棒了。
我会关注合并,并期待尝试一下!

1 个赞

对我来说,其实是上午晚些时候 :wink:。我会研究一下你关于检查描述是否还有更多文本的建议是否可行。我在测试时也觉得需要这个。

2 个赞

这是一个很棒的补充! :heart:

只是一个小小的反馈:也许可以在类别标题的右上角或右边缘添加一个箭头图标,以向用户指示展开/折叠功能。但这是一个很好的开始,目前在链接文本中使用表情符号


作为指示器也能胜任工作:

2 个赞

PR 已合并 :git_merged:

明白了 :+1: 。我来看看。

3 个赞

Nate,展开/收起功能非常棒,谢谢!

如果能根据是否存在更多文本来有条件地显示该链接,那就更好了——不过我也可以写更长的描述 :laughing:

我确实看到了一些您可能还没来得及发现的问题:

  • 分类和标签链接没有渲染它们的 SVG 图标
  • 分类图片没有显示出来,所以我看到的是默认的网站图标
(截图)

我设法解决了一个小问题:关于文本中的链接没有继承文本颜色,就像之前提到的展开链接一样 earlier。这段 CSS 对文本链接进行了样式设置,但没有影响分类和标签链接:

// text link styling, to exclude category and tag links
.category-title-header .category-title-description 
a:not([data-type="tag"], [data-type="category"]) {
  color: inherit;
  text-decoration: underline;
}
(截图)

image
image

我对这些更新印象深刻,希望我的 SVG 和图标问题只是一个小修复。

有意思。您知道这之前就存在吗?

我来看看。我也遇到了这个问题。暂时尝试禁用“显示网站徽标”设置,这似乎可以解决问题。

谢谢。这是之前的情况,然后发生了一些变化吗?

“> 暂时尝试禁用 显示网站徽标 设置,这似乎可以解决问题。

这招奏效了——谢谢!我本应该多尝试一些设置的。

至于 SVG 链接图标和文本链接颜色,我无法确定它们之前可能做了什么——我从未在“关于”文本的简短摘要部分设置过链接,但现在在展开的“阅读更多”部分有一些。

(我分享了那个链接颜色 CSS,以防它对您或其他人有帮助,但我知道这种样式调整不一定是组件的责任。)”

1 个赞

Nate,关于占位符类别/链接 SVG 图标的问题有什么想法吗?

image image
我不知道在标题和主题中编码它们的方式是否有差异,但输出的结果却大相径庭:

类别链接对比

标题中的类别链接:
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>Wild Speculations</span>
</a>

主题中的类别链接:
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square" aria-label="Wild Speculations">
  <span class="hashtag-category-square hashtag-color--category-5"></span>
  <span>Wild Speculations</span>
</a>

以及

标签链接对比

标题中的标签链接:
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>ai</span>
</a>

主题中的标签链接:
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag" aria-label="ai">
  <svg class="fa d-icon d-icon-tag svg-icon hashtag-color--tag-5 svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
    <use href="#tag"></use>
  </svg>
  <span>ai</span>
</a>

这几天我一直很忙(明天会处理)。我怀疑这包含在类别描述中。如果您使用完整描述,它仍然会发生吗?

我感谢您抽出宝贵时间提供帮助,我并非有意打扰。我曾尝试自行查找解决方案(但未能成功 :flushed_face:)。

是的,在启用“显示完整分类描述”后,此问题仍然存在。

1 个赞

我会尝试看看我能做什么。最后的手段是使用一些逻辑(可能很复杂)来根据颜色调整它们(可能无法考虑图标)。如果有人有更好的方法,我愿意听取建议。

@ToddZ 如果你看看官方 这个例子Category Banners 组件(我认为 Meta 使用了它),它也有这个问题。

我明白了……!有人提到了这个问题:

我安装了 Category Banners 来验证分类图标是否有效——但它们没有。分类图标和标签图标都显示占位符,就像 Category Headers 一样。无论在设置中选择哪个输出,结果都一样。

如果有一种方法可以让他们正常处理,那就太好了,但我不想让你采取复杂的变通方法。

1 个赞

我刚刚测试了与 Horizon 主题的兼容性。总的来说,它基本上是可行的,但唯一的问题是,目前由 category headers 主题组件使用的插件出口在 Horizon 主题中位于 list-controls 容器内。因此,整个类别标题会一直固定。

建议的解决方案是更改插件出口或添加一个选项来选择 list-controls 容器外部的另一个插件出口,例如 discovery-list-controls-above 出口。

如果您愿意,我可以创建一个拉取请求 @NateDhaliwal

1 个赞

很有意思。感谢你提出这个问题!我会去调查一下。

1 个赞