カテゴリごとのサイトヘッダー下のツールバー

https://meta.discourse.org/t/welcome-link-banner/218743/28

私の機能リクエストをご覧いただけたか気になっています。

https://meta.discourse.org/t/welcome-link-banner/218743/73?u=heliosurge

あるいは、特定のカテゴリを表示しているときに、メインのサイトバーの下にツールバーを「ドッキング」できるようにするテーマコンポーネントはありますか?具体的にはそれが求めているものです。例えば、Joe’s custom header linksのようなものです。

既存のテーマコンポーネントの動作を調整してこれを実現することについてのガイダンスでも素晴らしいです。

不慣れで、学びながら進めているため、ご迷惑をおかけして申し訳ありません。

「いいね!」 1

こんにちは!

もう少し具体的にご要望をお聞かせいただけますか?Discourseのヘッダーの下に具体的に何を配置したいですか?

ヘッダーの下に「何か」を配置する標準的な方法は、テーマまたはコンポーネントを編集する際のAfter Headerタブ内で行います。

しかし、あなたはもっと動的で、あるいはより複雑なものを考えているようです。

提供される情報が多ければ多いほど、より役立つ回答が得られます :slight_smile:

「いいね!」 1

迅速なご対応ありがとうございます。

非常に明確かつ具体的に言うと、Johani’s Custom Header Links (Icon) のようなものがほぼ完璧です。

それを踏まえた上で、目的は、クリック可能なロゴと、おそらくいくつかのドロップダウンを備えたツールバーを持つことです。

例えば、フォーラムには、2つのサブカテゴリを持つカテゴリAを所有するスポンサーがいます。ユーザーがカテゴリAまたはそのサブカテゴリを表示している場合、サイトヘッダーの下にツールバーが固定されます。その会社のリンクが表示されます。

つまり、ストアリンク、サポート、コミュニティリンクなどです。

カスタムヘッダーリンクは非常にシンプルなテーマコンポーネントであり、同じコードベースを使用しつつリンクリストを別の場所に配置するという、良い出発点になると思います。
ただし、サブメニューには対応しておらず、追加は少しトリッキーになるでしょう。

別の方法としては、設定なしでHTML、CSS(場合によっては少量のJS)のみを使用するコンポーネントを作成することです。そのため、「静的な」カスタマイズとなり、変更が必要な場合は適切なHTMLおよびCSSコードを編集する必要があります。

以下は、私が自分のフォーラム用に作成した例です。

サイトのカスタマイズでの表示は以下のようになります。

このような方法でご要望を満たせますか、それとも、以下のようなカスタムヘッダーリンクコンポーネントのように、管理画面から編集しやすいものがお好みですか?

カスタムヘッダーリンクのようなものは、経験値がもっと増えるまで簡単かもしれません。あるいは、Johaniのカスタムヘッダーリンクコンポーネントのようなものをターゲットにして上書きし、ヘッダーの下に表示されるように(オプションがあるかもしれません)動作を変更する別のコンポーネントを作成するためのガイダンスがあるかもしれません。現在の親カテゴリを使用するように上書きします。

ただし、スポンサーが2人いる場合、コンポーネントをリネームしてコンポーネント名をターゲットにすることで、コンポーネントを2回インストールできるかどうかを知る必要があります。

例:

  1. (A) カスタムヘッダーリンク
  2. (B) カスタムヘッダーリンク

カテゴリに基づいてサイドバーを追加するテーマコンポーネントがあったと思いますが、サイドバーはデスクトップでのみ機能するため、機能しません。したがって、トップバーが必要です。

コードを変更するためにzipからエクスポートしてからインポートできることはわかっています。しかし、このルートを進む場合、何をどのように変更すべきかガイダンスが必要です。試す用意はあります。

これで、カスタムテーマコンポーネントで作業することで、より簡単になるかもしれません。

ヘッダーコードの後に、簡単なリンクを表示するカテゴリをターゲットにすることで、これを簡略化できます。時折、画像を使用してメインリンクを表示し、コミュニティリンクを投稿または公開ページにリンクさせます。

お時間と知識の共有に、改めて感謝いたします。

以下は、あなたのために作成した実践的な例です。

これはヘッダーの下タブに入力したHTMLです。

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 一般カテゴリにのみ表示されるコンテンツはこちら</strong></h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ サイトフィードバックカテゴリにのみ表示されるコンテンツはこちら</strong></h2>
</div>

これはCSSタブに入力したSCSSです(DiscourseはCSSを拡張するSCSSを使用します)。

$category_classes: "general", "site-feedback";

.below-header-banner {
    display: none;
}

@each $cat in $category_classes {
    body.category-#{$cat} {
        #category-#{$cat}-banner.below-header-banner {
            display: block;
        }
    }
}

