Streaming live at 10am (PST)

Adding contents structure(TOC) to CMS


#21

Tocify supports what I said, an ID only on the wrapper. Tocbot requires an ID on each heading element.


#22

Ah ok your message wasn’t clear at first. :slight_smile:

If that’s the case, then tocify is indeed the only viable option.

OK, well if you so get chance to explain it in any further detail or show some sort of screen recording then that would be very helpful.
Or anyone else for that matter. :slight_smile:
I’m not sure what the instructions are asking me to do.
they may seem simple to someone with developer experience but I have none :slight_smile:


#23

@williamsbrad1994

try this:
If you add the css in a custom code block on the collection page you can see style changes in the editor. However you will only see scripts on published sites.

CSS:

<style>
html {scroll-behavior:smooth;}

.table-of-contents ol {
    list-style-type: none;
    counter-reset:myCounter;
    line-height:30px
}

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

    
}

.table-of-contents ol li::before {
    color:white;
    content: counter(myCounter);
    display:inline-flex;
    position:absolute;
    left:-35px;
    width: 30px;
    height: 30px;
    max-height: 30px;
    max-width: 30px;
    min-height: 30px;
    min-width: 30px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 90px;
    background-color: #4aaec2;
    background-image: none;
    background-size: auto;
    -webkit-transition: none 0s ease;
    transition: none 0s ease;
    font-size: 18px;
    font-weight:700;
    margin-right:10px;
    
}
</style>

Javascript:

    <script>
var ToC =
      "<nav role='navigation' class='table-of-contents'>" +
        "<h2 class='text-block-24'>Contents:</h2>" +
        "<ol>";

    var newLine, el, title, link;

    $(".main-blog-post h2").each(function() {
      $(this).attr('id', $(this).text());
      el = $(this);
      title = el.text();
      link = "#" + el.attr("id");

      newLine =
        "<li>" +
          "<a class='contents-link' href='" + link + "'>" +
            title +
          "</a>" +
        "</li>";

      ToC += newLine;

    });

    ToC +=
       "</ol>" +
      "</nav>";

    $(".div-block-38").prepend(ToC);
</script>

I used the link to your site that you posted to pull your used styles and class names. You may need to tweek it. Let me know if you need more help with it, but you should have what you need here… if I understand your question correctly. Note this uses jquery, but I’m pretty sure that’s already included in webflow’s stack.


#24

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:


#26

@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.


#27

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:


#28

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;}

#29

perfect thank you! :smiley: