# 主题列表预览（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:** 17

<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年七月20日 08:53 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/327 "2023-07-20T08:53:41Z")

</div>

是的，特色图片默认未启用……需要在主题组件设置中将其打开。查找所有描述中带有“特色图片”的设置。

另外请注意，如果您选择通过标签来识别内容，请确保这些主题已打上标签。

---

<div class="post-metadata">

**Author:** ![anderer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anderer/32/310458_2.png) [@anderer](https://meta.discourse.org/u/anderer)\
**Post date:** [2023年七月25日 13:13 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/328 "2023-07-25T13:13:25Z")

</div>

我注意到“tiles-grid-item topic-list-item”的整个 div 悬停时会变成灰色，并且光标悬停时会变成指针 - 但整个项目/卡片不可点击，只有文本和标题可点击。能否将其更改为整个项目/卡片都可点击？

我是如何发现这个问题的以及为什么我想请求更改：如果我的标题很短 - 标题右侧的空间不可点击，但灰色背景/指针光标告诉我它是可点击的。在我的例子中，我还将图像设置为宽度的 25% - 因此图像周围的所有空间都不可点击，但背景/光标告诉我它是可点击的。

对我来说，问题似乎是由于链接附加到文本和图像而不是周围的 div - 这会改变悬停时的背景颜色/光标。

我尝试用 CSS 调整它 - 但我没有找到有效的解决方案，因为我只是在 CSS 中尝试错误，并且没有 JS 知识。

---

<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年七月25日 13:15 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/329 "2023-07-25T13:15:45Z")

</div>

> [@anderer](#):
>
> 能否将其更改为使整个项目/卡片都可点击？

标题、文本预览摘录和缩略图都应该是可点击的。

我尝试过让整个表面都可点击（这在功能上肯定是有意义的！），但这导致了 EmberJS 的一个问题，点击标题停止工作，所以我将其删除了。

问题出在我使用了标准的 Title 组件，并且将其嵌套在链接中似乎会导致问题？

如果你能让它工作，欢迎提交 PR。

由于核心的一些即将到来的变化，可能在几个月后需要进行一次大的重构，所以如果你在那之前没有解决它，我可能会在那时考虑它。

---

<div class="post-metadata">

**Author:** ![anderer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anderer/32/310458_2.png) [@anderer](https://meta.discourse.org/u/anderer)\
**Post date:** [2023年七月25日 13:34 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/330 "2023-07-25T13:34:15Z")

</div>

哈哈，您过奖了——但目前这远远超出了我的 CSS/JS 技能范围——我将改为关闭该项目/卡片的指针光标以及悬停时的背景颜色更改 : )

---

<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年七月31日 08:48 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/331 "2023-07-31T08:48:55Z")

</div>

[最新提交](https://github.com/paviliondev/discourse-tc-topic-list-previews/commit/04018a1e747531f9b7261eaa8049af9c4e6098dd)破坏了稳定版（可能还有 3.1.0beta6 及更低版本）上的组件。你能添加一个 `.discourse-compatibility` 文件吗？

---

<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年七月31日 09:19 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/332 "2023-07-31T09:19:06Z")

</div>

欢迎提交 PR（Pull Request）

请注意：我们从未打算支持之前的版本或 Stable 版本，但如果这有助于促进这一点，请尽管去做。

---

<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年七月31日 12:25 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/333 "2023-07-31T12:25:53Z")

</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年七月31日 13:31 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/334 "2023-07-31T13:31:07Z")

</div>

我不是直接解决这个问题的，而是借鉴了David的PR“News Plugin”中的方法，其中包含此条目：

> <https://github.com/paviliondev/discourse-news/blob/ae4474c01509f5848fd8d3ea8886c7dac1b294b5/.discourse-compatibility#L1>

奇怪的是，这个条目[似乎没有帮助到某人](https://meta.discourse.org/t/news-plugin/107971/148?u=merefield)，他被迫手动固定了一个分支？

但是：我找到了提交，它在这里：[https://github.com/discourse/discourse/commit/c6cd3af5b54e124911389bf88cf0dad5aa916de6](https://github.com/discourse/discourse/commit/c6cd3af5b54e124911389bf88cf0dad5aa916de6)

但这被标记为：`v3.1.0.beta7` 🤔？！

所以我想我们可以在这里添加：

`< 3.1.0.beta7: a4c3fc6ed3caf8f4aa93b20f44ad14d200794823`？

---

<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年七月31日 13:48 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/335 "2023-07-31T13:48:43Z")

</div>

@RGJ 我已经提交了：

> <https://github.com/merefield/discourse-tc-topic-list-previews/blob/master/.discourse-compatibility>

请告诉我这是否能解决您的问题……

---

<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年七月31日 14:12 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/336 "2023-07-31T14:12:03Z")

</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年七月31日 14:13 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/337 "2023-07-31T14:13:50Z")

</div>

请注意，我已将它们对调 - 我认为较新的提交应该放在顶部。

---

<div class="post-metadata">

**Author:** ![per\_coh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/per_coh/32/271009_2.png) [@per\_coh](https://meta.discourse.org/u/per_coh)\
**Post date:** [2023年八月14日 18:52 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/338 "2023-08-14T18:52:56Z")

</div>

奇怪的 bug/行为。  
在 Admin \> customize \> Themes \> Light \> Custom CSS/HTML \> Footer 中，我添加了一些简单的 HTML 来为我们的社区添加页脚。  
启用此组件时，该 HTML 未被渲染。我检查过了，它不是因为某种偶然的冲突而被 CSS 隐藏的，它只是没有被加载。  
有什么想法可能是什么原因吗？

```html
<div class="px-6 text-white bg-black h-[250px] md:h-[187px] lg:h-[198px] cust-footer">
	<div class="flex flex-col justify-between h-full py-10 md:flex-row-reverse md:items-center ">
		<div class="socials"><a href="https://coherence.io/discord"><img src="https://coherence.io/images/icon-discord.png" alt="Discord"></a><a href="https://www.facebook.com/coherence.io"><img src="https://coherence.io/images/icon-fb.svg" alt="Facebook"></a><a href="https://twitter.com/coherenceio"><img src="https://coherence.io/images/icon-twit.svg" alt="Twitter"></a><a href="https://www.instagram.com/coherence_io"><img src="https://coherence.io/images/icon-insta.svg" alt="Instagram"></a><a href="https://www.linkedin.com/company/coherence-io"><img src="https://coherence.io/images/icon-linkedin.svg" alt="LinkedIn"></a></div>
		<div class="flex flex-col gap-2"><a href="https://coherence.io/"><img src="https://coherence.io/images/coherence-logo-white.svg" alt="coherence logo" class="w-32 h-6 mx-auto lg:w-40 lg:h-10 logo md:-ml-2 lg:ml-0"></a><div class="copyright">©2023 coherence ApS. All rights reserved.</div><div class="flex flex-wrap justify-center w-full gap-4 mt-8 md:mt-4 md:justify-start"><a class="text-white border-b-2 border-blue" href="https://coherence.io/privacy">Privacy Policy</a><a class="text-white border-b-2 border-blue" href="https://coherence.io/terms">Terms of Service</a><a class="text-white border-b-2 border-blue" href="https://coherence.io/careers">Careers</a><a class="text-white border-b-2 border-blue" href="https://coherence.io/ggj">Global Game Jam</a><a class="text-white border-b-2 border-blue" href="https://coherence.io/blog">Blog</a></div></div>
	</div>
</div>

```

---

<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年八月14日 18:58 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/339 "2023-08-14T18:58:47Z")

</div>

请问这与“主题列表预览”主题组件有什么关系？

---

<div class="post-metadata">

**Author:** ![per\_coh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/per_coh/32/271009_2.png) [@per\_coh](https://meta.discourse.org/u/per_coh)\
**Post date:** [2023年八月15日 08:37 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/340 "2023-08-15T08:37:49Z")

</div>

所以你也感到惊讶？我来试着说明一下：  
这出现在每个社区页面上。

在未启用“预览”组件的情况下。我有一个页脚（黄色），其中包含内容。青色是其他主要组件，用于说明页脚的位置。

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

在启用“预览”组件的情况下。页脚内容（黄色）完全消失，div 为空。

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/0/b/d0be11e8880a28abe439d85c2911ef45e8d624f8.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年八月15日 09:08 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/341 "2023-08-15T09:08:09Z")

</div>

TLP 不应该触及“分类”页面（它的结构方式可以防止单独覆盖 - 而且没有空间容纳额外的东西！）——除非你启用了特色图片。

你在控制台中看到任何红色项目吗？

---

<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年八月15日 09:30 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/342 "2023-08-15T09:30:31Z")

</div>

@per_coh 我可以重现，感谢你的坚持。

太奇怪了！！

不过，据我所知，没有 Javascript 错误。

那个插件插槽也没有竞争。

我会在有时间的时候深入研究，不过，如果你找到了修复方法，随时可以提交 PR。

---

<div class="post-metadata">

**Author:** ![per\_coh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/per_coh/32/271009_2.png) [@per\_coh](https://meta.discourse.org/u/per_coh)\
**Post date:** [2023年八月15日 15:17 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/343 "2023-08-15T15:17:18Z")

</div>

感谢 @merefield，非常感激。我喜欢这个组件，它很漂亮而且简单。  
我注意到的唯一一件事，无论是否相关，是页脚的 Ember “id”在 156 和 157 之间变化。几乎就像 157 被保留了一样？

---

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2023年九月27日 18:16 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/344 "2023-09-27T18:16:58Z")

</div>

@merefield 此组件在高级搜索中造成了问题。尽管有多个搜索结果（50 多个），但列表中只显示一个。

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

这是控制台中的错误：

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/2/3/0239892bf3198c704fea17508978a6ab73a4d7d4.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年九月27日 18:32 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/345 "2023-09-27T18:32:39Z")

</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年九月27日 20:05 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/346 "2023-09-27T20:05:09Z")

</div>

已修复：

> <https://github.com/merefield/discourse-tc-topic-list-previews/commit/b20a227216bb37a71aee88d83a457440d2d386c8>

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

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