Does anyone know how I might go about implementing a contents structure for my posts, like on this post here: (FYI, not the first set of links, but the “table of contents” slightly further down)
So, essentially some sort of way to automatically take all h2 tags and add them to a contents at the top that then linked down to the relevant section upon being clicked.
I already have this feature of some posts, such as:
However, the way I’ve done it is very clunky and involves pasting each section individually into the CMS.
However, this workaround is no longer possible as our ads company are unable to serve ads to these posts, seeing as content is individually being nested inside of too many divs.
Hi again. I don’t think i can help you with this. What you want to do is to build i TOC inside the RTF field in the CMS. There is no support for that. I did some quick resarch about RTF and TOC. Not sure that will work. i suggest you do some reading about this on the Internet.
Maybe there is another member that can help you??
Good luck with this, and if you find a solution pls tel me know
If I’m understanding correctly, you’ll need to setup custom fields for the blog like this.
Name (default name field for cms item)
Description (text field) for SEO & site search
Section 1 Title (text field)
Section 1 Body (rich text field)
Section 2 Title (text field)
Section 2 Body (rich text field)
Section 3 Title (text field)
Section 3 Body (rich text field)
Section 4 Title (text field)
Section 4 Body (rich text field)
and so on for all 10 or however many you want
Then you’ll create the HTML structure. Use section elements and give them IDs that like “section-1”. Inside each section place an H2 and Rich Text that you bind to the corresponding data in the CMS. You may want to use conditional visibility to hide sections that may not be in use for example is some posts have less than 10 sections
Now create the table of contents. Inside you can use text links, buttons, or link blocks as per your design choice. Create 10 of them and give them anchor tags in the url setting to match your sections. So link 1 would get “#section-1” in the url field and so on. Then bind the name of each link to the corresponding section title.
I’ll add some links below for further reading on how to do these things.
Additional Tips:
Add an image field for each section if you’d like to be able to style an image that provides a break between sections or to place behind section titles.
Add an Author reference field to an Author cms collection (could be multi-ref if having multiple authors is a possibility)
Add a CTA reference(s) and create a Call To Action cms collection to create dynamic ads to position in between sections or elsewhere throughout the post
Add a Categories single-reference to a Categories cms collection to show “related” posts in a collection list on the page
Add a Tags multi-reference to allow posts to appear on multiple tag template pages. This could also reuse the Category collection depending on your content needs.
Add separate image fields for Header, SEO, OpenGraph, and/or SiteSearch for higher customization of how your brand is seen in different places.
Hope some of this helps and is relevant to your question.
Hey Matt
Thanks for this, but if you look at my structure this is almost identical to what i already have and need to get away from.
Instead, I need all of the text to be in one rich text field and then use some sort of custom code or whatever to automatically pull any h2’s used in the content and then create a contents section based of that.
I hope that clears up any confusion you have
OK great hopefully someone can find a solution.
I mean, its as simple as adding a plugin if you use something like Wordpress.
So surely there would be a way to do this on webflow as well …
You can do this with javascript. No need to add fields.
Tocbot builds a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or long markdown pages because it makes them easier to navigate. This library was inspired by Tocify, the main difference is that Tocbot uses native DOM methods and avoids the jQuery & jQuery UI dependencies.
You can use Tocify if you prefer, since Webflow includes JQuery.
Hi, wow thank you for this!
Sure, the Tocbot version looks perfect!
However, I have very little experience with custom code and don;t understand what the steps are telling me to do.
Would you please be able to help further?
I would use Tocify since it only needs a #id on the wrapper to bind to. If you are using a rich text field in the CMS for the content, you would not be able add Id’s to the headings.
Review the documentation and give it a try. Personnaly I just use a local page on my computer to work out the dev issues and then deploy to the platform when I know it is working.
The examples are very clear on Tocify. My work queue is full, but I will try to answer questions if I can.
