Streaming live at 10am (PST)

Adding contents structure(TOC) to CMS


#1

Hey guys

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.

Any help would be much appreciated :slight_smile:

Here is my public share link: https://preview.webflow.com/preview/dream-big-travel-far?utm_source=dream-big-travel-far&preview=ae94492a4e1e5739839b451433453663
(how to access public share link)


#2

Hi @williamsbrad1994. I asume you are speaking about your categories? If so you could build a dynamic CMS menu pulling data from categiries.

You could also build a dynamic accordian pulling data from your categories.

The use the option to got to current categorie in the CMS option-

Did i understand you correct?


#3

No I don’t think you have understood correctly.
I am talking about a contents block for breaking up a single blog post
Do you see what I mean?


#4

No. do you have a picture or something?


#5

A picture of what? :slight_smile:
I’ve linked to everything above
I want it to be something like the table of contents in the example link above …


#6

Ok, i se what you want to do now. I need to thing about this. Will take a new look at your site


#7

OK great thank you! :slight_smile:


#8

One more question, You have a big blocj of text in each post. Are you looking to link inside the post?


#9

It would link to all h2 titles.
For example. In this post,


it would have a contents structure of

  1. the listed reason
  2. the listed reason
  3. the listed reason
  4. the listed reason
  5. the listed reason
  6. the listed reason
  7. the listed reason
  8. the listed reason
  9. the listed reason
  10. the listed reason

#10

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


#11

Hey @williamsbrad1994

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.





#12

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


#13

yeah exactly. thanks anyway for looking


#14

Gotcha. I’ll move this over to the Custom Code category then.


#15

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 …


#16

@Waldo
Know anyone who can help with this? :slight_smile:


#17

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.

https://tscanlin.github.io/tocbot/

You can use Tocify if you prefer, since Webflow includes JQuery.


#18

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 have added the follwoign code to tags of my “blog post template” page, but am not sure of what to do next
<script src=“https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js”></script>

Thank you very much in advance :slight_smile:


#19

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.


#20

Heya :slight_smile:
Yes all of the blog post content would be inside of a single rich text field.
I would then need the TOC to automatically pull h2s from this.

So are you saying this would not be possible using tocify?