네비게이션(사이드바) 메뉴 표시 제어

:information_source: 요약 직원, 로그인 사용자 및 익명 사용자에게 섹션과 링크를 표시할 수 있도록 허용합니다
:hammer_and_wrench: 저장소 https://github.com/Lillinator/navigation-menu-display-control
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: 디스코urse 테마를 처음 사용하시나요? 디스코urse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

설명

네비게이션 메뉴 표시 제어(Navigation Menu Display Control) 테마 컴포넌트는 직원 전용 및/또는 로그인 사용자 전용으로 다양한 기본 섹션과 링크를 표시할 수 있게 해줍니다. 또한 사용자 지정 섹션이나 사용자 지정 링크(플레이스홀더 이름 포함)를 지정할 수도 있습니다. 익명 사용자 전용으로 사용자 지정 메뉴 섹션을 표시하는 설정과 기본 섹션(카테고리, 태그, 채팅, 채널, 메시지)의 순서를 설정하는 옵션도 있습니다. 설정 내의 섹션과 링크는 기존 섹션으로 편집할 수 있는 목록이며(아래 스크린샷 참조), 원하는 만큼의 사용자 지정 섹션이나 링크를 추가할 수 있습니다.

설정

:point_right:t2: 사용자 지정 메뉴 섹션의 경우, 설정 시 전역적으로 표시 가능해야 합니다(이 섹션을 공개하여 모든 사람이 볼 수 있게 만들기 체크박스가 활성화되어 있어야 함).

상단 섹션은 코드에서 "community"라고 불리므로, 이 섹션을 숨기려면 “community” 섹션 이름을 사용하세요. 플러그인으로 설치된 링크(예: 문서, 기념일, 생일 링크)를 사용할 수 있습니다.

서로 오버라이드되는 설정도 있습니다 - 로그인 사용자에게 '더 보기(More)'에 특정 링크가 표시되도록 설정하더라도, ‘더 보기’ 드롭다운 설정이 직원 전용으로 표시되도록 설정되어 있으면 해당 설정이 우선 적용됩니다.

설정 이름 설명
show these sections for staff only 직원만 표시할 섹션 목록. “Staff Menu = staff-menu” 슬러그 스타일 명명 형식으로 사용자 지정 섹션을 포함할 수 있습니다.
show these sections for logged-in only 로그인 사용자만 표시할 섹션 목록. “User Menu = user-menu” 슬러그 스타일 명명 형식으로 사용자 지정 섹션을 포함할 수 있습니다.
show these links for staff only 직원만 표시할 링크 목록. 대소문자 형식이 동일해야 하는 사용자 지정 링크 이름을 포함할 수 있습니다 (“Staff Link” = “Staff Link”).
show these links for logged-in only 로그인 사용자만 표시할 링크 목록. 대소문자 형식이 동일해야 하는 사용자 지정 링크 이름을 포함할 수 있습니다 (“User Link” = “User Link”)
show more for staff only 직원만 ‘더 보기’ 드롭다운 섹션을 표시하도록 하는 체크박스.
show more for logged-in only 로그인 사용자만 ‘더 보기’ 드롭다운 섹션을 표시하도록 하는 체크박스.
show custom for anon only 익명 사용자만 표시할 사용자 지정 메뉴 섹션을 위한 텍스트 필드(로그인 사용자에게는 숨김).
show navigation menu to logged-in only 전체 네비게이션 사이드바 메뉴를 로그인 사용자만 표시하도록 하는 체크박스(익명 사용자에게 숨김).
hide custom menus globe icon 직원용 사용자 지정 메뉴 섹션에서 지구본 아이콘을 숨김(기본적으로 비직원에게는 표시되지 않음).
default menu section ordering 기본 메뉴 섹션의 순서를 재배열할 수 있습니다(사용자 지정 메뉴에는 적용되지 않음)

스크린샷

직원 및 로그인 사용자 전용 섹션 설정

직원 및 로그인 사용자 전용 링크 설정

더 보기 섹션, 익명 사용자 전용 사용자 지정 메뉴 섹션, 지구본 아이콘, 전체 네비게이션 메뉴 숨김, 기본 메뉴 섹션 순서 변경 설정


그룹별 네비게이션 사이드바 메뉴 섹션을 사용자 지정하려면 Group Menu Sections 테마 컴포넌트를 사용하세요.

24개의 좋아요

기본 메뉴 섹션의 순서를 변경할 수 있도록 섹션을 추가했습니다.

5개의 좋아요

현재 링크 숨김 기능이 제대로 작동하지 않는 것 같습니다.

섹션은 정상적으로 숨겨지지만, 대문자를 소문자와 하이픈으로 변환한 개별 사용자 정의 링크는 숨길 수 없습니다.

하지만 공식 링크는 소문자를 요구하는 것 같습니다. 따라서 공식 링크는 다르게 처리될 수 있습니다.

그러나 전체 제목 텍스트(공백과 대문자 포함)를 사용하면 정상 작동합니다. 그래서 아마도 OP(위키화할 수 있을까요?)와 TC의 지침만 수정하면 될 수도 있습니다. 또는 일관성을 위해 코어 변경이 필요할 수도 있습니다.

2개의 좋아요

네이던, 고마워. 뭐가 바뀌었나 봐. 주말에 한번 살펴볼게.

1개의 좋아요

음, 컴포넌트는 여전히 정상적으로 작동하고 있지만, 사용자 정의 링크 클래스 이름 형식이 변경되어 컴포넌트의 필드 문서와 OP(원문)에 몇 가지 수정이 필요했습니다. 테마 컴포넌트를 업데이트해 주세요.

