通知バナー

[gormus (Osman Görmüş)]

	概要	Notification Banners テーマコンポーネントは、サイト上でメッセージを共有するためのカスタマイズ可能で柔軟な方法を提供します。
	プレビュー	Theme Creator
: hammer_and_wrench:	リポジトリ	https://github.com/gormus/discourse-notification-banners
: question:	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
: open_book:	Discourseテーマ初心者の方へ	Discourseテーマの使用に関する初心者向けガイド

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

Notification Banners テーマコンポーネントは、サイト上でメッセージを共有するためのカスタマイズ可能で柔軟な方法を提供します。

主な機能は以下のとおりです。

• 完全にカスタマイズ可能: コンテンツ、スタイル、動作を含め、各バナーをニーズに合わせて調整できます。
• 柔軟な表示オプション: バナーをスタック表示したり、回転するカルーセルとして表示したりして、簡単に閲覧できます。
• ターゲットを絞ったメッセージング: 特定のユーザーグループにのみバナーを表示し、パーソナライズされたコミュニケーションを保証します。
• テーマサポート: バナーはライトテーマまたはダークテーマに自動的に調整されます。カスタムカラーを設定することもできます。
• Markdownサポート: Markdownを使用してバナーメッセージを簡単にフォーマットできます。
• Splideによるカルーセル: カルーセル機能は、Splide JavaScriptライブラリによって提供され、各バナーに個別の設定があります。
• スケジューリング: バナーが表示される開始日と終了日を指定できます。
• 簡単な表示順序: 簡単な設定で、バナーが表示される順序を制御できます。

このコンポーネントを使用すると、視覚的に魅力的でパーソナライズされた、整理された通知でオーディエンスを簡単にエンゲージできます。

インストール

1. 公式の手順に従って、このテーマコンポーネントをテーマに追加してください: https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#add-theme-components-to-a-theme-9

2. theme authorized extensions 設定を css および js ファイル拡張子を含むように変更します。

機能

各通知バナーには次の機能があります。

• タイトル: オプション。メッセージの上にH2見出しとして表示されます。
• メッセージ: 500文字のシンプルな通知メッセージ。Markdownがサポートされています。
• 対象者: 通知の対象としてユーザーグループを選択します。
• カテゴリ: バナーを表示するカテゴリを選択します。すべてカテゴリに表示するには空のままにします。
• 背景色: 他のバナーと区別するために設定できます。
• プラグインのアウトレット: 通知をサイトヘッダーの上または下に表示するか、top-noticesアウトレットを使用してネイティブトピックバナーと一緒に表示します。
• カルーセルに表示: 選択した場合、各アウトレットのすべてのバナーがカルーセルに表示されます。アウトレットで表示するには、最低2つのバナーを選択する必要があります。
• 閉じるボタン: 選択した場合、ユーザーはバナーを閉じることができ、ユーザーには非表示になります。
• 開始日と最終日: 定義されている場合、バナーの可視性はこれらの日付に従います。したがって、バナーを事前に設定できますが、選択した対象者には設定された日時のみ表示され、同様に表示される最終日を過ぎるとバナーを自動的に削除できます。
• 表示順序: どのバナーを上に表示し、どのバナーを下に表示するかを定義します。v1.3.0以降では、ネイティブの並べ替えボタンを使用します。

カルーセル

スライドショー、またはカルーセル機能はSplideライブラリによって提供されます。これはMITライセンスの下でライセンスされています。

各カルーセルは、テーマコンポーネントページでSplideオプションを使用して構成できます。

バナーの色

デフォルトでは、バナーはバナー-トピックと同じ色を使用します。

.notification-banner {
    background: var(--tertiary-low);
    color: var(--primary);
}

ただし、バナー設定で背景色が定義されている場合、その輝度に応じて、前景の色として黒または白が自動的に選択されます。

利用可能なCSSクラス

.notification-banners--above-site-header,
.notification-banners--below-site-header,
.notification-banners--top-notices {

  .notification-banner {

    &__wrapper {
    }

    &__close {
    }

    &__header {
    }

    &__content {
    }
  }

  &.splide {
    .notification-banner {
    }
  }
}

.notification-banners--top-notices {
  .notification-banner {

    &__content {
    }
  }
}

v1.3.0には（一部のユーザーにとって）破壊的な変更があります

更新する前に、変更をテストし、カスタマイズを確認してください。

Notification Banners

I’ve been considering this idea to better target an audience using the Trust Levels: I think I have something for you all to check out. Though, I recommend testing this on a non-production environment first as it introduces a breaking change. To install this version, use the staging branch of Notification Banners: [Install the staging branch for testing the new feature] Breaking change When the banner visibility is evaluated using the Audience field values, all the trust_level_* roles of …

[nathank (Nathan Kershaw)]

すごい！これは素晴らしいですし、非常に柔軟性がありますね。

カテゴリまたは複数のカテゴリに制限する機能について検討したことはありますか？

[gormus (Osman Görmüş)]

ありがとうございます！

実は、以前作成した Filtered Topic Lists というテーマコンポーネントに含めたことを検討していました。「表示先」セクションをご覧ください。

複雑になりすぎるのではないかと懸念していたため、そのオプションは含めませんでした。代わりに、バナーの対象としてユーザーグループを使用することを選択しました。

