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

<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: [2026年七月29日 16:31 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/759 "2026-07-29T16:31:57Z")

</div>

是的，确实如此，我刚才说得有点简略。

该浏览器支持 grid-lanes，但它位于一个“实验性”标志后面。

这个警告是无害的，一旦他们将此功能移至主线，它就会消失。

目前唯一无需设置实验性功能标志即可支持它的浏览器是……

……Safari！（谁曾想到苹果会是第一个采用标准的？：rofl：）

---

<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: [2026年七月30日 12:22 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/760 "2026-07-30T12:22:18Z")

</div>

如果 Horizon 不那么固执己见且不那么庞大，你最终可能会得到类似这样的结果：

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

这是一个非常粗略的 Horizon 分支，去除了那些强加的元素，并使用了 TLP 和 Bars! 的 CSS。

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

显然，这还需要一些打磨……

---

<div class="post-metadata">

### Author: ![Eviepayne](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviepayne/32/352733_2.png) [@Eviepayne](https://meta.discourse.org/u/Eviepayne)
#### Post date: [2026年八月8日 15:50 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/761 "2026-08-08T15:50:48Z")

</div>

今天早上早些时候，我们注意到头像无法更改。  
日志告诉我：无法将 Hash 隐式转换为 String：

```plaintext

hostname	web1-app, [web2-app]
process_id	815
application_version	bfe7896ce82d26b70b70d8e6470330331eacd0ab
HTTP_HOST	已删除
REQUEST_URI	/posts
REQUEST_METHOD	POST
HTTP_USER_AGENT	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:153.0) Gecko/20100101 Firefox/153.0
HTTP_ACCEPT	*/*
HTTP_REFERER	https://已删除/
HTTP_X_FORWARDED_FOR	已删除
username	VladSv
error_message	无法将 Hash 隐式转换为 String
instructions	convert, [png:/var/www/discourse/tmp/download_cache/dfae3db8fee87a3abc7ad00830e917bab294253e.png[0], -auto-orient, -gravity, center, -background, transparent, -thumbnail, 1024x576^, -extent, 1024x576, -interpolate, catrom, -unsharp, 2x0.5+0.7+0, -interlace, none, -profile, /var/www/discourse/vendor/data/RT_sRGB.icm, png:/tmp/discourse-thumbnail20260808-815-ftpz9a.png]
time	上午 11:26
location	
upload_id	538657

```

```stacktrace
Message (16783 copies reported)

Failed to optimize image: unknown reason

Backtrace

/var/www/discourse/lib/discourse.rb:1115:in 'block in Discourse.warn'
/var/www/discourse/lib/discourse.rb:1109:in 'Array#each'
/var/www/discourse/lib/discourse.rb:1109:in 'Discourse.warn'
/var/www/discourse/app/models/optimized_image.rb:362:in 'OptimizedImage.convert_with'
/var/www/discourse/plugins/discourse-topic-previews-sidecar/lib/topic_previews/optimized_image_extension.rb:24:in 'TopicPreviews::OptimizedImageExtension#optimize'
/var/www/discourse/app/models/optimized_image.rb:317:in 'OptimizedImage.resize'
/var/www/discourse/app/models/optimized_image.rb:114:in 'block in OptimizedImage.create_for'
/var/www/discourse/app/models/optimized_image.rb:19:in 'block (2 levels) in OptimizedImage.lock'
/var/www/discourse/lib/distributed_mutex.rb:53:in 'block in DistributedMutex#synchronize'
/var/www/discourse/lib/distributed_mutex.rb:49:in 'Thread::Mutex#synchronize'
/var/www/discourse/lib/distributed_mutex.rb:49:in 'DistributedMutex#synchronize'
/var/www/discourse/lib/distributed_mutex.rb:34:in 'DistributedMutex.synchronize'
/var/www/discourse/app/models/optimized_image.rb:19:in 'block in OptimizedImage.lock'
/var/www/discourse/lib/distributed_mutex.rb:53:in 'block in DistributedMutex#synchronize'
/var/www/discourse/lib/distributed_mutex.rb:49:in 'Thread::Mutex#synchronize'
/var/www/discourse/lib/distributed_mutex.rb:49:in 'DistributedMutex#synchronize'
/var/www/discourse/lib/distributed_mutex.rb:34:in 'DistributedMutex.synchronize'
/var/www/discourse/app/models/optimized_image.rb:18:in 'OptimizedImage.lock'
/var/www/discourse/app/models/optimized_image.rb:82:in 'OptimizedImage.create_for'
/var/www/discourse/app/models/upload.rb:162:in 'Upload#get_optimized_image'
/var/www/discourse/app/controllers/user_avatars_controller.rb:238:in 'UserAvatarsController#get_optimized_image'
/var/www/discourse/app/controllers/user_avatars_controller.rb:138:in 'UserAvatarsController#show_in_site'
/var/www/discourse/app/controllers/user_avatars_controller.rb:91:in 'block (2 levels) in UserAvatarsController#show'
/var/www/discourse/lib/hijack.rb:68:in 'BasicObject#instance_eval'
/var/www/discourse/lib/hijack.rb:68:in 'block (2 levels) in Hijack#hijack'
/var/www/discourse/vendor/bundle/ruby/3.4.0/gems/i18n-1.14.8/lib/i18n.rb:354:in 'I18n::Base#with_locale'
/var/www/discourse/lib/hijack.rb:68:in 'block in Hijack#hijack'
/var/www/discourse/vendor/bundle/ruby/3.4.0/gems/concurrent-ruby-1.3.7/lib/concurrent-ruby/concurrent/promises.rb:911:in 'Concurrent::Promises::Event#callback_on_resolution'
/var/www/discourse/vendor/bundle/ruby/3.4.0/gems/concurrent-ruby-1.3.7/lib/concurrent-ruby/concurrent/promises.rb:797:in 'Concurrent::Promises::AbstractEventFuture#call_callback'
/var/www/discourse/vendor/bundle/ruby/3.4.0/gems/concurrent-ruby-1.3.7/lib/concurrent-ruby/concurrent/promises.rb:803:in 'Concurrent::Promises::AbstractEventFuture#call_callbacks'
/var/www/discourse/vendor/bundle/ruby/3.4.0/gems/concurrent-ruby-1.3.7/lib/concurrent-ruby/concurrent/promises.rb:692:in 'Concurrent::Promises::AbstractEventFuture#resolve_with'
/var/www/discourse/vendor/bundle/ruby/3.4.0/gems/concurrent-ruby-1.3.7/lib/concurrent-ruby/concurrent/promises.rb:1325:in 'Concurrent::Promises::ResolvableEvent#resolve'
/var/www/discourse/lib/scheduler/defer.rb:135:in 'block in Scheduler::Deferrable#do_work'
/var/www/discourse/vendor/bundle/ruby/3.4.0/gems/rails_multisite-7.0.0/lib/rails_multisite/connection_management/null_instance.rb:49:in 'RailsMultisite::ConnectionManagement::NullInstance#with_connection'
/var/www/discourse/vendor/bundle/ruby/3.4.0/gems/rails_multisite-7.0.0/lib/rails_multisite/connection_management.rb:17:in 'RailsMultisite::ConnectionManagement.with_connection'
/var/www/discourse/lib/scheduler/defer.rb:130:in 'Scheduler::Deferrable#do_work'
/var/www/discourse/lib/scheduler/defer.rb:116:in 'block (2 levels) in Scheduler::Deferrable#start_thread'

```

