解決済みトピックバッジ

Don · 2023 年 10 月 12 日午前 8:22


	概要	解決済みおよび未解決のトピックにスタイリングオプションを追加します。
	リポジトリ	GitHub - VaperinaDEV/solved-topic-badge: This theme component adds styling options to the solved and unsolved topics.
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourseテーマ初心者の方へ	Discourseテーマの使用に関する初心者ガイド

このテーマコンポーネントをインストール

こんにちは

このテーマコンポーネントは、解決済みおよび未解決のトピックにスタイリングオプションを追加します。カスタムバッジと背景色を設定できます。

デフォルトでは、トピックリストページではこのようになります
スタイル設定済み（タイトル前）

背景付き

インライン

スタイル設定済み（タイトル後）

トピックタイトル、トピックヘッダー
スタイル設定済み
Screenshot 2023-10-11 at 23.40.35

インライン
Screenshot 2023-10-11 at 23.43.39

アイコン、テキスト、スタイルを解決済みと未解決で個別に変更できる設定が多数あります。

グローバルインジケーター設定

タイプ
– スタイル設定済み（バッジ）
– インライン（タイトルの前にインラインで配置）

配置（スタイル設定済み）
– タイトル前
– タイトル後

ボーダー半径
– バッジの丸み

解決済みインジケーター設定

解決済みインジケーター
– Unicodeの✔を使用しますが、他のもの（例：絵文字）も使用できます。ラベルの前に配置されます。
…
…
…
解決済みボーダーカラー
バッジには1pxの透明なボーダーがあり、この設定で色を設定できます。

解決済みトピックの背景を有効にする
この設定を有効にすると、その下のフィールドがアクティブになり、トピックリストアイテムの背景色を設定できます。

未解決インジケーター設定

以下に未解決インジケーターの同様の設定があります…

未解決インジケーターを有効にしたい場合は、Discourse Solvedプラグインの設定で「未解決の空きボックス」をオンにしてください。

やることリスト:

– トピックステータスとして使用するために移動する（トピックステータスが表示されるすべての場所に表示され、カスタムアイコンも使用できるようになります）

Heliosurge · 2023 年 10 月 13 日午前 4:02

クールなテーマコンポーネントです。唯一の小さな問題は、[about] カテゴリの投稿も未解決としてマークされていることです。

Don · 2023 年 10 月 13 日午前 6:29

こんにちは @Heliosurge

ありがとうございます
技術的には、「トピックについて」も解決可能なトピックです。Discourse Solved プラグインで「未解決の場合は空ボックスを表示」設定を有効にしている場合、トピックリストの「トピックについて」と「トピックについて」の両方に空ボックスが表示されます。特定のトピックの未解決バッジを非表示にするには、それを閉じる必要があります。

Heliosurge · 2023 年 10 月 13 日午前 7:48

ありがとうございます！新しいことを学びました。

barto_95 · 2023 年 11 月 3 日午後 6:15

コンポーネントありがとうございます…

しかし、コンポーネントを使用すると
https://github.com/VaperinaDEV/discourse-solved-quote-

解決済みメッセージが緑色で表示されず、コンポーネントが機能しません…

件名用とメッセージ用で2つのコンポーネントを機能させることは可能でしょうか

Don · 2023 年 11 月 5 日午前 6:50

こんにちは @barto_95

これらの2つのコンポーネントは正しく連携するはずですが、正しいコンポーネントURLは次のとおりです。GitHub - VaperinaDEV/discourse-solved-quote-customization

Don · 2025 年 2 月 7 日午前 8:38

こんにちはこのテーマコンポーネントをGlimmerトピックリストで動作するように更新しました。レポートありがとうございます: Discourse topic-list changes · Issue #4 · VaperinaDEV/solved-topic-badge · GitHub

Arkshine · 2025 年 4 月 21 日午後 8:26

レガシートピックリストは今月廃止されました。
コードは削除できます。

github.com/VaperinaDEV/solved-topic-badge

javascripts/discourse/initializers/solved-badge.js

