Please help with setting up ToC (Table of content)

I know there are several topics about it on the forum, but all of them require certain coding experience that I don’t have.

Is there any tutorial or a simple way of setting up a table of content for a post, linking to H1/H2 titles?

Thanks!

Are you using the default theme? If so, I have some ready made code you can use.

Thank you for the quick respond.

Yes, currently I am using the default (Casper) theme. But planning on buying a different theme once I finish migrating all my content.

How does the theme effect the table of content, if I may ask.

By itself, it doesn’t. I just have ready-made code in my custom theme.

Check out this page from Grant Winney re: implementing a ToC:

2 Likes

I am trying to follow the guide you’ve linked above.

Step number 3 - what does it mean to “Call it” from wherever I want to display it?

Got it working! Thank you so much @Torqu3Wr3nch !!!

Small question, is there a way to locate the Table of Content after the 1st paragraph?

1 Like

Programatically, yeah…and I can help you with that if you want. In the meantime though, I think you should be able to get away with it simply inserting an HTML block into your post containing:

<div id="toc"></div>

And just make sure this script occurs below the content in your theme (heck, you can probably just put it as code injection in your footer):

{{!-- Table of Contents --}}
<script type="text/javascript">
    var toc = document.getElementById('toc');
    toc.innerHTML = getTocMarkup(document);
</script>

The reason being that we need to the “toc” div to exist before the script is called so it actually has a chance of finding it. On a side note, I think this is where most people run into trouble. JavaScript race conditions can really do a number on you.

-TorqueWrench

1 Like

I did follow your advise, and the ToC now works perfectly, I just want to figure out how to separate only the first paragraph for example:

Sorry for my 2nd grade fashion of explaining thing, I just have zero clue with code, still super excited i succeed in implementing it!

I really appreciate all your help

1 Like

The pictures are perfect. I get what you mean (I think), you want that TOC to appear below the first paragraph, correct?

What I’m saying to do is just, within the post editor, add an HTML block below the first paragraph manually, and then add <div id="toc"></div> inside it.

Should I remove <div id="toc"></div> from the post.hbs file?

Yep. I mean, I’d probably test it first to make sure it works (you should end up with two ToCs in that case) and once you know it does, delete it from the Handlebars (post.hbs) template.

If you don’t want to use code — and there’s good reason not to (it tends to break every now and then, do unexpected things with theme changes) — it can be interesting to hard-code a table of contents.

The way you do this is by creating your own headings, and then linking to them.

Instead of making a heading in the article, you add a HTML block. In the HTML block write <h2 id="heading1">This Is My Heading, and it's about Anchovies</h2>

Looks like this:

This Is My Heading, it's about Anchovies

Then, you link to it in your table of contents, linking to “#heading1” (without quotes). For example, here is a link to that heading, right here. (but it doesn’t work in this forum context)

Hey @bort12

TOC is very cool for SEO, but I think it is not something that can be automated, I like to enter the data manually as I program my posts.

To create a link menu for H Tags I use the HTML5 <details> code, this command will create an expandable menu with a title and text, an example below:

Example:

Content (Click to see)

Code:

<details>
    <summary>
       <strong><spam><i>Content</i></spam></strong> (Click to see)
    </summary>

    * [O que é?](#id-tag-h2)
    * [Necessidades](#id-tag-h2)
    * [A Quantidade Certa](#id-tag-h2)
    * [Outros Fatores](#id-tag-h2)
    * [Ferro na Dieta](#id-tag-h2)
</details>

You can use this template and insert it at the beginning of the article using the HTML field.

Hope this helps.

1 Like