Use anchor links inside table of contents

[Emadmasroor]

Hello! I am using both jekyll-toc and jekyll-anchor-headings together. I have the following lines of code in my _layouts/page.html file:

{% include toc.html html=content %}
followed by
{% include anchor_headings.html html=content anchorBody="#" generateId=true %}

and this 1) generates a table of contents at the top of my page and 2) adds anchor links to each section heading. However, I'd like my table of contents to use anchor links instead of full links.

Here's my repository and the page on which I'm rendering table of contents is here. As you can see, I do have a perfect table of contents, but the links in the table of contents don't take me to the different parts of this page. Instead, they link to the full html page corresponding to each entry. Is there a way to do this?

I am using jekyll's collections to build this page.

[allejo]

Hi! Glad to see you're using the sister projects together 😄

Alright, this is very likely happening because of the way that you are generating your headings.

summaries.md

{% assign sorted_chapters = site.GPI_chapters | sort:"chapter" %}
{% for entry in sorted_chapters %}
  <h3>
    <a href="{{site.baseurl}}{{entry.url}}">
      {{ entry.title }}
    </a>
  </h3>
  <p>{{ entry.content | markdownify }}</p>
{% endfor %}

The way that toc.html works is it pulls out whatever is in between <h#></h#> and adds it to the TOC; in this case, it pulls out the link. Then when it tries to make it a link to point to the anchor (i.e. the # thing) but it fails to do so. To fix this, make use of the sanitize parameter and that should fix your problem.

{% include toc.html html=content sanitize=true %}

[Emadmasroor]

Hi @allejo -- thanks for looking into this. Unfortunately, adding sanitize=true seems to strip away the link from the t.o.c. completely. Now there is neither an anchor link nor a regular link. You can see this on my rendered page here.

I'm happy to make some changes to the way I generate my summaries.md page (as long as I can use a for-loop) if it will help solve this problem.

[allejo]

Alright, attempt number two! It's a step in the right direction. Allow me to amend my previous answer and explain another behavior of the TOC snippet. As mentioned, it will pull out all of the content from inside the <h#></h#>. Another step is to extract whatever attributes the <h#> contains; namely, the id for said heading.

In your case, you are generating your headings manually without IDs and this is what content is set to and is being fed into toc.html. So toc.html doesn't see the id attributes so it renders the TOC but doesn't have an id to link to so it just renders the content.

This same id-less headings content is what you are feeding into anchor_headings.html and telling it to generate IDs for you; so this will create the correct HTML with ids when the page is rendered.

To fix this, run anchor_headings.html first, save that into a variable, and feed that modified content with headings into toc.html.

<div class="post-content">
    {% capture post_content %}{% include anchor_headings.html html=content anchorBody="#" generateId=true %}{% endcapture %}

    <!-- Make sure to feed content **with** heading ids to correctly generate the TOC -->
    {% include toc.html html=post_content sanitize=true %}

    <!-- Render the content since you are just capturing it up above -->
    {{ post_content }}    
</div>

[Emadmasroor]

Perfect! this works. Thank you so much!