Webstudio
Log in

Join the Webstudio community

Updated 4 weeks ago

Table of Contents

BBatman-sama
·
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
MMilan Boisgard | Uncode School
I think we need some JS to do it!
BBatman-sama
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
MMilan Boisgard | Uncode School
Yep I think it would work with JS
BBatman-sama
how do you suggest i go about this?
JJohn Siciliano
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
RRomaric BRN
Interesting. How do you add Tocbot to Webstudio ?
JJohn Siciliano
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
BBatman-sama
i get the js script, bujt how do you add the css code? its more thna just a a few attributes
RRomaric BRN
I am a JS beginner so I don't know which code I have to copy and where to paste it in WS 😅
JJohn Siciliano
I added css in an HTML embed to customize it a bit. I'm also using my CSS variables in there to stay consistent
JJohn Siciliano
paste this into an html embed
Attachment
image.png
JJohn Siciliano
then add this below it in <script type="module"></script>
Attachment
image.png
JJohn Siciliano
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
RRomaric BRN
heading selector mean that I have to select the right tag (Properties & Attributes) to my heading, right ?
JJohn Siciliano
no thats just asking which headers do you want tocbot to extract from your content
JJohn Siciliano
i usually do h2 and h3 but its a matter of preference and use case
Attachment
image.png
BBatman-sama
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
","upvoteCount":0,"dateCreated":"2024-11-05T18:14:46.695Z","datePublished":"2024-11-05T18:14:46.695Z","dateModified":"2024-11-05T18:14:46.695Z","url":"https://help.webstudio.is/table-of-contents-358Xk7KKS7pK#b0c51dc3-bfcc-412e-aeca-b3157334e9db","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"}},{"@type":"Answer","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","upvoteCount":0,"dateCreated":"2024-11-05T18:15:36.048Z","datePublished":"2024-11-05T18:15:36.048Z","dateModified":"2024-11-05T18:15:36.048Z","url":"https://help.webstudio.is/table-of-contents-358Xk7KKS7pK#b9b05a16-13e8-4958-be7d-f5f753db5a00","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"}},{"@type":"Answer","text":"heading selector mean that I have to select the right tag (Properties & Attributes) to my heading, right ?","upvoteCount":0,"dateCreated":"2024-11-05T18:28:21.913Z","datePublished":"2024-11-05T18:28:21.913Z","dateModified":"2024-11-05T18:28:21.913Z","url":"https://help.webstudio.is/table-of-contents-358Xk7KKS7pK#1af10bf3-b51e-41a4-becb-cc2a2f5328d1","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"}},{"@type":"Answer","text":"no thats just asking which headers do you want tocbot to extract from your content","upvoteCount":0,"dateCreated":"2024-11-05T18:29:07.604Z","datePublished":"2024-11-05T18:29:07.604Z","dateModified":"2024-11-05T18:29:07.604Z","url":"https://help.webstudio.is/table-of-contents-358Xk7KKS7pK#07abf364-815b-4240-a1e8-3a0bfef975fd","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"}},{"@type":"Answer","text":"i usually do h2 and h3 but its a matter of preference and use case","upvoteCount":0,"dateCreated":"2024-11-05T18:29:59.115Z","datePublished":"2024-11-05T18:29:59.115Z","dateModified":"2024-11-05T18:29:59.115Z","url":"https://help.webstudio.is/table-of-contents-358Xk7KKS7pK#f47a36f5-8ae8-4cab-abeb-a8b05108f5f8","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"}},{"@type":"Answer","text":"Thank you for your support and information. I'll reach out again if i have more questions about the implimentation","upvoteCount":0,"dateCreated":"2024-11-05T18:34:36.102Z","datePublished":"2024-11-05T18:34:36.102Z","dateModified":"2024-11-05T18:34:36.102Z","url":"https://help.webstudio.is/table-of-contents-358Xk7KKS7pK#a805d8e2-8e2e-42c6-bbe1-a19992be59c5","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"}}]}}