主题列表预览(TLP)

这是一个主题组件,但可以选择添加一个配套插件。

|||
-|-|-|
:information_source: | 摘要 | 原始主题预览组件,允许您在主题列表中添加图片和摘要(以及更多!),同时能够配置在哪些列表上显示哪些附加项。
:hammer_and_wrench: | 存储库链接 | GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists
:open_book: | 安装指南 | Installing a theme or theme component
:heart: | 赞助 | 请考虑成为我开源工作的持续赞助者,金额根据您或您组织的资源和需求而定,以确保此组件获得应有的维护,并在未来继续为您的站点正常运行。

喜欢这个主题组件吗?请在GitHub上给它 :star:

安装此主题组件

Discourse Bars 🍻 🍸 (a sidebar framework) 配合使用效果极佳!

概述

主题列表预览允许您:

  • 向主题列表项添加图片、摘要和主题统计信息;以及
  • 更改主题列表项的布局和样式
  • 在主题列表和主题上方添加“精选”主题。
  • 向用户活动页面添加用户墙(又名“作品集”功能)。

辅助插件

可以搭配“辅助插件”https://github.com/merefield/discourse-topic-previews-sidecar
来添加以下功能:

  • “操作”(在主题列表中进行书签、链接和点赞)
  • 主题元编辑器中的缩略图选择器。(使用简单的用户界面从整个主题中选择任何缩略图)
  • 基于缩略图的占位符颜色的着色
  • 处理 YouTube 缩略图以去除任何黑色边框(确定最佳占位符颜色的关键)。
  • 允许您在主题帖子重建时重新创建缩略图的选项,以便您可以快速地逐个主题地管理边框消除。

插件安装指南:Install plugins on a self-hosted site

您至少需要主题组件,插件是可选的。

这些设置可以应用于站点范围或特定类别的所有或选定的主题列表。

这套灵活的功能集允许您创建各种不同的主题列表样式,包括

基本样式

相关设置
  • topic list thumbnail
  • topic list excerpt
  • topic list action

Pinterest (Masonry) 样式,又名“图块”

相关设置
  • topic list tiles
  • topic list thumbnail
  • topic list excerpt
  • topic list action
  • topic list thumbnail width
  • topic list thumbnail height

具有宽格式选项(在设置 topic_list_tiles_wide_format 之后):

这可以响应式工作,因此如果宽度不足,它会折叠成砌体格式(反之亦然)。

精选图片

相关设置
  • topic list featured images tag
  • topic list featured images count
  • topic list featured width
  • topic list featured height
  • topic list featured title
  • topic list featured excerpt
  • topic list featured order

切换摘要:

我很久以前就引入了这个功能,用于我的AI 主题摘要插件。

您可以将其用于 TLP:

实际应用示例 :seedling:

支持

我不会提供任何有保证的免费支持。我可以为注册我黄金或白金月度赞助等级之一的企业或机构提供支持。

还有一个一次性错误修复选项

54 个赞

有没有办法让特色图片根据添加标签的时间进行排序?目前,它会显示最近有活动的帖子的特色图片,从而将最新的标记图片推到后面。

例如,如果我有 10 张图片,我将其中 5 张标记为特色图片,那么这 5 张图片将显示在顶部栏中。如果我添加另外 5 个标签,它们将替换现有的 5 个。但是,如果之前的 5 个帖子中的任何一个有评论或帖子,该图片就会被置于最前面。

3 个赞

标签?没有,但有一个按创建日期排序的选项:

image

1 个赞

警告:我很快就会推送一个“图块(物品)”布局的更改。如果您进行了一些 CSS 调整,可能需要对其进行……嗯……调整:

我保证不会经常这样做,但这次是为了整理和支持未来可能出现的一些新功能……

目前该更改位于 beta 分支上。

3 个赞

是的,该选项有一定帮助,但如果任何较旧的帖子有任何更新,它就会排在前面。

2 个赞

