 |
摘要 | 在选定视图中的功能类别。 |
 |
仓库链接 | Manuel Kostka / Discourse / Components / Featured Categories · GitLab |
 |
Discourse 主题新手？ | Discourse 主题使用入门指南 |
安装此主题组件
您可以在上述两种布局之间切换，或选择无并自定义您的样式。您还可以选择一个路由并为该组件设置一个出口。
.featured-categories {
&__container {
}
&__heading {
}
&__list-container {
}
&__category-container {
}
&__category-link {
.category-logo {}
.category-name {}
.category-description {}
}
Handy TC，谢谢。
我想，添加一个开关以仅在首页显示、显示站点徽标以及在徽标下方显示站点描述，会是令人期待的改进。
目前它在所有全局列表（最新/新/未读/热门）中显示。我正在考虑在设置中添加一个下拉菜单，以选择它应在哪些全局页面显示。是的，这在我的路线图上，等我下次有时间时会处理！
显示徽标的使用场景是什么？在全局页面上，你几乎已经算是“在主页”了，不是吗？
我实际上最感兴趣的是添加一个移动端视图。目前我还没有相关想法，所以它在移动端上并未显示。感谢分享！如果你对此有想法，欢迎提出！
个性化美学，并结合简短描述，可为新访客提供关于社区的快速洞察，并作为对现有用户关于社区使命的提醒。可将其置于链接的上方或左侧。
默认在所有全局链接上显示此内容，并可选择性地按类别（以及标签页面？）显示，将作为优先区域的便捷导航菜单——这是我主要的预期用途。（顺便提一下，能够包含自定义链接——而不仅仅是类别——将是另一个理想的功能。）
就我个人而言，我发现大多数 Discourse 站点在初次访问时往往比较模糊，而且默认情况下，我认为 Discourse 的导航对普通用户来说可能令人困惑。通常，我的站点设计旨在优先突出少数几个区域（在众多区域中），而这些拟议的改进将使普通用户非常清楚地了解这些区域是什么，同时也便于访问。
好组件，
我们已安装“通用横幅”，如何将此组件移至“通用横幅”下方？
以便先显示“通用横幅”组件，然后再显示您的组件。
谢谢。
是的，这两个组件都渲染在同一个出口上。我不清楚在这种情况下元素顺序是由什么决定的？在我的网站上，默认情况下它显示在横幅下方……
但您应该能够通过 CSS 声明来调整顺序：
.below-site-header-outlet.categories-header {
order: -1 !important;
}
.below-site-header-outlet.banner-themes {
order: -2 !important;
}
这听起来像涉及许多自定义选项。我不希望为此组件添加过多的逻辑。
构建特色导航对我来说更像是自定义 HTML 横幅的用例？您只需要一些带有图片和标题的链接即可。
我同意这一点！我认为为访客和新注册用户设置专门的横幅会有所帮助，也能让人感到宾至如归。
Versatile Banner 设置中有一个“交换默认位置”选项，这或许对您有用？
交换默认位置
如果存在其他与横幅相关的活动组件，请使用此选项将其位置与 Versatile Banner 交换。
试试这个设置，但对我没用 
你好，
我刚开始接触 discourse 和主题化。
我想在顶部添加一些卡片，就像您在这里看到的那样：Secret World Legends - Funcom Forums
这个主题组件似乎有助于实现这一目标。
我已经安装了它，并且能够选择我想要显示的类别，但我只得到了标题。
这是有道理的，因为我还没有设置任何图片。
我的问题（这可能是一个愚蠢的问题，因为还没有人问过）是如何设置类别的图片？
以及如何“上传”它们？
感谢您的任何帮助。
您好，我是 Discourse 新手，关于“特色分类标题”我有一个问题。
我正在尝试实现这个效果，但无法做到。
他们提供了一些代码：
html.categories-header{
.below-site-header-outlet.categories-header {
.wrap {
.categories-header-item {
[每个项目的链接、徽标、名称...]
}
}
}
}
我该如何指定项目的链接、徽标和名称？
有人能解释一下吗？
谢谢。
您好，欢迎 
如果您想显示示例中的图片，则需要在主题组件设置中选择相关类别，并确保每个类别都已分配图片（类别设置 → 图片 → 类别徽标图片）
这样吗？
如果是这样，请尝试使用此 CSS。将其添加到您的主题 CSS 或组件中。
在其中，您可以看到可以控制的变量。
您可以选择列数、元素之间的间隙以及每个元素的宽度。
元素会自动堆叠。
.below-site-header-outlet.categories-header > div.wrap {
--ch-columns: 6;
--ch-gap: 2.5em;
--ch-width: 110px;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(var(--ch-width), 0fr));
gap: var(--ch-gap) !important;
max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap))) !important;
}
试试这样的方法：
.below-site-header-outlet.categories-header > div.wrap {
--ch-columns: 4;
--ch-gap-row: 2em;
--ch-gap-col: 6em;
--ch-width: 120px;
& > div {
width: var(--ch-width);
}
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap-col))) !important;
}