사용자 정의 메뉴 섹션과 달리, 사용자 정의 링크의 경우 컴포넌트 설정의 이름은 실제 사용자 정의 이름과 동일한 대소문자 형식을 사용해야 합니다. 물론 기본값은 여전히 소문자로 유지되어야 합니다. 좀 더 혼란스러워지도록 말이죠. lol. :grin:

예를 들어, 로그인한 사용자만 표시할 특정 사용자 정의 링크인 "GitHub Repo"를 표시하고 싶다면:

테마 컴포넌트의 show these links for logged-in only 설정에 동일한 링크 이름을 입력하면 됩니다:

따라서 링크 표시 설정에 사용자 정의 링크가 있다면(show these links for staff only 및 show these links for logged-in only), 해당 컴포넌트 설정 항목을 링크 이름과 일치하도록 변경해야 합니다.

참고로 사용자 정의 메뉴 섹션(링크가 아닌)의 경우, 이름 지정 규칙은 이전과 동일하게 유지됩니다. 여전히 소문자 슬러그 스타일입니다(예: “Custom Menu Name” = custom-menu-name).

이 문제를 알려주셔서 다시 한번 감사드립니다 @nathank :hugs:

언젠가는 현재처럼 기본값뿐만 아니라 사용자 정의 섹션을 포함하여 모든 내비게이션 사이드바 메뉴 섹션을 재배열할 수 있는 기능을 추가하고 싶습니다. 하드코딩으로 어떻게 하는지 알고 있으니, 설정과 변수를 사용하여 구현하는 것만 남았네요.

5개의 좋아요

릴리님,

다음 문제를 확인했습니다:

  • 사람 이름이나 슬러그를 사용하든, 섹션을 다시 정렬할 수 없습니다.
  • 해당 옵션을 체크하지 않았는데도 게스트에게는 사이드바 전체가 숨겨집니다.
1개의 좋아요

이 컴포넌트로 커스텀 섹션의 순서를 변경할 수 없습니다. 순서 변경 기능을 확인해 봤는데, 의도대로 작동하고 있습니다.

네, 익명 사용자 숨김 기능이 깨져 있는 것을 확인했습니다. 오늘 수정하겠습니다. 알려주셔서 감사합니다.

확인해 본 결과, 익명 사용자 숨김 기능은 의도대로 작동하고 있지만, 설정에서 로그인한 사용자만 이 섹션 표시 옵션의 작동 방식을 보여주기 위해 사용한 기본 예시를 제거해야 합니다.

1개의 좋아요


로그인하지 않은 모드에서는 아무도 표시되지 않나요?

그건 토글 설정이어야 하는데…

image

1개의 좋아요

위에서 제가 쓴 글을 참고해 주세요 :slight_smile:

수정: 그 예제들을 제거하고 스크린샷으로만 보여주는 걸로 하는 게 나을지도 모르겠네요. :thinking:

4개의 좋아요

네, 이제 이렇게 처리했고 OP(원문)도 수정했습니다. 스크린샷을 기본 섹션과 링크 이름의 가이드로 사용하세요.

2개의 좋아요

⋮ 더 보기 섹션의 CSS가 변경된 것 같습니다(btn-flat이 더 이상 없습니다)

익명 사용자에게 이를 숨기기 위해 다음 코드를 사용해야 했습니다:

.anon button.sidebar-more-section-links-details-summary {
    display: none;
}

PR은 다음과 같습니다:

3개의 좋아요

이 내용이 병합되었습니다. 다시 한번 감사합니다, Nathan :hugs:

또한 익명 사용자에게 전체 사이드바를 숨기는 기능이 약간 깨져 있어서 이를 수정했습니다.

4개의 좋아요

안녕하세요,

이 멋진 컴포넌트를 어떻게 사용해야 하는지 이해하려고 하는데 막혀 있습니다. 익명 사용자는 “멤버가 되기” 또는 이와 유사한 문구만 보이도록 설정하려고 합니다.
혹시 도와주실 수 있으신가요?

이 작업을 수행하는 3가지 방법을 소개합니다:

1. 이 테마 컴포넌트 사용

/login으로 연결되는 링크를 가진 사용자 지정 사이드바 메뉴를 만들고, 테마 컴포넌트에 이 설정을 사용하세요:


2. 새/기존 테마 또는 컴포넌트에 CSS 사용

‘My Posts’ 아래 상단 섹션에 링크를 추가하는 것이라면, More - Customized this section 링크를 통해 /login으로 가는 링크를 다음과 같이 추가할 수 있습니다. 예를 들어 링크 이름이 "Login or Signup"인 경우:

그런 다음 테마 또는 테마 컴포넌트로 이동하여 html / css를 다음과 같이 편집하세요:

상단 섹션의 링크 참조는 대소문자를 구분한다는 점을 유의하세요:

.sidebar-section-link-wrapper[data-list-item-name="Login or Signup"] {
  display: none;
}

.anon .sidebar-section-link-wrapper[data-list-item-name="Login or Signup"] {
  display: block;
}

시크릿 모드 / 비로그인(anon) 뷰에서의 결과:


3. 다음 테마 컴포넌트 사용

네, 예전부터 이 기능을 수행하도록 특정 테마 컴포넌트를 만들었습니다. 이 컴포넌트는 반대의 경우에도 작동하며, 회원(로그인된 사용자)에게만 섹션을 표시합니다.

4개의 좋아요

알겠습니다. 자세한 안내해 주셔서 정말 감사합니다.

2개의 좋아요