네, 맞아요. 제 문제가 맞았네요. 알려주셔서 감사합니다.
SVG 아이콘 서브셋에 찾고 있는 Font Awesome 아이콘의 이름을 추가한 뒤, 헤더에 버튼을 추가하는 메뉴에서도 동일한 구문을 사용합니다. 예를 들어 사용자 아이콘의 경우 단순히 "user"라고만 입력하면 됩니다.
아래 스크립트를 사용하여 링크가 새 탭에서 열리도록 설정할 수 있었습니다. “Head” 섹션에 다음 스크립트를 추가하기만 하면 됩니다.
<script>
document.addEventListener("DOMContentLoaded", function() {
const links = document.querySelectorAll(".custom-header-link.with-url");
links.forEach(link => {
link.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
const titles = {
"Documentation": "Enter URL Here",
"Downloads": "Enter URL Here",
"Source Code": "Enter URL Here",
"Dev Portal": "Enter URL Here",
"Slack Channel": "Enter URL Here"
};
const url = titles[this.getAttribute("title")];
if (url) {
window.open(url, '_blank');
}
});
link.setAttribute("href", "#");
});
});
</script>
도움이 되기를 바랍니다!
사이트 제목이 최소화되고 현재 토픽의 제목이 표시될 때(토픽을 아래로 스크롤할 때) 다른 뷰를 가질 수 있을까요?
드롭다운 헤더는 넓은 화면에서는 여전히 훌륭하고 많은 의미가 있지만, 작은 화면에서는 그렇지 않다는 것을 알게 되었습니다. 따라서 display: none을 사용하는 것이 유용할 것이며, 데스크톱에서는 이미 max-width: 712px일 때 그렇게 처리되어 있습니다.
감사드리며, 많은 인사 드립니다. 
2개의 좋아요
모바일에서 드롭다운 헤더만 표시하는 방법이 있을까요?
아래와 같이 시도해 봤습니다:
/* 기본 스타일 - 헤더 버튼 숨기기 */
.header-buttons {
display: none;
visibility: hidden;
}
/* 모바일 기기를 위한 미디어 쿼리 */
@media screen and (max-width: 767px) {
.header-buttons {
display: inline; /* 레이아웃에 따라 display: inline-block;도 가능 */
visibility: visible;
}
}
이 방법은 작동하지만, 헤더에 있는 다른 요소들(예: GitHub - discourse/discourse-header-search · GitHub )은 여전히 드롭다운 헤더가 있는 것처럼 축소된 상태입니다…
무엇을 놓치고 있는 걸까요?
감사합니다
1개의 좋아요
아마도 사용자 설정이 덮어씌워진 것 같습니다.
visibility는 필요하지 않으며, 다음과 같이 하면 됩니다:
.header-buttons {
display: none !important;
}
2개의 좋아요
보안 기능 사용에 대한 질문:
이 기능을 사용 중이라면, 메뉴에 접근할 수 있는 보안 그룹이 하나 이상일 수 있나요?
우리의 예시: 여러 교육 프로그램(각 프로그램마다 여러 학년/클래스 그룹이 있음)을 운영하고 있습니다. 각 클래스 그룹은 고유한 보안 그룹을 가지며, 이를 통해 해당 교육 자원에만 접근할 수 있도록 설정합니다(다른 프로그램/학년도를 위한 자원에 접근하지 않도록 방지). 각 학년 그룹은 자신의 클래스를 위한 고유한 카테고리(Category)를 가집니다.
각 클래스가 자신의 카테고리에 접근할 수 있도록 메뉴를 생성해야 하지만, 동시에 학생들의 보안 그룹에 속하지 않은 교육 팀이 해당 공간에 접근할 수 있도록 해야 합니다.
현재 제가 볼 수 있는 두 가지 해결책은 다음과 같습니다:
- 직원과 각 클래스를 결합한 보안 그룹을 생성하기 (보안 그룹에 대한 복잡성을 줄이고 싶지, 늘리고 싶지 않아서 번거롭습니다)
- 메뉴를 복제하여 학생 그룹용 메뉴 하나와 직원 그룹용 메뉴 하나를 생성하기
이 두 가지 방법 모두 이상적이지 않습니다.
다음 질문: 서브메뉴 항목에 보안 기능을 추가하는 것은 어떻게 될까요?
(제 예시에서는: 이는 다양한 과정/클래스 그룹을 위한 하나의 메뉴를 가지고, 학생들에게는 해당되는 서브메뉴 항목만 표시할 수 있음을 의미합니다. 현재는 관리해야 하는 최상위 메뉴가 약 5~6개 있습니다)
1개의 좋아요
이 Theme Component는 사용 사례에 맞지 않으므로, 대안을 찾아보시는 것을 권장합니다.
대신, 단순히 class categories를 default_navigation_menu_categories 사이트 설정에 넣으시는 건 어떨까요?
관리자로 계신 경우 모든 항목이 표시되지만(해당 뷰를 개인화할 수 있음), 클래스 멤버와 스태프에게는 사이드바에 액세스 권한이 있는 항목만 표시될 것입니다.
제가 문제를 정확히 이해했다면, 이 방법이 꽤 잘 작동할 것입니다.
2개의 좋아요
네이선님,
카테고리를 설정했습니다. 하지만 페이지 상단에 메뉴도 필요합니다. 사용자들은 상단 메뉴에 익숙합니다. 커뮤니티 자체가 학습 곡선이 가파른데(우리 학생들에게 완전히 새로운 기술 우주까지 만들 수는 없으니까요), 메뉴가 없으면 더 복잡해집니다.
또한, 메뉴에서 외부 사이트로 링크할 수 있어야 하는데(특히 Discourse에 구조화된 라이브러리가 없어서 SharePoint 사이트를 이용하고 있습니다), 카테고리로는 이런 기능을 구현할 수 없습니다.
솔직히 말해서, 여러 보안 그룹이 하나의 메뉴를 볼 수 있도록 허용하는 기능(카테고리에서 여러 보안 그룹을 허용하는 방식과 동일하게)이 있다면 훨씬 쉬울 것입니다. 하지만 불가능하다면 다른 방법을 찾아야 할 것 같습니다.
1개의 좋아요
2개의 좋아요
더 이상 이 프로젝트를 유지보수하지 않으므로 #unmaintained로 표시했습니다.
하지만 PR을 보내주시면 검토하겠습니다. 직접 시간을 내거나 기술을 갖추기 어렵지만 수정을 원하고 예산이 있다면, Marketplace 채널에 게시하는 것을 고려해 보세요.
4개의 좋아요
저도 이로 인해 문제가 발생하고 있습니다. 살펴봤지만, 제 기본적인 CSS 해킹에는 너무 복잡합니다.
3개의 좋아요
컴포넌트를 현대화하기 위해 PR을 올렸습니다. (@davidkingham 후원) 
이 과정에서 제가 발견한 몇 가지 UX 문제도 함께 수정했습니다.
이 컴포넌트는 더 많은 개선이 필요합니다. 기회가 되면 또 다른 PR을 올릴 수 있습니다. 제가 짚어본 몇 가지 개선 사항은 다음과 같습니다:
json_schema설정 유형을objects유형으로 교체- 링크를 새 탭에서 열 수 있는 옵션 추가
- 접근성 향상
10개의 좋아요
고맙습니다 @Arkshine - 정말 훌륭한 작업입니다!
4개의 좋아요
이 테마 컴포넌트를 사용하는 사이트에서 치명적 오류가 발생하고 있습니다 
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'trim')
at get source (custom-icon.gjs:20:24)
...
3개의 좋아요
아. 해당 문제를 수정하기 위해 PR을 만들었습니다. 보고해 주셔서 감사합니다!
병합 완료!
7개의 좋아요
훌륭한 컴포넌트이며, 뛰어난 작업에 감사드립니다! 노고와 전문성에 감사드립니다. 현재 드롭다운이 메인 헤더 항목과 한 단계의 하위 항목(예: 헤더 항목 → 링크)을 지원하고 있음을 확인했습니다. 헤더 항목 → 하위 항목 → 링크처럼 한 단계 더 추가할 수 있을까요?
2개의 좋아요
@angus 발견한 비추천(deprecated) Font Awesome 아이콘 이름을 업데이트하기 위해 PR을 열었습니다:
2개의 좋아요
고마워요 @kelv 
3개의 좋아요
호라이즌에서 작동해야 하나요, 아니면 무언가를 변경해야 하나요?
이 플러그인은 블로그가 있거나 관련 앱이 더 많은 커뮤니티에 필수적입니다.