Note: Before I post this in theme components, I wanted to get some feedback first if this theme component qualifies or if there are any major issues with it. :warning: Disclosure: This theme component was planned, implemented, and tested with the help of AI coding tools. Would love to hear your feedback! :information_source: Summary Tag Reveal :eyeglasses: Preview Not available… :hammer_and_wrench: Repository https://github.com/jrgong420/discourse-tag-reveal :question: Install Guide How to install a theme or theme component :open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes Discourse Tag Reveal is a lightweight theme component that keeps topic lists tidy by showing only the first N tags per topic and replacing the rest with an accessible “+X more tags” toggle. Users can expand to see all tags and collapse back to the shortened view. It works out of the box with Discourse’s standard tag UI and requires no server-side changes. Features Configurable tag limit (default: 5) via theme settings Toggle styled as a tag, keyboard accessible (Enter/Space) with ARIA attributes Localized strings using themePrefix and discourse-i18n SPA-safe behavior: resets and re-applies logic on page changes Supports infinite scrolling via MutationObserver Minimal CSS; respects core tag styles No template overrides or plugin dependencies Video Demo: [CleanShot 2025-10-18 at 19.28.39] Installation & Configuration Tested with Discourse version: 3.6.0beta1 Configure settings under the component’s Settings tab: max_tags_visible (integer, default 5): How many tags to show before collapsing toggle_tag_style : Visual style of the toggle to match tag appearance (Currently only “box” style implemented) Scope: affects topic lists (Latest, New, Unread, and category topic lists) Compatibility with other Theme Components :warning: Only minimal tests performed, please test yourself before deploying to production Topic Cards :white_check_mark: Notes Ensure tagging is enabled (Admin → Settings → Tags), otherwise you won’t see any effect If your site heavily customizes tag CSS, you may want to tweak .ts-toggle styles for perfect visual alignment Ideas for the future I don’t really plan to implement more features but I’m happy to accept PRs. Some ideas for the future: Enable/disable for tags in topic view Granular control for specific pages and/or categories

[画像] jrgong: max_tags_per_topic Did you deliberately name the setting the same as a setting in the core? I would be concerned about misunderstandings. [Screenshot_20251018_140027_Firefox]

[画像] Moin: Did you deliberately name the setting the same as a setting in the core? I would be concerned about misunderstandings. good catch! Just modified it…

Looks really interesting. I’ll try it on my dev env larer since it doesn’t seem to work on Theme Creator (unless I’m doing something wrong?) :thinking:.

Sounds interesting! Could you share a few screenshots or screen recordings of the feature in action?

:smiley: Added a quick video demo in the first post, see here: [画像] jrgong: Video Demo: [CleanShot 2025-10-18 at 19.28.39] [画像] NateDhaliwal: Looks really interesting. I’ll try it on my dev env later since it doesn’t seem to work on Theme Creator (unless I’m doing something wrong?) :thinking:. I haven’t even checked how to submit/add my TC component there…:smiley: But either way, I prefer to gather some feedback here first, and once it’s ready to be published in #theme-component, I will see how to add it there.

[画像] NateDhaliwal: it doesn’t seem to work on Theme Creator Theme creator doesn’t use the box style for tags

https://github.com/jrgong420/discourse-tag-reveal/blob/19ea982ff7eda93cb369b2af947dd23b847af961/locales/en.yml#L9-L9 You may want to use more_tags: one: "+%{count} more tag" other: "+%{count} more tags"

good point. I forgot to change the default label to +%{count} more to keep it short and concise, that’s how we use it and keep things compact and clean.

Hey, This feature could be interesting in some situations! At first glance, there are a few things to note: Theme settings and Site settings are not the same. You need to retrieve the service first to access max_tags_per_topic, e.g.: const siteSettings = api.container.lookup("service:site-settings"); The extra checks to get the limit should not be necessary; you can retrieve the value directly. You can probably do Math.min(settings.max_tags_visible, siteSettings.max_tags_per_topic ) You are not restoring the visibility of separators. You might want to unregister the events The process on initial load should not be needed with MutationObserver. Usually, before going global, you would want to check first if there is a way to reduce the scope around the element using the API (plugin outlet, for example). Let me check if there is a different way!

[画像] Arkshine: const siteSettings = api.container.lookup(“service:site-settings”); Since it’s in the api-initializers file, would @service siteSettings also work?

トピックリストのタグ表示コンポーネント - トピックリストのタグを展開/折りたたむ

開発

jrgong (jrgong) 2025 年 10 月 19 日午前 11:33 12

これで確認できますか？最新のコミットで、指摘された点が修正されているはずです。

トピック		返信	表示
Discourse Popular Tag Sidebar Theme component	26	7975	2023 年 1 月 9 日
Quick-add Tags To Topic Theme component tags	17	949	2025 年 10 月 23 日
Featured Topics Theme component	72	8615	2026 年 10 月 29 日
Homepage Feature Theme component official , homepage-feature	136	27319	2026 年 7 月 9 日
MD Topic List Mobile component Theme component	67	8316	2026 年 7 月 21 日

トピックリストのタグ表示コンポーネント - トピックリストのタグを展開/折りたたむ

関連トピック