Photo by Brett Jordan on Unsplash

Add anchor links to headings in Hugo

An anchor link is a link, which allows the users to flow through a website page. When readers land on a page, they want to know instantly if the information it contains is useful or relevant to their search. It helps to scroll and skim-read easily. A named anchor can be used to link to a different part of the same page or to a specific section of another page. They will allow you to “jump” up or down a sizeable passage of text.

This code snippet makes it possible to automatically add linkable anchors to HTML headings in Hugo. The anchors are named based on the heading text and are used to link directly to any element on a web page that has been assigned an id. Just replace {{ .Content }} with this code snippet in default single layout:

Originally published at https://ronaldsvilcins.com on December 16, 2021.

--

--

I drink a lot of tea and build beautiful websites. If you are looking to work together or just start a conversation 👉 https://www.ronaldsvilcins.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ronalds Vilcins

I drink a lot of tea and build beautiful websites. If you are looking to work together or just start a conversation 👉 https://www.ronaldsvilcins.com/