谢谢更新！
通过一些 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 个赞
你好曼努埃尔——有什么办法可以让你很棒的主题组件忽略图片（只显示摘录）吗？
我有不少没有图片的精选主题（我想重点展示），但它们和有图片的相比看起来很糟糕。另外，我对文字比对图片更感兴趣。
组件模板会渲染主题上可用的各种内容。最终的外观会通过样式规则进行调整。例如，当您选择“卡片”作为布局时，主题摘要在有特色图片时隐藏，在没有特色图片时显示：
如果您想始终显示摘要且从不显示图片，您可以选择“无”作为布局并添加自己的样式表。或者覆盖卡片布局上显示图片和隐藏摘要的规则。
1 个赞
我认为这是一个很棒的组件！
我承认我花了二三天时间试图创建一个主题组件来实现这个组件所做的完全相同的事情。我不觉得那是浪费时间，因为我学到了很多，但我确实希望我能早点听从 ask.discourse 的建议并查看这个组件。
有一件事我弄不明白
我喜欢卡片布局，但希望在卡片布局中显示缩略图和摘录。任何提示都将不胜感激
相反，我选择了列表布局，但想更改一些内容。我已经将它们添加到了我的 common.css 选项卡中。也许这对其他人有帮助
要移除主题标签
.featured-topics__topic-tag {
display: none;
}
要移除作者头像
.featured-topics__wrapper .topic-author {
display: none;
}
要移除分类链接
.featured-topics__wrapper .category-link {
display: none;
}
编辑以添加：
我将保留上面的原始帖子，但我想要添加
如何在卡片视图中显示摘录
.featured-topics__topic-container.thumbnail .topic-excerpt {
display: contents;
}
另外，我更喜欢桌面上的列表视图布局而不是卡片布局，但在移动设备上它看起来很糟糕。缩略图在左侧，标题和摘录在一个狭窄的列中在右侧。我还没有弄清楚如何让文本环绕缩略图或将所有内容堆叠在单列中。
由于我弄清楚了如何在卡片布局中显示缩略图和摘录，而且在移动设备上看起来不错，所以我切换到了该布局，因为我怀疑大多数用户正在用手机查看网站。
这是一个很棒的组件和插件，感谢您的工作！
然而，内容似乎没有刷新，除非我按 F5 键进行完全的页面刷新。
举个例子：
我创建一个带有“精选”标签的主题。
我点击网站横幅转到主页。
该主题应该显示在“精选主题”下，但它没有显示。
只有当我通过按 F5 键刷新页面时，它才会显示。即使我再次点击横幅，它也不会显示。
如果我删除一个精选帖子，情况也是一样的。只有当我通过 F5 刷新页面，或者关闭标签页并重新打开页面时，它才会消失。
有人知道为什么会发生这种情况吗？
1 个赞
这是设计如此。内容不会动态更新，它反映的是页面加载时的状态。通常这不是问题，因为内容对于任何新访问者来说都是最新的。
2 个赞