Streaming live at 10am (PST)

How to create Dynamic Table of content for CMS blog posts?


#1

Hello! As of right now, it seems like the only way to create an anchor tag to go to a specific section of a website is by adding an ID to a section.

But in my case, I have blog posts where the body of the blog are paragraphs. I’d like to add anchor links to go to a specific paragraph in my blog posts, without using ID’s and creating sections.

Is there anyway to do this? I’m DESPERATE for a solution!


#2

No way to create anchors…without anchors :slight_smile: (Added manually -or- by code).

TOC

For dynamic TOC (table of content) you should use js/jquery plugins.

Like this one (google it):
http://projects.jga.me/toc/

P

The toc created from heading (h1-h6) not from <p> (Like microsoft word TOC).

By JS you could loop throw all <p> in article X and add manually anchor for each <p> - one way:

HTML DOM setAttribute() Method

https://www.w3schools.com/jsref/met_element_setattribute.asp

Anyway - give more detials (Your Q - little general).


#3

Check out this screen shot:

As you can see, I have multiple titles within a blog post, under one collection field as “Full Article Text”.

For this post, I have North Miami, Central Miami, and South Miami.

I’m trying to create an anchor link, or URL, that could go to a specific paragraph within my blog posts.

So something like https://www.homeinsured.org/article/best-homeowners-insurance-rates-in-miami#northmiami would go straight to the North Miami paragraph in my blog post.

But I need to do this without creating sections and dividing my blog posts. I’ve done it for my review section, check it out here: https://www.homeinsured.org/carrier-reviews/security-first-insurance-review-2018

But for my articles, this layout will not work as each blog post is different.

Is there anyway for me to create these type of anchor links without sections and ID’s, which is the traditional way in webflow?

I believe it would look something like this: <h2 id="north-miami">North Miami</h2> which is not currently possible within a collection field :frowning:


#5

Again you should use jquery plugin (Mark all h2 and create anchor). The anchor in this plugins is the heading text


#6

Okay, sounds good! Would you be kind enough to explain how I implement this plugin in Webflow? <3


#7

In general, this is more for a freelancer job (No way to teach you basic JS by forum Q).

but try this:

The JS side

1. add javascript before body (copy-paste)

    <script>
    /*!
     * toc - jQuery Table of Contents Plugin
     * v0.3.2
     * http://projects.jga.me/toc/
     * copyright Greg Allen 2014
     * MIT License
    */
    !function(a){a.fn.smoothScroller=function(b){b=a.extend({},a.fn.smoothScroller.defaults,b);var c=a(this);return a(b.scrollEl).animate({scrollTop:c.offset().top-a(b.scrollEl).offset().top-b.offset},b.speed,b.ease,function(){var a=c.attr("id");a.length&&(history.pushState?history.pushState(null,null,"#"+a):document.location.hash=a),c.trigger("smoothScrollerComplete")}),this},a.fn.smoothScroller.defaults={speed:400,ease:"swing",scrollEl:"body,html",offset:0},a("body").on("click","[data-smoothscroller]",function(b){b.preventDefault();var c=a(this).attr("href");0===c.indexOf("#")&&a(c).smoothScroller()})}(jQuery),function(a){var b={};a.fn.toc=function(b){var c,d=this,e=a.extend({},jQuery.fn.toc.defaults,b),f=a(e.container),g=a(e.selectors,f),h=[],i=e.activeClass,j=function(b,c){if(e.smoothScrolling&&"function"==typeof e.smoothScrolling){b.preventDefault();var f=a(b.target).attr("href");e.smoothScrolling(f,e,c)}a("li",d).removeClass(i),a(b.target).parent().addClass(i)},k=function(){c&&clearTimeout(c),c=setTimeout(function(){for(var b,c=a(window).scrollTop(),f=Number.MAX_VALUE,g=0,j=0,k=h.length;k>j;j++){var l=Math.abs(h[j]-c);f>l&&(g=j,f=l)}a("li",d).removeClass(i),b=a("li:eq("+g+")",d).addClass(i),e.onHighlight(b)},50)};return e.highlightOnScroll&&(a(window).bind("scroll",k),k()),this.each(function(){var b=a(this),c=a(e.listType);g.each(function(d,f){var g=a(f);h.push(g.offset().top-e.highlightOffset);var i=e.anchorName(d,f,e.prefix);if(f.id!==i){a("<span/>").attr("id",i).insertBefore(g)}var l=a("<a/>").text(e.headerText(d,f,g)).attr("href","#"+i).bind("click",function(c){a(window).unbind("scroll",k),j(c,function(){a(window).bind("scroll",k)}),b.trigger("selected",a(this).attr("href"))}),m=a("<li/>").addClass(e.itemClass(d,f,g,e.prefix)).append(l);c.append(m)}),b.html(c)})},jQuery.fn.toc.defaults={container:"body",listType:"<ul/>",selectors:"h1,h2,h3",smoothScrolling:function(b,c,d){a(b).smoothScroller({offset:c.scrollToOffset}).on("smoothScrollerComplete",function(){d()})},scrollToOffset:0,prefix:"toc",activeClass:"toc-active",onHighlight:function(){},highlightOnScroll:!0,highlightOffset:100,anchorName:function(c,d,e){if(d.id.length)return d.id;var f=a(d).text().replace(/[^a-z0-9]/gi," ").replace(/\s+/g,"-").toLowerCase();if(b[f]){for(var g=2;b[f+g];)g++;f=f+"-"+g}return b[f]=!0,e+"-"+f},headerText:function(a,b,c){return c.text()},itemClass:function(a,b,c,d){return d+"-"+c[0].tagName.toLowerCase()}}}(jQuery);
    </script>

2 - initialize toc

Important the .toc is the selector (read her).

copy paste after the code from step 1:
<script>
/* initialize */
    $('.toc').toc({
        'selectors': 'h1,h2,h3', //elements to use as headings
        'container': 'article', //element to find all selectors in
        'smoothScrolling': true, //enable or disable smooth scrolling on click
        'prefix': 'toc', //prefix for anchor tags and class names
        'highlightOnScroll': true, //add class to heading that is currently in focus
        'highlightOffset': 100, //offset to trigger the next headline   
    });
</script>

Webflow side

1. collection page --> Add empty div --> add toc class for this div (The plugin generate the TOC her).

why .toc? match this:
$('.toc').toc({

Use css display: none; and hide this div (If you only need the anchors tags)

2. Change the blog post wrapper to article

Why - this is the JS element in the code:

'container': 'article', //element to find all selectors in

image

Live example:

Your anchor?

For heading “hello world” the id is:
toc-hello-world

url
mysite/#toc-hello-world

— Try this steps — Than add live url + read only link —


#8

Thank you so much for your reply! I’m having trouble making it work. See below.

  1. Added JS before body

  2. Added empty div with the class “toc”


    48%20PM

  3. Changed article container to class “article”
    05%20PM

Am I missing something?

Here is my site: https://www.homeinsured.org/article/best-homeowners-insurance-rates-in-miami
Read only: https://preview.webflow.com/preview/homeinsured?preview=374bb3448bb6d09fbc8d9752ef7a30b5


#9

Not .article class but article element (HTML5 element)

image

https://www.w3schools.com/tags/tag_article.asp

Change this and test again.


#10

You are the man! THANK YOU SO MUCH!!!


#11

Great. Mark as solved (the answer start with “In general” to close this topic :slight_smile: you welcome