In GitHub, link to header / section of page is shown when point to it.
Is there a way of doing this in zola?
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_linksvariable 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.htmlfile in thetemplatesdirectory.
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:
- Invisible by default
- Visible on hovering on the heading
- 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