多用途のバナー

:discourse2: 概要
:eyeglasses: プレビュー
:hammer_and_wrench: リポジトリリンク
:open_book: Discourse テーマが初めての方へ

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

機能

このテーマコンポーネントは、以前のバナー機能の進化版です。テーマ設定を活用することで、より手軽で柔軟な運用を実現することを目的としています。

主な機能は以下の通りです:

  • ログインユーザーまたは匿名ユーザーのみに表示を制限
  • モバイル端末またはデスクトップのみに表示を制限
  • 特定のページでのみ表示を制限
  • 閉じる、展開、常時表示のオプション
  • ブラウザ幅いっぱいの表示オプション
  • 色管理
  • HTML を使用した見出しとカラムのカスタマイズ(詳細は後述)
  • 状態の永続化オプション(詳細は後述)

バナーコンテンツのカスタマイズ

バナーのコンテンツは、主な見出しとカラムに分割されます。バナーには最大 5 つのカラムを設定できますが、幅の制限により、推奨される数は 3 つ以下です。HTML テンプレートが用意されており、個々のニーズに合わせてカスタマイズできます。また、各カラムの幅を制御したり、各カラムの上部に任意の画像や Font Awesome アイコンを追加することも可能です。

状態の永続化オプションの使用

状態の永続化オプションでは、最大 2 つのクッキーを使用します。これらのクッキーにはバナーの名前と、バナーの状態(開閉・展開・折りたたみ)を表す true/false 値が含まれます。サイトでのクッキー使用に懸念がある場合は、この設定の使用を避けることをお勧めします。cookie_lifespan 設定に相対時間を指定すると、ユーザーが適切なボタンを押した後、その時間 동안 バナーが閉じられた状態、展開された状態、または折りたたまれた状態を維持します。この設定がない場合、バナーは完全なページ読み込みごとにリセットされます。バナーに変更を加え、以前にバナーを閉じていたユーザーを含むすべてのユーザーに変更を反映させたい場合は、「cookie name」を変更してください。これにより、永続的な状態が実質的にリセットされ、ユーザーが再度バナーを閉じることができるようになります。

設定

名前 説明
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 展開

:discourse2: 私 hosts されていますか?テーマコンポーネントは、Pro、Business、Enterprise プランで利用可能です。

「いいね!」 101
Homepage Banner
Homepage specific design and content
Showing two banners: one to anonymous users, and one for logged-in members
Discourse Theme Creation
Activated child Component and broke Discourse!
How to add a simple Banner
Landing page customization
Adding a new banner just above the logo
Banner on Discourse
Ideas for highlighting content on our forum
Impact of component positioning with 2.5.0.beta6
Using an Image for a Global Banner Topic - Dimensions?
Showing a Warning to Non-Registered Users
Homepage Feature
Customise home login page
Enhancing My engineering Community Landing Page - Technology Support Category
How to add top welcome message to the board
How is the Banner at meta.discourse.org created?
Is it possible to change the order of topics?
Can the new About page be more visible?
Need help to emulate old forum
Creating a banner that only 1 group can see, while the other groups don't
Sticky global notice
Banner text customization for Subscriptions plugin
How to I stop topics automatically un-pinning when a user reaches the bottom?
How to insert Versatile Banner before the content of the post.?
Need guidance for adding description bar
Customizing your site with existing theme components
How to Set a Closable Banner at the Top of site?
Order of two items in the same plugin outlet
How to add this type of banner?
Customize Your Site Branding
Can the new About page be more visible?
Asking for advice on "How to create a Banner on the main page"/
No HTML in global notice
Welcome Link Banner theme-component with photos
How to apply CSS code only in the discourse home page?
How to add a header image and customize it
Make the Welcome Banner less intrusive
Your own banner with a link
I want add photo for download my app
How to add title and buttons naturally above forum topics?
Where shall I put this code for a top banner?
Is it possible to insert a box of text between the header and topic list?
How do I create a welcome banner like the one on this site?
Customizing the groups page
What are good plugins or theme components for a forum emphasizing pictures?
Creating a banner to display at the top of your site
Horizon Theme
Missing margin in the .banner- box for Versatile Banner TC
What Are Some Good Welcome Banner Designs?
App interviewer
How minimal is your forum?
How to make the automatic dark theme the same as the selected dark theme?
Hover preview and quote of the day
Creating a "Featured Categories" homepage banner
Making my discourse site look a certain way
Help with alignment in the "versatile banner" plugin
Make Banner Undismissable
Can I add a banner only on my homepage?
Welcome message at the top
Globally pinned topic only appears in one category
Pin a post even in the categories home page
How do i turn of unpin/pin option for my forum users?
[PAID] Assistance to Set-up My Forum
Custom HTML on Groups page
Banner diference mobile/web
Help me code menu top same image
Publish a notification at top of the page
How to create a welcome banner/section?
Landing page customization
Message to display to only users without accounts/logged in?
Turned my Discourse into a successful ecommerce platform!
Category Banners
Adding a new banner just above the logo