Link to Header in Markdown / Section of Page

In GitHub, link to header / section of page is shown when point to it.

Is there a way of doing this in zola?

Screenshot 2021-03-23 110643

What you are looking for is at: Internal links & deep linking | Zola

To recap the documentation, at very the minimum you’ll need to use the insert_anchor_links variable:

This option is set at the section level: the insert_anchor_links variable on the section front matter page.

This value can be “left”, “right” or “none”, which is the default, that’s why you don’t see the anchor links by default.

If you want to have the exact styles as Github, you’ll need to customize the anchor link:

The default template is very basic and will need CSS tweaks in your project to look decent. If you want to change the anchor template, it can be easily overwritten by creating an anchor-link.html file in the templates directory.

This means creating the /templates/anchor-link.html file with content like below with the svg from Github:

<a class="anchor" aria-hidden="true" href="#{{ id }}" aria-label="Anchor link for: {{ id }}"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>

Then, you’ll need to replicate the Github’s styles so your anchor is:

  1. Invisible by default
  2. Visible on hovering on the heading
  3. Have a negative margin so it extrudes to the left

Hope this is helpful to you!
Let me know if you need further help figuring out the styles.

You can find a simplified version on my blog: Clojure higher-order functions explained: complement | Daw-Ran Liou
The commit is: Add heading anchor links · dawranliou/dawranliou.com@4972d74 · GitHub

Thanks, it works

1 Like