Add JS to website title

Hello. I would like to add some information from a JSON file to my website title. But I am a little bit lost in ‘title in hugo.toml vs. description on hugo.toml vs title on site’, I have to admit.

This is the repository:

When you google for “Pegel Konstanz” (German for “Level of Lake Constance”) the result on Google will show up as

“Pegel Konstanz (Bodensee) :: Aktuelle und historische …”

From what I understand, this is the combination out of title (“Pegel Konstanz - Bodensee”) and description (“Aktuelle und historische Informationen zum Pegel des Bodensees”). Whereby I am surprised about the “::”. This looks like I modified this.

In any case, I would like to adjust this to

“Pegel Konstanz (Bodensee) :: 362 cm (-1)”

The values for 362 cm (-1) are dynamic. I am pulling this info from
https://pegel-konstanz-for-website.s3.eu-central-1.amazonaws.com/json/currentdata.json

On my website, this is handled with
<span id="website_api_current_level_head">...</span> (<span id="website_api_change_vs_yesterday_head">...</span>)</h2>

See
https://github.com/davidbeckonline/pegel-konstanz_website/blob/main/content/_index.md?plain=1

I am not even sure, whether this can be achieved with my setup. It is just that other websites on Google are listed with dynamic information in the title. And that looks very convenient for a website, which is displaying current data.

I would appreciate any feedback.

The two colons are defined in your theme’s title.gotmpl partial.

You could change your JavaScript code in static/js/read_api_current_json.js so that it modifies the title instead of the span elements (or in addition to that).

Alternatively, modify said title.gotmpl after you’ve copied to the corresponding location in your layouts directory. That ensures that your modifications don’t get overridden by a subsequent theme update.

But given the complexity of your theme, I’d probably go with “modify JavaScript”.

Also, you could clean up your GitHub repository a bit. Eg, you’re git’ing your whole theme repository (it seems), including sample site etc. This is just eating space and making the structure more complicated than it needs to be.

1 Like

I also recommend to change the title with Javascript:

The theme’s title is not configurable in way to match your requirement and overriding the title.gotmpl partial may cause pain in the future. Also, due to the dynamics of river water levels, this would require you to run page generation every time the levels change.

1 Like