푸터 메뉴를 반응형으로 만들 CSS를 작성했습니다. 모바일 기기로 이동하면 푸터 메뉴가 햄버거 메뉴와 유사한 형태로 디자인됩니다. 그래서 Edit Css/Html >> /head 섹션에 클릭 함수를 작성하여 모바일 뷰에서 메뉴를 토글하도록 했습니다.
여기서 클릭 함수는 디스커스(Discourse) 홈페이지에서는 정상적으로 작동했습니다. 하지만 요약(Summary), 포럼 계정(Forum Account) 등 일부 페이지에서는 스크립트가 차단되었습니다. 이로 인해 하위 메뉴를 볼 수 없습니다. 브라우저 소스에서 스크립트는 확인 가능합니다.
디스커스에서 일부 페이지에서 사용자 정의 스크립트 실행이 차단되는 이유는 무엇이며, 이 문제를 해결하는 영구적인 방법은 무엇인가요?
Discourse는 단일 페이지 애플리케이션입니다. 따라서 <head> 태그에 추가한 스크립트는 올바른 훅을 사용하지 않는 한 초기 페이지 로드 시에만 한 번 실행됩니다. 대신 이벤트 리스너를 추가하도록 코드를 조정해야 할 가능성이 높습니다.
코드를 공유해 주시겠어요?
이 문제를 해결하는 방법은 아마도 여러 가지가 있겠지만, 이번에는 올바른 커스터마이징 훅을 사용하여 “올바른” 방식으로 시도해 보겠습니다.
테마의 푸터 섹션에 HTML을 추가할 때 Discourse는 페이지 전환 시나 무한 스크롤로 더 많은 요소가 추가될 때 레이아웃이 흔들리지 않도록 처리를 수행합니다.
여기서 custom-html 컴포넌트로 추가됩니다.
컴포넌트 코드를 살펴보면, 렌더링될 때 앱 이벤트를 발생시키는 것을 볼 수 있습니다.
이것이 사용해야 할 훅입니다.
어떻게 사용하나요?
plugin-api에는 특정 앱 이벤트가 발생했을 때 코드를 실행할 수 있는 메서드가 있습니다.
이미 이벤트 이름을 알고 있으므로, 다음과 같이 사용할 수 있습니다.
api.onAppEvent("inserted-custom-html:footer", () => {
// 여기서 작업을 수행하세요
});
이것은 플러그인-API 메서드이므로, 스크립트 태그의 type을 다음과 같이 text/discourse-plugin으로 변경해야 합니다.
<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
// 여기서 작업을 수행하세요
});
</script>
위 스니펫은 푸터가 렌더링될 때마다 실행됩니다. 따라서 이제 다음과 같은 작업을 수행할 수 있습니다.
<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
$(".footer-div #footerNavDiv").click(function () {
console.log("click event captured");
// 클릭 이벤트에 대한 작업을 여기서 수행하세요
});
});
</script>
플러그인-API에 대한 자세한 내용은 여기에서 읽을 수 있습니다.
멋지네요, 감사합니다 