しかし、必要であれば喜んで含めます。

[Lilly (Lillian Louis)]

コミュニティにこのコンポーネントを共有していただき、ありがとうございます、@gormus。

[gormus (Osman Görmüş)]

@Lillyさん、ありがとうございます。こちらこそ、どうぞよろしくお願いいたします : )

[toanvoc (Toan Nguyen)]

このバナーポップアップを閉じるためにXボタンをクリックしたとき、再度表示させる方法はありますか？バナーの背景の繰り返しを「repeat」、「repeat-x」、「repeat-y」に設定しましたが、機能しませんでした。

[nathank (Nathan Kershaw)]

@gormus

しかし、必要であれば喜んで含めます。

素晴らしい！実際に必要かどうかを確認してから、お邪魔します。

[gormus (Osman Görmüş)]

@toanvoc

このバナーポップアップを閉じるためにXボタンをクリックしたとき、再度表示させる方法はありますか？

現在はありません。通知を閉じたユーザーが再度表示したいと思うとは考えていませんでした。
それに対するオプションが必要だと思いますか？

@toanvoc

バナーの背景の繰り返しを repeat; repeat-x; repeat-y に設定しましたが、機能しませんでした。

どういう意味か明確にしていただけますか？

[toanvoc (Toan Nguyen)]

@gormus

現在はできません。却下された通知を復元したいユーザーがいるとは考えていませんでした。
それに対するオプションが必要だと思いますか？

おっしゃることはわかります、ありがとうございます！

[ked (Kenny DuBose)]

@gormus

しかし、必要であれば含めることは喜んで行います。

私もこの機能に興味があります（特定のカテゴリに利用可能であること）。ご検討いただきありがとうございます。

[gormus (Osman Görmüş)]

@nathank

カテゴリへの制限を検討しましたか？

@ked

私もこの機能に興味があります（特定のカテゴリで利用可能であることです）。

カテゴリがターゲットオーディエンスとしてサポートされるようになりました。バナーごとに単一または複数のカテゴリを選択できます。

ご意見をお聞かせください

[hoangphuctran93 (Hoàng Phúc Trần)]

現在、私のディスコースページは ver 3.4.0.beta3-dev で実行されており、バナーをインストールするとページが表示されないというエラーが発生しています。再度確認し、コミュニティ向けに早期アップデートを提供していただけますでしょうか。共有ありがとうございます。

[gormus (Osman Görmüş)]

Hi @hoangphuctran93 様

ご報告ありがとうございます。Discourse 3.4.0.beta3-dev (d3f09f8f61) で Notification Banners をクリーンインストールして、問題を再現することができました。

修正をプッシュしましたので、サイトのインスタンスを更新し、必要であればページのハードリフレッシュを行ってください。

[hoangphuctran93 (Hoàng Phúc Trần)]

ありがとうございます。うまく機能しました。新しいアイデアやアップデートを楽しみにしています。いくつか提案があります。

1. 入力ボックスを拡張する
2. HTMLでデザインする以外に、画像のクイック選択を許可する
3. タイトルと一緒に使用する代わりに、バナーに名前を付けるためのデータフィールドを追加する。これにより、複数のバナーが適用された場合にカテゴリ分けと管理が容易になります。

これは、当社のディスコースページでのアプリケーションの結果です。

[Beth]

@gormus

theme authorized extensions の設定を変更して、css および js ファイル拡張子を含めるようにしてください。

ここの部分で問題が発生しています。リンクが壊れています。サイトでこれらの拡張機能を承認するにはどうすればよいですか？

よろしくお願いします！

[Moin]

meta.discourse.org をご自身のフォーラムの URL に置き換える必要があります。ここから管理者エリアにアクセスすることはできません。
https://meta.discourse.org/admin/site_settings/category/files?filter=theme%20authorized%20extensions

または、サイト設定に移動して theme authorized extensions を検索することもできます。

[Beth]

はい、ありがとうございます

[Beth]

さらに質問があります。スケジューリングについてですが、バナーを毎週同じ時間に表示するように設定する方法はありますか？毎週定期的に開催されるオフィスアワーがあり、その時間帯にこのバナーを表示して、サイト上の誰でもオフィスアワーが現在開催中であることを確認し、希望すれば参加できるようにしたいと考えています。

[gormus (Osman Görmüş)]

定義された日時で表示を開始し、別の時点で削除されるバナーを有効にできます。

したがって、開始日と終了日の日時にスケジュールを1つだけ設定できます。

ご要望の機能は、Notification Bannersでは提供されていない、より高度なスケジュール機能が必要です。

ただし、開始日と終了日が異なる同じバナーのコピーを作成することで、必要なことを実現できる場合があります。

本番環境で公開する前に、このシナリオをテストすることを強くお勧めします。

また、どのタイムゾーンにいても、日時値はUTCで入力し、フィールドの説明にある形式と一致させる必要があることを忘れないでください。

[Beth]

ありがとうございます！

こちらでは、より自動化されたソリューションを希望していました。週に3回、毎週オフィスアワーのセッションがあるため、これらすべてのセッションのバナーを複製するのはかなりの手作業になります。

Automationsプラグインも別の選択肢として検討しましたが、バナーの自動化も「特定の時点」のアクションしか許可されておらず、「繰り返し」のアクションはできません。