Creating anchors in Hugo pages

support
1

macOS 10.13.2 High Sierra
Hugo Static Site Generator v0.31.1 darwin/amd64 BuildDate: 2017-12-04T11:43:03Z
Firefox Quantum v57.0.1

Hello. I am trying to make a quick jump facility in one of my pages.

I have used the Markdown code:

#### Index

* [How to create a script to make a new Git repository]({{<ref "#gitnew" >}}) 
* [How to create a script to update an existing Git repository]({{<ref "#gitadd" >}})

This appears to answer one side of the question, but I cannot figure out what needs to be put in the code further down to act as anchors for these links.

I’ve looked through Links and cross references | Hugo and Daring Fireball: Markdown Syntax Documentation but I cannot find the solution.

Can anyone help please. Thanks in advance!

2

I don’t know if this is the recommended, idiomatic way of doing it, but I was able to sort this by specifying:

#### <a name="gitnew"></a>How to create a script to make a new Git repository

as the first link target, and

#### <a name="gitadd"></a>How to create a script to update an existing Git repository

as the second link target. Seems to work perfectly.

3

You can do it more succinctly by something like:

 ## Alpha 101 {#alpha-101}

Full example: https://raw.githubusercontent.com/kaushalmodi/ox-hugo/master/test/site/content/posts/link-to-headings-by-name.md

3 Likes
4

For headlines, Hugo generates anchors automatically, and for lists this method does not work.

5

Thanks @kaushalmodi that works nicely and is a lot neater and more succinct!

6

@Mikhail If Hugo generates anchors automatically for headlines how does one reference them? If one has to use the full wording of the headline, I think I would prefer the {#alpha-101} approach.

7

I open the “view sources” in the browser and copy the anchors from the page code into links.
Not very difficult.

8

I read that long anchors that repeat headlines text are positively evaluated by search engines.

9

@Mikhail I had worked out how to do that, thanks! It was more the neatness, or otherwise, of the solution, that I was concerned about, though I take your later point about the SEO.

10

@Mikhail Yes, I am aware of that. I was simply providing a better alternative to using the HTML a tags.

You can ignore the below details, might be of interest if interested in Emacs Org mode.

The .md file I linked above, though, is autogenerated using ox-hugo (Org, Emacs). I prefer to auto-insert the anchor specifiers even though Hugo auto-generates them, to implement cross-linking features in ox-hugo… like you see the same anchor being used in the auto-generated Markdown TOC (I know that Hugo also auto-generates, but there’s a good reason for this approach too), heading anchors, and then anchor references.

Here’s the Org source that generated that Markdown:

*** Link to headings by name :toc:headings:export_option:
:PROPERTIES:
:EXPORT_FILE_NAME: link-to-headings-by-name
:EXPORT_OPTIONS: num:t toc:t
:END:
**** Alpha 101
:PROPERTIES:
:UNNUMBERED: t
:END:
- Link (with description) to a heading with section number: [[* Beta 102][Link to
  /Beta 102/ heading]]
- Link (no description) to a heading without section number: [[* Zeta 103]].
  The space after that =*= in the link is optional.. so this also
  works: [[*Zeta 103]].
**** Beta 102
- Link (with description) to a heading without section number: 
  [[* Alpha 101][Link to /Alpha 101/ heading]]
***** Gamma 102.1
****** Delta 102.1.1
****** Epsilon 102.1.2
**** Zeta 103
:PROPERTIES:
:UNNUMBERED: t
:END:
***** Links (no descriptions) to headings with section numbers
- Section [[* Gamma 102.1]]
- Section [[* Delta 102.1.1]]
- Section [[* Epsilon 102.1.2]]

Source

@carlcaulkett Thanks. Glad I could help.

11

if your header is

## Create a new Hugo site

then use

[create a new hugo site](#create-a-new-hugo-site)

this will work in lists too

13

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