谢谢更新！
通过一些 CSS 技巧，我将头像叠加在了卡片模式缩略图上：
.featured-topics__topic-details .topic-author {
position: absolute;
right: 30px;
bottom: 30px;
}
如何将（紫色的）主题作者 div 的高度减小到 0，从而有效移除间隙，同时仍然显示头像？
1 个赞
如果您正在编写自定义 CSS，那么与其添加覆盖预设布局的代码，我实际上建议您在主题设置中选择无作为布局选项，然后从头开始声明您的样式。
例如，您可以复制默认的卡片样式表，并将 featured-topics__topic-details 容器声明为网格。然后，您可以精确地按照您喜欢的方式定位其元素，而不是使用绝对声明来移动它们。
2 个赞
这真是个好主意！
目前，我们对模板很满意，只需要做一些小的 CSS 调整来初步测试。一旦我们进入点击率优化阶段，我们可能会采纳您的建议。 
2 个赞
如果您有兴趣在移动设备上使用水平滚动，这里有一些我（在 AI 的帮助下）想出的 CSS。它还包括一些滚动捕捉和尺寸调整，我认为更适合我们的用例。
附注：我也尝试过在不添加 HTML 的情况下制作一些导航药丸，但这绝对是一个牵强的尝试。
@media (max-width: 750px) {
.featured-topics__topic-wrapper {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 1em 10vw; /* 侧边填充以显示相邻卡片 */
gap: 1rem; /* 卡片之间的一致间距 */
overscroll-behavior-x: contain; /* 防止过度滚动干扰 */
scroll-behavior: smooth; /* 平滑滚动 */
scrollbar-width: none; /* 隐藏滚动条 */
-ms-overflow-style: none;
}
.featured-topics__topic-wrapper::-webkit-scrollbar {
display: none; /* 在 WebKit 浏览器中隐藏滚动条 */
}
.featured-topics__topic-container {
flex: 0 0 80vw; /* 较窄的卡片以显示侧边 */
min-width: 280px; /* 小屏幕的最小宽度 */
scroll-snap-align: center; /* 滚动时居中每张卡片 */
height: unset !important; /* 一致的高度 */
}
.featured-topics__topic-thumbnail {
height: 40vw;
width: 100%;
}
}
您好，非常感谢您提供的这个组件，我很喜欢！\n\n有人能帮忙调整一下标题的大小吗？它现在太大了。
我收到一条错误消息，说这个组件需要更新，以兼容即将到来的 Discourse 核心更改。 有人知道是否计划更新吗？
我今年早些时候更新了该组件。您需要重新安装才能使用新版本，请参阅：
Featured Topics - #38 by manuel
1 个赞
你好曼努埃尔——有什么办法可以让你很棒的主题组件忽略图片（只显示摘录）吗？
我有不少没有图片的精选主题（我想重点展示），但它们和有图片的相比看起来很糟糕。另外，我对文字比对图片更感兴趣。