---

<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: [2026年八月8日 16:41 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/762 "2026-08-08T16:41:02Z")

</div>

这看起来是 [TLP 边车容器](https://meta.discourse.org/t/topic-list-previews-tlp/209973) 的问题，我会去检查一下

---

<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: [2026年八月8日 17:01 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/763 "2026-08-08T17:01:14Z")

</div>

这看起来像是与核心组件的兼容性问题……我会为 sidecar 的专业版修复它

---

<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: [2026年八月8日 17:32 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/764 "2026-08-08T17:32:26Z")

</div>

这应该可以通过 [https://github.com/merefield/discourse-topic-previews-sidecar-pro/pull/183](https://github.com/merefield/discourse-topic-previews-sidecar-pro/pull/183) 解决

@Eviepayne

---

<div class="post-metadata">

### Author: ![Eviepayne](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviepayne/32/352733_2.png) [@Eviepayne](https://meta.discourse.org/u/Eviepayne)
#### Post date: [2026年八月8日 18:16 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/765 "2026-08-08T18:16: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: [2026年八月29日 21:04 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/766 "2026-08-29T21:04:00Z")

</div>

现在有了大幅改进的精选图片展示选项——“轮播”。

访问 [https://www.starzen.space/](https://www.starzen.space/) 查看演示

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/4/7/0471798842c1e6c9a664e3abafa3102056ff9571.jpeg)

> <https://github.com/merefield/discourse-tc-topic-list-previews/pull/70>
>
> Previously, featured images used a continuously scrolling tag-based strip with f…ixed placement and no responsive carousel option.
> 
> This change adds flexible view, placement, and source options while preserving the existing camera-roll behavior by default.
> 
> Major changes:
> 
> \- Adds a \`Camera roll\` or \`Carousel\` featured-images view setting.
> \- Adds a desktop carousel maximum of 1–4 images, defaulting to 3 and automatically showing fewer when the available width becomes too narrow.
> \- Displays complete carousel images with equal spacing and previous/next controls at the extreme edges.
> \- Adds a single-image mobile carousel with physics-based pointer dragging and no navigation buttons.
> \- Adds three-state position dots representing the beginning, middle, and end of the featured-topic population.
> \- Supports keyboard navigation, accessible position announcements, RTL layouts, accidental-click suppression after dragging, and reduced-motion preferences.
> - \`Left Arrow\` and \`Right Arrow\` move one image backward or forward, respecting RTL direction.
> - \`Home\` jumps to the beginning.
> - \`End\` jumps to the final set of images.
> - Keyboard handling is active only while focus is on the carousel viewport or one of its descendants; it does not capture keys globally.
> \- Adds a tag/category source selector and allows the existing source field to accept pipe-delimited tags or a category slug.
> \- Makes the optional featured source footer generic, linking to the configured tags or category.
> \- Migrates overridden values from \`topic\_list\_featured\_images\_tag\_show\` to \`topic\_list\_featured\_images\_source\_show\`.
> \- Adds placement options for \`discovery-list-container-top\` (above the topic list) and \`discovery-list-controls-above\` (above navigation controls).
> \- Uses the featured-image height settings as desktop/mobile maximum heights in carousel mode while preserving natural image proportions.
> \- Limits the “larger featured tiles” presentation to desktop widths; mobile tiles retain the normal layout.
> \- Adds integration and unit coverage for carousel navigation, mobile dragging, responsive sizing, placement selection, and tag/category requests.

---

<div class="post-metadata">

### Author: ![Dmitry\_Krasnoperov](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dmitry_krasnoperov/32/65079_2.png) [@Dmitry\_Krasnoperov](https://meta.discourse.org/u/Dmitry_Krasnoperov)
#### Post date: [2026年八月31日 09:23 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/767 "2026-08-31T09:23:13Z")

</div>

我在控制台中遇到了以下错误（TLP 最新版本）

```plaintext
app.js:69 Failed to load theme 30 from https://xxx/theme-javascripts/40a50061299ae50a5bf470c83f9d3db199a93387.js Error: Could not find module `discourse/ui-kit/modifiers/d-pointer-drag` imported from `(require)`
    at fae (loader.js:253:13)
    at Bp (loader.js:266:5)
    at window.requirejs.window.require.window.requireModule (loader.js:24:17)
    at chunk-ln9q81id.digested.js:1:999
    at Object.lookup (app.js:56:5)
    at 40a50061299ae50a5bf470c83f9d3db199a93387.js?__ws=xxxxxxx:1:2134
loadThemeFromModulePreload @ app.js:69
await in loadThemeFromModulePreload
loadThemesAndPlugins @ app.js:127
(anonymous) @ discourse.js:21
await in (anonymous)
(anonymous) @ discourse.js:25
app.js:365 ℹ️ Discourse v2026.7.0-latest — https://github.com/discourse/discourse/commits/f1dcbb24e0 — Ember v6.10.1
client-error-handler.js:109 [THEME 30 'Topic List Previews'] Error: Could not find module `discourse/ui-kit/modifiers/d-pointer-drag` imported from `(require)`
    at fae (loader.js:253:13)
    at Bp (loader.js:266:5)
    at window.requirejs.window.require.window.requireModule (loader.js:24:17)
    at chunk-ln9q81id.digested.js:1:999
    at Object.lookup (app.js:56:5)
    at 40a50061299ae50a5bf470c83f9d3db199a93387.js?__ws=xxx:1:2134
reportToConsole @ client-error-handler.js:109
reportThemeError @ client-error-handler.js:56
(anonymous) @ client-error-handler.js:22
constructor @ client-error-handler.js:22
create @ core.js:583
create @ registry-BJpQx6hv.js:400
instantiateFactory @ registry-BJpQx6hv.js:292
lookup @ registry-BJpQx6hv.js:238
lookup @ registry-BJpQx6hv.js:131
lookup @ container_proxy.js:27
initialize @ boot-services.js:3
(anonymous) @ index.js:375
(anonymous) @ index.js:183
(anonymous) @ index.js:112
(anonymous) @ index.js:59
(anonymous) @ index.js:65
_runInitializer @ index.js:388
runInstanceInitializers @ index.js:373
_bootSync @ instance.js:111
didBecomeReady @ index.js:780
invoke @ index.js:262
flush @ index.js:180
flush @ index.js:334
_end @ index.js:762
(anonymous) @ index.js:499
Promise.then
(anonymous) @ index.js:18
flush @ index.js:29
_scheduleAutorun @ index.js:928
_ensureInstance @ index.js:919
schedule @ index.js:618
schedule @ index.js:343
waitForDOMReady @ index.js:508
init @ index.js:408
initialize @ core.js:97
create @ core.js:599
(anonymous) @ discourse.js:23
await in (anonymous)
(anonymous) @ discourse.js:25

```

---

<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: [2026年八月31日 09:28 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/768 "2026-08-31T09:28:23Z")

</div>

> [@Dmitry\_Krasnoperov](#):
>
> `Discourse v2026.7.0-latest`

你需要至少使用 v2026.8.0 版本 🙂

我通常不支持旧版本，但我会添加一个置顶帖。

---

<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: [2026年八月31日 09:32 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/769 "2026-08-31T09:32:43Z")

</div>

已经完成了。不过考虑到回滚操作比较麻烦，我认为最简便的做法是至少升级到 v2026.8.0（或 v2026.9.x-latest）。

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