이 문제를 해결하는 방법은 아마도 여러 가지가 있겠지만, 이번에는 올바른 커스터마이징 훅을 사용하여 “올바른” 방식으로 시도해 보겠습니다.
테마의 푸터 섹션에 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에 대한 자세한 내용은 여기에서 읽을 수 있습니다.