How to make static files like /site.webmanifest or /browserconfig.xml dynamic?

support
1

Favicon generators like https://realfavicongenerator.net will create these files for you. They control the “theme color” for the site (among other things), used for bookmark and scroll colors in some browsers. This color is hard-coded, e.g. in browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <TileColor>#0d6efd</TileColor>
        </tile>
    </msapplication>
</browserconfig>

I want to parameterize these files so theme users can customize them, e.g.:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <TileColor>{{ site.Params.theme_color | default "#0d6efd" }}</TileColor>
        </tile>
    </msapplication>
</browserconfig>

However, these files aren’t processed by Hugo as templates, and the above template attempt is served as-is.

How can I do this? Is it possible?

2

#1 For generating dynamic favicons, you could save the high resolution image on assets folder (as a site resource), and then using Hugo image processing method to resize it into multiple sizes.

I wrote a favicons’ module for this a few months ago, the source code could be found on hugo-mod-seo/index.html at main · razonyang/hugo-mod-seo · GitHub

#2 See Custom Output Formats | Hugo for creating custom files.

1 Like
3

Yes. For single files like this it can also be practical to just use resources.ExecuteAsTemplate etc. Custom Output Formats is more useful for use cases ala “output every section to both HTML and RSS”.

1 Like
4

I should mention that /site.webmanifest and /browserconfig.xml aren’t mentioned by any other file, so currently they’re in /static. Even favicon.ico is mentioned in HTML, so I know how to parameterize/process in that case.

@razon For #1, dynamic favicons isn’t a concern in my case. For #2, I don’t see there how to, for example, make /static/browserconfig.xml (or any other file, like /assets/browserconfig.xml) into a template that renders to web path /browserconfig.xml. The XML file type is already known to Hugo, but there’s no possible corresponding “page” for browserconfig.xml in /content that I’m aware of.

@bep I assume you mean move browserconfig.xml into /assets, then resources.Get it, then pass it to resources.ExecuteAsTemplate? That has to run inside a template; which one would it be?

5

Example of using resources.ExecuteAsTemplate.

// assets/browserconfig.xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <TileColor>{{ site.Params.theme_color | default "#0d6efd" }}</TileColor>
        </tile>
    </msapplication>
</browserconfig>

// your partials.
{{ $bc := resources.Get "browserconfig.xml" }}
{{ $bcURL := "browserconfig.xml" }}
{{ $bc = $bc | resources.ExecuteAsTemplate $bcURL . }}
<meta name="msapplication-config" content="{{ $bc.RelPermalink }}" />

If you don’t want to generate the meta tag, use {{ $bc.Publish }} instead of <meta name="msapplication-config" content="{{ $bc.RelPermalink }}" />.

See Asset Publishing.

3 Likes
6

For short template snippets, you could also inline them:

{{ $templ := `
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <TileColor>{{ site.Params.theme_color | default "#0d6efd" }}</TileColor>
        </tile>
    </msapplication>
</browserconfig>
` }}
{{ $targetPath := "browserconfig.xml" }}
{{ $res := $templ | resources.FromString $targetPath | resources.ExecuteAsTemplate $targetPath }}
{{ $res.RelPermalink }}

There’s probably typing error(s) in the above.

3 Likes
7

I took another look at my code, and realized I was wrong, those files are indeed referenced within templates, so it was a simple matter of using resources.ExecuteAsTemplate, as you both said. Thanks for helping me figure this out!

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.