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

: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.

「いいね!」 64
Categories in "top menu"?
Add /groups to top nav
How to add breadcrumb?
How to make some categories like Bugs and Features here visible in top menu?
What about adding tags in the top menu?
Adding link to blog on main page
Displaying all non-solved topics
A playful approach to category moderation
How can I add a menu item
Create a Tag filter like 'Make & Model' on community.cartalk.com
Link to find all deleted posts by all users in a particular period
What is the proper way to extend categories route and filter topics?
Simple Unread List
Volunteer Activities - a simple setup for non-hierarchical collaboration
Discourse Docs
How to make the recommanded topics collection
Reply reminder - Remind users to reply to new users topics with zero replies
How to add a topic in top nav in a specific category?
Following tags and top feed for followed tags
Show latest list sorted by creation date
Following tags and top feed for followed tags
Change Topic List home router - from Latest to Following
Missing category and tags breadcrumbs
A "Votes" option for the top menu in main page
Adding a chat link in the top navigation links?
Add a specific class for wikis (when first post) at the topic list level
How to add an icon in a navigation link?
Customizing your site with existing theme components
Show Latest topics, not by comment on home page
Custom Button For Discourse
Add Follow feed to top navigation
Improvements i want for my discourse for making it less overwhelming/noisy for newcomers
Can we add "Groups" to top menu?
Adding 'Upcoming Events' to top navigation
Strange repetition in menu items
Disclaimer section on the "about" page
FKB Pro - Social theme
2023: The Year in Review
Is it possible to have the Board view as the only view?
How to add Button in Section
Brave default Theme
Air Theme
Provide a way to access tracked/watched topics (outside search)
Discourse Solved
The first Custom Top Nav link inappropriately appears selected
Add another tab to menu bar
How can I remove the Category and tag filter?
How to Disable ALL User-to-User DMs/Chat without breaking Other Features?
Disable personal message between members
Sidebar link / top button to PM admin
How can I add a link to the top menu area?
Why we can't add groups to top menu
How to add links on home page menu to other site?
Traditional multi level hierarchy vs flat discourse hierarchy
Ordering topics - how do the links work?
Force Mobile Homepage
Knowledge Base
Automatically fill category with topics? "Best of" category?
How to add new button in different color
Adding "Category" as a topic list option within categories
Docs: Add link to top menu
New Theme: Tag-Pages Navigation
Custom nav bar options
Topic list sidebar navigation
Where can I see posts created by me?
Discourse Docs
Showing categories statically above most recent posts
Custom nav items no longer showing after recent update
Add /groups to top nav
Add topics-sorted-by-create-time to `top menu`
Categories Customization

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