コミュニティサポート - 設定可能な寄付

:information_source: 概要 コミュニティサポート - 設定可能な寄付
:eyeglasses: プレビュー Theme Creator
:hammer_and_wrench: リポジトリ GitHub - VaperinaDEV/community-support: Community Support - configurable donation · GitHub
:heart: 役に立ちましたか? ./support --coffee
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマ初心者ですか? Discourseテーマの使用に関する入門ガイド

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

こんにちは :waving_hand:

目標は、非常に異なるコミュニティデザインやユースケースに対応できるよう十分に柔軟にしつつ、設定を完全にテーマ設定内に収めることでした。

:sparkles: 機能

:heart: 寄付 / サポートモーダル

このコンポーネントは、オプションでサポートモーダルを自動的に表示できます。

自動モーダルは以下をサポートしています:

  • 表示までの遅延時間の設定
  • URL/パスベースの表示制御
  • メンバー/匿名ユーザーの表示制御
  • 最小トラストレベル
  • 除外グループ
  • クローズ時のクッキー有効期間の設定
  • 3つのモーダルサイズ: normal, large, maximized

また、以下を使用してどこからでも手動でモーダルを開くこともできます:

#donate

これは意図的に自動表示ルールから独立しており、コミュニティが #donate リンクを共有したりサイドバーに追加したりしながら、自動サポートプロンプトが表示される場所を制御できるようにしています。


:credit_card: 寄付 / サポート方法

Discourseのオブジェクト設定エディターを使用して、複数のサポート方法を設定できます。

各方法は以下を持つことができます:

  • 名前
  • 説明
  • プロバイダー
  • 所有者
  • アイコン
  • URL
  • ボタンテキスト
  • コピー可能な値
  • 特徴的状態
  • 翻訳

これはプロバイダー非依存であり、コンポーネントは特定の決済プロバイダーを必要としません。

例えば、方法は既存のPayPal、Revolut、Wise、またはその他の決済/サポートページを指すだけで構いません。


:globe_showing_americas: メソッドごとのローカライズ

寄付方法は独自の翻訳をサポートしています。

ロケールセレクターには利用可能なDiscourseロケールが含まれ、各方法は以下を翻訳できます:

  • 名前
  • 説明
  • ボタンテキスト
  • ラベル
  • 所有者
  • プロバイダー

正確なロケールが利用できない場合、コンポーネントはベースロケール、そして英語/他の利用可能な翻訳にフォールバックします。


:bar_chart: サポート目標とプログレスバー

このコンポーネントには、オプションのサポート目標とプログレスバーが含まれています。

以下を設定できます:

  • 現在の金額
  • 目標金額
  • 通貨
  • サポートラベル
  • サポート期間
  • 進捗表示
  • サポートバーの表示位置

サポートされる期間:

  • 一回限り
  • 月次
  • 年次

プログレスバーは目標超過サポートも処理します。

単に100%で止めるのではなく、実際のパーセンテージが表示され続けます:

75%   → 通常の進捗
100%  → 目標達成
125%  → 次の目標サイクルの25%
220%  → 3番目の目標サイクルの20%

ビジュアルプログレスバーは単一のコンパクトなバーのままです。

最初の目標達成前:

background: tertiary-low
fill:       tertiary

ちょうど100%、200%、300%などの場合:

background: success
fill:       success

Screenshot 2026-09-14 at 7.39.26

マイルストーンの間:

background: success-low
fill:       success

Screenshot 2026-09-14 at 7.39.52

これにより、コミュニティは元の目標を大幅に超えた場合でも、意味のある進捗を表示し続けることができます。


:bust_in_silhouette: サポーターのアバター

サポートバーは、オプションでサポーターのアバターを表示できます。

サポーターは現在、supporters オブジェクト設定を通じて手動で設定されます。

各サポーターは以下を持つことができます:

  • ユーザー名
  • 貢献金額
  • 通貨

ユーザー名はユーザープロファイルに対して解決されるため、ユーザーのプロファイル/アバター情報が自動的に表示できます。

サポートバーに直接表示されるアバターの数は設定可能です。

例えば:

◉ ◉ ◉ ◉ ◉ +8

設定された表示アバター数より多くのサポーターがいる場合、残りのサポーターはDMenuを通じてアクセスできます。

サポーターメニューは以下を表示できます:

  • アバター
  • ユーザー名
  • プロファイルリンク
  • 貢献金額
  • 通貨

貢献金額は独立して有効化または無効化できます。

また、supporter_groups 設定を使用して、1つ以上のグループからサポーターを埋めることもできます。これは手動で設定されたサポーターリストを置き換えるのではなく、それを補完します。


:artist_palette: 複数のデザイン

このコンポーネントには、3つの独立したビジュアルデザインが含まれています:

  • Classic: バランスの取れたコミュニティスタイルのプレゼンテーション
  • Minimal: 視覚的な装飾を減らし、コンパクトなプレゼンテーション
  • Modern: より強い階層構造とより目立つカード

