# 主题列表预览（旧版）

**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:** 20

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十月15日 04:04 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1334 "2020-10-15T04:04:03Z")

</div>

您的 app.yml 中的插件部分是什么样子的？您是否使用了正确的插件，或者是否重复配置了 TC 和该插件？请确保使用 sidecar 的确切分支。

---

<div class="post-metadata">

### Author: ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [2020年十月15日 12:06 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1335 "2020-10-15T12:06:26Z")

</div>

插件已在本地运行正常。我想问题出在——正如你所提到的——我最初是从主题组件开始的，然后单独添加了插件。我虽然移除了主题组件，但移除后没有重启服务器，因此看起来主题组件和插件在重复运行。现在只保留插件后，它已能正常工作且无错误。

因此，当我编辑话题元数据时，可以看到“选择缩略图”按钮。看起来，只有本地添加的图片才会出现在该选择弹窗中。如果我从网络向话题添加图片，该图片不会出现在选择弹窗里。是这样吗？

我能理解为什么会这样，但问题在于，如果预览缩略图要求图片必须本地添加，那就意味着这些图片需要保存在我的服务器上。如果每个话题都可能有一张新图片，成本可能会很高。我原本希望有一种方法，让用户直接添加链接，并将这些网络链接的图片用作话题预览的缩略图。

有什么办法可以绕过这个问题吗？或者有没有其他方式可以在不将图片托管到我服务器上的情况下，实现话题列表的预览缩略图功能？

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十月15日 12:08 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1336 "2020-10-15T12:08:26Z")

</div>

无法回避。这是原生讨论行为的体现。所有图片都必须上传。你可以设置使用站外上传位置，但它们仍需上传，而不能直接从你的基础设施远程引用。

---

<div class="post-metadata">

### Author: ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [2020年十月15日 12:51 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1337 "2020-10-15T12:51:16Z")

</div>

谢谢，这说得通。看起来，一张图片要能成为话题预览缩略图，它确实必须出现在话题内容中。是这样吗？

我能想象到，有些用户希望为话题设置特定的缩略图，但又不想让它出现在话题正文中。

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十月15日 12:52 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1338 "2020-10-15T12:52:19Z")

</div>

该功能暂不支持。

---

<div class="post-metadata">

### Author: ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [2020年十月15日 12:54 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1339 "2020-10-15T12:54:58Z")

</div>

明白了。这是一个非常实用的插件，为我节省了大量时间！

---

<div class="post-metadata">

### Author: ![Faizan\_Zahid](https://avatars.discourse-cdn.com/v4/letter/f/b9bd4f/32.png) [@Faizan\_Zahid](https://meta.discourse.org/u/Faizan_Zahid)
#### Post date: [2020年十月25日 20:53 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1340 "2020-10-25T20:53:36Z")

</div>

我注意到这个插件有两个漏洞。

1. 如果我的 Discourse 论坛上的某个主题没有 **上传** 的图片，但我有 **链接** 的图片（即 SRC 来自其他站点或 CDN 的图片），那么该插件无法检测到这些图片，也不会在线程列表中显示这些链接图片。它仅当图片 **上传** 到论坛本身时，才会在主题列表中显示。它应该将第一个帖子中的第一个链接图片检测为主题图片，并在线程列表中显示。我的论坛规模很大，但我没有图片存储空间，因此我将用户图片存储在外部的图片托管 CDN 上，并使用这些 CDN 的图片链接在论坛上渲染和预览图片。

2. 为了解决上述问题，我还尝试使用随机图片服务，例如 `https://picsum.photos/` 或 `https://source.unsplash.com/random`。每次有人访问这些 URL 时，都会返回一张随机图片。我将此 URL 设置为默认图片缩略图，但该插件却多次显示同一张图片，而不是为每个主题显示独特的默认图片。

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/c/6c57fc3010be1f28dc29e54e3ef081cf2551ff58.jpeg)

