⬇️ ドロップダウンヘッダー

:mag: 概要

このテーマコンポーネントを使用すると、Discourseサイトのネイティブヘッダーにテキスト、アイコン、ドロップダウン付きのリンクを追加できます。

バグレポート、機能リクエスト、PRを歓迎します。スポンサーシップにより、Pavilionチームがこのコンポーネントの開発を優先できます。

:computer: コード

GitHubリポジトリを表示

:gear: 設定

リンクのカスタマイズ、アイコンのソース、リンクセキュリティの追加、配置など、コンポーネントをカスタマイズするために設定できるさまざまな設定があります。

すべて設定の設定とそれらに関する詳細な説明は、こちらで見つけることができます。

:thinking: 使用場面

アイコン、リンク、ドロップダウンリンクをDiscourseの既存のヘッダーにインラインで配置したい場合に便利なコンポーネントです。不要な乱雑さやサイドバーの制御不能なしに、多くのアクセス可能なリンクを持つための優れた方法です。

多くのドロップダウンリンクが必要な場合は、ヘッダーサブメニューを確認してください。これは、Discourseの元のヘッダーの上にヘッダーメニュー行を作成します。

このコンポーネントはドロップダウンなしでリンクを追加することもサポートしていますが、ドロップダウンなしでリンクのみが必要な場合は、カスタムヘッダーリンクを自由に利用してください。

:clapper: プレビュー

デスクトップ:

Desktop

モバイル:
モバイルではスペースが限られているため、リンクは下矢印ボタンをタップすることでトリガーできます。


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

「いいね!」 49

有効にするとヘッダーが消えてしまうのですが、理由がわかりません。クリーンなテーマで他のコンポーネントもなく、複数のベーステーマでも試しました。

<div id="ember7" class="d-header-wrap ember-view"><div></div></div>

2.9.0.beta4

(c99a6b10fb)

「いいね!」 1

@Fma965様、申し訳ありません。いくつかの小さなバグの修正をプッシュしました。これで動作するはずです。いかがでしたか、お知らせください。

「いいね!」 3

これでうまく動作しました。ありがとうございます!

注意点として、これらはaタグを使用していないため、ヘッダーリンクプラグインのようにリンクをミドルクリックで開くことができません。aタグを使用していない理由は何ですか?

「いいね!」 2

@Fma965

うーん、それは興味深い点ですね。アンカータグを使用しなかった理由は、各リンクがウィジェットであり、ドロップダウンアイテムが存在する場合にドロップダウンを生成する可能性があるからです。ウィジェットを使用することで、DiscourseURL.routeTo(this.attrs.url); を呼び出す click() メソッドも活用しています。

これには、トピック内のどこにいるかの履歴を維持するなど、いくつかの利点があります。たとえば、アンカータグへのリンクをクリックすると、常にトピックの先頭から始まります。しかし、以前にトピックを訪問していて、トピックの途中で最後に読んでいた場合、routeTo アプローチはトピックの同じ位置にあなたを連れて行きます。

ウィジェットのクリックに中間クリック機能を追加する方法があるかどうか疑問に思っています…それを調べる必要があるでしょう。おそらく、Discourseチームの誰かがアイデアを持っているかもしれません。

「いいね!」 1

はい、これに関連するものだとわかりました。モデレーターの1人が私に言及したことですが、念のためここで提起しておこうと思いました :slight_smile:

「いいね!」 1

キーガンさん、このテーマコンポーネントを作成していただきありがとうございます!以前検討していたカスタムヘッダーリンクとヘッダーサブメニューコンポーネントの完璧な架け橋となります。

他の2つのテーマコンポーネントのように、追加するリンクに「ターゲット」オプション(新しいタブで開く)を追加する可能性はありますか?

「いいね!」 1

メニュー項目を外部ソースから手動で設定しており、ループ内でいくつかのajaxリクエストを送信して取得しています。当然、項目が多い場合、コンポーネントはすべてのリクエストが完了する前にロードされ、一部の項目が欠落します。これを実現するためにソースを変更することは可能ですか?

