#anchor url mapping within a page

support
1

I’m in the process of migrating a long page from an old website to Hugo. There are several headings in this page and heading IDs and anchor links are automatically generated by Hugo.

I’m happy with the way anchor links are generated by Hugo, however they’re different from the ones used by the original site. For example example.com/#old_anchor_1 to example.com/#new_anchor_1
We’ll need the original anchors to work while we make this transition. Is it possible to create some sort of mapping specific to anchor links within this page? For example

#old_anchor_1 --> #new_anchor_1
#old_anchor_2 --> #new_anchor_2
.
.
.

I’ve looked at the aliases but it seems to be limited to the page url itself.

NOTE: I’m aware that I can override Hugo’s auto-generated IDs and anchor links, but that’s not what I’m interested in here.

2

Look at Render Hooks, specifically:
https://gohugo.io/getting-started/configuration-markup/#heading-link-example

This will apply to every heading defined in markdown on every page.

If you just have a few transformations, you could create a map within the render hook template.

If you have many, perhaps create a JSON/TOML/YAML file in the data directory for the lookups.

3

I’m already using render hooks for headings. Can you elaborate how this mapping would work inside the render hook? I need both versions of #anchors to work so it’s not just a matter of assigning a different ID to the heading. I guess it needs to redirect one to the other.

4

Then create a non-visible element with the alternate anchor id directly before the heading element.

You might also consider handling the fragment redirects with JS.