죄송합니다,您的评论을 완전히 읽지 않았습니다. 저도 겪고 있는 좌우 스크롤 문제에 대해 생각하고 있었습니다.
특별한 건 안 했어요. 어떤 문제예요?
메뉴에서 항목을 탭하면 메뉴가 열린 상태로 유지되고 페이지가 새로고침됩니다. 메뉴에서 포커스가 벗어날 때만 메뉴가 사라집니다. 화면이 작아 메뉴가 자동으로 닫히지 않으면 페이지 내용을 볼 수 없기 때문에 이 동작은 모바일에서 더 눈에 띕니다.
최신 버전의 서브메뉴를 사용하고 계신가요?
구버전의 서브메뉴에는 이 문제가 없는 것 같지만, 새 버전만큼 매끄럽지는 않습니다. 서브메뉴를 클릭한 후에도 메뉴가 자동으로 닫히지 않는 버그를 해결하고 싶다면, 이 오래된 포크를 GitHub에서 사용하세요.
이 컴포넌트는 정말 훌륭하며, CSS를 조금만 조정해도 결과물에 매우 만족합니다. 만들어 주셔서 감사합니다.
가장 큰 문제는 메뉴가 설정된 후 새 항목을 추가하는 것이 얼마나 어려운지입니다.
개별 텍스트 필드를 하나의 큰 필드로 교체하는 풀 리퀘스트가 있었다는 것을 보았는데, 이것이 훨씬 더 합리적이라고 생각합니다.
다른 대안으로는 설정을 가져오기/내보내기 기능을 제공하는 것입니다. (이것은 테마 컴포넌트가 아니라 디스커스 쪽에서 작업이 필요한 것일 수도 있습니다. 확신은 없습니다.) 그렇게 된다면 텍스트 편집기에서 변경 사항을 수정한 후 업로드할 수 있어 문제가 되지 않을 것입니다. 또한 백업도 쉽게 만들 수 있게 됩니다.
(컴포넌트 설정 UI 하단의 내보내기 버튼이 이 기능을 수행하는 것일 수도 있다고 생각했지만, 컴포넌트의 소스 코드와 기본 설정만 저장하고 제 설정은 저장하지 않는 것 같습니다.)
이 문제를 제외하면, 이 컴포넌트는 훌륭하며 우리 포럼 상단에 자주 필요한 링크를 많이 추가할 수 있게 해 주었습니다. 이를 통해 사용자뿐 아니라 우리 자신도 빠르게 정보를 찾을 수 있게 되었습니다.
커뮤니티 개발자가 만든 이 포크에는 메뉴와 서브메뉴 항목을 추가할 수 있는 하나의 큰 텍스트 영역이 있습니다. 구버전이지만, 우리가 필요한 기능을 제공해 주었습니다.
@Canapin의 포크는 https://meta.discourse.org/t/paid-header-submenus-ui-modification/144275의 결과물입니다. 우리도 이 포크가 필요한 기능을 수행한다고 판단했습니다.
다만, 상자에 서브메뉴 텍스트를 직접 편집하려는 시도는 절대 하지 마세요. 우리는 메뉴를 CSV 파일로 관리하며, 스태프 사용법 토픽에 게시된 아래 절차를 사용합니다:
- 스프레드시트 앱에서 CSV 파일을 엽니다.
- 데이터를 편집합니다. 일반적으로 기존 패턴을 따르기만 하면 됩니다.
- CSV 파일을 저장합니다.
- 텍스트 편집기에서 CSV 파일을 엽니다.
- 텍스트 편집기에서 내용을 복사하여 서브메뉴 항목 상자에 붙여넣습니다.
- 동기화를 유지하기 위해 수정 사항을 포함한 CSV 파일을 이 토픽에 업로드합니다.
또한 참고할 점으로, CSV에서 일부 HTML 태그와 공백을 사용하여 구조를 더 명확하게 만들고 서브서브메뉴를 만들 수 있습니다. 이는 휴대폰 화면에 많은 양의 정보를 효과적으로 배치하는 데 도움이 됩니다:
이것(드롭다운 메뉴)은 Discourse와 무관하게 단순한 HTML/CSS로 구현할 수 있습니다. F12 키를 눌러 브라우저 개발자 도구에서 직접 어떻게 구현되었는지 확인할 수 있습니다.
몇 개의 게시물을 읽은 후, .d-header에 링크를 추가하는 유일한 방법은 이 컴포넌트와 유사하지만, 이 컴포넌트가 상단에 추가적인 헤더를 생성하는 것과는 달리, .d-header에 특화된 컴포넌트를 사용하는 것일 것이라고 생각했습니다.
여기에 게시물을 올린 후, Custom Header Links와 유사한 컴포넌트가 제 게시물에서 제안된 대로 조정된다면 그 역할을 수행할 수 있을 것이라는 아이디어를 얻었습니다.
최신 버전으로 업그레이드한 후, 헤더 서브메뉴의 “고정 모드”(“스크롤과 관계없이 상단에 메뉴가 항상 표시되도록 강제합니다 - 데스크톱 전용”)가 제대로 작동하지 않습니다. 메인 페이지에서는 많은 양의 여백이 추가되고, 다른 페이지에서는 헤더 서브메뉴가 메인 Discourse 메뉴를 가립니다. 다음 내용과 관련이 있다고 확신합니다:
하지만 이 테마 컴포넌트의 CSS가 d.header에 절대 위치(absolute position)를 설정하고 있는지 확인되지 않습니다. 혹시 아이디어가 있으신가요?
어떤 브라우저를 사용 중이신가요? 문제점에 대한 스크린샷을 공유해 주실 수 있나요?
최신 Discourse에서 "고정 모드"를 활성화하고 토픽 목록을 아래로 스크롤했을 때 제가 보는 모습은 다음과 같습니다:
데스크톱의 Chrome이나 Firefox에서도 동일합니다. 모바일은 정상입니다.
"고정 모드"가 없는 메인 페이지 (정상):
"고정 모드"가 켜진 메인 페이지는 여백이 추가로 표시됩니다:
“고정 모드” 없이 아래로 스크롤한 토픽 (정상):
“고정 모드” 켜고 아래로 스크롤한 토픽. 로고, 토픽 제목, 햄버거 메뉴가 메뉴에 가려집니다:
다른 사용자 지정 CSS가 있나요? .docked .d-header 또는 #main-outlet에 Discourse 업데이트와 충돌하는 padding/margin이 설정되어 있을 수 있습니다…
드롭다운 없이 URL이 있는 메뉴 항목을 사용할 수 있을까요?
드롭다운이 필요하지 않다면 https://meta.discourse.org/t/custom-header-links-icons/86307를 추천합니다. 문제가 적고 더 자연스럽게 통합된 느낌을 줍니다. 질문하신 내용에 대한 정확한 답변은 모르지만, "아니오"일 것 같습니다.
현재 이 플러그인을 사용 중이지만, 헤더 섹션에 공간이 부족하여 드롭다운 메뉴를 상단에 배치할 계획입니다. 하지만 상단 메뉴에 URL을 추가해야 합니다.
또한, "Custom header links"를 사용하여 드롭다운 메뉴를 만들 수 없었습니다. Zoom에서 그렇게 한 것 같습니다. 콘솔로 그들의 드롭다운 메뉴를 검토해 보았지만, 이 컴포넌트의 HTML에 개입하여 항목에 드롭다운을 추가하는 방식을 파악하지 못했습니다.
기능 요청 사항이 있습니다. 스크롤 문제를 해결할 수 없다면, 모바일에서 텍스트를 끄고 아이콘만 보이도록 하는 옵션을 추가해 주실 수 있을까요? CSS로 텍스트만 따로 지정하는 방법이 없어 보이는데, 있다면 그렇게 숨기겠습니다. 감사합니다!
안녕하세요
“header submenus” 컴포넌트를 설치하면 컴포넌트가 표시되긴 하지만 현재 포럼 헤더와 겹칩니다.
현재 사용 중인 Discourse 버전은 2.4.1입니다.
혹시 해결 방법을 알려주시는 분이 있을까요?
감사합니다.
Discourse를 업데이트해 보셨나요? 현재 버전은 2.7.0.beta3입니다.







