I am brand spankin’ new at Discourse dev, and have been muddling along making a theme the last couple of days.
I’m stuck trying to use handlebars in after_header.html.
I would like the end result to be, directly below my header, a small banner that outputs the site description.
<div class="banner">
{{siteSettings.title}}
</div>
I know I need some sort of type=‘text/x-handlebars’ script call before hand but I have NO idea what should be in the data-template-name and nothing I’ve tried works. I also don’t want the title, I actually want the site description, but {{siteSettings.site_description}} doesn’t seem to work (I tried it in a template where handlebar was working). I’ve spent probably 2 hours researching this and I am just at a loss with this forum and how to find what I’m looking for.
Can anyone help?
3 Likes
This would be one way to do it, you can add all of this to your header.html file. Essentially you need to make the data available for use in your template. Connector classes are explained a bit here.
<script type="text/discourse-plugin" version="0.8">
const ajax = require('discourse/lib/ajax').ajax;
api.registerConnectorClass('top-notices', 'custom-content', {
setupComponent(args, component) {
$(function() {
ajax("about.json").then (function(result){ // get about.json
component.set('about-site', result.about); // set component with results of about.json
});
});
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/top-notices/custom-content" >
<p> {{about-site.description}} </p> <!-- Access description from about.json -->
</script>
This uses the plugin outlet called top-notices which is positioned similarly to after_header.html
There might be a simpler way, but this makes it easy to add a bunch of standard HTML in the template as well, and also makes it easy to pull in related content (anything that’s in about.json in this case)… for example {{about-site.title}}
10 Likes
Thanks for your help but I am still very lost. Sorry for the late reply, have not been back on this project for a bit.
I’ve added all the script provided here to my header.html but it’s outputting nothing, including my html around the {{about-site.description}}
Secondly, I don’t have a call in my about.json to get the short description because I couldn’t find what I’m supposed to put there to do that.
Any help you have would be appreciated. I’m still struggling with this.
Hmm, I just tried it again and it works for me. You have your site description filled out in your site settings? did you do a full refresh of the page? that would be necessary after adding the code above.
Just to clarify - I am attempting to go and get the SETTINGS Site Description that the site admin can fill out, so that they can change it if need be, and have the banner on their site update to match without needing a theme change.
Whoops, sorry I missed seeing your reply there, thanks for your quick response! Yes, I went and filled out my site description, and I’ve refreshed repeatedly.
Here’s my code, the canusemes are an attempt to see ANYTHING
And here’s my output. You can see CAN YOU SEE THIS FAYE at the top, verifying this change went up.
Well I MUST have had something wrong in my copy and paste because I just wiped the file and started over with it with your code and it popped in. It’s not in the right place, but I’m super happy to see the description in there!
Will see if I can get it into the right place after the nav. Not sure what I’m looking for to do that.
“below-site-header” will do it. Yay!
Thank you so much for your time Kris! I super appreciate this. You’re awesome.
1 Like
For future reference, it looks like the issue was here:
<div> {{about-site.description}} </p> </div>
^
You had a stray closing tag, which wouldn’t immediately break your site if it was plain HTML, but will cause an error and fail to render in handlebars.
In future, you can check your browser console (Ctrl + Shift + J in Chrome) to check for any error output.
5 Likes
Completely missed that. Thanks!
1 Like
