Join the Webstudio community

Updated 2 months ago

Table of Contents

At a glance

The community members are discussing how to create a Table of Contents (TOC) feature for blogs or articles in Webstudio (WS). They suggest using JavaScript, and one community member recommends the Tocbot library as a solution. The discussion covers how to add Tocbot to WS, including adding the necessary JavaScript and CSS code. Some community members provide step-by-step guidance on the implementation, while others express uncertainty about the process as JavaScript beginners. Overall, the community is collaborating to find a solution for the TOC feature in WS.

Useful resources
Hey, has anyone made a Table of Contents here yet? A typical use case would be for blogs or articles.

Can anyone share tips on how to create this or a resource that shows how this was done in WS?
1
M
B
J
17 comments
I think we need some JS to do it!
even to create the element and link to the sections?

i guess you might be right, especially if you are using a CMS to bring content in
Yep I think it would work with JS
how do you suggest i go about this?
If your headers already have hashes on them then Tocbot https://tscanlin.github.io/tocbot/

This will create a toc based on existing headers, not generate the hashes for you. Some CMSs like ghost auto generate the hashes/fragments eg #my-blog-title
Interesting. How do you add Tocbot to Webstudio ?
Added the JS script and init the tocbot just following the directions πŸ™‚ Let me know if you have questions if you implement it. Been using it a lot last couple of days
i get the js script, bujt how do you add the css code? its more thna just a a few attributes
I am a JS beginner so I don't know which code I have to copy and where to paste it in WS πŸ˜…
I added css in an HTML embed to customize it a bit. I'm also using my CSS variables in there to stay consistent
paste this into an html embed
Attachment
image.png
then add this below it in <script type="module"></script>
Attachment
image.png
you'll need to change the variable values to match your setup or change your setup to match those values πŸ™‚

E.g. .js-toc is a class you can add to some empty box which is where they'll insert the table of contents
heading selector mean that I have to select the right tag (Properties & Attributes) to my heading, right ?
no thats just asking which headers do you want tocbot to extract from your content
i usually do h2 and h3 but its a matter of preference and use case
Attachment
image.png
Thank you for your support and information. I'll reach out again if i have more questions about the implimentation
Add a reply
Sign up and join the conversation on Discord
","dateCreated":"2024-11-05T18:14:46.695Z","dateModified":"2024-11-05T18:14:46.695Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":12,"upvoteCount":0},{"@type":"Comment","text":"you'll need to change the variable values to match your setup or change your setup to match those values πŸ™‚ E.g. .js-toc is a class you can add to some empty box which is where they'll insert the table of contents","dateCreated":"2024-11-05T18:15:36.048Z","dateModified":"2024-11-05T18:15:36.048Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":13,"upvoteCount":0},{"@type":"Comment","text":"heading selector mean that I have to select the right tag (Properties & Attributes) to my heading, right ?","dateCreated":"2024-11-05T18:28:21.913Z","dateModified":"2024-11-05T18:28:21.913Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/abb631ff-7c27-48f7-b614-008f3a775595","name":"Romaric BRN","identifier":"abb631ff-7c27-48f7-b614-008f3a775595","image":"https://cdn.discordapp.com/avatars/737209017264504863/f3a94e557835d73b3068242e22ae144b.webp?size=256"},"commentCount":0,"comment":[],"position":14,"upvoteCount":0},{"@type":"Comment","text":"no thats just asking which headers do you want tocbot to extract from your content","dateCreated":"2024-11-05T18:29:07.604Z","dateModified":"2024-11-05T18:29:07.604Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":15,"upvoteCount":0},{"@type":"Comment","text":"i usually do h2 and h3 but its a matter of preference and use case","dateCreated":"2024-11-05T18:29:59.115Z","dateModified":"2024-11-05T18:29:59.115Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":16,"upvoteCount":0},{"@type":"Comment","text":"Thank you for your support and information. I'll reach out again if i have more questions about the implimentation","dateCreated":"2024-11-05T18:34:36.102Z","dateModified":"2024-11-05T18:34:36.102Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/5cb096b2-7898-4e59-af98-e128097c2d6b","name":"Batman-sama","identifier":"5cb096b2-7898-4e59-af98-e128097c2d6b","image":"https://cdn.discordapp.com/avatars/181155997757210624/75474d9d7edb2ab3c8c4ba75c9c74267.webp?size=256"},"commentCount":0,"comment":[],"position":17,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/5cb096b2-7898-4e59-af98-e128097c2d6b","name":"Batman-sama","identifier":"5cb096b2-7898-4e59-af98-e128097c2d6b","image":"https://cdn.discordapp.com/avatars/181155997757210624/75474d9d7edb2ab3c8c4ba75c9c74267.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]