main


      
                value.push("solvable");
              }
              return value;
            }
          );
          
          api.registerValueTransformer(
            "latest-topic-list-item-class",
            ({ value, context }) => {
              if (context.topic.get("can_have_answer")) {
                value.push("solvable");
              }
              if (context.topic.get("has_accepted_answer")) {
                value.push("status-solved");
              }
              return value;
            }
          );  
          
          api.onAppEvent("page:topic-loaded", (topic) => {

This file has been truncated. show original

簡単なPRを作成しました。

Don · 2025 年 4 月 21 日午後 10:11

おっと、このコンポーネントの更新を忘れていました。@Arkshineさん、ありがとうございます。マージしました。
@ozknさん、コンポーネントを更新してください。

Monikas · 2025 年 4 月 22 日午前 3:02

このコンポーネントはdiscourse-umbrella-groupswitchdisplayと互換性がなく、一緒に使用することはできません。エラーが発生し、サイトが正しく機能しなくなる可能性があります。

理由: アクティブなテーマ/コンポーネント間の競合。

ここをクリックして、コンポーネントを更新、再構成、または無効化してください。

(このメッセージはサイト管理者にのみ表示されます。)

ozkn · 2025 年 4 月 22 日午前 7:19

アップデートありがとうございます。更新して試しましたが、同じエラーが発生します。@Don

Don · 2025 年 4 月 22 日午前 7:24

はい、すみません、わかりました。修正しました: FIX: Discourse version to beta3 · VaperinaDEV/solved-topic-badge@e5889a3 · GitHub もう一度更新してください。

ozkn · 2025 年 4 月 22 日午前 7:36

ありがとうございます。問題なく動作するようになりました。

Arkshine · 2025 年 4 月 22 日午後 12:03

おっと、すみません！

xkhalid · 2025 年 7 月 14 日午前 2:23

こんにちは皆さん、

最新バージョンへのアップデート後：

3.5.0.beta8-dev (commit: 5eca6d826e)

Discourse Solved および Solved Topic Badge プラグインに関連するビジュアルリグレッションが発生しました。

問題：

以前は、解決済みのトピックはトピックリストで緑色の背景を持ち、未解決のトピック（解決待ち）は赤色の背景で表示されていました。

現在、設定が有効になっているにもかかわらず、すべての解決済みトピックで緑色の背景が表示されなくなりました。

詳細：

プラグイン：Discourse Solved + Solved Topic Badge
設定 enable solved topic background は有効です。
アップデート前はこの設定は期待どおりに機能していました。

スクリーンショット（アップデート後）：

期待される動作：

視覚的な明確さのために、解決済みのトピックは緑色の背景を維持する必要があります。

これがリグレッションなのか、それともこの動作を復元するために新しいCSSの変更が必要なのか、お知らせください。

Moin · 2025 年 7 月 14 日午前 6:09

読んだトピックでこれが起こるのは、以下の変更によるものだと思います。

github.com/discourse/discourse

UX: Variable additions (#33473)

committed 11:53PM - 09 Jul 25 UTC

jordanvidrine

+144 -57

Working on adding a lot more variables to core. Doing so enables easy styling & …changes to the main bulk of the interface. **Example of what can be done** Using these variables in core allows for the following stylistic changes to be made with less than 100 lines of code. Most of which are changing the value assigned to variables in this PR. ![CleanShot 2025-07-03 at 19 56 46@2x](https://github.com/user-attachments/assets/130dc8be-3970-49ea-9003-d124d779edcc)

これにより、既読トピックに個別の背景色が追加されました。

テーマコンポーネントが適応されるまで、独自のCSSで修正できるかもしれませんが、現時点では確認できません。

official ではないコンポーネントの問題は、一般的にトピックで報告してください。

xkhalid · 2025 年 7 月 14 日午後 12:24

Moin、ありがとうございます！

カスタムCSSを使用して修正できました。

.topic-list-item.solved,
.topic-list-item.visited.solved,
.latest-topic-list-item.solved,
.latest-topic-list-item.visited.solved {
  background-color: var(--success-low) !important;
}

CC: @sam @j.jaffeux

jordan.vidrine · 2025 年 7 月 14 日午後 3:01

@Don 最近のコアへの変数追加により、トピックが訪問済みの場合でも背景色が機能するようにコンポーネントを少し調整する必要がある場合があります。

Don · 2025 年 7 月 14 日午後 5:51

こんにちは:waving_hand: レポートありがとうございます！こちらがアップデートです：UX: Adds background color for visited topic list items · VaperinaDEV/solved-topic-badge@1f87fe4 · GitHub

digitaldominica · 2025 年 7 月 24 日午後 9:59

こんにちは、@Donさん。ログアウトしたユーザーの背景色がどのように表示されないかに気づきました。
また、aside.quote.accepted-answerのblockquoteの背景色が解決済みバッジの色にならないのですが、調整する方法はありますか？

トピック		返信	表示
Add [SOLVED] to solved topic titles UX solved	4	508	2023 年 10 月 12 日
Discourse Solved Quote Customization Theme component	2	1122	2023 年 9 月 12 日
Discourse Solved Plugin official , solved , included-in-core	39	87046	2025 年 11 月 8 日
Solved Button Plugin Feature rfc , spec	65	21232	2015 年 6 月 18 日
How do I customise the styling of "solved topics" in the main list? Support solved	12	3089	2021 年 10 月 16 日

解決済みトピックバッジ

問題：

詳細：

スクリーンショット（アップデート後）：

期待される動作：

関連トピック