디스커스 헤더로 드롭다운 메뉴 추가하는 방법

제품 지원
1

Discourse 플러그인 API 구성 요소를 사용하여 헤더 메뉴를 추가했습니다. 하지만 해당 헤더에 드롭다운 메뉴를 추가하는 방법에 대해서는 전혀 모르겠습니다.

Discourse API 플러그인 또는 기타 방법으로 Discourse 헤더에 드롭다운 메뉴를 추가할 수 있을까요?

아래와 같은 출력을 기대하고 있습니다.

Discourseheaders
Discourseheaders699×188 15.5 KB

2

이 테마 컴포넌트를 살펴보는 것이 좋을 수 있습니다: Header Submenus. 이 컴포넌트를 사용하면 서브메뉴가 있는 헤더 메뉴를 만들 수 있습니다. 해당 컴포넌트를 그대로 사용하거나, 자체 컴포넌트를 만드는 방법의 예시 코드로 참고할 수 있습니다.

3

테마 컴포넌트를 확인해 보았습니다.

현재 헤더와 서브메뉴는 Discourse 헤더 앞에 추가되어 있습니다. 아래에서 표시한 Discourse 헤더에 헤더와 서브메뉴가 추가되어야 합니다.

HeaderSubmenu
HeaderSubmenu552×232 17.9 KB

4

저는 discourse 플러그인 API 이벤트를 통해 커스텀 HTML을 삽입하는 방식으로 이 문제를 해결했습니다.

먼저 “Custom Header Links” 구성 요소를 설치하고 헤더를 평소처럼 설정했습니다. 그런 다음 헤더 DOM 요소가 로드되면 아래처럼 discourse API 이벤트를 사용해 헤더에 커스텀 HTML을 삽입했습니다.

api.onPageChange(url => {
    	if($(".header-buttons").length != 0 && i == 0) {
            $('.custom-header-links .services-custom-header-links a').append("inserting icons");
            $(".header-buttons").prepend("adding ul tag elements");
            $(".resource-dropdown-menu").after("appending next ul element using first inserted ul element class name");
            i++;
        }
    });

이 방법을 사용하면 헤더 DOM에 서브메뉴를 추가할 수 있습니다. 하지만 정렬 문제가 발생하므로 CSS를 통해 정렬을 유지해야 합니다. 또한, 서브메뉴를 열기 위한 클릭 함수와 헤더 배경색 변경 등도 작성해야 합니다. 감사합니다 :slight_smile: