# 主题列表预览（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:** 6
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月4日 09:06 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/102 "2022-05-04T09:06:14Z")
哦，那绝对是个 bug。我们需要调查一下，抓得好！
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月4日 09:06 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/103 "2022-05-04T09:06:44Z")
太棒了，感谢您的 PR，已合并！
[IMPROVE: 像图标在没有点赞时也对齐 by Canapin · Pull Request #16 · merefield/discourse-topic-list-previews-theme (github.com)](https://github.com/merefield/discourse-topic-list-previews-theme/pull/16)
👏
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年五月6日 20:15 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/104 "2022-05-06T20:15:37Z")
分类页面上是否有方法可以显示带有最新主题的缩略图？
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月6日 21:03 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/105 "2022-05-06T21:03:03Z")
三个挑战：
- 我很确定缩略图没有在这里序列化。欢迎您确认。可以通过增强侧载插件来克服这一点。
- 我上次查看此内容时，页面的结构不允许在叶模板中进行低风险的覆盖。通常我们不希望覆盖整个页面，这可能会导致破坏性更改或掩盖核心功能更新。核心的 PR 可能会在此处有所帮助……
- 空间？
欢迎提交所需的 PR。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年五月7日 12:09 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/106 "2022-05-07T12:09:55Z")
有道理。我可能会为分类页面选择另一种展示方式，比如盒子式或其他类似的。
我还有另一个问题。
是否有可能让分类页面（包含主题列表）在移动设备上以图块的形式显示，但在桌面设备上以缩略图显示？我尝试了几种设置调整，但未能实现。
* * *
编辑：我实现了。稍后我会详细说明我是如何做到的，以防有人感兴趣，我添加这个编辑只是为了让没有人花时间向我解释如何做到这一点：wink：
所以，如果我没记错的话，设置如下……
首先，我们需要图块显示仅在（至少？）主题列表的移动视图中显示：
然后是桌面和移动设备都使用的缩略图：
我一开始弄错了，因为我以为“图块”和“缩略图”是主题列表的两种不同展示方式，都包含图像。但事实并非如此。如果你想让图像出现在主题列表中，无论是否是图块，都需要缩略图。
无需在此手动添加您的分类：
因为我们将通过启用以下设置来覆盖此设置：
现在，您应该在任何主题列表（最新、特定分类等）的桌面视图中看到小的缩略图，在移动视图中看到带有大缩略图的“图块”式展示：
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年五月10日 23:13 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/107 "2022-05-10T23:13:59Z")
我的用户配置文件出现了一个小问题，我认为这是一个小 bug：
因为它提到了缩略图，我猜这与这个主题组件有关。
顺便说一句，我还在玩这个主题组件……它太棒了。👍
* * *
我有一个问题。是否可以阻止某个主题拥有缩略图，即使该主题实际上包含一些内容？
这是我的情况：
我有一个 **文档** 类别，其中缩略图是受欢迎的。
但我也有一个主题，它只是在创建新主题时提供一般性建议：
其中没有有意义的图片，但它会自动添加缩略图：
我发现的唯一绕过此问题的方法是在主题的某个位置添加一张随机图片，并将其设置为缩略图。
示例：
（但我承认它看起来确实不错……）
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月11日 06:24 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/108 "2022-05-11T06:24:41Z")
是的，本地化失败了，需要修复。🪲
不，如果有图片，它会尝试使用。添加一个额外的漂亮图片是完美的解决方法 👍
这也有利于你的页面布局一致性。
无论如何，我经常使用一个特色主题组件（内置的 TLP 组件或其他）来总结这类帖子，所以有一个图片还是挺不错的。
---
### Author:  [@raghukamath](https://meta.discourse.org/u/raghukamath)
#### Post date: [2022年五月14日 05:02 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/109 "2022-05-14T05:02:35Z")
我正试图将缩略图和图块限制为特定的标签以及某些类别，但它不适用于标签。这是我的设置页面，我只想要精选标签的图块和缩略图。你能告诉我我是否做错了什么吗？
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年五月16日 12:00 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/110 "2022-05-16T12:00:33Z")
插件设置中还有一个缺失的字符串：
并且“ **主题列表摘要删除链接** ”选项存在另一个错误。
因此，正如已报告的那样，如果我禁用它，将不再有任何链接，甚至它们的文本，以及“阅读更多”按钮：
如果我启用它，摘要中的链接会出现，以及“阅读更多”链接，但由于某些原因：
1. “阅读更多”链接未被样式化为链接（也已报告，但由于所有问题都与同一选项相关，我更愿意一次性汇总所有问题）
2. 某些摘要被错误地包装。一些例子：
这里只包装了句子摘要的第一部分：
一个空行被包装为摘要：
我很乐意提供更多帮助，但不幸的是，我对插件和 Discourse 的大部分代码都不了解…… 😔
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月16日 12:10 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/111 "2022-05-16T12:10:12Z")
这看起来像个 bug，我很快就会看看。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月16日 16:37 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/112 "2022-05-16T16:37:35Z")
我已经修复了 `beta` 分支上的这个问题，你能确认一下现在是否一切正常，然后我再合并。
要使其正常工作，你必须删除 `tag` 和 `tag-mobile`，并将特定标签添加到标签列表设置中。
（将 beta 版本安装为另一个组件，并将其与测试主题关联）。
结果发现是核心的一个重大更改。
>
使用高级按钮显示分支，然后输入 `beta`：
如果我一段时间内没有收到你的回复，我将照常合并，但这是你测试并提出意见的机会。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月16日 16:43 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/113 "2022-05-16T16:43:04Z")
> [@Canapin](#):
>
> 我很乐意提供更多帮助，但不幸的是，我对插件和 Discourse 的大部分代码一无所知…… 😔
这只能通过一点一滴地 🛠 来获得，并在过程中学习 🤓 📖
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年五月21日 12:42 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/114 "2022-05-21T12:42:05Z")
当主题组件安装后，我们在浏览网站时也会出现 JS 错误。
在您自己的网站上也能看到：[https://starzen.space/](https://starzen.space/)
点击任何帖子，然后查看 JS 控制台。
`TypeError: Cannot read properties of null (reading 'querySelector')`
此错误由 Discourse 文件中的此行触发：
>
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月21日 13:23 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/115 "2022-05-21T13:23:33Z")
看起来核心代码有重大变更：[FIX: Don't listen for focus/blur events if the topic-list opts out of… · discourse/discourse@97e7bb1 · GitHub](https://github.com/discourse/discourse/commit/97e7bb1ce483498640f512c1bf9bfe704dc1d402)
主要通过以下方式修复：[COMPATIBILITY: add css class to tiles to support focus · merefield/discourse-tc-topic-list-previews@4f0f0f0 · GitHub](https://github.com/merefield/discourse-topic-list-previews-theme/commit/4f0f0f0de0ec5195e996212318d63124c0598e06)
在 `beta` 分支上进行了修复，正如我在我的网站上演示的那样。
通过这种方式修复的好处是，我们现在可以在磁贴上看到最后访问的指示器 👍
（大多数错误在移动设备上也会消失，但无论如何，这个指示器在移动设备上通常是不可见的，所以我将称之为已修复！）
我将需要跟进与标题元素相关的、不太频繁出现的错误。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月21日 17:13 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/116 "2022-05-21T17:13:43Z")
> [@Canapin](#):
>
> 我的用户配置文件出现了一个小问题，我认为这是一个小 bug：
这在 `beta` 中已修复：[FIX: missing localisation on user prefs and update locale paths](https://github.com/merefield/discourse-topic-list-previews-theme/pull/17/commits/7ca51dacb54340127250281e436a66ccaebd2b85)
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年五月21日 21:35 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/117 "2022-05-21T21:35:26Z")
谢谢！
关于插件的 **主题列表摘录移除链接** 选项，我能否建议更改您当前使用的正则表达式？
`URI::regexp` 会移除 **任何** 带有链接模式的字符串，这在我看来并非总是可取的。
链接有时会与其 `href` 值具有相同的文本内容。在任何论坛中，这甚至是一个非常常见的情况，移除文本内容可能导致摘录变得奇怪，句子毫无意义。
此正则表达式有时还会移除链接 **内部或外部的单词** 。我将在下方提供示例。
这是与另一个正则表达式的比较：`\u003ca .+?\\\u003e(.+)?\u003c\\/a\u003e`
这只是一个示例正则表达式；我明白 `URI::regexp` 以更复杂（并且据称更可靠）的方式处理链接。
这是一个示例帖子：
以及主题列表中生成的摘录：
`URI::regexp`
\u003cbig\u003e↓\u003c/big\u003e
（Facebook 链接的文本内容被移除了，并且还出于未知原因移除了“Astronomy Picture of the Day”中的“Day”一词 🤨）
`\u003ca .+?\\\u003e(.+)?\u003c\\/a\u003e`
\u003cbig\u003e↓\u003c/big\u003e
* * *
另一个例子，仅仅是链接文本内容被移除导致摘录阅读起来很奇怪：
`URI::regexp`
\u003cbig\u003e↓\u003c/big\u003e
（“链接是 This may be my favorite halo”……？）
`\u003ca .+?\\\u003e(.+)?\u003c\\/a\u003e`
\u003cbig\u003e↓\u003c/big\u003e
（现在这样才有意义）
所以，我并不是建议 `\u003ca .+?\\\u003e(.+)?\u003c\\/a\u003e` 更好，那只是一个快速测试，但我不太确定使用 `URI::regexp` 在结果方面是否是最佳选择，原因有两个：链接文本内容消失，有时会导致摘录变得奇怪，而且它有时会出于一个模糊的原因移除链接内部或外部的单词。后一个问题_似乎_足够频繁，不容忽视。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月22日 08:03 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/118 "2022-05-22T08:03:34Z")
我理解当前方法的缺点（包括当前算法出奇的奇怪的过度热情，它会删除太多内容），但我们是通过经验得出这个结论的。
此选项存在的主要原因是：
- 在链接非常长时保留预览的格式（即删除所有链接，这样长链接就不会泄露到摘要中导致问题）。尝试链接非常非常长的场景。旧的支持主题充斥着有关带有长链接的主题帖的问题。
- 将摘要保留为可预测的点击表面，它将始终导航到主题。文本太小，无法随意决定。
还应该：
- 易于维护，不会引起支持方面的麻烦。因为当前方法是一个受支持的实用程序类，所以我不必担心维护它。
我还不确定我们是否需要为公众更改此设置？
我可能会考虑将其设置为三个选项：关闭、无链接（即当前方法）和实验性？欢迎提交拉取请求。我将首先把当前的 sidecar 代码移到主插件分支。我本周会尝试这样做。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年五月22日 11:46 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/119 "2022-05-22T11:46:54Z")
感谢您的回复 🙂
我修正了我上一篇帖子的最后一句话，我漏了一个词……
我写的是
> 而且它有时会因为一个晦涩的原因从链接内部或外部删除单词。后者的问题_似乎_足够频繁，可以忽略不计。”
我漏了一个“not”，所以……
> 而且它有时会因为一个晦涩的原因从链接内部或外部删除单词。后者的问题_似乎_足够频繁， **不能** 忽略不计。
* * *
我可能不太懂代码方面的东西，但我会尝试理解并修复我今天在这里提到的第二个问题：[Topic List Previews (TLP) - #110 by Canapin](https://meta.discourse.org/t/topic-list-previews-theme-component/209973/110?u=canapin)
（摘录没有被 `.topic-excerpt` 正确包裹：包裹似乎在摘录中的第一个链接之前就关闭了，而不是在摘录的末尾）
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月22日 12:07 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/120 "2022-05-22T12:07:22Z")
说实话，最好的方法可能是我们向该实用程序的维护者提出一个问题，让他们来修复它？它肯定不像你期望的那样运行？
> [@Canapin](#):
>
> （摘录没有被 `.topic-excerpt` 正确包裹：包装器似乎在摘录中的第一个链接之前关闭，而不是在摘录的末尾关闭）
是的，我还没看那个。如果你有时间，可以提交一个修复 PR。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年五月22日 13:49 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/121 "2022-05-22T13:49:24Z")
> [@merefield](#):
>
> 老实说，最好的方法可能是我们向该实用程序的维护者提出问题并让他们修复它？它肯定不像你期望的那样运行？
谢谢，我没想过这一点，我不知道这个实用程序来自哪里。
搜索了一下，基本上正则表达式只要后面紧跟着冒号（即中间没有空格），就会将几乎任何单词或字符串识别为 URI 方案的一部分 - 这是可以理解的 ([understandable](https://en.wikipedia.org/wiki/List_of_URI_schemes?oldformat=true))，但也有些过度，因为在英语（不像法语，例如）中，我们不在单词和冒号之间加空格。因此，“合法”的单词只是因为它们不幸地后面跟着一个冒号而被正则表达式吞噬了。
* * *
一种修复方法是在插件设置中添加一个字段（不预先填充以防止对现有安装造成任何损害），用于输入我们想要删除的方案。
例如，该设置可以是：
**要删除的 URI 方案** ：`http|https|ftp|mailto`
这将导致：
`#{URI::regexp(['http', 'https', 'ftp', 'mailto'])}`
（但不幸的是，它是区分大小写的，但这肯定可以通过某种方式调整）
如果设置为空，则将使用：
`#{URI::regexp}`
这正是当前的行为。
添加这样一个设置的拉取请求会受欢迎吗？
[上一頁](https://meta.discourse.org/t/topic-list-previews-tlp/209973.md?page=5)
[下一頁](https://meta.discourse.org/t/topic-list-previews-tlp/209973.md?page=7)