カスタムトップナビゲーションリンク

詳細を追記いただきありがとうございます。やはり、脆弱なCSSでした。以前はクラス名がなかった箇所にクラス名を追加したので、より具体的に指定できるようになりました。

コンポーネントをここで少しリファクタリングしました。

そのため、更新するだけで済みます。

これを更新し、「デフォルトリンクを非表示にする」は、最新およびカテゴリだけでなく、すべてのデフォルトリンクを非表示にするようにしました。これにより、非表示の動作が少し理解しやすくなると思います。

このコンポーネントによって追加されたナビゲーション項目には、nav-item_custom_item-name というクラス名が付与されるようになります。ここで item-name はナビゲーション項目の表示名(スペースはハイフンに置き換えられます)です。たとえば、「my bookmarks」という名前のナビゲーション項目は、次のようにCSSでターゲットにできます。

#navigation-bar {
   li.nav-item_custom_my-bookmarks {
     background: skyblue;
   }
}

デフォルトの項目には nav-item_name のようなクラス名が付与されるため、デフォルトのカテゴリリンクを非表示にしたい場合は、次のようにします。

#navigation-bar {
   li.nav-item_categories {
     display: none;
   }
}

これでアクティブクラスが付与されるはずです。

「いいね!」 3

こんにちは。

最新のアップデートにより、ナビゲーションリンクの表示テキストが小文字になり、余分なダッシュが追加されました。

ナビゲーションリンクフィールドには以下が含まれています。

⮉ Home;show all categories;/forums

ナビゲーションリンクは次のように表示されます。
image

以前は次のように表示されていました: ⮉ Home

この行が原因のようです。

「いいね!」 2

お知らせいただきありがとうございます。この問題を修正する簡単なアップデートを行いました。

「いいね!」 3

ここでは、まさに「 wildest dream territory 」(最高の夢の領域)にいるわけですから、@awesomerobot さん、これらの修正を本当にありがとうございます!このコンポーネントに、カスタムナビゲーションをカテゴリやタグのドロップダウンの前に表示するオプションを追加していただけると便利ですが、それは可能でしょうか(多くの作業なしで)?!

「いいね!」 1

テーマにCSSを追加することで、これを実現できます。

.desktop-view {
  #navigation-bar {
    order: -1;
    margin-right: 0;
  }
  .category-breadcrumb {
    margin-right: auto;
  }
}
「いいね!」 3

まるで魔法のようだ。

こんにちは、
ナビゲーションでURLを新しいタブで開くように設定するにはどうすればよいですか?
よろしくお願いします!

プラグインではこれは不可能であり、カスタムJavaScriptを追加する必要があります。

「いいね!」 1

こんにちは皆さん、

リンクをモバイルで表示する方法はありますか?

よろしくお願いします!

こんにちは、モバイルでのドロップダウンではなく、完全なリンクについて言及していますか?
もしそうなら、モバイルではリンクを配置するスペースがあまりありません。ドロップダウンはそれを1つに圧縮します。

こんにちは。

早速のご返信ありがとうございます!

申し訳ありません。設定をもう少し確認すべきでした。モバイルでは、モバイルとデスクトップの両方でデフォルトリンクを非表示にする設定をオンにしていたため、表示されていませんでした。

これらのデフォルトリンクを非表示にしたまま、モバイルでもリンクを表示するにはどうすればよいでしょうか?

このTCについてバグレポートを提出しました。

これは機能性を著しく損なうものです。もし対応されないのであれば、broken とタグ付けすべきでしょうか?

「いいね!」 4

提案:アイコンをオプションとして含める。絵文字を使用したら、非常にスタイリッシュに見えましたが、モバイルで壊れ、明らかに一貫性がありません。

ナビゲーションのリンクにアイコンを追加できるコンポーネントがあります: Discourse Nav Item Icon / Emoji
これは、このコンポーネントで追加されたカスタムリンクでも機能します。唯一の違いは、ナビゲーション項目の名前の前に custom_ を追加する必要があることです。

例:
このコンポーネントの助けを借りて「Preferences」リンクを追加しました: Preferences;edit your preferences;/my/preferences

そして、アイコン/絵文字コンポーネントを設定してレンチアイコンを追加しました: icon:custom_preferences:solid:wrench:currentColor

結果:
image

「いいね!」 1