How can I create a table of contents for my Webflow blog posts like the one shown on this example blog post?
To create a table of contents for your Webflow blog posts, you can follow these steps:
Step 1: Add HTML Structure
First, you need to add the HTML structure for your table of contents. You can add this code either in your blog post template or on individual blog post pages. It's recommended to add it within a div container for easier styling.
```html
<div class="table-of-contents">
<h2>Table of Contents</h2>
<ul class="toc-list"></ul>
</div>
```
Step 2: Add Headings
Next, you need to add headings in your blog post article. These headings will be used as the navigation points in the table of contents. You can use `<h2>` or `<h3>` tags for subheadings depending on your content structure.
```html
<h2 id="section-1">Section 1</h2>
<p>Your content goes here...</p>
<h3 id="subsection-1">Subsection 1</h3>
<p>Your content goes here...</p>
<h3 id="subsection-2">Subsection 2</h3>
<p>Your content goes here...</p>
<h2 id="section-2">Section 2</h2>
<p>Your content goes here...</p>
```
Step 3: Generate the Table of Contents
To generate the table of contents dynamically, you can use JavaScript. Add the following script right before the closing `</body>` tag or in an external script file:
```javascript
<script>
const tocList = document.querySelector('.toc-list');
const headings = Array.from(document.querySelectorAll('h2, h3'));
headings.forEach((heading) => {
const listItem = document.createElement('li');
const link = document.createElement('a');
const headingText = heading.textContent;
const headingId = heading.getAttribute('id');
link.textContent = headingText;
link.setAttribute('href', `#${headingId}`);
listItem.appendChild(link);
tocList.appendChild(listItem);
});
</script>
```
Step 4: Style the Table of Contents
Lastly, style the table of contents using CSS. Here's a basic example to get you started:
```css
.table-of-contents {
background-color: #f4f4f4;
padding: 20px;
}
.table-of-contents h2 {
margin-bottom: 10px;
color: #333;
}
.toc-list {
list-style: none;
padding: 0;
}
.toc-list li {
margin-bottom: 5px;
}
.toc-list li a {
color: #666;
text-decoration: none;
}
.toc-list li a:hover {
color: #000;
}
```
Feel free to customize the styles according to your design preferences.
With these steps, you should be able to create a table of contents for your Webflow blog posts similar to the example provided.
