# 精选话题
**URL:** https://meta.discourse.org/t/featured-topics/217580
**Category:** Theme component
**Created:** [2022年二月8日 21:38 UTC](https://meta.discourse.org/t/featured-topics/217580 "2022-02-08T21:38:36Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2022年七月18日 09:22 UTC](https://meta.discourse.org/t/featured-topics/217580/21 "2022-07-18T09:22:47Z")
不，不能直接实现。您可以选择类别，但只能用于限制主题的选择。我不想添加更多逻辑来启用此选项。
一种变通方法是使用通配符自动标记所有新主题：
或者使用不同的组件。如果您能更详细地解释您想要实现的外观，也许我可以推荐一个。
---
### Author:  [@riteshsaini](https://meta.discourse.org/u/riteshsaini)
#### Post date: [2022年七月18日 09:37 UTC](https://meta.discourse.org/t/featured-topics/217580/22 "2022-07-18T09:37:36Z")
感谢您的回复。
如果我将来决定移除该组件，为其添加一个特定的标签将导致长期的冗余。
因此，该组件的最佳逻辑是，如果没有指定标签，则自动选择最新帖子。
万一我将来移除该组件，我将不得不查找所有使用“featured”标签的帖子并取消它们的标签。
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2022年七月18日 09:50 UTC](https://meta.discourse.org/t/featured-topics/217580/23 "2022-07-18T09:50:04Z")
> [@riteshsaini](#):
>
> In case I ever remove the component, I will have to look for all the threads using the “featured” tag and untag them all.
您可以非常快速地从主题中移除标签，方法是按标签过滤并使用批量操作选项：
I think it only grabs the ones visible on the screen, so I often scroll down to load them all before applying the bulk action. 👍
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2022年七月18日 09:52 UTC](https://meta.discourse.org/t/featured-topics/217580/24 "2022-07-18T09:52:41Z")
嗯，你也可以直接删除那个标签，它就消失了 🪦 🙃
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2022年七月18日 10:03 UTC](https://meta.discourse.org/t/featured-topics/217580/25 "2022-07-18T10:03:10Z")
总体而言：该组件是从官方的 [精选图块组件](https://meta.discourse.org/t/featured-tiles/156677) 分叉出来的。我创建它的全部想法和动机是为了拥有一个具有该组件所提供功能的卡片式外观。我认为我不会在原始组件的基础上添加任何更多功能性特性。原因是，就代码维护而言，我希望能够直接遵循官方组件的兼容性修复。
---
### Author:  [@diabolicvincent](https://meta.discourse.org/u/diabolicvincent)
#### Post date: [2022年十二月13日 11:44 UTC](https://meta.discourse.org/t/featured-topics/217580/26 "2022-12-13T11:44:34Z")
如果有人感兴趣：我们修改了特色卡片组件，允许用户水平滚动浏览所有特色主题（使用的主题来源：最新）。
使用的 CSS 如下：
```css
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
-ms-overflow-style: none; /* Hide the scrollbar for MS Edge */
scrollbar-width: none; /* Hide the scrollbar for Mozilla Firefox */
scroll-snap-type: x mandatory;
scroll-padding: 8px;
}
.featured-card {
scroll-snap-align: start;
}
.featured-cards-container::-webkit-scrollbar {
display: none; /* Hide the scrollbar on Webkit based browsers (Chrome, Safari, etc) */
-webkit-overflow-scrolling: touch; /* On touch screens the content continues to scroll for a while after finishing the scroll gesture */
}
```
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2023年一月22日 09:58 UTC](https://meta.discourse.org/t/featured-topics/217580/27 "2023-01-22T09:58:51Z")
功能请求。
能否提供一个选项，使其显示在特定的类别页面上？
例如，如果查看休息室，则此处显示精选卡片
显示的图片是类别图片。我正在使用 Air 主题。应用程序显示与该类别相关的精选主题，来自其子类别 Frontier news。
卡片图片推荐的图片尺寸是多少？
---
### Author:  [@xiaokong23357](https://meta.discourse.org/u/xiaokong23357)
#### Post date: [2023年三月30日 02:39 UTC](https://meta.discourse.org/t/featured-topics/217580/28 "2023-03-30T02:39:17Z")
太好了，但它不支持 FKB 主题。
---
### Author:  [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [2023年十二月26日 16:33 UTC](https://meta.discourse.org/t/featured-topics/217580/29 "2023-12-26T16:33:00Z")
如何设置标题的最大字符数？我在卡片上显示了摘要，它超出了带有标题和摘要文本的框。
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十二月26日 18:42 UTC](https://meta.discourse.org/t/featured-topics/217580/30 "2023-12-26T18:42:31Z")
没有控制最大标题字符数的设置。但是，您可以增加“卡片高度”设置以适应内容。
如果您不想每次都进行调整，可以尝试在您的主题或组件中使用此 CSS。
它消除了卡片高度限制，并且您有以下选项：
- 您更喜欢拉伸卡片
- 图像最大高度。
- 最大标题行数
- 最大摘录行数
```css
.featured-cards-container {
$stretch_card: "true";
$max-image-height: 10em;
$max-title-lines: 3;
$max-excerpt-lines: 4;
height: inherit;
max-height: inherit;
.featured-card {
@if $stretch_card == "true" {
height: inherit;
}
a.card-content .card-details {
.topic-title {
-webkit-line-clamp: $max-title-lines;
}
.topic-excerpt {
-webkit-line-clamp: $max-excerpt-lines;
}
}
a.card-content .card-image {
height: #{$max-image-height};
min-height: #{$max-image-height};
}
}
}
```
希望这有帮助！
---
### Author:  [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [2023年十二月26日 20:05 UTC](https://meta.discourse.org/t/featured-topics/217580/31 "2023-12-26T20:05:20Z")
谢谢，发布前我actually had your defined height of 350，但我刚试了你的代码，它似乎能适当地调整卡片大小以适应带有摘要的标题。
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2024年四月24日 10:18 UTC](https://meta.discourse.org/t/featured-topics/217580/32 "2024-04-24T10:18:20Z")
挖出这个，太有才了！有没有办法也启用手机视图？
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2024年十一月28日 15:06 UTC](https://meta.discourse.org/t/featured-topics/217580/33 "2024-11-28T15:06:32Z")
不知何故，水平滚动不再起作用了。有人能在桌面和移动设备上使其正常工作吗？
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2024年十一月29日 03:18 UTC](https://meta.discourse.org/t/featured-topics/217580/34 "2024-11-29T03:18:32Z")
试试这样做：
```css
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
scroll-snap-type: x mandatory;
scroll-padding: 1.25rem;
/* 使滚动条可见但不可见 */
scrollbar-width: auto;
scrollbar-color: transparent transparent;
/* 或者显示它但很细 */
// scrollbar-width: thin;
// scrollbar-color: #91919185 transparent;
/* 确保滚动条位于容器正下方，而不是最大高度下方。 */
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
```
我不确定在桌面上隐藏滚动条是否是个好主意；访问它可能会令人沮丧。
细而可见（也使背景透明）对我来说看起来不错。你觉得呢？
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2024年十一月29日 11:15 UTC](https://meta.discourse.org/t/featured-topics/217580/35 "2024-11-29T11:15:06Z")
这在桌面上现在可以用了！但在手机上不行。我已经用 CSS 勉强实现了手机上的水平滚动，但效果不是很理想 😃
我还添加了字体调整，因为标题字体大小对于小屏幕来说太大了
```css
.featured-cards-container {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 1rem;
margin-bottom: 1rem;
align-content: flex-start;
overflow-x: auto;
max-height: 350px;
}
.featured-cards-container .featured-card {
min-width: 90%;
}
.featured-card a.card-content .card-details .topic-title {
font-size: var(--font-up-1);
}
```
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2024年十一月29日 13:42 UTC](https://meta.discourse.org/t/featured-topics/217580/36 "2024-11-29T13:42:50Z")
有什么方法可以使整个元素可折叠，并复制与 [Homepage Feature](https://meta.discourse.org/t/homepage-feature-component/144264) 组件相同的行为？
---
### Author:  [@copymonopoly](https://meta.discourse.org/u/copymonopoly)
#### Post date: [2025年二月11日 15:01 UTC](https://meta.discourse.org/t/featured-topics/217580/37 "2025-02-11T15:01:49Z")
“‘显示摘要为空’只发生在我身上吗？”
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2025年二月19日 13:25 UTC](https://meta.discourse.org/t/featured-topics/217580/38 "2025-02-19T13:25:16Z")
我已经更新了此组件，并将其存储库移至 GitLab：[https://gitlab.com/manuelkostka/discourse/components/featured-topics。](https://gitlab.com/manuelkostka/discourse/components/featured-topics%E3%80%82)
新版本采用了略有不同的设计方法，从主题设置中移除了选择样式选项。相反，它提供了两种基本的布局安排（卡片和列表）以及一个更简洁的模板，用于通过 CSS 添加自定义样式声明。
如果您想继续使用之前的组件，可以在 [GitHub - nolosb/discourse-featured-cards](https://github.com/nolosb/discourse-featured-cards) 找到它。
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2025年二月19日 13:36 UTC](https://meta.discourse.org/t/featured-topics/217580/39 "2025-02-19T13:36:08Z")
> [@manuel](#):
>
> 新版本采取了略有不同的设计方法，从主题设置中移除了部分样式选项。相反，它提供了两种基本的布局排列（卡片和列表）以及一个更简洁的模板，用于通过 CSS 添加自定义样式声明。
这有点离题，但我认为这是一个很棒的方法。我很难不为组件提供大量的设置以实现定制化，而你应该让事情对用户来说简单，但仍然提供一种为高级用法/用户进行定制的方法。
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2025年二月19日 13:48 UTC](https://meta.discourse.org/t/featured-topics/217580/40 "2025-02-19T13:48:47Z")
> [@Arkshine](#):
>
> 提供一种用于高级用法/用户的自定义方式。
我还没有在此组件上进行此操作，但另一种我喜欢的方法是提供自定义属性作为自定义样式的标准方法。例如，在 [Manuel Kostka / Discourse / Components / Extra Banners · GitLab](https://gitlab.com/manuelkostka/discourse/components/extra-banners) ：
在组件上，您可以使用自定义属性的占位符和默认的备用值来声明样式：
```plaintext
background: var(--extra-banners-background, var(--secondary));
```
[上一頁](https://meta.discourse.org/t/featured-topics/217580.md?page=1)
[下一頁](https://meta.discourse.org/t/featured-topics/217580.md?page=3)