# 主题列表预览（TLP）

**URL:** <https://meta.discourse.org/t/topic-list-previews-tlp/209973>\
**Category:** Theme component\
**Created:** [2021年十一月23日 12:25 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973 "2021-11-23T12:25:59Z")\
**Posts on this page:** 20\
**Page:** 15

<div class="post-metadata">

**Author:** ![lmy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lmy/32/293215_2.png) [@lmy](https://meta.discourse.org/u/lmy)\
**Post date:** [2023年二月14日 12:35 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/283 "2023-02-14T12:35:40Z")

</div>

是的，我可以确认没有其他组件或 CSS 干扰主题列表，因为我运行了以下代码来重置 Discourse：  
rake db:drop  
rake db:create  
rake db:migrate  
然后我只安装了“Topic List Previews Theme Component”。

---

<div class="post-metadata">

**Author:** ![lmy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lmy/32/293215_2.png) [@lmy](https://meta.discourse.org/u/lmy)\
**Post date:** [2023年二月14日 12:54 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/284 "2023-02-14T12:54:40Z")

</div>

我在 Mac 上创建了一个全新的 discourse，但问题依然存在。  
我按照这里的说明安装了 discourse：[Install Discourse on macOS for development](https://meta.discourse.org/t/install-discourse-on-macos-for-development/15772)

我相信您应该能够重现它。

---

<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:** [2023年二月14日 13:32 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/286 "2023-02-14T13:32:23Z")

</div>

是的，更新后似乎出现了一个重大更改。将进行处理并恢复。

---

<div class="post-metadata">

**Author:** ![lmy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lmy/32/293215_2.png) [@lmy](https://meta.discourse.org/u/lmy)\
**Post date:** [2023年二月14日 13:36 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/287 "2023-02-14T13:36:55Z")

</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:** [2023年二月14日 14:00 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/288 "2023-02-14T14:00:55Z")

</div>

这应该已经修复：

> <https://github.com/merefield/discourse-tc-topic-list-previews/pull/27>
>
> due to incompatibility with Dart Sass 2.0.0

如果您有任何其他问题，请告诉我。

---

<div class="post-metadata">

**Author:** ![lmy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lmy/32/293215_2.png) [@lmy](https://meta.discourse.org/u/lmy)\
**Post date:** [2023年二月18日 01:10 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/289 "2023-02-18T01:10:46Z")

</div>

它奏效了。谢谢你，罗伯特。

---

<div class="post-metadata">

**Author:** ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)\
**Post date:** [2023年三月14日 11:49 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/290 "2023-03-14T11:49:32Z")

</div>

边车插件和这个实验性设置 `topic list enable thumbnail black border elimination` 正在破坏头像上传。

更详细的案例可以在这里找到：

> [@New avatar is scaling wrongly](https://meta.discourse.org/t/new-avatar-is-scaling-wrongly/257814):
>
> When I’m trying upload new avater on my self-hosted I’m getting all the time warning: we’ve cropped your image; width and height were not equal. And that isn’t true, it is nice square. After that cancel isn’t doing anything and if I want to try another image I have to reload page. But that can be related to download isssue what Meta has now. So I tried to use Gravatar. It works nicely here when I tried here (well, didn’t save but preview was ok): The issue is now this on my forum:

---

<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:** [2023年三月14日 12:10 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/291 "2023-03-14T12:10:15Z")

</div>

是的，它会影响一些东西。关掉它就行了。这是实验性的。如果它不是默认关闭的，我会在将来的版本中修复它。

它对有黑色边框的 YouTube 视频非常有用。

---

<div class="post-metadata">

**Author:** ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)\
**Post date:** [2023年三月14日 12:11 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/292 "2023-03-14T12:11:43Z")

</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:** [2023年三月14日 12:12 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/293 "2023-03-14T12:12:58Z")

</div>

如果您不打算将 YouTube 视频推广到主题列表缩略图，同时又想计算背景的主导颜色，那就忽略它。

如果您想要主导颜色，您会想要这样做，因为如果不消除黑色边框，颜色通常会 _极其_ 刺眼。

目前恐怕您必须为那些情况切换它。

---

<div class="post-metadata">

**Author:** ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)\
**Post date:** [2023年四月6日 12:37 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/294 "2023-04-06T12:37:06Z")

</div>

OP 中有一个示例，其中标题和海报头像位于砌体图像的上方。  
然而，目前使用 TLP 的所有论坛似乎都将标题放在了砌体图像的下方，所以我认为这是随着时间推移而发生的变化？

有什么（简单）方法可以将其（移回）到图像上方吗？

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/e/1/ce141878f4de8012d0bf6e4d04d6d010f56c07c9.jpeg)

---

<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:** [2023年四月6日 12:38 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/295 "2023-04-06T12:38:53Z")

</div>

是的，布局在不久前被更改了。

您需要 fork 并编辑 `topic-list-item.hbr`，同时还要处理 CSS Grid。

这张截图应该更新一下！

---

<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:** [2023年四月6日 13:18 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/296 "2023-04-06T13:18:43Z")

</div>

仅供“插件边车”用户注意，由于核心的这项更改：[Changes in the way Youtube embeds and/or thumbnails are being handled? - #2 by renato](https://meta.discourse.org/t/changes-in-the-way-youtube-embeds-and-or-thumbnails-are-being-handled/260787/2?u=merefield%EF%BC%8C%E2%80%9C%E7%A7%BB%E9%99%A4%E9%BB%91%E8%BE%B9%E2%80%9D%E5%8A%9F%E8%83%BD%E7%8E%B0%E5%9C%A8%E5%BA%94%E8%AF%A5%E4%B8%8D%E9%82%A3%E4%B9%88%E9%9C%80%E8%A6%81%E4%BA%86%EF%BC%8C%E6%89%80%E4%BB%A5%E6%88%91%E7%9A%84%E5%BB%BA%E8%AE%AE%E6%98%AF%E9%99%A4%E9%9D%9E%E7%BB%9D%E5%AF%B9%E5%BF%85%E8%A6%81%EF%BC%8C%E5%90%A6%E5%88%99%E4%BF%9D%E6%8C%81%E5%85%B3%E9%97%AD%E7%8A%B6%E6%80%81%E3%80%82)

如果需要，您仍然可以切换它并重新构建。

---

<div class="post-metadata">

**Author:** ![dsims](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dsims/32/485916_2.png) [@dsims](https://meta.discourse.org/u/dsims)\
**Post date:** [2023年四月6日 13:34 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/297 "2023-04-06T13:34:55Z")

</div>

我想知道我们是否可以包含主题的最新帖子（也许是最新未读帖子）的摘录。这是我在我定制的社区中拥有的一个我非常喜欢的功能，我想将其引入 discourse。我认为信息大部分都在那里，因为我们有帖子 ID 和用户，但我还没有研究过包含实际内容可能存在的问题。既然目标是“预览”主题，这似乎很适合这个组件，否则我将研究创建自己的组件。谢谢！

---

<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:** [2023年四月6日 13:35 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/298 "2023-04-06T13:35:55Z")

</div>

是的，我最近为一个客户开发了一个类似的功能（但使用的是一个完全不同的组件）。这是一个好主意。

PR 将被接受以添加此功能作为一项选项。

它需要同时支持图块和非图块……

---

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [2023年四月18日 10:08 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/302 "2023-04-18T10:08:04Z")

</div>

我刚刚将此添加到 OP：

> [@merefield](#):
>
> 如果您希望帖子中的 Oneboxes 生成缩略图，则需要启用此站点设置：`download_remote_images_to_local`。您需要 [重新烘焙相关帖子](https://meta.discourse.org/t/rebake-all-posts-matching-a-pattern/48713)。
> 
> 更多信息请访问：[https://coop.pavilion.tech/](https://coop.pavilion.tech/)

---

<div class="post-metadata">

**Author:** ![jordan-violet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan-violet/32/281428_2.png) [@jordan-violet](https://meta.discourse.org/u/jordan-violet)\
**Post date:** [2023年五月6日 09:14 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/303 "2023-05-06T09:14:59Z")

</div>

到目前为止，我很喜欢这个主题组件的配置。如果可以的话，我有几个问题：

我勾选了此设置：

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/0/5/f05c8bc3d9fcbdf4cb7b7a36f7b0d6632559e487.png)

但是我的主题列表项仍然没有在主题列表项中显示点赞数：

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/6/5/365977709f8f5929160de8b6815bb9fdc2b473e8.png)

这是否可能是因为我有一个由 Discourse 构建的自定义主题，并且它可能覆盖了某些内容，或者可能是其他原因？

* * *

第二个问题是，是否有任何选项可以确保所有主题列表项都遵循相同的高度/大小以保持一致性？我不喜欢这些项目高度不一致：

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/9/4/c94b3b39d9e7e19e896ef3cbb641f00c216afed6.png)

---

<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:** [2023年五月6日 09:31 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/304 "2023-05-06T09:31:12Z")

</div>

> [@jordan-violet](#):
>
> 但是我的主题列表项在主题列表中仍然不显示点赞数：

这需要安装描述中链接的 sidecar 插件。否则，所有操作按钮（包括点赞）都不会显示。

---

<div class="post-metadata">

**Author:** ![jordan-violet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan-violet/32/281428_2.png) [@jordan-violet](https://meta.discourse.org/u/jordan-violet)\
**Post date:** [2023年五月6日 09:32 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/305 "2023-05-06T09:32:39Z")

</div>

我也尝试安装了侧边栏，但它看起来不是一个标准的 theme 组件？我尝试通过“使用 GitHub 链接安装”方法安装，但项目中没有 about.json。

不幸的是，由于我们是企业用户，我们无法在后端手动安装任何东西。

---

<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:** [2023年五月6日 09:32 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/306 "2023-05-06T09:32:49Z")

</div>

> [@jordan-violet](#):
>
> 第二个问题是，我有什么办法可以确保所有主题列表项都保持相同的高度/大小以保持一致性吗？我不喜欢这些项目的高度不一致：

不可以。这是一种砌体格式，它使用可变高度来保留图像的纵横比和扩展区域以适应摘要。

您不能保证所有图像都具有相同的纵横比，也不能保证所有摘要都具有相同的长度。

[上一頁](https://meta.discourse.org/t/topic-list-previews-tlp/209973.md?page=14)

[下一頁](https://meta.discourse.org/t/topic-list-previews-tlp/209973.md?page=16)
