# ハンバーガーセクションにHTMLコードを追加する方法を教えてください

**URL:** https://meta.discourse.org/t/help-me-to-append-html-code-on-hamburger-section/152297
**Category:** Support
**Created:** [2020 年 5 月 22 日午前 6:12 UTC](https://meta.discourse.org/t/help-me-to-append-html-code-on-hamburger-section/152297 "2020-05-22T06:12:34Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Praba\_Praba](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/praba_praba/32/156774_2.png) [@Praba\_Praba](https://meta.discourse.org/u/Praba_Praba)
#### Post date: [2020 年 5 月 22 日午前 6:12 UTC](https://meta.discourse.org/t/help-me-to-append-html-code-on-hamburger-section/152297/1 "2020-05-22T06:12:34Z")

</div>

皆さん、こんにちは。

お元気でしょうか。

こちらが私のコードです。ご確認ください。

```html
<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 は初心者です。プログラミングも初心者です 😇

 ![Leaderboard](https://global.discourse-cdn.com/meta/original/3X/6/0/607fd6ed0ea4efdd1de61996d6fff6a044a45f7c.jpeg)

よろしくお願いいたします。🙏

---

<div class="post-metadata">

### Author: ![Bcat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bcat/32/163148_2.png) [@Bcat](https://meta.discourse.org/u/Bcat)
#### Post date: [2020 年 5 月 22 日午前 6:31 UTC](https://meta.discourse.org/t/help-me-to-append-html-code-on-hamburger-section/152297/2 "2020-05-22T06:31:45Z")

</div>

**ハンドルバーコネクタ** と `api.onPageChange` について学ぶ必要があると思います。

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

```

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

```

簡単な方法は、トピックテンプレートを参照することです。

`decorateWidget`

> [@A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347/44?u=bcat):
>
> I was trying: api.decorateWidget("hamburger-menu:generalLinks", \_ =\> { return [{ route: 'birthdays', label: 'birthdays.title' }, {route: 'another', label: 'another.title' }]; });

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

> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

> [@(deprecated) Plugin outlet locations theme component](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673):
>
> mega the ability to debug plugin outlets is now included in core. Check out [this topic](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215) for more details play_button Original theme component info

---

<div class="post-metadata">

### Author: ![Praba\_Praba](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/praba_praba/32/156774_2.png) [@Praba\_Praba](https://meta.discourse.org/u/Praba_Praba)
#### Post date: [2020 年 5 月 22 日午後 12:51 UTC](https://meta.discourse.org/t/help-me-to-append-html-code-on-hamburger-section/152297/3 "2020-05-22T12:51:05Z")

</div>

[Bcat](https://meta.discourse.org/u/Bcat) ありがとうございます。確かに、あなたが挙げたすべてを学び、ここで解決策を投稿します。