햄버거 섹션에 HTML 코드를 추가하는 법을 알려주세요

제품 지원
1

안녕하세요,

모두 잘 지내고 계신가요?

제 코드입니다. 확인해 주실 수 있을까요?

<script>
        $.getJSON("https://forum.example.com/directory_items.json?order=likes_received&period=monthly", function(data, status) {

            var base_url = window.location.origin;
        z0 = base_url + data.directory_items[0].user.avatar_template.replace("{size}", "24");
        z1 = base_url + data.directory_items[1].user.avatar_template.replace("{size}", "24");
        z2 = base_url + data.directory_items[2].user.avatar_template.replace("{size}", "24");
        z3 = base_url + data.directory_items[3].user.avatar_template.replace("{size}", "24");
        z4 = base_url + data.directory_items[4].user.avatar_template.replace("{size}", "24");
        z5 = base_url + data.directory_items[5].user.avatar_template.replace("{size}", "24");
        leader_body = '<h1>Leader Board</h1><br><img class="learder_rounded" src="' + z0 + '"><b>' + data.directory_items[0].user.username + '</b><br><img class="learder_rounded" src="' + z1 + '"><b>' + data.directory_items[1].user.username + '</b><br><img class="learder_rounded" src="' + z2 + '"><b>' + data.directory_items[2].user.username + '</b><br><img class="learder_rounded" src="' + z3 + '"><b>' + data.directory_items[3].user.username + '</b><br><img class="learder_rounded" src="' + z4 + '"><b>' + data.directory_items[4].user.username + '</b><br><img class="learder_rounded" src="' + z5 + '"><b>' + data.directory_items[5].user.username + '</b>';
        console.log(leader_body);
        $(".menu-container-footer-links").append(leader_body);

    });
    </script>

햄버거 메뉴 섹션에 제 HTML 코드(리더보드)를 추가하고 싶습니다.

하지만 이 코드가 제대로 작동하지 않습니다.

이미지를 참고해 주세요. 위의 코드는 햄버거 메뉴를 열고 페이지를 새로고침할 때만 햄버거 메뉴에 이 결과를 표시합니다. 햄버거 메뉴를 닫았다가 다시 열면 내용이 표시되지 않습니다. 해결 방법을 알려주시면 감사하겠습니다. 저는 Discourse 초보이며, 일반적으로 프로그래밍도 초보입니다. :innocent:

Leaderboard
Leaderboard466×494 45.9 KB

미리 감사합니다. :pray:

2

handlebars 커넥터와 api.onPageChange에 대해 알아야 할 것 같습니다.

<script type="text/x-handlebars" data-template-name="/connectors/abc/xyz">
    {{mount-widget widget = "xyz"}}
</script>

api.onPageChange ((url, title) => {
});

가장 쉬운 방법은 토픽 템플릿을 살펴보는 것입니다.

decorateWidget

https://github.com/hnb-ku/discourse-custom-hamburger-links/blob/master/common/header.html

3

Bcat 감사합니다. 말씀해 주신 내용을 모두 배우고 여기서 해결책을 공유하겠습니다.