结果看起来像这样：您会看到“瑜伽女孩”的图片，因为用户将其上传到了我们的网站，但其他所有主题都使用了来自 CDN 的 **链接图片** ，却没有显示预览，而是重复显示了来自 `https://source.unsplash.com/random` 或 `https://picsum.photos/200` 的同一张图片。

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/4/b4244ceeb3837d2b105cc777d21932451b62de0d.png)

即使是 Discourse 本身，也将图片上传到了外部 CDN，例如：`https://global.discourse-cdn.com/meta/original/3X/6/4/64dff560b7c63a2c11c20374ec3427e2ac558437.png`。

因此，该插件必须支持读取和检测第一个帖子中、作为主题首张图片的远程图片（即通过外部 CDN 上传的图片）。

此外，当我在社交媒体上分享主题时，Open Graph 标签也无法检测到图片，导致显示不出任何图片，仅显示站点标志，尽管该主题实际上包含一张真实的图片，但这只是一张链接的远程图片。

我该如何解决这些问题？是否有一种方法可以在 URL 中附加一个随机数，使得每次请求都生成唯一的 URL，从而为每个主题始终显示独特的图片？

如果你们能启用自动检测第一个帖子中来自外部 CDN 的链接图片（或 SRC 图片），并将其作为主题图片显示在首页的功能，我的问题就能轻松解决。

有人能帮忙吗？

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十月25日 22:13 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1341 "2020-10-25T22:13:35Z")

</div>

