How to create the table of content from CMS?

is there a way that I can attach buttons with CMS so that the number of button can be associated with the number of parts in the article? and if so how would i do that with in page scroll link texts?

this way i do not have to manually make buttons for each new blog ?

https://preview.webflow.com/preview/ashfishman?utm_medium=preview_link&utm_source=designer&utm_content=ashfishman&preview=abad89ef2e87b228b2a1b94ce14d6d9e&pageId=64d26d1ddbc43a0de40369a9&itemId=64d3d6076b74b8313957bb6a&workflow=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

First, you’ll need to set up your blog template page using a maximum number of sections you think your client will need. (for this example lets say 10 sections)
Fully design this template page factoring in the 10 sections and the content that could be in each. These sections will need to be assigned an ID in the settings panel, like “section-1” “section-2” etc.

Under settings, each of the 10 sections will need to have “Conditional Visibility = Is Set” enabled. This way, if a section is left empty by the author, it will not display.

Next, create/style the ten buttons for your anchor links and connect them to their respective sections.
Similar to the sections, you’ll need go to settings and set their Conditional Visibility to match the visibility applied to the section. So if the author leaves sections 5-10 empty (for example), their corresponding buttons will not appear.

so if i need to set up multiple sections and I am using a rich text format, that means I will have to make a new rich text format in each section did I get that right?

hi @Asher_Fishman you are looking for TOC (Table Of Content) there is many examples and tutorials including videos how to create TOC from CMS.

examples:

but feel free to find another examples on internet using your favourite browser.

Yes, this is the cheapo no code method but looks like Stan has a better/cleaner way to set this up.

Looks like you’ve already received some great suggestions. I’m not sure if you’re looking for a classic table of contents or more inline with the buttons you’ve shown in your video. But if it’s the former another option that I’ve enjoyed using is:

One more option for you :slight_smile: good luck!

@ChrisDrit both did not work but because you and other people have experience with Finsweet I showed what I did there and how it did not work.
Any ideas?

I didn’t dig too deeply into your video, but lots of things stood out to me.

  • You’re adding attributes to a hidden RT element.

  • You then move outside of that hidden RT element (where you just added the fs attribute) and add the fs link attribute.

  • You then add the fs link attribute outside of a heading tag: “Add this attribute to a link that will serve as the table of contents links. These links are generated based on H2-H6.”

  • The instructions mentioned you needed to give the div wrapper a specific name, but you didn’t give it the same name the instructions mentioned.

…and unfortunately, I just kept noticing issues.

You mentioned that none of the solutions posted in this thread are working. From what I can see in your video, it’s from you not following the setup instructions correctly.

It happens, this is challenging stuff!

When things don’t work right for me, my approach to solving these problems successfully is to open up a blank page and run through the instructions. Get an isolated version of it working, then incorporate it into your main site / page.

That’s about the best help I can give you.

If you need more specific help with this finsweet product, they have a great forum with a helpful community. I’d suggest posting your video there.

Good luck!

1 Like