デザインは選択されたビューから独立しているため、両方を自由に組み合わせることができます。


:puzzle_piece: 複数のビュー

このコンポーネントは、複数のプレゼンテーションモードをサポートしています:

  • Full: ヒーロー、特徴的な方法、寄付方法を含む完全なサポートコンテンツ
  • Compact: 小さい配置向けに削減されたプレゼンテーション
  • Minimal: 方法に焦点を当てたプレゼンテーション
  • Progress: サポート目標と進捗のみ

これにより、同じコンポーネントを設定やスタイルを重複させることなく、非常に異なる場所で使用できます。


:notebook: 投稿への埋め込み

サポートコンテンツは、投稿に直接埋め込むことができます。

enable_post_embed を有効にし、次に使用します:

[wrap=donate]
[/wrap]

追加のビューは、ラッパーを直接使用することで利用可能です:

[wrap=donate-compact]
[/wrap]

[wrap=donate-minimal]
[/wrap]

[wrap=donate-progress]
[/wrap]

ラッパーはビューを制御し、グローバルな design 設定はビジュアルデザインを制御します。

これは、サポートコンテンツがグローバルなUI要素として表示されるのではなく、特定の投稿のコンテキストの一部である必要がある場合に有用です。


:electric_plug: プラグインアウトレットサポート

このコンポーネントは、プラグインアウトレットを通じてサポートウィジェットをレンダリングできます。

outlet_enabled を有効にし、outlet_locations| で区切った希望するアウトレット名を指定します。

アウトレットのビューとデザインは独立して設定できます:

  • outlet_view
  • outlet_design

これにより、トピックリスト、ヘッダー、フッター、および他のサポートされているアウトレットなどの場所でサポートコンポーネントを使用することが可能になります。


:loudspeaker: Discourse Ads互換性

このコンポーネントは、Discourse Adsプラグインと併せて使用することもできます。

Adsプラグインに直接依存するのではなく、Community Supportは安定したHTML埋め込みマーカーを提供します:

<div data-donation-widget="support"></div>

これはHTML広告にコピーし、希望するAdsアウトレットに配置できます。

コンポーネントがマークアップとCSSを所有しているため、広告自体内で寄付スタイルを重複させる必要はありません。

ビューとデザインはオプションでオーバーライドできます:

<div
  data-donation-widget="support"
  data-view="compact"
  data-design="minimal"
></div>

これにより、一貫したデザインを維持しながら、異なるAds配置間で同じサポートシステムを再利用できます。


:globe_with_meridians: 汎用HTML埋め込み

同じ埋め込みメカニズムは、他のHTML対応の配置でも使用できます:

<div data-donation-widget="support"></div>

HTMLマーカーは意図的にシンプルに保たれ、実際のレンダリングはテーマコンポーネントが処理します。

これにより、個々の埋め込みを書き直すことなく、デザインやコンポーネントの実装を変更することが可能になります。


:eyes: 表示制御

自動的に表示されるグローバルなサポートコンテンツは、複数の設定を通じて制御できます:

  • メンバーに表示
  • 匿名ユーザーに表示
  • 最小トラストレベル
  • 除外グループ
  • ホームページに表示
  • URL/パスマッチング

除外グループは、モーダル、プラグインアウトレットウィジェット、汎用埋め込みなどの自動的にレンダリングされるサポートコンテンツに適用されます。

コンテキスト依存のコンテンツは利用可能のままです:

  • #donate
  • [wrap=donate]

これにより、特定のユーザーをプロモーション/自動サポートUIから除外しつつ、明示的に共有されたサポートリンクやコンテキスト依存のサポートブロックへのアクセスを妨げないようにできます。


:cookie: クローズ / クッキー制御

自動的に開いたモーダルがクローズされた場合、コンポーネントはその決定を記憶できます。

クッキーの有効期間は以下のように設定できます:

  • なし

これにより、選択された有効期間に応じて、同じ訪問者に自動モーダルが繰り返し表示されることを防ぎます。


:memo: 基本的な例

サポートモーダルを開く

#donate

投稿にサポートコンテンツを埋め込む

[wrap=donate]
[/wrap]

コンパクトな投稿バージョン

[wrap=donate-compact]
[/wrap]

汎用HTML埋め込み

<div data-donation-widget="support"></div>

カスタムプレゼンテーションでの埋め込み

<div
  data-donation-widget="support"
  data-view="compact"
  data-design="minimal"
></div>

:heart: ./support --coffee

「いいね!」 8

いいね。そして、間違いなく今、非常に必要とされている。

ただ、同時に、こんな方法で寄付を集めるのが違法な国で暮らしていることに、かなり腹が立つ。フィンランドでは何かを売らなければ、リスクを取らなければならない。まあ、完全に話題が逸れたけど。

「いいね!」 2