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

:discourse2: Summary Custom Top Navigation Links allows you to add links to Discourse top navigation.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/Discourse-nav-links-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

Desktop

Mobile

Settings:

Name Descriptions
Nav links Semicolon delimited in this order: display name;description;URL
Hide dropdowns Hide category and tag dropdowns
Hide default links Hide the default links on both mobile and desktop.
  • Nav links — these need 3 parts:

    • Name
    • Description
    • Path or URL

    Name is the text for the link that shows up on the menu. Description shows up when you hover the name like this:

    Path/URL is where you want the link to go.

    You can add links as semicolon delimited values in theme settings following this order

    name;description;URL

    URL can also be relative like

    /c/staff, /t/232, /groups/plugin_authors, /about, /tags/official

  • Hide dropdowns

    Hides the default category and tag dropdowns

    Screenshot 2023-05-11 at 3.10.55 PM

  • Hide default links

    Hides the default links in this section

    Screenshot 2023-05-11 at 3.11.29 PM


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T23:40:05Z

Check documentPerform check on document:
「いいね!」 63

Hi

I use this theme component. One of the items in the menú points to a category and I would like to inform the unread topics for this category.

image

Instead of Agora I would like Agora (3) for an user who has three unread topics in this category (same behaviour as standard link “Unread”).

Any idea?

Thanks in advance.

現在のルートに相対的なタグリンクを追加する方法を知っている人はいますか?About タグを使用し、ユーザーがいるカテゴリに相対的な About トピックへのトップリンクとして提供したいと思います。

例:ユーザーはカテゴリ /c/feedback/7 にいます。About を選択すると /tags/c/feedback/7/about にリダイレクトされます。

「いいね!」 2

コンポーネントをインスタンスで使用したいのですが、さまざまな動作が機能していません。

  • 「デフォルトリンクを非表示にする」を使用すると、最初の子項目(最新、カテゴリ)が非表示になります。しかし、カテゴリに移動すると、メニューにはデフォルトの「カテゴリ」リンクがすでに表示されていません。次に、この設定は、それ以外では3番目のナビゲーション項目を非表示にします。

Screenshot from 2022-05-10 18-29-05

  • 直接のカテゴリリンク(/c/game-talk)のメニュー項目を追加しました。そこに移動しても、アクティブクラスが付かず、ハイライトされません。代わりに、「最新」リンクがハイライトされ、アクティブクラスが付いています。ただし、これはデフォルトの「最新」リンクではなく、コンポーネントを通じて追加したものです(/latestのみをリンク)。

Screenshot from 2022-05-10 18-25-39

  • 実際、「最新」リンクは、名前が「最新」でない場合、アクティブクラスが付与されません。そのため、コンポーネントが原因で、現在ルートのアクティブクラスがまったく機能していないようです。これは/latestのビューですが、「最新」リンクの名前が異なります。

Screenshot from 2022-05-10 18-39-15

「いいね!」 1

簡単な質問です。
これを ?order=created のように作成して、ユーザーが最近のトピックを閲覧できるようにしたいのですが、
デスクトップでは問題なく動作しますが、モバイルでは動作しません。ナビゲーションバーが再読み込みされるだけで、ドロップダウンメニューが表示されません。

私も同じ質問があります…それが解決策ですか?:face_with_monocle:

これがなぜ起こったのか分かりました…
コンポーネントには以下の行があります。

if (window.location.pathname.match(sec2)) {
          $(navHeader).html(filter + markd);
        }

正規表現の ? が特殊な正規表現マークとして使用されているため、パラメータは window.location.search と比較されるべきです。
コンポーネントをフォークし、以下のように変更したところ、動作しました。

if (sec[2].indexOf("?") === -1) {
        if (window.location.pathname.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      } else {
        // reg ? -> /?
        sec[2] = sec[2].replace(/\?/g, "/?");
        const pathWithSearch = window.location.pathname + window.location.search;
        if (pathWithSearch.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      }
「いいね!」 1

おお、すごい、よくやった :clap:

このコードはどこに置きましたか?

Discourse-nav-links-component/mobile/head_tag.html 、一致したコードを置き換えます。:face_with_peeking_eye:

「いいね!」 1

皆が恩恵を受けられるように、それをPRにしませんか?

「いいね!」 4

それをしてもいいですか?私はいつも自分のコードレベルが低すぎると感じており、少し恥ずかしいです。アドバイスありがとうございます!!!修正してPRを作成します!

「いいね!」 1

私も自分の貢献の試みについてそう思います!!

しかし、@team(およびそれらの自動化ツール)はコードを整理するのがかなり得意なようです。

PRを作成したら、ここにMetaにPRリンクを投稿できます。PRステータスの素晴らしい埋め込みライブアップデートが表示されます。

「いいね!」 5

これを解決することはできましたか?同様の問題が発生しています。

理想的な解決策は見つかりませんでしたが、私にとって問題の原因がわかりました。

問題はここにあります
https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head_tag.html

具体的には、この部分です。

    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        let contentFilterMode = this.get("content").get("filterMode");

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }
      })
    });

これは各ナビゲーションリンクの「アクティブ」を設定しているようです。率直に言って、どのように決定し、これらの変数がすべて何であるかのロジックは、私にはかなり不透明です。しかし、問題はここにあります。

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }

私には、これはページURLがナビゲーションバーURLの場所と同じかどうかをチェックしており、もしそうなら contentFilterMode === filter の結果を返します。どちらの変数も私には少し不明瞭です。条件が失敗した場合、アクティブとしてマークされるべきかどうか(そのため、カスタムリンクでないリンクが正常に機能している理由)の通常のロジックを実行するように見えます。問題は、このコードがナビゲーションリンクごとに正しく実行される一方で、location変数は常に「categories」に設定されているため、カスタムリンクの場合、ifステートメントは常にfalseになることです。さらに、「location」変数を this.get("content").href に置き換えて修正したとしても、filter 変数も常に「categories」に設定されているため、戻り値も常にfalseになります。

通常はPRを出して修正しますが、実際の問題の根本はまだ掴めていません。私にとっては機能する回避策を思いつきましたが、このコンポーネントの文書化された機能をわずかに変更するため、PRは出したくありません。ホームページが /latest に設定されている場合など、エッジケースで機能しない可能性もあると思います。

    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        return window.location.pathname.includes(this.get("content").href);
      })
    });

基本的に、現在のURLがナビゲーションバーURLを部分文字列として含むかどうかをチェックします。含まれている場合は、それをハイライトします。

「いいね!」 4

4件の投稿が新しいトピックに分割されました: ナビバーのカスタム相対タグフィルター

こんにちは。この投稿を繰り返し見ています。未読トピックを示す方法はありますか?よろしくお願いします。

こんにちは、
新しいタブでURLを開くにはどうすればよいですか?
ありがとうございます!

これは非常に役立つコンポーネントになる可能性がありますが、より広範な使用を妨げている基本的な(しかし私には修正できない)バグがいくつかあるようです。これらのバグは修正されるのでしょうか?

コンポーネントの使用を妨げている具体的なバグについて、もう少し詳しく教えていただけますか?

はい、すみません。私が遭遇した主なものは次のとおりです。

よりターゲットを絞ったCSSが必要だと思いますが、間違っている可能性もあります!

「いいね!」 1