Link to headers?

[jarrodscott]

Hi. Awesome theme. Is there a way to include links to headers within a page? Thanks!

[jbub]

Hello @jarrodscott what do you mean by headers ?

[jarrodscott]

hello @jbub

Sorry for not being more clear.
For example, if I have something like this somewhere in a post:

## Header 1

Some text....

## Header 2

More text...

What I would link to do is add an anchorjs-link to each header. This page has an example of what I mean.

I am probably using some of the terminology incorrectly but I hope this makes more sense. What I am not sure about is whether this is a feature I can add to the theme or not. Thanks for your help.

[jbub]

Ah i see, do you know of any other Hugo themes that support this ? I mean hugo already generates ids for headers, we would just have to add the classes right ?

[jarrodscott]

The only other theme I have much experience with is Hugo Academic which is where I got the idea. I am doing some digging now and will let you know what I find. I'm a bit new to Hugo :)

[jbub]

Okay keep me posted :)

[jarrodscott]

Ok, I made some progress.

I found some code here and put it in a partial called links.html exactly like this.

{{- with .Content -}}
<div itemid="articleBody">
 {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor"> 🔗&#xFE0E;</a> ${3}` | safeHTML }}
</div>
{{- end -}}

I then tried putting this line {{ partial "links.html" . }} in the page/single.html. I tried several places in the file. It worked, i.e. headers with links. The problem is that I get a duplicate copy of the the entire content of the page. One part has links the other doesn't.

For example, if I do this:

{{ partial "header.html" . }}

<div class="container">
    <article class="post-container">
        {{ partial "links.html" . }}

        {{ partial "page-header.html" . }}

        {{ partial "page-content.html" . }}
    </article>
</div>

{{ partial "footer.html" . }}

I get this:

I have tried to place {{ partial "links.html" . }} in different locations but it always causes something like this to happen. So close!

FYI I added this to styles.css
.hanchor { font-size: 100%; visibility: hidden; color:silver;} h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible}

[jarrodscott]

I'm a little slow. Pretty sure {{- with .Content -}} is whats causing the doubling. I have another idea. More soon

[jarrodscott]

Got it to work for pages and posts by adding code to the page-content.html & post-content.html partial. Here is the code I added

    {{ with  .Content }}
      <div itemid="articleBody">
        {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor"> 🔗&#xFE0E;</a> ${3}` | safeHTML }}
      </div>
    {{ end }}

And to to the styles.css I added:

.hanchor { font-size: 100%; visibility: hidden; color:silver;}
h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible}

I could not get it to work when the post is *.Rmd. Works fine with .*md and *.Rmarkdown.

UPDATE: I should have mentioned that I am working in RStudio with blogdown. Anyway, I made a little hack to get this to work in .Rmd files.

At the end of my .Rmd file I added this:

<script src='https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.0/anchor.js'></script>
<script>
    anchors.add();
</script>

And to to the styles.css I added:

.anchorjs-link::after {font-size: 100%;background-color: transparent;content: "\1F517";}

[jbub]

Nice job, im going to close this one.