How to add hash symbol for ID attribute in config.toml when specificing a URL path

support
1

Hello,

I’m trying to add a header navigation link to an ID attribute on my page - the hrefs are stored as variables within the config.toml file and then used in my header.html partial.
However, it seems that “#” is not parsed at all, and the following doesn’t work:

config.toml

[[menu.main]]
name = "Why"
URL = "#why"

header.html

<a class="nav-link" href="{{ .URL | absURL }}">{{ .Name }}</a>

This produces an empty href attribute - basically anything after the “#” is omitted.

2

It’s a special case… I would try the following:

<a class="nav-link" href="{{ .URL | safeHTMLAttr }}">{{ .Name }}</a>
3

Thank you for the quick response, that’s indeed what I was looking for. Seems so obvious now. :sweat_smile:

4

I was wrong, that’s not what I’m looking for. I just quickly glanced over it before, but with safeHTMLAttr or safeURL I’m not getting a full URL with a base, but only the path or ID attribute reference. This creates a problem if I’m not on the home page.
What’s the best practice to include the base or absolute URL and the “safe” path/ID in this case?

5

Since the element with the corresponding ID exists only on the homepage, change you menu parameter to: URL = "/#why"

You need the forward slash so that Hugo knows that this link resides under the host root and in your case most likely the homepage (provided that it does not reside in a subdomain or subdirectory).

6

Thank you, using safeURL and forward slashes where necessary looks like a clean solution. :+1:

7

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