기능
이 테마 컴포넌트는 사이트 헤더에 상위 카테고리 링크 메뉴를 추가합니다:
설정
이름
설명
카테고리 드롭다운 숨기기
토픽 목록 내비게이션에서 카테고리 드롭다운을 숨깁니다
모든 브레드크럼 내비게이션 숨기기
토픽 목록 내비게이션에서 모든 브레드크럼을 숨깁니다
토픽 스크롤 시 숨기기
활성화되면 데스크톱에서 토픽 제목이 헤더에 고정될 때 내비게이션이 숨겨집니다
우리가 호스팅을 제공하나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용 가능합니다.
20개의 좋아요
nathank
(Nathan Kershaw)
12월 17, 2022, 9:04오후
2
정말 멋지네요 - 정말 마음에 들어요, 크리스! 사이드바(sidebar )와 아름답게 조화되어, 상단에는 핵심 카테고리를, 바에는 짧은 개인화 선택 항목을 배치할 수 있게 해줄 거예요.
해결하면 이 기능을 한층 더 끌어올릴 수 있을 것 같은 작은 UX 문제 두 가지를 발견했어요:
UX: 카테고리 선택 하이라이트
카테고리 목록에 있을 때, 올바른 카테고리에 아름다운 은은한 밑줄이 표시됩니다.
그러나 주제(Topic)나 하위 카테고리로 진입하면 이 하이라이트가 유지되지 않아요.
이 두 가지 상황 모두에서 하이라이트가 유지되도록 하면 좋겠어요.
UX: 모바일 스크롤 / 오버플로
데스크톱에서 카테고리가 오버플로되면, 은은한 페이드 또는 작은 화살표가 표시되어 오버플로임을 알 수 있어요.
모바일에서는 오버플로가 훨씬 더 자주 발생하지만, 제 기기(Chrome / Android)에서는 이러한 은은한 표시가 없고, 스크롤이 가능한지 명확하지 않아요.
모바일에서 카테고리 바를 조금 더 높게 만들면 스크롤이 더 쉬워질 수도 있어요.
6개의 좋아요
nathank
(Nathan Kershaw)
12월 19, 2022, 4:30오전
3
모바일에서 주로 발생하는 UX 문제 몇 가지가 더 있습니다:
모바일 토픽 브레드크럼 충돌
모바일 토픽 뷰에서 브레드크럼 내비게이션이 카테고리 내비게이션 바와 겹칩니다:
강조된 카테고리가 화면에 안 보임
또한, 선택된 카테고리가 자동으로 스크롤되지 않습니다. 이는 사용자가 내비게이션 바를 스크롤하지 않는 한 해당 카테고리가 선택된 상태인지 알기 어렵다는 뜻입니다. 이 부분은 정말 중요합니다.
데스크톱 전용?
아직 모바일에 완벽하게 대응하지 못한 것 같다는 생각이 듭니다. (적어도 당분간은) 데스크톱에만 적용되도록 설정할 수 있는 옵션이 있으면 정말 유용할 것 같습니다.
4개의 좋아요
빠른 피드백 감사합니다! 이 문제를 해결할 수 있도록 일부 업데이트를 병합했습니다.
3개의 좋아요
nathank
(Nathan Kershaw)
12월 26, 2022, 2:12오전
5
훌륭해요 - 피드백이 반영될 때면 정말 기쁩니다! 꽤 많은 추가 사항이 들어간 것 같네요.
서로에게 작은 크리스마스 선물 으로 받아들이겠습니다.
UX: 카테고리 선택 하이라이트
카테고리 목록에 있을 때, 올바른 카테고리에 은은한 밑줄이 표시됩니다.
하지만 주제(Topic)나 하위 카테고리에 진입하면 이 하이라이트가 유지되지 않습니다.
두 경우 모두 하이라이트가 유지되었으면 좋겠습니다.
하위 카테고리에 진입했을 때 하이라이트가 유지되도록 수정해 주셨네요 - 훌륭합니다!
하지만 주제에 진입했을 때는 적용되지 않습니다. 의도적인 건가요? 개인적으로는 사용자가 해당 카테고리 안에 있는 동안, 즉 주제 목록과 카테고리 탐색 뷰 모두에서 카테고리가 하이라이트되는 것이 합리적이라고 생각합니다.
또한, 다른 페이지(예: /admin)로 이동하면 카테고리가 여전히 선택된 상태로 유지됩니다. 이 경우 카테고리가 선택되지 않는 것이 더 나을 것입니다.
이제 모바일에서 페이드 효과가 보이지만, 화살표/체브론은 보이지 않습니다. 페이드 효과가 꽤나 은은하므로, 가능하다면 이 기능이 매우 도움이 될 것입니다:
데스크톱:
모바일:
요청 #1 - UX
주제에서 스크롤할 때 내비게이션 바를 숨겨 주세요. 화면이 다소 번잡해 보입니다!
또한 데스크톱에서는 내비게이션 바를 이미지 속 브레드크럼/태그 아래가 아니라 그 위치에 두는 것이 더 나을 수 있습니다.
요청 #2 - 기능
필요 시 일부 내비게이션 필(Nav Pill)을 숨기기 쉽도록 각 내비게이션 필에 CSS 클래스를 추가해 주시겠습니까?
요청하는 이유는, 하위 카테고리를 활성화하기 위해 부모 카테고리로만 존재하는 (비공개) 부모 카테고리가 몇 개 있어, 일반적인 내비게이션을 원치 않는 방식으로 어지럽게 만들고 있기 때문입니다.
지금은 href를 사용하여 임시로 숨겨 두었지만, 이는 당연히 꽤나 위험합니다!
요청 #3 - UX
사이드바 카테고리를 알파벳순으로 정렬하는 옵션을 제공해 주세요.
이를 구현하면서 기본 사이드바 카테고리 목록에서 부모 카테고리를 제거했습니다. 이제 사용자는 자신에게 관련 있는 1~5개의 하위 카테고리 목록만 보게 됩니다.
하지만 순서가 다소 뒤죽박죽이고 논리적인 순서가 아닙니다. /Categories 페이지의 하위 카테고리 순서는 실제로 큰 의미가 없기 때문입니다. 이러한 하위 카테고리가 알파벳순으로 정렬되면 큰 도움이 될 것입니다!!
5개의 좋아요
리포트해 주셔서 감사합니다! 이 PR이 문제를 수정할 것입니다:
main ← active-state
merged 04:15PM - 01 May 23 UTC
The `none` category badge style was invisible when active:
Before:

After:

2개의 좋아요
Aizada_M
(Aizada M)
10월 7, 2023, 4:53오후
9
안녕하세요! 먼저, 이 주제의 매우 유용한 구성 요소라고 말씀드리고 싶으며, 해주신 작업에 감사드립니다
저희 인스턴스에서 이 구성 요소로 인해 오류가 발생했습니다. 다른 플러그인 및 테마 구성 요소와의 호환성을 확인해 보았으나, 아직까지 충돌을 찾지 못했습니다. 구성 요소 자체가 원인이 될 수 있을까요?
이 구성 요소를 활성화하면 콘텐츠의 표시가 깨집니다.
영상이 있습니다:
오류를 파악하려면 최신 게시물 페이지 /latest에서 임의의 게시물을 클릭해야 합니다. 게시물이 표준 모드로 열리면, 다시 최신 게시물 페이지로 돌아가야 합니다.
1개의 좋아요
Lilly
(Lillian )
10월 7, 2023, 6:31오후
10
@Aizada_M - 이 문제를 재현할 수 없네요. 컴포넌트에서 미리보기를 할 때 이런 현상이 발생합니까?
2개의 좋아요
Aizada_M
(Aizada M)
10월 9, 2023, 6:29오전
11
안녕하세요! 긴 답변 죄송합니다
미리보기는 사용하지 않고, 해당 컴포넌트를 활성화한 상태에서 테스트해 보았습니다.
1개의 좋아요
Aizada_M
(Aizada M)
10월 9, 2023, 6:57오전
12
토픽 제목 아래에 있는 카테고리 이름을 클릭하면 이 방법은 100% 작동합니다.
1개의 좋아요
nathank
(Nathan Kershaw)
12월 8, 2023, 2:47오전
13
헤드 카테고리 내비게이션바의 텍스트가 갑자기 font-up-1으로 변경된 것을 확인했습니다(이전에는 font-down-1이었던 것으로 생각합니다). 이는 다른 모든 내비게이션 필과 동일한 크기라 다소 거슬리고 보기 좋지 않습니다.
다음과 같은 CSS로 오버라이드했는데, 훨씬 보기 좋습니다:
// fixes text size of header navbar
.custom-categories-navbar .nav-pills>li>a {
font-size: var(--font-0);
}
사실 font-0을 선호합니다. 충분히 구별되고 사용하기가 조금 더 쉽기 때문입니다.
1개의 좋아요
핵심 CSS는 변경되지 않았으며, 해당 컴포넌트는 글자 크기를 설정하지 않습니다.
이전에 사용자 지정 CSS가 있었나요?
2개의 좋아요
isaac
(Isaac Janzen)
이 글을 에 분리
12월 29, 2023, 5:08오후
15
이 TC 정말 좋아요, 감사합니다! 어떤 항목이 표시되고 어떤 항목이 표시되지 않는지 커스터마이즈할 수 있으면 좋겠어요!
3개의 좋아요
정말 마음에 들지만, 최신 버전의 Discourse에서 테마 구성 요소가 깨진 것 같습니다.
수정: 정상적으로 작동하지만, 헤더에서 "채팅"과 “다크/라이트 전환” 아이콘을 비활성화해야 했습니다.
2개의 좋아요
isaac
(Isaac Janzen)
3월 6, 2024, 7:33오후
18
채팅이 활성화된 상태에서 저에게는 잘 작동합니다
3개의 좋아요
네, 제 로고 때문이에요. 로고를 조금 줄이면 채팅과 다크/라이트 토글이 정상적으로 작동합니다. 현재는 다음을 사용하고 있어요:
.d-header #site-logo {
max-height: 30px;
}
이렇게 하고 있습니다.
2개의 좋아요
안녕하세요, 방금 버그를 발견했어요. 이렇게 재현할 수 있습니다. 모바일에서:
헤더에서 카테고리 하나를 클릭합니다.
해당 카테고리에서 게시물 하나를 클릭한 후 페이지 맨 아래로 스크롤합니다.
헤더에서 같은 카테고리를 다시 클릭합니다.
그러면 모든 카테고리 헤더가 사라집니다. 제 포럼과 데모에서 직접 테스트해 보았습니다.
수정:
카테고리에 들어간 후 페이지를 새로고침(F5)해도 같은 문제가 발생합니다. 모든 카테고리가 사라집니다.
수정:
이 문제를 수정할 방법이 있을까요? 감사합니다.
4개의 좋아요