At Elias, blog posts are often part of our customers' requests for their websites. Improving SEO, visibility, communication, there are many advantages of integrating a blog into your website.
In order to give readability to our articles, we often propose the integration of a very practical tool: a dynamic summary that will target the Headings of our article and which will automatically adapt to the tree structure of your titles. For this, we will use the library Finsweet, much more powerful than any JavaScript library that could be used with Webflow.
The Webflow CMS, or “Content Management System”, allows you to manage your site's databases via a visual and easy-to-use interface.
A CMS collection can be used to manage blog posts for example. Set up your collection by adding the required fields (name, description, image, content, meta data). But a CMS collection is not necessarily for blog posts. Indeed, you can create an “Authors” collection, which will be linked to your Blog Posts collection, or even an “Events” collection if your site is an event manager for example. Another collection that we are used to setting up for our customers is the “Services” collection, for a startup that offers various services for example.
All these collections can be configured differently from one another depending on the need. First, the fields in each collection should be relevant. For example, an “Articles” collection will have several elements: a name, a description, an author, a publication date... and the most important thing here, a content. The content will be a Rich Text element, in which images, links, headings... can be integrated. This element is mandatory if you want to add a dynamic summary to your article.
The Finsweet library allows you to set up complex functionalities (developed in JavaScript) with very little code. A few well-placed attributes, a bit of style, a line in <Head>the page, and presto, that's it (an expert Elias recently managed to set up a dynamic summary in less than 35 seconds... record to beat!)
So the first step will be to add the following code to the part <Head>of your page. This is the script that will use the Finsweet library, which itself will take care of the rest:
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-toc@1/toc.js"></script>
As easy as hello, Finsweet has thought of everything! Once the library is added, you will need to implement attributes to different elements of your page. The first will be to put on your Rich Text:
Name: fs-toc-element/Value: contents
The summary will therefore be generated based on the Headings of this particular element.
It is exactly the same for the links that will serve as examples for the summary.
If you don't want to add the dynamic summary for all your items, simply add a “Checkbox” field, named “Summary View” in your collection.
Then add Conditional Visibility on the Div Block that contains your summary, and that's it!
