Modifying head_tag.html template

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 discourse/app/assets/javascripts/discourse/templates at master · discourse/discourse · GitHub

4 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.

discourse/application.html.erb at eae22548de4eedad875555e7353b8abfdce2452b · discourse/discourse · GitHub

with a another file that’s loaded as a partial here

discourse/_head.html.erb at eae22548de4eedad875555e7353b8abfdce2452b · discourse/discourse · GitHub

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.

8 Likes