# 主题列表预览（旧版）
**URL:** https://meta.discourse.org/t/topic-list-previews-legacy/101646
**Category:** Plugin
**Tags:** deprecated
**Created:** [2018年十一月9日 03:56 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646 "2018-11-09T03:56:38Z")
**Posts on this page:** 20
**Page:** 14
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年七月10日 18:45 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1207 "2020-07-10T18:45:57Z")
您说得对，抱歉。当设置为零时，高度在移动设备上应自动调整。这种行为不太理想。我会在有空时查看这个问题，同时也会考虑将其拆分为移动端专用方案。
在此期间，我建议您在移动设备上启用“网格”模式，或者修改缩略图的最大高度，例如：
```plaintext
.mobile-view .topic-list img.thumbnail:not(.tiles-thumbnail) {
max-height: 900px;
}
```
900 像素可能过大，但这样能确保容纳非常高的图片！🙂
您也可以根据需要调整最大宽度（默认值为 80 像素）。
---
### Author:  [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)
#### Post date: [2020年七月10日 18:52 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1208 "2020-07-10T18:52:32Z")
只是想确认一下我观察到的行为。
当宽度和高度都设置为 100px 时：
- 桌面端缩略图宽 100px、高 100px，缩略图实际上是被裁剪的（图片不会被拉伸或压扁）。
- 移动端缩略图的宽度和高度各不相同，具体取决于图片的宽高比。
当宽度为 100px 而高度为 0px 时：
- 桌面端缩略图宽 100px，高度根据宽高比有所不同。
- 移动端缩略图的宽度和高度各不相同，具体取决于图片的宽高比。
看起来这些设置并未被移动端样式表所采用。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年七月10日 18:53 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1209 "2020-07-10T18:53:17Z")
> [@jamesmarkcook](#):
>
> 看起来这些设置未被移动端的样式表采纳。
没错，CSS 默认将最大宽度和高度限制为 80 像素（适用于移动端非平铺视图）。
目前修改 CSS 是最佳方案。
你可以调整数值，使布局与头像等元素对齐。
请熟悉使用浏览器开发者工具来辅助编写 CSS。
---
### Author:  [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)
#### Post date: [2020年七月11日 14:38 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1210 "2020-07-11T14:38:20Z")
> [@merefield](#):
>
> 已经有一个备用图片的选项了。
我刚才尝试设置这个，但无法让备用图片显示出来。
我已经设置了 **主题列表默认缩略图** ，并勾选了 **主题列表默认缩略图备用选项** 。我还尝试在单个类别中设置“如果该类别下的主题未设置预览缩略图，则显示的缩略图图片 URL”，但无法让任何内容显示。
我假设不需要重新烘焙帖子即可使其正常工作，对吗？
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年七月11日 19:42 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1211 "2020-07-11T19:42:04Z")
我现在不在办公室，但一有机会我会再次确认。
您的控制台是否出现 JavaScript 错误？请确保已链接的图片托管（即已上传）到您的网站，并在需要时重试。
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2020年七月12日 17:43 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1212 "2020-07-12T17:43:26Z")
我又找到了一个复现之前提到的排序问题的方法。进入[这个分类](https://community.naturephotographers.network/c/image-showcase/landscape-showcase)，它会按创建日期正确排序；点击其中一个主题，然后再次点击同一个分类链接，现在它会按最新排序。使用“平铺”和“缩略图”视图时会出现此问题，但如果没有该主题组件（仅核心功能）则不会发生。
https://www.loom.com/embed/cd31f714baf84a2fbfe1853f8928fbb1
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年七月19日 10:03 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1213 "2020-07-19T10:03:51Z")
我刚刚更新了 TLP [主题组件](https://meta.discourse.org/t/topic-list-previews/101646/1010?u=merefield)（是的，通常不会在月中这样做）。
现在它支持桌面和 **移动** 缩略图 🖼，甚至支持主题建议列表中的平铺视图。🎉
（同时修复了核心中一个导致破坏性变更的问题，现在该变更促进了这一功能——感谢 David！）
这是我的荣幸。😜
（如有任何问题请告诉我，但似乎与上周末通过的测试兼容）。
该 **插件** 现在支持在移动端的建议列表上显示缩略图。我可能很快会在某个时候为桌面和移动端的建议列表添加平铺支持。
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2020年七月20日 15:04 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1214 "2020-07-20T15:04:53Z")
> [@merefield](#):
>
> （并修复了核心中一个破坏性变更引发的问题，该变更现在支持此功能——感谢 David！）
我不确定这是否是指我的排序问题，还是直接针对 Discourse 的 David。顺便一提，排序问题仍然存在。
另外，`suggested` 选项未出现在“图块”下的选项列表中。我能够手动添加它，并且它可以正常工作，特此告知。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年七月20日 15:17 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1215 "2020-07-20T15:17:20Z")
无关紧要。我会在某个时候查看排序问题。TC 中的中断更为严重。
是的，我知道必须在 TC 中手动添加它们。我会在某个时候看看能否解决这个问题。
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [2020年七月22日 16:35 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1216 "2020-07-22T16:35:37Z")
如果我没理解错的话，安装这个插件将提供与这两个主题组件相同甚至更多的功能：
> [@Topic List Thumbnails](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602):
>
> discourse2Summary Topic List Thumbnails allows you to show topic thumbnails in topic list views.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-blog) (blog style) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-grid) (grid) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnail-list) (list) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-masonry) (masonry) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-minimal-grid) (minimal grid)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-topic-thumbnails](https://github.com/discourse/discourse-topic-thumbnails)open_bookNew to Discourse Themes? [Begi…](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)
> [@Topic List Excerpts](https://meta.discourse.org/t/topic-list-excerpts-theme-component/151520):
>
> discourse2Summary Topic List Excerpts allows you to enable excerpts for unpinned topics (by default, Discourse only displays topic excerpts for pinned topics).eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-excerpts)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-topic-excerpts](https://github.com/discourse/discourse-topic-excerpts)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Works great alo…
我只是想确认一下，如果我安装了这个插件，是否还需要卸载上述两个主题组件。
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2020年七月22日 16:37 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1217 "2020-07-22T16:37:32Z")
我不建议同时安装两者，否则会出现一些奇怪的行为。你应该选择“主题列表预览”插件（即本主题讨论的内容），或者你链接的主题组件中的一个。
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [2020年七月22日 16:40 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1218 "2020-07-22T16:40:30Z")
谢谢。在我看来，如果这个插件不仅能实现上述两个主题组件的功能，还具备其他特性（如主题列表操作和调整缩略图宽高），那么安装这些主题组件不会让我失去任何东西，反而会有所收获。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年七月22日 16:46 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1219 "2020-07-22T16:46:47Z")
大卫说得完全正确。这两款软件的功能集和界面风格略有不同。安装哪一款由您自行决定，但它们很可能无法协同工作。建议您两款都试试。如果同时安装这两个 TC，切换起来也非常简单（TLP 也有对应的 TC 版本）。
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [2020年七月23日 13:44 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1220 "2020-07-23T13:44:30Z")
我试过两种方法，都能达到相同的效果。不过，我确实喜欢这个插件提供了默认的缩略图功能。我确实尝试过为某个分类设置一个 Imgur 链接，但没有成功。这是该分类的链接：[Strategy - Duelists Unite](https://forum.duelistsunite.org/c/yugioh/strategy/13)
Imgur 链接是 [Imgur: The magic of the Internet](https://i.imgur.com/ErfxR7Z.png)
图片是否需要特定的尺寸和格式？
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年七月23日 13:53 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1221 "2020-07-23T13:53:39Z")
我认为图片需要本地上传。请先尝试一下。
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [2020年七月23日 13:56 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1222 "2020-07-23T13:56:45Z")
当我们为分类图标和标题上传图片时，它们会被存储在哪里？我会把图片放在相同的位置，但想确认一下，因为那也应该是本地的。我认为，如果没有提供默认图片，分类图标应作为默认图片使用。
能否给我一个本地文件路径的示例？我在 discourse 文件夹中创建了一个名为 ‘pics’ 的文件夹。所以路径是 var/www/discourse/pics/image.png。我应该填写 “pics/image.png” 吗？
我相信上面的 James Cook 的帖子也有同样的问题，但尚未解决：[Topic List Previews (legacy) - #1210 by jamesmarkcook](https://meta.discourse.org/t/topic-list-previews/101646/1210?u=antimetaman)
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2020年七月23日 16:49 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1223 "2020-07-23T16:49:43Z")
你的论坛应该有一个名为“网站设计素材”的主题。只需在此主题中上传图片，然后右键点击该图片并复制图片地址即可。
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [2020年七月23日 17:01 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1224 "2020-07-23T17:01:20Z")
我明白你的意思了。我创建了一个名为“Assets”的主题并上传了一些图片。我复制了 URL 并粘贴在那里，但不起作用。
这是该 URL。我尝试了完整 URL，也尝试了不带域名的 URL，即：
> uploads/default/original/1X/c1808d114892ff27d1a7f08e7a95c991390cb689.png
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [2020年七月23日 22:12 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1225 "2020-07-23T22:12:22Z")
只是一个更新。我卸载了插件，并安装了这个主题的组件版本：[Topic List Previews (legacy) - #1010 by merefield](https://meta.discourse.org/t/topic-list-previews/101646/1010?u=antimetaman)
使用与上面完全相同的 URL（/uploads/default/original/1X/c1808d114892ff27d1a7f08e7a95c991390cb689.png），默认缩略图可以正常显示。
因此，主题组件可以工作，但插件不行。我其实更倾向于使用插件，因为我可以为每个分类指定不同的默认缩略图。此外，该主题仍处于实验阶段。
如果插件无法处理该图片 URL，我很可能会回退到另外两个主题组件。
谢谢。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年七月24日 06:33 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1226 "2020-07-24T06:33:42Z")
看来你发现了一个 bug 👍🏻。这应该是一个自 Discourse 核心接管缩略图功能以来就存在的遗留问题。
尽管这不在我们的月初支持期内，但我已发布了一个修复方案，以结束你的困扰 🙂
>
现在插件应该可以正常工作了（主题卡片其实一直都没问题）。
@jamesmarkcook 我认为这也可能与你相关。抱歉，现在应该已经修复了。
[上一頁](https://meta.discourse.org/t/topic-list-previews-legacy/101646.md?page=13)
[下一頁](https://meta.discourse.org/t/topic-list-previews-legacy/101646.md?page=15)