 |
概要 | Versatile Banner を使用すると、サイトのカスタマイズ可能なバナーを追加できます。 |
 |
プレビュー | Discourse Theme Creator でプレビュー |
 |
リポジトリリンク | https://github.com/discourse/discourse-versatile-banner |
 |
Discourse テーマが初めての方へ | Discourse テーマの使い方に関する初心者向けガイド |
このテーマコンポーネントをインストール
機能
このテーマコンポーネントは、以前のバナー機能の進化版です。テーマ設定を活用することで、より使いやすく柔軟な運用を目指しています。
主な機能は以下の通りです:
- ログインユーザーまたは匿名ユーザーのみに表示を制限
- モバイル端末またはデスクトップのみに表示を制限
- 特定のページでのみ表示を制限
- 閉じる、展開、常時表示のオプション
- ブラウザ幅全体に広げるオプション
- 色管理
- 見出しと列のカスタマイズ（HTML 使用、詳細は下記参照）
- 状態の永続化オプション（詳細は下記参照）
バナーコンテンツのカスタマイズ
バナーの内容は、主な見出しと列に分割されています。バナーには最大 5 つの列を設定できますが、幅の制限により、推奨される列数は 3 つ以下です。HTML テンプレートが用意されており、個々のニーズに合わせてカスタマイズできます。また、各列の幅を制御したり、各列の上部に任意の画像や Font Awesome アイコンを追加することも可能です。
状態の永続化オプションの使用
状態の永続化オプションでは、最大 2 つのクッキーを使用します。これらのクッキーには、バナーの名前と、バナーの状態（開閉や展開・折りたたみ）を表す真偽値が含まれます。サイト上でクッキーを使用することに懸念がある場合は、この設定の使用を避けることをお勧めします。cookie_lifespan 設定に相対時間を指定すると、ユーザーが適切なボタンを押した後に、その期間中バナーが閉じた状態、展開された状態、または折りたたまれた状態を維持します。この設定がない場合、バナーは完全なページ読み込みごとにリセットされます。バナーに変更を加え、以前にバナーを閉じたユーザーも含め、すべてのユーザーに変更を反映させたい場合は、「クッキー名」を変更してください。これにより、永続的な状態がリセットされ、ユーザーが再度バナーを閉じることが可能になります。
設定
| 名前 | 説明 |
|---|---|
| show for members | フォーラムにログインしているユーザーにバナーを表示 |
| show for anon | 匿名ユーザーにバナーを表示 |
| display on mobile | モバイル端末でバナーを表示 |
| display on desktop | デスクトップコンピューターでバナーを表示 |
| display on homepage | ホームページでバナーを表示 |
| url must contain | バナーを表示するパスを入力。パスの末尾に * を追加してワイルドカードとして使用 |
| dismissible | ユーザーがバナーを閉じられるようにする |
| collapsible | ユーザーがバナーを展開・折りたたみできるようにする |
| default collapsed state | 折りたたみ設定が有効な場合のデフォルトの折りたたみ状態 |
| cookie lifespan | バナーが閉じられたか、展開または折りたたまれたかを記憶するために使用されるクッキーの有効期間。「none」に設定すると、このコンポーネントでクッキーは使用されず、バナーに関連して以前に作成されたクッキーは、ユーザーが完全なページ読み込みを行う際に削除されます。値は単一の単位で測定されるため、「year」は 1 年、「week」は 1 週間などを意味します。 |
| cookie name | バナーに重要な変更を加えた場合は、すべてのユーザーに変更を反映させるためにクッキー名を変更する必要があります。 |
| full width banner | バナーをブラウザ幅全体に表示 |
| swap default positioning | 他のバナー関連コンポーネントがアクティブな場合、Versatile Banner とその位置を交換するために使用 |
| plugin outlet | below-site-header はサイドバーの上、above-main-container はサイドバー横のコンテンツの上に配置 |
| banner background image | 背景画像のソース URL。ヒント: メインテーマに画像をアップロードし、その URL を使用できますが、このコンポーネントの「Uploads」セクションを使用しないようにしてください。このコンポーネントに追加されたアップロードは、更新時に削除されます。 |
| banner background image dark | システムのダークモードが検出された場合の背景画像のソース URL。 |
| background color | 背景画像の代わりに使用される色 |
| background color dark | システムのダークモードが検出された場合、背景画像の代わりに使用される色 |
| primary text color | バナーの主なテキストの色 |
| primary text color dark | システムのダークモードが検出された場合のバナーの主なテキストの色 |
| secondary text color | アイコンとテキストの見出しの色、およびボタンの背景色 |
| secondary text color dark | システムのダークモードが検出された場合のアイコンとテキストの見出しの色、およびボタンの背景色 |
| link text color | バナー内のリンクのテキストの色 |
| link text color dark | システムのダークモードが検出された場合のバナー内のリンクのテキストの色 |
| 翻訳 | デフォルト |
|---|---|
| close.title | バナーを閉じる |
| close.label | 閉じる |
| toggle.title | バナーを展開/折りたたむ |
| toggle.collapse_label | 折りたたむ |
| toggle.expand_label | 展開 |
私 hosts によるホスティングの場合: テーマコンポーネントは、Pro、Business、Enterprise プランで利用可能です。
私 hosts によるホスティングの場合: テーマコンポーネントは、Pro、Business、Enterprise プランで利用可能です。