absURL function seems to eat HTML anchor-links

support
1

I noticed this in Hugo 0.55.6 as well as the latest 0.56.0. If I’m using a template like:

 {{ with .Site.Menus.main }}
   <nav id="sidebar">
       <ul>
         {{ range . }}
           <li><a href="{{ .URL | absURL }}">{{ .Name }}</a></li>
         {{ end }}
       </ul>
   </nav>
 {{ end }}

which is populated with data like so:

[[menu.main]]
        name = "Home"
        url  = "/"
        weight = 10

[[menu.main]]
        name = "Jukebox"
        url  = "/#jukebox"
        weight = 5

[[menu.main]]
        name = "OtherLink"
        url  = "/somediff.html#anchor"
        weight = 0

Hugo will generate HTML like:

<nav id="sidebar">
<ul>
		
<li><a href="http://localhost:1313/">Home</a></li>
<li><a href="http://localhost:1313/">Jukebox</a></li>
<li><a href="http://localhost:1313/somediff.html">OtherLink</a></li>

  </ul>
</nav>

i.e., it’s eating the anchor-links. I would expect the href’s to generate like:

<li><a href="http://localhost:1313/">Home</a></li>
<li><a href="http://localhost:1313/#jukebox">Jukebox</a></li>
<li><a href="http://localhost:1313/somediff.html#anchor">OtherLink</a></li>

I do note that if I swap out “absURL” for “relURL”, it does seem to work as expected, but I wanted to know if the community thought this was a bug, or if I was just thinking about absURL incorrectly.

2

There has always been some kind of URL sanitation in Hugo for various scenarios and it has been like this for a long time (before 0.55.6).

I don’t think that you need absURL for anchor links. Why make them point to an absolute URL? They just point to the same page, it’s not like they are indexed by search engines.

I’ve always used relative URLs for anchor links in projects.

3

Interesting. I would think an absolute link would be, well, ‘absolute’ with minimal sanitization/modification, personally. If “relURL” is the preferred nomenclature, happy to stick with it.

Thanks so much for the feedback!

4

I’ll provide an example where I wanted this behavior.

I’m hacking out a quick web project, and my top level navigation has links to certain parts of the main page (index#about, index#learn-more), I only have one other page (a contact page), but it completely breaks my nav, since my contact page obviously doesn’t have all the same anchor tags as my index page (e.g. /contact#learn-more). I’d like to link them back to my absolute url + anchor.

I understand this may not be a “good” design, but restricting this functionality feels a bit weird. Kind of like enforcing a UX decision in my tech stack.

I was able to use print to concat the base URL with the .URL param I wanted, so wasn’t a big deal.

1 Like