Dear all,
I hope all Good…
This is my code… please have a look
<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>
I want to append my html code (Leader Board) on Hamburger Section.
But this code is not working properly.
See the Image, Above code shows this result on Hamburger only when i opened hamburger section and reload… After closed and open the hamburger it’s not showing … please help me to fix this. I’m noob to discourse… Generally Programming Noob
Thanks in Advance .
1 Like
Bcat
May 22, 2020, 6:31am
2
I think you need to learn about handlebars connectors and api.onPageChange
<script type="text/x-handlebars" data-template-name="/connectors/abc/xyz">
{{mount-widget widget = "xyz"}}
</script>
api.onPageChange ((url, title) => {
});
The easy way is to look through a topic template.
decorateWidget
I was trying:
api.decorateWidget("hamburger-menu:generalLinks", _ => {
return [ { route: 'birthdays', label: 'birthdays.title' }, {route: 'another', label: 'another.title' } ];
});
<script type="text/discourse-plugin" version="0.8.18">
(settings.Hamburger_links || "").split("|").forEach(link => {
let [rawLabel, href, loc, target] = (link || "").split(",");
let className = `custom-hamburger-link ${rawLabel.replace(/\s+/g, "-").toLowerCase()}`;
loc = "f" === loc ? "footerLinks" : "generalLinks";
target = "blank" === target ? "_blank" : "";
api.decorateWidget(`hamburger-menu:${loc}`, () => {
return { href: href, rawLabel, className: className, attributes: {"target": target} }
});
});
</script>
So, you want to create Discourse themes? Not sure where to start? Or maybe you have created Discourse themes before, but want to learn how to do even more cool things. Well, you’ve come to the right place
Continuing the discussion from Plugin Outlet Locations :
I needed an updated version with all the plugin outlets that have been added recently and then I realised that it would be really easy to create a theme component for this, so there is no need to install a plugin any more.
https://github.com/communiteq/plugin-outlets-theme-component
The readme includes a script that will auto-generate the outlets based on the Discourse source code.
#!/bin/bash
grep -r plugin-outlet /var/www/discou…
6 Likes
Bcat Thanks Dear … Surely i will learn all you mentioned and post solution here.
2 Likes
