Adding contents structure(TOC) to CMS

OK great thank you so much for this. :slight_smile:
But what do I do with the code exactly?

I tried multiple things. Such as putting the css in a custom html box and the javascript code in the body tags of the page. but all that happens in this:

@williamsbrad1994 You added the custom code to the custom code section but you didn’t add the opening or closing script tags. I updated the code block in my comment to include the tags. Place those in your custom code section in the body and the css in the head on your blog post collection page. I also noticed in your read only link that the table of contents div was removed. You’re going to have to add that back for this to work. The code is written to auto populate the div you named “div-block-38” on this page. So that div needs to exist in your template file. It searches through your rich-text-block (class main-blog-post) and looks for h2 tags. If you add an h2 to your blog post that title will auto populate the TOC and auto generate anchor links to the h2 tag. Publish the site to see the changes and send me the link to the published page if you run into any issues.

1 Like

WOW!

I literally cannot thank you enough.
That has literally worked perfectly in exactly the way I wanted to!
I just need to go through and reorganise the structure of all my pages now.

Just one other thing, do you know of any way to make it smooth scrolling once you click a link? As opposed to immediately jumping to the section?

Thank you again though! I’m very happy :smiley:

No worries. Just paste the following code INSIDE the <style> tag you created earlier. *I updated my previous code comment for you already.

html {scroll-behavior: smooth;}
2 Likes

perfect thank you! :smiley:

Heya :slight_smile:
A quick question, do you know how i can remove the numbers from the contents list?

I removed the following code, however there is still a gap now between the list item and the edge of the div block, clearly where the number once was:

.table-of-contents ol li {
counter-increment: myCounter;
position:relative;
}

Do you know what else I need to delete/change in order to have the listed items now inline with the word “contents”?

Thank you for your help, i have tried a bunch of alterations but can’t seem to get it to work!
below is a screenshot of how it currently looks …

Hey @williamsbrad1994

Haven’t dug into the code and officially I can’t make recommendations for custom code, but…

Ordered List is what ol stands for. This creates a numbered list.
An Unordered List is what you want ul which doesn’t have numbers.

In the code, replace anywhere you find ol with ul.

See here to learn more about the css spec.

unfortunately that doesn’t seem to have done it, but thank you for the suggestion :slight_smile:
@pixelsock?

What page is this on? The one I’m seeing still has the numbers. Either way you remove the indention by adding this to the css

.table-of-contents ol, .table-of-contents ul { padding-left: 0px; }

1 Like

Awesome thank you once again!
Is there not a lot of code that should be removed now so as to tidy it up and make it smaller ? :slight_smile:

I don’t think you need to worry about it. It’s not a ton of code and you can keep it incase you decide to revert in the future.

1 Like

Okay thank you.
I have noticed one pretty big issue though.
For many of the links, when you click them nothing happens.
Do you know why this might be?
In some posts it is most of the links :confused:

Hey @williamsbrad1994 sorry for the late response on this. I’ve been pretty swamped, but could you please provide me a couple of examples of blog posts that aren’t working as expected? It looks like you’re not use this TOC feature on every post so we should probably add an if statement to code to hide the TOC when unneeded. But either way, please send me a couple of links to blog posts that aren’t working. I also think you should consider changing the UI a little with this. It may be cool to have this sticky somehow.

1 Like

Heya! :slight_smile:
No problem, sure, tbh most posts seem to have a few links not working, however, the links that don’t work do change from time to time.
For example, just now I have tried this post and the “Miao Miao review” link isn’t working. However, before it was working.

That would be really cool if we could have it sticky somehow, I would love to hear your thoughts on how to implement that! :smiley:

@williamsbrad1994 I found a typo in your code. Looks like your live site starts the list code with a UL and ends it with an OL. So I added some comments to my code above to help you understand how to get what you’re looking for. I haven’t found a post where the link isn’t working yet to test if this is causing your inconsistencies, but either way we should fix that for sure. So just copy and paste my updated code above into your project and see if that fixes the pages in question. Also feel free to send over the links requested in the previous comment.

1 Like

So the code is pulling from your h2 content and populating your id attribute in your html dom. However, it’s not going to include spaces at the end of an h2 into the id field. For example the “Miao Miao review”, if you look at your post content from the editor there is a space after the “w” so try changing "Miao Miao review " to “Miao Miao review”. That seems to solve the issue when I make that change in the browser console.

For future debugging like this, you want to look at things that ARE working and compare them to other similar elements that are NOT working. I use chrome dev tools. So in Chrome, just right click a page and click “inspect” and you can see the html code that is being processed by webflow’s cms. As long as you don’t refresh your page you can test changes and troubleshoot this way. You can even add to and test custom javascript using the console table in the inspector.

So to recap: replace the code in your custom code section inside webflow (the code between the two " tags with my latest version and then go through your blog posts and make sure there are no spaces after your h2 titles.

1 Like

@pixelsock
Sorry but it looks like I never responded to this comment. But to confirm, it worked perfectly so thank you :smiley:

I had another quick question, is there a line of code I can add in, so that the TOC will give links to any h3’s as well? :slight_smile:

Very useful thread. Thanks everyone!