I am working on a custom theme and am a little confused regarding how I can access/edit what’s in the <head>. I see the file head_tag.html, and of course when you edit it, it overrides the existing template. Cool, but how do I find the existing content? I’ve read and re-read this: Developer’s guide to Discourse Themes and also looked through https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates
5 Likes
While you can add to it - like you’ve already discovered - you can’t modify the existing contents of the <head> tag in a theme because it’s generated based on .erb files and themes don’t have access to that.
with a another file that’s loaded as a partial here
It’s possible that there maybe JavaScript workarounds to achieve what you’re trying to do. I might be able to advise if you can give me a simple example of the desired changes.
5 Likes
Hi Joe, the Theme CLI tool creates the head.html file. So if it practically can’t be used, I am confused as to it’s purpose?
Initially I wanted to import fonts via a <link> tag in the head, but I resolved that with a CSS import instead.
3 Likes
Thanks for clarifying.
What you want to do is actually possible in a theme. I initially thought you were trying to modify the existing tags in the document <head> tag that are added by Discourse.
A theme can add arbitrary tags to the document <head> tag without issues. That’s the purpose of the head_tag.html file that the Theme CLI generates.
The head_tag.html file correlates to the </head> tab in the theme editor
Any valid html you add there will be injected in the document <head> tag. Notice that I said injected - you don’t override the existing tags, your html just gets added to them. It would be added here (simplified screenshot)
So if you want to add a <link> tag for a font like this one for example
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
you would just need to add it to the head_tag.html file that the Theme CLI generates and it should show up. (simplified screenshot)
Do note that unlike CSS changes, this requires a page refresh to actually work.
Let me know if you need any clarification.
9 Likes