Hilfe beim Anhängen von HTML-Code an den Hamburger-Bereich

Unterstützung
1

Hallo zusammen,

ich hoffe, bei euch ist alles gut.

Hier ist mein Code – bitte schaut mal drüber:

<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>Leaderboard</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>

Ich möchte meinen HTML-Code (Leaderboard) im Hamburger-Bereich anhängen.

Aber dieser Code funktioniert nicht richtig.

Siehe Bild: Der obige Code zeigt das Ergebnis im Hamburger-Bereich nur dann an, wenn ich den Hamburger-Bereich öffne und die Seite neu lade. Nach dem Schließen und erneuten Öffnen des Hamburger-Menüs wird er nicht mehr angezeigt. Bitte helft mir, das zu beheben. Ich bin noch neu bei Discourse und generell ein Programmier-Anfänger :innocent:

Leaderboard
Leaderboard466×494 45.9 KB

Vielen Dank im Voraus. :pray:

2

Ich denke, du musst dich über Handlebars-Connectors und api.onPageChange informieren.

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

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

Der einfachste Weg ist, sich eine Topic-Vorlage anzusehen.

decorateWidget

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

3

Bcat Vielen Dank, Lieber .. Ich werde sicher alles, was du erwähnt hast, lernen und die Lösung hier posten.