Hyperlinks in headers "leak" into header anchors

support
1

I’m not 100% sure that this will be recognized as a bug that needs to be fixed, so posting here before posting to the issue tracker, as the issue template advises. Originally, I reported this to the theme that I’m using:

Describe the bug

Header anchors contain the destinations of hyperlinks in the header. This makes them long and unreadable.

This forces me to avoid hyperlinks in headers, which by themselves are functional.

Reproducible example

## Example [hyperlink](https://example.com/) in a header

generates

Image

where the anchor at the right is #example-hyperlinkhttpsexamplecom-in-a-header

Expected behavior

I expected a short and pretty anchor, containing only the visible text:

#example-hyperlink-in-a-header

The same as the one generated from a non-hyperlinked version of the same header:

## Example hyperlink in a header

Desktop (please complete the following information):

  • OS: Kubuntu 24.10 (x64)
  • Browser: Firefox 134.0 (64-bit)
  • Hugo Version: 0.129.0 from the distro
  • Kayal Version: 0.3.4

As the Hugo issue tracker advises, I’ve also checked that this reproduces with the latest upstream Hugo 0.143.1 from Github Releases.

2

UPDATE: regarding side effects

The .Anchor per default is created using GitHub style. But without additional configuration Hugo will not create anchors for headings.

The theme uses it’s own Render Hook to conditionally include Anchors. These anchors are created using Hugo defaults.

[CAUTION] !!!

customizing that has some caveats

  1. The ID of the heading is still the old one. So you may not use “copy link” on the anchor in a browser to have a link to the heading!

  2. if you change the ID, too - this solves 1) BUT the standard {{ .TableOfContents }} will then point to an inaccessible (the original) ID. Which means your links in the TOC are broken.
    To get that work you’ll also have to implement your own TOC

this is more or less some sugar at first glance - but on the long run I would recommend against. Linking to an external page from within a heading for me has a smell.

If you really want to go that way:

To change this behavior you will have to customize the render hook.

Create a copy of the themes render hook in your_site_root/layouts/_default/_markup/render-heading.html and adjust it to not use the .Anchor filed but generate it yourself.

That one should do the trick using .PlainText | anchorize instead of .Anchor

{{ $showAnchor := .Page.Params.showHeadingAnchors | default (.Page.Site.Params.showHeadingAnchors | default true) }}
<h{{ .Level }} id="{{ $Anchor }}">
  {{ .Text | safeHTML }}
  {{ if $showAnchor }}
  <a hidden class="anchor" href="#{{ .PlainText | anchorize }}">{{ partial "icon.html" "link" }} </a>
  {{ end }}
</h{{ .Level }}>

references:

3

https://github.com/gohugoio/hugo/issues/13401

4
ignore

… sry… eye scan the text failed :blush:

5

There’s no contradiction here. That’s a separate issue about misbehaving ToC entries, rather than my preferences for generated header ids and anchors. Although, both are related to hyperlinks in headers

1 Like
6

Please create a new GitHub issue, referencing this forum topic and https://github.com/gohugoio/hugo/issues/13401. Please reference https://github.com/gohugoio/hugo/pull/13404 as well, where this is handled nicely with dt elements.

7

Created Hyperlinks in headers “leak” into header anchors · Issue #13405 · gohugoio/hugo · GitHub

8

Supposedly fixed by #13404. (not sure, I haven’t checked yet)

That is not the case. I was stating that, for a new feature in the next release where we can optionally add id attributes to dt elements, the id generation does not have the problem you describe.

Please remove that line from the issue. Thanks!

9

Done. Sorry for the misunderstanding

1 Like
10

No problem. Thanks for logging the issue.

11

Fixed in Hugo 0.144.0

1 Like
12

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