> [@Faizan\_Zahid](#):
>
> 但我确实有带链接的图片，例如 SRC 指向其他站点或 CDN 的图片。

您这句话具体是什么意思？您是否将所有图片都托管在单个 S3 提供商上，并通过指定的 CDN 进行访问？

您是否使用了此处列出的服务？[Configure an S3 compatible object storage provider for uploads](https://meta.discourse.org/t/using-object-storage-for-uploads-s3-clones/148916)

否则，您的问题在一定程度上超出了此插件的范围。“主题列表预览”仅利用 Discourse 核心架构来提供缩略图。用于生成缩略图的图片\_必须\_上传到本地或站点设置中指定的分配的外部存储。不支持其他来源。生成缩略图的过程是 Discourse 的核心流程，它只会针对这些来源进行操作。

当然，默认的回退图片可以是任何公开可访问的位置，但这只是唯一的例外。

主题的公开 og 标签应反映所选的缩略图。这并非插件功能，同样属于 Discourse 核心功能。

---

<div class="post-metadata">

### Author: ![Faizan\_Zahid](https://avatars.discourse-cdn.com/v4/letter/f/b9bd4f/32.png) [@Faizan\_Zahid](https://meta.discourse.org/u/Faizan_Zahid)
#### Post date: [2020年十月26日 08:42 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1342 "2020-10-26T08:42:23Z")

</div>

嘿，Robert，

非常感谢你的快速回复。

> [@merefield](#):
>
> 默认的回退图片当然可以放在任何公开位置，但这只是唯一的例外情况。

是的，这很好。即使图片托管在外部公开网站上，Discourse 核心也应该像你的插件那样检测到这些图片。这正是我希望 Discourse 核心支持的功能，请问在哪里可以请求添加此功能？

> [@merefield](#):
>
> 你这话是什么意思？你是将所有图片托管在单一的 S3 提供商上，并通过指定的 CDN 访问它们吗？

基本上，我所有的主题图片都是从其他外部公开网站加载的，比如 Imgur、[https://pixabay.com/](https://pixabay.com/) 以及其他允许免费使用图片的免费网站。我没有使用任何对象存储服务。

所以我从不将图片上传到自己的 Discourse 服务器，以节省存储成本。

我使用第三方免费图片托管网站来展示我的图片，让我为你解释一下。

例如，你可以看看我这个主题：[How Many Carbs on Keto? - How To Discuss](https://howtodiscuss.com/t/how-many-carbs-on-keto/28069)

例如

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/7/e779cb85ad0d19d51ff48eff032ccafbd6436cea.jpeg)

第一张图片实际上是从 Imgur 加载的。你可以查看它的源代码。

其实际图片 URL 是 [Imgur: The magic of the Internet](https://i.imgur.com/04HZ5py.jpg)

同样，在这个主题中 [How to do Handstand yoga? - How To Discuss](https://howtodiscuss.com/t/how-to-do-handstand-yoga/28055)

图片实际上托管在这个 URL 上，你可以在我的主题中查看其源代码：

 ![](https://global.discourse-cdn.com/meta/original/3X/b/4/b4803cdf9a640e4e8cda251c3ad23288b3be720f.jpeg)

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/c/7c305cded07c54f17064865ea294d82aee268036.jpeg)

所以在所有这些情况下，我遇到了两个问题：

1. 这些外部图片未被检测到，也没有在主题预览插件中显示为主题缩略图，正如你现在在我的主页上看到的：[https://howtodiscuss.com/。尽管我所有的主题都有图片，但它无法检测到这些图片。](https://howtodiscuss.com/%E3%80%82%E5%B0%BD%E7%AE%A1%E6%88%91%E6%89%80%E6%9C%89%E7%9A%84%E4%B8%BB%E9%A2%98%E9%83%BD%E6%9C%89%E5%9B%BE%E7%89%87%EF%BC%8C%E4%BD%86%E5%AE%83%E6%97%A0%E6%B3%95%E6%A3%80%E6%B5%8B%E5%88%B0%E8%BF%99%E4%BA%9B%E5%9B%BE%E7%89%87%E3%80%82)

2. 此外，每当我将主题分享到 Facebook、Twitter、LinkedIn、Skype 或其他社交网站时，元 OG 标签不会采用我的外部 img src，因此它总是回退并显示我的网站标志，而不是应该显示在社交预览中的实际主题图片。

例如，请看这里的 Facebook 帖子，你可以看到该主题确实有一张主题图片，但它仍然总是显示我的网站标志作为回退 ☹

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/c/0c612b5962ffe860b0faf9d317772eb28e590cef.jpeg)

你可以将我的 URL 放在这里以查看问题：[Social Share Preview of howtodiscuss.com - Social Share Preview – Check social media link previews](https://socialsharepreview.com/?url=https://howtodiscuss.com/t/how-to-do-handstand-yoga/28055)

这些主题的图片实际上托管在外部公开网站上，但它仍然总是回退到我的网站标志。我不希望出现这种行为。

我的另一位朋友也在使用 Discourse 和这个主题列表预览插件，也遇到了同样的问题 @Bcat

我该如何解决？也许我可以在我的主题 HTML 中添加一个强制的元 OG 标签，并填入外部 CDN 远程图片的 img src？我该怎么做？这样社交网站和这个主题列表预览插件就能检测到并在我主页上显示我的主题图片。

> [@merefield](#):
>
> 主题的公开 OG 标签应反映所选的缩略图。这不是插件功能，这也是 Discourse 核心的问题。

你能告诉我如何修改或覆盖每个主题的公开 OG 标签，使其采用那些公开图片作为主题缩略图吗？

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十月26日 08:56 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1343 "2020-10-26T08:56:16Z")

</div>

要生成缩略图，您必须使用本地上传功能或 Discourse 中的原生 S3 集成。不支持其他来源（回退图片除外，但其作用_非常_有限，不会影响您的 og 标签）。

您可以在此处与 Discourse 团队讨论此问题，或发起一个 #Contribute > Feature 主题。

> [@主题修饰符：简要介绍](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605):
>
> 随着主题变得越来越宏大，我们一直在寻找允许它们操纵核心 服务器端 行为的方法。虽然它们永远不会获得与插件相同的控制级别，但我们可以为主题提供一些预定义的钩子来进行操作。 隆重推出：主题修饰符 partying_face 它们在主题的 about.json 文件中使用 modifiers 键指定。 有关修饰符的 100% 最新列表，请查看 [theme\_modifier\_set.rb](https://github.com/discourse/discourse/blob/main/app/models/theme_modifier_set.rb) 底部的内容数据库架构，但以下是我们目前拥有的快速摘要： serialize\_topic\_excerpts 布尔值 (默认 false) - 在序列化主题列表时始终包含摘录 csp\_extensions 字符串数组 - 向 CSP 添加指令。其工作方式与旧的 “extend\_content\_security\_policy” 主题设置方法相同。但请记住，[简单的 \<script src=""\> 标签会自动被允许](https://meta.discourse.org/t/automatically-adding-theme-scripts-to-csp/149028?u=david)。 svg\_icons 字符串数组 - 应包含在图标子集中的图标列表 topic thumbnails 尺寸数组 - 请求主题缩略图集中的其他分辨率。请注意，它们是异步生成的…

---

<div class="post-metadata">

### Author: ![bartv](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bartv/32/130052_2.png) [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [2020年十一月2日 11:05 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1344 "2020-11-02T11:05:41Z")

</div>

@merefield 更新时间到！🎉 是否已知存在任何问题？

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十一月2日 11:20 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1345 "2020-11-02T11:20:25Z")

</div>

Bart，我这边没遇到什么问题。那个预发布服务器的构建进展如何？😉

---

<div class="post-metadata">

### Author: ![Pasquale\_De\_Leonardi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pasquale_de_leonardi/32/74998_2.png) [@Pasquale\_De\_Leonardi](https://meta.discourse.org/u/Pasquale_De_Leonardi)
#### Post date: [2020年十一月4日 12:35 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1346 "2020-11-04T12:35:14Z")

</div>

上次更新后，索引页面显示为空白。非官方插件主题列表预览似乎出了问题。我们将其停用后，一切恢复正常。有人遇到同样的问题或有解决方案吗？谢谢。

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十一月4日 12:39 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1347 "2020-11-04T12:39:00Z")

</div>

感谢报告。我昨天已修复了存在类似问题的 Locations 插件。我会查看一下。

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十一月4日 13:05 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1348 "2020-11-04T13:05:32Z")

</div>

能否请您重新构建并确认修复？

[https://github.com/paviliondev/discourse-topic-previews/commit/2e927e0714c10bcacb075fdd719347f5b50bc21e](https://github.com/paviliondev/discourse-topic-previews/commit/2e927e0714c10bcacb075fdd719347f5b50bc21e)

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十一月4日 13:21 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1349 "2020-11-04T13:21:13Z")

</div>

仅供参考，以免混淆，我也将此修复应用到了 TC：[COMPATIBILITY: removed deprecated routes · merefield/discourse-tc-topic-list-previews@b8f1a78 · GitHub](https://github.com/merefield/discourse-topic-list-previews-theme/commit/b8f1a7841769678a3ef9ec5e34264991de292544)

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2020年十一月5日 15:09 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1350 "2020-11-05T15:09:02Z")

</div>

温馨提示：任何即将升级且使用 TC 配合辅助插件的用户，请务必先更新 TC 再进行升级。我在更新核心/插件后遇到了黑屏，并出现以下错误：

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/a/7a1472de40e0402d0296d0eff6b5d8111950e2ef.png)

后来我通过安全模式进入并更新了 TC，现在一切正常！

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十一月5日 15:10 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1351 "2020-11-05T15:10:14Z")

</div>

是的，好建议，谢谢大卫。

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2020年十一月7日 17:54 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1352 "2020-11-07T17:54:23Z")

</div>

嘿，Rob，我注意到即使没有在“主题列表瓦片类别”设置中包含该类别，缩略图仍然出现在员工类别中。我在所有不同配置的网站上都看到了这个问题。这是一个限制还是漏洞？

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020年十一月8日 07:34 UTC](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1353 "2020-11-08T07:34:20Z")

</div>

无法复现该问题。您自 5 日以来更新过吗？

[上一頁](https://meta.discourse.org/t/topic-list-previews-legacy/101646.md?page=19)

[下一頁](https://meta.discourse.org/t/topic-list-previews-legacy/101646.md?page=21)