結果は以下の通りです。各バナーはそれぞれのカテゴリにのみ表示されます。

さらなるお役に立てれば幸いです!

「いいね!」 1

それは絶対に完璧です!本当にありがとうございます!

この基本コードで、親のサブカテゴリ内にある場合でも表示されますか?それとも、条件にサブカテゴリを追加する必要がありますか?

コピー&ペーストして、お返しすべきですね。あなたが私を助けるために費やしてくれたすべての時間に対して、とても親切にしてくれたので。

:vulcan_salute::smiling_face_with_sunglasses::handshake:

「いいね!」 1

サブカテゴリは、bodyタグに独自のクラスを持っています。

例えば、https://meta.discourse.org/c/support/wordpress/21では、#support:wordpressは#supportのサブカテゴリです。
<body>のカテゴリクラスは category-support-wordpress です。

サブカテゴリとその親の両方にバナーを表示したい場合は、SCSSコードが異なります。明日確認します。

「いいね!」 1

素晴らしい!知識を共有していただき、しっかりとしたスタートを切らせていただき、本当にありがとうございました。
あなたは間違いなくチームの貴重な人材です! :clinking_beer_mugs::smiling_face_with_sunglasses::vulcan_salute:

「いいね!」 2

ご経験の浅さをお詫びいたします。もう一度頼ってもよろしいでしょうか?

<div>
 <span id="pimax-top-links">
 <ul class="pimax-nav-link-container">
   <li><b><a href="//pimax.com/pages/pitool/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=pitool_button" class="pimax-link">Pitool</a></b></li>
   <li><b><a href="//www.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=brandsite_button" class="pimax-link">Store</a></b></li>
   <li><b><a href="//support.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=support_button" class="pimax-link">Support</a></b></li>
 </ul>
 </span>
</div>

これをあなたの例とどのように組み合わせればよいですか?また、リンクが縦に積み重なるのではなく、左右に広がるようにするにはどうすればよいですか?

要するに、このコードを私のコードの <h2> タグとそのコンテンツの代わりに入れるということです。しかし、単にコピー&ペーストするのではなく、ニーズに合わせてこのコードを洗練させ、適応させることをお勧めします。

リストの要素を積み重ねるのではなくインラインにする方法については、多くのCSSの方法があります…多くはかなり簡単ですが、ここでは提供するヘルプの範囲から少し外れてしまいます。この説明をご覧ください。

このような一般的な、直接Discourseに関連しないHTMLやCSSの件については、ここで情報を見つけることができます: Making custom CSS changes on your site
そして、インターネット上のほぼどこでも見つけることができます。例えば: Google Search

とはいえ、HTMLとCSSの現在のスキルはどの程度ですか?
これについてもう少し知ることで、より的を絞った返信を書くことができます。 :slight_smile:

「いいね!」 1

正直に言うと、私は初心者です。高校でgwbasicとturbo pascalを使ったプログラミングを経験しました。HTMLとCSSを学ぶためのアプリを使い、ある程度の成功を収めましたが、高度なレベルではありません。

例えば、ハンバーガーメニューからカテゴリを非表示にするコード例が共有されました。それはうまく機能しましたが、私が望むすべてのカテゴリを非表示にするには多くのコーディングが必要でした。これは「Category Hider」というテーマコンポーネントが登場する前のことでしたが、コミュニティメンバーがサブカテゴリをすべて非表示にする1〜2行のコードを共有してくれたことに貢献しました。笑

個別に非表示にするよりもはるかに効率的でした。 :wink:

しかし、最近では、Welcome Linkバナーを修正することにささやかな成功を収めました。settings.ymlとModern Category boxesのsettings.ymlを比較し、最初の設定をカテゴリをリスト表示するものからディスカバリーを対象とするものに置き換えました。しかし、設定がどこで有効になるかを確認するために、まだいくつかのファイルを比較する必要があるようです。最初の設定にカテゴリを追加できますが、まだ機能していないようです。

もっと読み、モバイルよりも優れたIDEを使用して、理解と認識を真に進化させる必要があることを知っています。私はそこにたどり着くだけです。そのためには、謙虚さと集中力が必要です。

この素晴らしい、理解のあるコミュニティに本当に感謝しています。多くの場合、尋ねられたときに、多くの人が与えないであろう高いレベルの忍耐力で必要なガイダンスを与えてくれました。

コードを勉強し、時間をかければ、そこにたどり着くことを知っています。そうでなければ、私はあまりにも頑固です。

Linuxを使用しており、物事をより円滑に進めるためにデスクトップをセットアップしました。また、デザインのデスクトップ側とモバイル側を見て、バランスの取れたデザインを作成する必要があります。常に新しいことを学んでいます。コアはAir Themeをベースにしています。素晴らしい出発点だからです。

「いいね!」 1

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.