需要帮助设置类别列表图片

你好!

我想在类别列表中显示类别图片,方式类似于“最近浏览”中显示用户图片的样子 Catégories - Discourse Meta

通过在 Chrome 检查器中一番折腾,我大致得到了想要的效果。

您觉得这能通过 CSS 实现,还是需要编辑 HTML 模板?

网站已上线:APF - Auberge du Pixel Fringant (apfcommu.ga),如果您想查看实时效果的话。

感谢您的时间 :slight_smile:

嗨!

我觉得非常有可能,而且你似乎已经在通过 Chrome 调试找到了方法。所以,如果你的问题更多是“我应该在哪里应用我的修改?”,你可以在这里找到一个示例:

此外,这里还有更多相关内容:Search results for 'category-list' - Discourse Meta

其实不是,我是通过移动一些 HTML 元素来“作弊”的。

在示例中,他们通过移除分类描述并将描述直接添加到图片上来实现功能。我更倾向于避免这样做。

哦,我明白了,是我的错 :sweat_smile:
所以,因为我确实不太擅长 CSS,而且我不确定你是否应该采用 position: relative 的方案。如果你打算通过调整 HTML 结构来实现,那么以下内容可能会更有帮助:

此外,这里是 https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/navigation/category.hbs 文件。但如果你想对 discourse/app/views/categories/index.html.erb at main · discourse/discourse · GitHub 进行一些修改,你可能需要开发一个插件。

我自己也不太擅长 CSS。

感谢提供的资源,等我有更多时间时会去查看。

我可能最终得走插件这条路了。

我会使用这个新组件:

它将为您提供更清晰的 HTML 结构,便于使用 CSS 进行样式设计。同时,它在桌面端和移动端的视觉效果一致,且类选择器也基本相同。