Discourse 固定バナー

テーマコンポーネント
1
:information_source: 概要 管理者のみが非表示にできるバナーがすべてのページの上部に永続的に表示されます。
:eyeglasses: プレビュー Theme Creator
:hammer_and_wrench: リポジトリ GitHub - NateDhaliwal/discourse-persistent-banner: A theme component for Discourse that cannot be closed by the user.
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマ初心者の方へ Discourseテーマ使用の初心者ガイド

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

このコンポーネントは、すべてのページの先頭にバナーを表示します。有効なCSSカラーを使用できます。Discourseテーマ変数を使用する場合は、var()で囲んでください。例えば var(--tertiary-very-low) のようになります。

「Discourse Theme Creator」というユーザーからの投稿が、別のユーザーからの歓迎メッセージを受け取ったソーシャルメディアプラットフォームのインターフェイスを示しています。(AIによるキャプション)
「Discourse Theme Creator」というユーザーからの投稿が、別のユーザーからの歓迎メッセージを受け取ったソーシャルメディアプラットフォームのインターフェイスを示しています。(AIによるキャプション)1080×2050 268 KB

この画像は、テキスト、画像、インタラクティブな要素が混在するソーシャルメディアのニュースフィードを表示しています。(AIによるキャプション)
この画像は、テキスト、画像、インタラクティブな要素が混在するソーシャルメディアのニュースフィードを表示しています。(AIによるキャプション)1080×2048 273 KB

バナーを制御するための設定が7つあります。

  1. banner_background_color バナーの背景色を変更します。
  2. banner_text_color バナーのテキスト色を変更します。
  3. banner_border_color バナーの境界線の色を変更します。
  4. banner_border_thickness バナーの境界線の太さを変更します。
  5. banner_text_content バナーのテキストを変更します。テキストは、1行より長い場合はバナー内で折り返されます。
  6. banner_visible バナーの表示/非表示を変更します。「show」で表示、「hide」で非表示になります。
  7. banner_location バナーを4つの配置場所のいずれかに配置します: above-site-header、below-site-header、above-main-container、before-topic-list。

ファイルの整理にご協力いただいた @Lilly さんに感謝します！

「いいね！」 4
2

「通知バナー」のテーマコンポーネントとかなり似ており、カスタマイズ性も高くなっています。

「いいね！」 2
3

はい、しかしこの方法ではバナーはそこに留まります（人々はバナーを閉じた後にバナーを元に戻す方法を尋ねました）。

「いいね！」 2
4

素晴らしい仕事だ、ネイト。 :clap: :slight_smile:
シンプルさが気に入りました。

テーマクリエイターのプレビューが機能していないようです。 :thinking:

いくつか提案があります。

  • デスクトップモードでの配置に問題があります。特にワイド/フルスクリーンを使用している場合です。

Screenshot 2024-10-12 at 7.57.04 PM
Screenshot 2024-10-12 at 7.57.04 PM3336×614 132 KB

  • 境界線のサイズと色を制御できると良いでしょう。

  • below-site-header や above-main-containter のような、さまざまなプラグインのアウトレットでの配置オプションはありますか？

  • 色の選択肢として列挙型リストを使用するのは便利ですが、管理者がダーク/ライトモードと連携するカラーパレット変数を使用したり、16進数のカラー値でより詳細に指定したりすることが制限されます。

  • バナー文字列のテキスト入力設定に textarea: true プロパティを使用することをお勧めします。そうすれば、ユーザーが拡張できる複数行のテキストボックスが得られます。これにより、次のようなことが容易になります。

Screenshot 2024-10-12 at 8.28.17 PM
Screenshot 2024-10-12 at 8.28.17 PM1164×146 14 KB

Screenshot 2024-10-12 at 8.27.42 PM
Screenshot 2024-10-12 at 8.27.42 PM1782×512 54.1 KB

「いいね！」 2
5

バナーの配置を調整して、これを機能させるようにします。

それほど大きな問題ではないはずです。追加します。

承知しました。実装方法について、ある種のアイデアがあります。

実装できると思います。

承知しました。追加します。

「いいね！」 1
6

@Lilly 確認ですが、これは settings.yml に追加しますか？

「いいね！」 1
7

はい、多機能バナーコンポーネントで確認できます。

コンポーネント設定の結果：

Screenshot 2024-10-12 at 8.46.21 PM
Screenshot 2024-10-12 at 8.46.21 PM1200×308 27.1 KB

「いいね！」 2
8

実装しました。

完了しました。

16進値（#を含む）、有効なCSSカラー、またはテーマ変数（var（–var-name））を使用できるようになりました。

こちらも完了しました。

修正されたと思います。確認していただけますか？

「いいね！」 2
10

これは間違いなく修正されました。よくできました。 :smiley: :discourse:

私のワイドスクリーンデスクトップビューからのスクリーンショット

The image is a screenshot of a computer interface featuring a dark theme with various icons and menus. (Captioned by AI)
The image is a screenshot of a computer interface featuring a dark theme with various icons and menus. (Captioned by AI)2474×469 131 KB

「いいね！」 3
12

更新：
バナーテキストが空かどうか、およびバナーの表示を確認する if ステートメントを .scss ファイルに移動することで、.gjs ファイルを簡略化しました。

「いいね！」 2