主题列表缩略图

:discourse2: 摘要 主题列表缩略图 允许您在主题列表视图中显示主题缩略图。
:eyeglasses: 预览 在 Discourse 主题创建器中预览(博客风格)
在 Discourse 主题创建器中预览(网格)
在 Discourse 主题创建器中预览(列表)
在 Discourse 主题创建器中预览(瀑布流)
在 Discourse 主题创建器中预览(简约网格)
:hammer_and_wrench: 仓库链接 https://github.com/discourse/discourse-topic-thumbnails
:open_book: Discourse 主题新手? Discourse 主题使用入门指南

安装此主题组件

功能

列表会生成优化后的图片,并为高分辨率显示屏提供不同分辨率的图片。当原生浏览器支持时,图片会在您滚动时进行懒加载。

默认情况下,Discourse 将使用主题原始帖子(OP)中的第一张图片。如果您希望从 OP 中选择另一张图片作为缩略图,请在 Markdown 中添加 |thumbnail。例如:

![alttext|100x100](upload://aaa)
![alttext|100x100|thumbnail](upload://bbb) << 此图片将作为缩略图

共有五种模式,可通过主题设置在每个分类或标签下单独配置。

例如:

网格模式:

瀑布流模式:

以及列表模式:

技巧与提示

如果您希望帖子中的一盒(Oneboxes)生成缩略图,则需要启用以下站点设置:download_remote_images_to_local。此外,您还需要重新烘焙相关帖子。

设置

名称 描述
默认缩略图模式 默认应使用哪种缩略图显示模式
文档缩略图模式 如果启用了文档插件,文档主题应使用哪种缩略图显示模式
博客风格分类 这些分类将使用博客风格视图。如果通过主题或主题组件启用了主题摘要,此风格将使用主题摘要
简约网格分类 这些分类将使用简约网格视图
网格分类 这些分类将使用网格视图
瀑布流分类 这些分类将使用瀑布流视图
列表分类 这些分类将使用列表视图
博客风格标签
简约网格标签 这些标签将使用简约网格视图
网格标签 这些标签将使用网格视图
瀑布流标签 这些标签将使用瀑布流视图
列表标签 这些标签将使用列表视图
推荐主题模式 推荐主题应使用哪种缩略图显示模式?如果留空,将遵循“在主题列表之外启用”设置。
在主题列表之外启用 在非主题列表页面(例如用户活动、个人消息、推荐主题)上启用缩略图
占位图标 在没有缩略图的主题上显示的图标
移动缩略图 在移动设备上启用缩略图
列表缩略图大小 “列表”视图中缩略图的基础大小

:discourse2: 由我们托管? 主题组件可在我们的专业版、商业版和企业版计划中使用。

92 个赞
MD Topic List component
Theme modifiers: A brief introduction
Thumbnail generation & markdown rendering issue
Image_url is null after update
User Card Directory
Pictures in grid page layout
Thumbnail of topic
Amazing customized community
Blog Post Styling
Topic List Previews (legacy)
Topics list in mobile view: excerpt overflows and count/date wraps
Topic List Previews (legacy)
Using onebox images for topic thumbnails
Is there a plugin to make my forum a shop?
Add icons for Views and Replies, and Last Activity date in Topic Cards
[PAID] Modifying Video Upload theme to display topic thumbnails
How to make tiles like in discourse theme category?
Topic List Previews (TLP)
User Portfolio
Topic List Excerpts
Rounded Borders for images, oneboxes, blockquotes & more
Extend Topic List Thumbnails TC with like button
What are good plugins or theme components for a forum emphasizing pictures?
What is the name of this theme?
Developing a component or plugin similar to topic list thumbnails or topic list previews
Set the image used for social network sharing?
Latest list as grid view
Fakebook Theme
I want to create a Theme/Theme component as shown in the picture below!
Customize topic list entries (sorting, grouping, filtering) for better organization
Enabling a plugin for a specific theme only
New Photography Theme
Topic Cards
How do I fix this display?
Thumbnails are missing for our external embeds when using topic-thumbnails
FKB Pro - Social theme
Improve the Follow Feed
FKB Pro - Social theme
Customizing your site with existing theme components
User Portfolio
Is there a way to select a Default Image for Topic List Theme Component?
Topic List Item Click Animation
Blog-style layout affects Tooltips
Discourse Docs
How to display posts as blocks?
How is the "theme" Category acheived in Meta?
Minima Theme
Can the homepage display images within the Topic feed?
Topic List Previews (TLP)
Topic List Previews (legacy)
Is there a Kanban theme for Discourse?
Discussion grid latest
Topic List Previews (legacy)
Topic List Previews (legacy)
How to display posts in grid?
Displaying Views in Topic view (with no replies)
Topic List Previews (legacy)
Group Topics by Category
CASE STUDY: Why a journal category could be the next big growth opportunity for your forum
Blog Post Styling
Topic Cards
Can discourse be used entirely through the APIs to build a flutter app?
Topic List Author
What Will be Best theme for a site like ecommerce
Topic Cards
FKB Pro - Social theme
FKB Pro - Social theme
Migrated my old custom-built trail-journal/blog to Discourse
Help us test Horizon, our newest theme
Alternative post templates
Creating a Unique Gallery Layout for a Category
Photo Competition or Contest - Do We Have Anything?
Display images on the article's front page
How can I make my forum look like this one?
Sharing link to Facebook does not show image (open graph)
Discourse Docs
The pictures are disappear and some Theme component is ineffective
Graceful Theme
How can I make a Discourse forum as "reddit like" as possible
All links to categories broken?
Add an option to list topics by tagging date
Is there like a Reddit style plugin?
How would I able to list topics as boxes
Best way to implement Excerpts in topic list?
MD Topic List Mobile component
Featured Topics
Add Onebox integration; show thumbnail with topic-thumbnails plugin
Topic List Previews (legacy)
Plugin used in theme
Plugin used in theme
Topic List Previews (legacy)
Created Topic Sort
All latest images in posts from a category
How to create a custom button?
Topic Cards
Filter posts with images (gallery view)
[Question/Request] Featured image url for post
Category "Uncategorized" not displayed for globally pinned topics below title
Is there a 'reddit' style discourse theme / plugin?
Blog Post Styling
Potential way to hide ignored users from topic list?

好奇这个想法是从哪儿来的?:thinking: :grinning_face_with_smiling_eyes:

核心团队更加关注图片的交付和呈现,这真是太棒了!我喜欢这个方向!

(如果这不能完全取代“主题列表预览”,但至少有可能消除大量需要定制开发的 API 工作,这样我就不用再维护它们了,太棒了!)

附:我刚测试了一下,如果投票能生成缩略图,让图表能够显示出来,那就更好了……

37 个赞

这是一个很棒的功能。这是否如这里提到的随 Discourse 2.7 一同发布?还是语法有所不同?

2 个赞

是的,它已在 Discourse 2.7 稳定版中可用。语法是一样的 :slight_smile:

4 个赞

我遇到了一个非常奇怪的问题,仅影响我网站上的某一位成员。部分缩略图似乎随机无法显示,系统显示为默认图标,仿佛没有图片一样;但对我本人及其他所有用户而言,缩略图都能正常显示。我让他检查了浏览器控制台,未发现任何相关信息,日志中也没有任何记录。我让他尝试清除缓存、更换不同浏览器和设备,甚至更换了不同的网络服务提供商。我还让他尝试了一个仅启用该组件的主题。无论他如何尝试,问题依然存在。我甚至尝试模拟他的身份登录,但在我这里问题并未出现。关于故障排查,大家还有其他建议吗?谢谢!

2 个赞

让他尝试在移动设备上关闭 Wi-Fi,这样就不会经过家庭网络,而是使用蜂窝网络。这将排除其家庭网络中任何可能造成的干扰。

但如果你已经尝试过“更换不同的 ISP”,那可能就不是这个问题了。

2 个赞

我无法再让此功能生效了,这是否被撤销了?

此外,该功能对普通用户来说不易发现。是否可以在预览的“尺寸选择”中添加一个选项来选取缩略图?

5 个赞

谢谢 Jeff。他尝试过用手机热点,也去过朋友家使用不同的网络服务商。我起初怀疑是 CDN 的问题,因此尝试清除了 CDN 缓存,但这对他没有帮助。我还尝试过在使用位于他家乡亚特兰大的 VPN 时模拟他的操作,同样没有效果。我不确定还有什么其他方法可以尝试。

2 个赞

3 篇帖子已拆分至新主题:为标签主题列表缓存?

对我来说它仍然有效。您能提供更多细节,说明您尝试了什么以及看到了什么结果吗?我在我的测试原始帖子中有以下内容:

![image|690x460](upload://1lGVHoB5KKnftUZoEYVgANxKdWL.jpeg)
![image|612x500|thumbnail](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)

第二张图片被正确选为缩略图。

我同意那样会很棒,但我不认为大多数网站都需要它。我认为这会成为一个很好的独立主题组件。

3 个赞

哈,真尴尬,它现在当然能用了…… :facepalm:

3 个赞

你好 @david

我有以下需求,或许你能指点我如何实现。

有时我们有一个想要在社交媒体上分享的主题,并为此准备了一张图片,用作缩略图和 og:image 标签,但我们不希望它在主题内容中显示。

如何实现类似的功能呢?例如,在尺寸参数中添加“hide”,然后为图片容器添加一个应用了"display: none;"的类?

![image|612x500|hide](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)

3 个赞

你可以尝试使用 Generic bbcode wrapper for theme components 来实现类似以下功能:

[wrap=hidden]
  ![image|612x500|hide](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)
[/wrap]

然后添加一些 CSS 样式:

div[data-wrap="hidden"] {
  display: none;
}
10 个赞

哦,我还没听说过这个。真不错,谢谢!

3 个赞

alert-info 横幅覆盖了缩略图,这是设计如此还是存在缺陷?

3 个赞

这在一定程度上是设计使然。通常情况下,该栏位于主题列表的列标题上方。另一种方案是当该栏出现时“向下推挤”所有主题,但这会导致整个界面突然下移,可能会显得非常突兀。

我不确定为何您的截图中该栏右侧存在约 1 像素的间隙。这可能是组件本身的问题,也可能与您的自定义主题 CSS 有关。

4 个赞

是否可以在缩略图卡片上显示点赞数量,并使其可点击,以便用户直接从画廊视图点赞图片?

4 个赞

即使在勾选“在移动设备上启用缩略图”后,列表分类在移动模式下仍无法正常工作?

2 个赞

你好,这真的很酷。
是否可以使用热链接图片(例如来自 Imgur 的)作为缩略图?

2 个赞

你好,我刚刚将博客分类设置为使用列表分类,但它显示在所有分类中,是不是我哪里设置错了?

2 个赞