Custom Top Navigation Links

[Discourse]

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

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Contribute > Bug, Contribute > UX, and Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

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

  

• Hide default links

  Hides the default links in this section

  

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 document

Perform check on document:

[Cazadividendos (Luis álvarez)]

안녕하세요

이 테마 컴포넌트를 사용하고 있습니다. 메뉴 중 하나 항목이 카테고리를 가리키고 있는데, 이 카테고리의 읽지 않은 주제 수를 표시하고 싶습니다.

현재 ‘Agora’ 대신, 해당 카테고리에 읽지 않은 주제가 3개인 사용자에게는 'Agora (3)'처럼 표시되기를 원합니다. (표준 링크 '읽지 않은’과 동일한 동작입니다.)

아무 아이디어가 있을까요?

미리 감사합니다.

[manuel (Manuel Kostka)]

@Johani

URL은 다음과 같이 상대 경로일 수도 있습니다.

/tags/theme-component

현재 라우트에 상대적인 태그 링크를 추가하는 방법을 아시는 분이 있을까요? About 태그를 사용하고, 사용자가 있는 카테고리에 상대적인 About 주제에 대한 상단 링크로 제공하기를 원합니다.

예를 들어, 사용자가 카테고리 /c/feedback/7에 있을 때 About를 선택하면 /tags/c/feedback/7/about으로 이동하게 됩니다.

[manuel (Manuel Kostka)]

인스턴스에서 해당 컴포넌트를 사용하려고 하는데, 여러 동작이 제대로 작동하지 않습니다:

• “기본 링크 숨기기” 옵션을 사용하면 첫 번째와 두 번째 하위 항목(최신 및 카테고리)이 숨겨집니다. 하지만 카테고리로 이동하면 기본 “Categories” 링크는 이미 메뉴에 표시되지 않습니다. 이 경우 해당 설정은 추가적으로 다른 탐색 항목, 즉 원래 세 번째에 있던 항목을 숨겨버립니다.

• 직접 카테고리 링크(/c/game-talk)를 위한 메뉴 항목을 추가했습니다. 해당 항목으로 이동하면 활성 클래스가 부여되지 않고 하이라이트도 되지 않습니다. 대신 “Latest” 링크가 하이라이트되고 활성 클래스가 적용됩니다. 다만 이는 기본 “Latest” 링크가 아니라, 컴포넌트를 통해 추가한 링크(/latest만 연결)입니다.

• 사실, “Latest” 링크가 "Latest"라는 이름이 아닌 경우에도 활성 클래스가 부여되지 않습니다. 따라서 컴포넌트 때문에 현재 라우트에 대한 활성 클래스가 전혀 작동하지 않는 것 같습니다. 다음은 /latest 뷰이지만 Latest 링크의 이름이 다른 경우입니다:

[sok777 (sok)]

간단한 질문입니다.

이것을 만들어 URL을 ?order=created로 설정하여 사용자가 최근 게시글을 볼 수 있도록 하려고 합니다.

데스크톱에서는 완벽하게 작동하지만, 모바일에서는 문제가 발생합니다. 내비게이션 바가 단순히 새로고침되고 드롭다운 메뉴가 표시되지 않습니다.

[WJsirius (WJ)]

나도 같은 질문이 있어요… 이게 해결책인가요?

[WJsirius (WJ)]

이 일이 왜 일어났는지 이유를 알 것 같아요…
해당 컴포넌트에 아래 줄이 있습니다:

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);
        }
      }

[sok777 (sok)]

와, 잘하셨네요

이 코드 조각을 어디에 넣으셨나요?

[WJsirius (WJ)]

Discourse-nav-links-component/mobile/head_tag.html, 일치하는 코드를 대체하세요.

[nathank (Nathan Kershaw)]

@WJsirius

컴포넌트를 포크해서 다음 코드로 변경하니 작동합니다.

모두가 혜택을 볼 수 있도록 PR로 제출해 보지 않겠습니까?

[WJsirius (WJ)]

그걸 해도 될까요? 제 코딩 실력이 너무 부족하다고 늘 생각해서, 그런 걸 하면 좀 부끄럽습니다. 조언해 주셔서 감사합니다!!! 수정해서 PR을 올리겠습니다!

[nathank (Nathan Kershaw)]

@WJsirius

내 코드 수준이 너무 낮은 것 같다고 항상 생각해요