我只使用了 Discourse API 中提供的原生选项(它本质上是一个主题组件,所以你无法更改 API)。等我有空时,我会再看看排序问题。不过,这个问题之前出现过,我曾做过一次更改来帮助一位用户。Topic List Previews (legacy) - #1154 by merefield created_at 属性在有新帖子后保持不变吗?你确定你更改了设置并刷新了浏览器吗?

3 个赞

@raghukamath 我刚测试过,似乎按预期工作?它仍然不会响应新帖子的顺序更改,并且会尊重 created_at 日期。请刷新您的浏览器并重试。

3 个赞

没问题。我会再测试一下。也许是因为启用了该选项时的行为让我感到困惑。很抱歉给您带来这么多麻烦。

我的会员们提出的另一个问题是,未读和已读主题的 CSS 颜色修复未在移动浏览器上应用。

1 个赞

是的,正如之前所述,那仍然是待处理的。我将在上述布局更新中尝试发布它,可能在几天内。

您好,我尝试使用已弃用的 git 插件时,无法在移动缩略图上覆盖 CSS。它一直恢复到 80px 的高度。开始搜索时,我看到它已移至组件。我是否会遇到同样的问题,需要克隆组件来更改它,还是有其他解决方法?我希望移动设备在移动浏览器上具有全宽度。

这里的布局不适合您的需求吗:Topic List Previews (TLP) - #4 by merefield 适合您的需求吗?新的图块具有全宽缩略图。这目前在 beta 分支上。如果需要,可以将其安装为附加的主题组件进行尝试。请记住在安装时指定分支,并编辑主题组件名称以使其清楚这是 Beta 版本。

1 个赞

这肯定会的。我现在把它设为我想要的宽屏了。谢谢。

1 个赞

我已经合并了 beta 分支:

  • 图块的内部样式已现代化和整理。缩略图现在是列的全宽度。
  • 有一些 CSS 简化
  • 移动端对非图块进行了一些小的布局改进。
  • 图块标题现在也应该反映移动端的先前访问情况。
4 个赞

你好,

感谢你提供的这个出色的组件!我喜欢它的设计 :heart_eyes:

我在 Discourse 中相对较新,对技术术语不太了解。

我在图像未在列表组件中显示方面遇到麻烦。不知何故,图像在组件预览中显示,但当我加载实际内容时,图像却消失了。


^ 这是组件的预览

1 个赞


^ 加载真实页面时就是这样显示的

现在,我认为这与我的 discourse 设置有关?

是否有特定的设置必须激活才能使此组件正常工作?我真的不知道为什么它没有按预期工作……

您好,感谢您的关注。

有几点需要说明:

  • 如果您以前从未安装过类似的组件或插件,缩略图的生成可能会有延迟。这是一个批处理过程,需要时间。安装组件并将其添加到主题后,此过程应在后台自动开始运行。请检查您的 sidekiq 队列。您可能会看到很多排队的作业。
  • 它不一定与任何主题兼容,总有可能发生冲突:它仅与默认主题一起开发和设计。请先在仅使用默认主题的网站上进行测试。您可以调整其外观和感觉,但这需要基于该组件的特殊构件。
1 个赞

罗伯特您好:

感谢您的回复!我将在我的网站上测试您建议的方法 :slight_smile:

1 个赞

罗伯特您好。我在标题下方引入了一个包含第三方 JavaScript 的表格,当我在组件中使用它时,脚本会破坏预览。有什么解决方法吗?

如果脚本中存在阻止 JavaScript 执行的错误,则可能会破坏需要 JavaScript 正常运行的 TLP 布局代码。请在浏览器控制台中查找红色错误。

1 个赞

您好,我按照您的建议启用了创建日期选项。这在一定程度上解决了问题。但我认为在旧的插件中,顺序是根据帖子被标记的日期设置的。此外,旧图片在首页上因任何更新或回复主题而出现的问​​题,使得新图片难以保持特色。假设我将一张图片设为特色图片,如果一年以前的某个旧帖子有了新回复,首页将显示该帖子的特色图片。如果许多旧帖子得到回复,新标记的特色图片就会消失。