ビッグヘッダー - リトルヘッダー

このテーマコンポーネントは、ページ上部にスクロールした際に大きなロゴを持つ固定ヘッダーを提供します。ページを下にスクロールすると、通常の Discourse ヘッダーバーが表示されます。これにより、ページ上部にサイトロゴをきれいに大きく表示できます。

モバイル端末では、ヘッダーバーは縦向き(ポートレートモード)の時のみ表示されます。横向き(ランドスケープモード)では垂直方向のスペースが限られるため、この設定により余白を確保できます。ヘッダーを再度表示するには、ページトップにスクロールするか、端末を縦向きに戻してください。

このテーマコンポーネントの機能を理解する最良の方法は実際に試してみることです。以下のリンクからお試しください:

ここでは、実際に動作している様子を小さな GIF で紹介しています(より良い視覚的説明のため、上記のリンクをクリックすることを強くお勧めします :slight_smile:

設定:

現在、非常にわかりやすい 3 つの設定があります:

インストール:

重要: このテーマを機能させるには、Discourse バージョン 2.0.0.beta4 以降を実行している必要があります Discourse Version 2.0.0.beta4

テーマコンポーネントのインストール方法については、以下のトピックをご覧ください:

インポートリンク:

https://github.com/tshenry/discourse-big-header-little-header.git

概要:

このテーマの元の提案は、Marketplace@ryanerwin 氏からのものでした。彼のために作成したものを一般化し、コミュニティ全体と共有してほしいと依頼されました。そのため、このテーマは彼から強くインスピレーションを得ており、彼によって提供されています :slightly_smiling_face:

注意事項:

ユーザーはヘッダーやページ上部の領域をカスタマイズすることが多いため、他のカスタマイズとの競合を処理するために追加の調整が必要になる場合があります。これはクリーンな Discourse テーマ上で動作するようにテスト済みですが、既存のカスタマイズの量に応じて調整が必要になる可能性があります。変更内容を追跡しやすくするため、可能な限り多くの修正を独立した子テーマコンポーネントとして行うことをお勧めします。そうすれば、テーマが更新された際に変更内容を見失うことを防げます。

既知の問題:

div#main-outlet にパディングを追加するため、ロゴのサイズに応じてトピックタイムラインに影響が出る可能性があります。これを処理するためのハードコードされた方法もありますが、理想的ではありません。Dev で私が試したすべてのことをまとめ、余分なパディングを補うためのアイデアを持っている人がいないか確認する投稿をする予定です。

リポジトリ:

GitHub - tshenry/discourse-big-header-little-header

いつもの通り、ご質問、問題、ご提案がございましたら、お気軽に投稿してください。現在は時間が少し限られていますが、できるだけ早くすべてに対応いたします :slight_smile:

「いいね!」 24

Awesome work on this @tshenry.

For anyone who wants to use a BIG LOGO at the top of their Discourse site, particularly if their logo is not rectangular, this is a great theme plugin!

「いいね!」 1

Oh dang, that’s a pretty rad component you’ve got there, thanks for sharing back with us! :heart_eyes:

Any chance of an animated sample, just so those interested in something similar can git the gist of how it feels? (Or better yet, link to a live sample you can share on theme creator so they can play with it themselves!)

「いいね!」 6

No problem! :slightly_smiling_face:

I will most definitely add a sample to theme creator. Thanks for the reminder! I need to update my other themes with the links to their demos on there as well. I’ll try to get a GIF in the post as well.

Edit: I’ve added both an animated image and a demo link to the topic post :grin:

「いいね!」 9

I believe that recent logo changes may have broken this component - if you look at the theme creator version it is not working

「いいね!」 3

Yep, very broken! I’ll get that fixed up ASAP.

「いいね!」 5

Ok, it should be fixed now :slightly_smiling_face:

If anyone reading this notices issues after updating the component, please report them!

「いいね!」 7

There’s just a slight dead zone under the little header where you can’t interact with certain things. Highlighting text, entering a topic, interacting with the timeline. I’m sorry, I don’t really know how to describe my problem, but you can reproduce it by just having text or the timeline below the little header. Try to highlight the text, or interact with the timeline.

Does anybody have any suggestions to fix this? It’s not a super huge problem in general, but it does make the Table of Contents theme component wonky to work with. I’m not sure if this is something to tell you or them.

I love this component, by the way @tshenry.

「いいね!」 3

Thanks for reporting! This should be fixed once you update the component. Let me know if you ever find any other issues.

「いいね!」 5

My goodness, that was quick! Works fantastic, thank you so much!

「いいね!」 4

I have installed this theme, but my logo is not showing up. It was before I installed this theme.

Is there a solution for this? Thanks!

「いいね!」 1

I’ve been meaning to take a look at this component and make sure everything is still working as expected. I’ll take a look either today or tomorrow and let you know.

Edit: I tested it out and all seems to be working correctly. Make sure you add the large logo image to the theme setting. I have a few improvements in mind for this component, but I’m not sure when I’ll get to them.

「いいね!」 2

@tshenry Big Header - Little Header を有効にした際、テーマで設定したヘッダーの背景色が設定色から白に変わってしまいました。上書きする必要があるのでしょうか?プラグインは既にテーマで設定されている色構成を尊重するべきではないでしょうか。

「いいね!」 1

どうやら、私の設定は、あなたのサイトのカラーテーマで定義されている $secondary 色変数を使用するようになっていたようです。振り返ってみれば、$header_background を使うべきでした。そうすれば、ユーザーが自分のカラーテーマを通じて簡単に差し替えることができるからです。以下の変更により修正されました:

「いいね!」 3

@tshenry 「Little」ロゴでは問題なく動作しました(ありがとう!)。しかし、「Big」ロゴではまだ白のままです。

「いいね!」 1

ああ、あの「Big」ヘッダーは元からサイトの背景に溶け込むように設計されていました。それを変更したい場合は、背景を追加する CSS を組み立ててみることをお勧めします。このコンポーネントをリファクタリングする際に切り替え機能を追加できるか検討しますが、それはもう少し先のことになる見込みです。

はい、以下の方法で上書きできました:

.d-header { background-color: #000 !important; }

別の問題として、Discourseのデフォルトよりも大きなロゴを持つヘッダーの高さを大きくするために、カスタムCSSを使用していることがあります。

プラグインの設定で、大きなロゴの高さと小さなロゴの高さを設定できれば、目指しているデザインを実現できると思います。

そうでない場合、"Little"ヘッダーの高さをどのように設定すればよいでしょうか?

次回この作業を行う際は、設定を通じてもう少し柔軟に対応できるよう努めますが、それまでは、他のカスタマイズと調和する最適な解決策を見つけるために、CSS などをいじる必要があります。

「いいね!」 1

ありがとうございます!一時的にプラグインを無効にしました。/admin にアクセスすると、上部のナビゲーションリンク(ダッシュボード、設定、ユーザーなど)をクリックできないためです。私の CSS との相互作用によるものかどうかは不明ですが、調査します。

更新:確かに私の CSS が原因でした。どこかでミスがあり、あなたのプラグインとは無関係でした。

「いいね!」 1