저도 제 기여 시도에 대해 그렇게 생각해요!!

하지만 @팀 (그리고 그들의 자동화 도구)은 코드를 깔끔하게 정리하는 데 꽤 능숙한 것 같습니다.

PR을 만든 후에는 PR 링크를 여기 메타에 게시할 수 있으며, 그러면 PR 상태에 대한 멋진 임베디드 라이브 업데이트가 표시됩니다.

[piffy]

@manuel

직접 카테고리 링크(/c/game-talk)를 위한 메뉴 항목을 추가했습니다. 해당 항목으로 이동하면 활성 클래스가 적용되지 않고 하이라이트되지 않습니다. 대신 “최신” 링크가 하이라이트되고 활성 클래스가 적용됩니다. 다만 이것은 기본 “최신” 링크가 아니라, 컴포넌트를 통해 추가한 링크(단순히 /latest로 연결)입니다.

이 문제를 해결할 수 있었나요? 저도 비슷한 문제를 겪고 있습니다.

[piffy]

이상적인 해결책을 찾았다고는 할 수 없지만, 내 경우에는 문제가 무엇인지 파악했습니다.

문제는 여기에서 찾을 수 있습니다.
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"));
        }
      })
    });

이 코드는 각 내비게이션 링크에 “active” 상태를 설정하는 것으로 보입니다. 솔직히 어떻게 판단을 내리고 이 모든 변수들이 무엇인지에 대한 로직은 저에게 꽤나 불분명합니다. 하지만 문제는 바로 여기에 있습니다:

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

제 생각에는 이 코드가 페이지 URL이 내비게이션 바의 URL *위치(location)*와 같은지 확인하고, 만약 같다면 contentFilterMode === filter의 결과를 반환하는 것입니다. 이 두 변수 모두 저에게는 약간 불분명합니다. 조건이 실패하면, 어떤 항목이 active로 표시되어야 하는지 결정하는 일반 로직을 실행하는 것으로 보입니다(이것이 제 커스텀 링크가 아닌 링크들이 정상적으로 작동하는 이유입니다). 문제는 이 코드가 내비게이션 링크별로 한 번씩 제대로 실행되긴 하지만, location 변수가 항상 "categories"로 설정되어 있어 커스텀 링크의 경우 if 문이 항상 false가 된다는 점입니다. 게다가 location 변수를 this.get("content").href로 교체하여 수정하더라도, filter 변수도 항상 "categories"로 설정되어 있어 반환 값이 항상 false가 됩니다.

일반적으로는 이 문제를 수정하기 위해 PR을 올렸을 텐데, 실제 근본적인 문제는 여전히 저에게 미스터리로 남아 있습니다. 저에게는 작동하는 우회 방법(workaround)을 찾았지만, 이 컴포넌트의 문서화된 기능을 약간 변경하기 때문에 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을 부분 문자열로 포함하는지 확인합니다. 그렇다면 해당 항목을 하이라이트합니다.

[mononym]

안녕하세요. 이 게시물을 반복적으로 수정하고 있습니다. 읽지 않은 주제를 표시하는 방법이 있을까요? 감사합니다.

[thaidb]

안녕하세요,
새 탭에서 URL을 여는 방법을 어떻게 설정하나요?
감사합니다!

[carbonrich (Richard Hawkins)]

이것은 매우 유용한 컴포넌트가 될 수 있지만, 몇 가지 기본적인(하지만 제가 해결할 수 없는) 버그가 더 넓은 사용을 방해하고 있는 것 같습니다. 이 중 어떤 것이 수정될 예정인가요?

[awesomerobot (Kris)]

컴포넌트 사용에 방해가 되는 버그가 구체적으로 어떤 것인지 더 자세히 말씀해 주시겠어요?

[carbonrich (Richard Hawkins)]

네, 죄송합니다. 제가 직접 겪은 주요 문제는 다음과 같습니다:

@manuel

• “기본 링크 숨기기”를 사용할 때 첫 번째 하위 항목 두 개(최신 및 카테고리)가 숨겨집니다. 하지만 카테고리로 이동하면 기본 “카테고리” 링크가 이미 메뉴에 표시되지 않습니다. 이 설정을 적용하면 순서상 세 번째에 있던 추가 내비게이션 항목이 숨겨집니다.

아마 더 정밀하게 적용된 CSS가 필요할 것 같지만, 제 추측이 틀렸을 수도 있습니다!