「いいね!」 1

素晴らしいコンポーネントです。共有ありがとうございます :heart:

こんにちは!素晴らしいコンポーネントをありがとうございます :slight_smile:

フォーラムに接続されていない場合に右側にマージンが欠けているようです。以下にその様子を示します。
Capture d’écran 2022-12-05 à 16.22.20

接続されている場合は問題ありません。

改善に役立つことを願っています。

以下の可能性はありますでしょうか。

  1. 永続的なURLへのリンク
  2. 前述の通り、新しいタブで開くターゲットリンク

Discourseサーバーに新しいインスタンスをセットアップしており、DiscourseメニューをWPサイトにできるだけ近いものにしようとしています。

ありがとうございます。

「いいね!」 1

「カスタムヘッダーリンク」と「イージーフッター」コンポーネントを置き換えるために、このコンポーネントをインストールしました。

このコンポーネントは素晴らしいですね!

私には機能します。「_blankターゲット」のことですか、それとも私には機能する外部リンク全般のことですか?

一つ気づいたことがあります。モバイルデバイスでは下にスクロールできません。メニューが多すぎるようです :wink: 調整できますか?

「いいね!」 2

この問題について、ちょうどPRを作成しました。

上記のリンクを確認すると、調整されたCSSが期待どおりに機能していることがわかります。 :slight_smile:

「いいね!」 3

こんにちは、この素晴らしいコンポーネントをありがとうございます!

しかし、リンクをクリックすると、すべてのテキストとアイコンが最後の要素のものに置き換えられることに気づきました。

ロゴをクリックすると、リンクのテキストとアイコンが変更されることにも気づきました。

短いビデオの例を添付します。

ページのリンクはこちらです:https://oii.francescomancuso.it/forum/

どうすれば修正できますか?よろしくお願いします!

素晴らしいテーマコンポーネントです!:chefs_kiss:

現在のタブと同じタブでリンクが開くのではなく、新しいタブでリンクが開くように設定できると、さらに良くなるでしょう。:+1:

こんにちは、Francescoさん :wave:

確認させていただきますが、レイアウトを変更され、リンクを表示するためにコンポーネントをもう使用されていないようです。

テストフォーラムでは問題を再現できません。

もしよろしければ、もう一度確認して、まだ問題があるかどうか教えていただけますか? :slight_smile:

そのような機能が実装された場合、外部リンクに関するユーザーの設定(すべての外部リンクを新しいタブで開く設定)を上書きすることになると思いますか?

image

「いいね!」 2

こんにちは、ご返信ありがとうございます。

プラットフォームのすべての領域で統一されたグラフィックを作成するために、レイアウトを変更することにしました。
ドメイン移行後、エラーが解決されたかどうかを確認します。

良い一日を :smiley:

「いいね!」 2

ユーザーの設定に従うべきだと思います。管理者またはモデレーターによって上書きされていない限りは。 :+1:

このテーマコンポーネントを実装したばかりなのですが、長年のメンバーからすでにかなり的確なフィードバックを得ています。

それで、もし私が:

  • (1)まずヘッダーの検索ボタンをクリックし、次に
  • (2)ドロップダウンヘッダーにカーソルを合わせる。
    → ドロップダウンヘッダーは検索ボックスの下に表示されてしまい、これは望ましい動作ではありません。理想的には、ドロップダウンメニューが表示される前に検索バーが消えるべきです。

一方、ドロップダウンヘッダーにカーソルを合わせてから検索ボタンをクリックすると、期待どおりに動作します。つまり、(1)ドロップダウンメニューが消え、(2)検索バーが表示されます。


別のメンバーからもモバイルでの表示について苦情がありました。このテーマコンポーネントをデスクトップでのみ有効にする方法はありますか?

ありがとうございます :+1:

「いいね!」 1