How to Add a Table of Contents to Your Duda Site

Adding a Table of Content to your Duda Websites

A Table of Contents (TOC) is a fantastic addition to any webpage, especially for blogs or long-form content. It enhances the user experience by providing quick navigation links to different sections on a page, improving readability and engagement. In this guide, I’ll show you how to implement a fully functional Table of Contents on your Duda website using a simple JavaScript snippet.

Step 1: Create the HTML Structure

To start, add a placeholder for the Table of Contents in your Duda site. Here’s the HTML structure to include:

<div class="table-of-contents-widget">

    <h2>Table of Contents</h2>

    <ul class="toc-list">

    </ul>

</div>

You can place this anywhere on your page—above your main content is typically the best spot.

Step 2: Add the JavaScript

Copy and paste the following JavaScript snippet into the HTML section of an HTML widget. This approach works because the Body End and Head HTML sections of the website do not properly inject the JavaScript into the page for this purpose. Using an HTML widget ensures the script works as intended.

<script>

document.addEventListener("DOMContentLoaded", function () {

    const tocList = document.querySelector(".table-of-contents-widget .toc-list");

    if (!tocList) {

        return;

    }

    // Find all headings except H1

    const headings = document.querySelectorAll("h2, h3, h4, h5, h6");

    // Generate TOC links

    headings.forEach(function (heading, index) {

        if (!heading.id) {

            heading.id = "toc-heading-" + index; // Assign a unique ID if none exists

        }

        const tocItem = document.createElement("li");

        const tocLink = document.createElement("a");

        tocLink.href = "#" + heading.id;

        tocLink.textContent = heading.textContent;

        tocItem.appendChild(tocLink);

        tocList.appendChild(tocItem);

    });

});

</script>

How the JavaScript Works

JavaScript: The script identifies all headings (<h2>, <h3>, etc.) in your content except <h1>.

Dynamic Linking: For each heading, it creates a clickable link inside the Table of Contents.

Unique IDs: If a heading doesn’t have an ID, the script automatically generates one, ensuring the links work seamlessly.

Step 3: Test Your Table of Contents

Preview Your Site: Open your site in preview mode or publish it to a test environment.

Check Links: Click on the TOC links to ensure they scroll smoothly to the corresponding headings.

Refine Styling: Add or adjust CSS to customize the look of your Table of Contents.

Why Use This Solution?

This simple yet effective Table of Contents is lightweight, requires no third-party injected scripts, and works seamlessly within Duda’s environment. By implementing it, you provide your audience with an improved reading experience while boosting your site’s usability and SEO.

While we attempted to create a fully functioning widget for this, we encountered issues getting the JavaScript to inject into the Body End section and render properly on Duda pages. Therefore, we’re offering this solution for FREE to our followers and fans!

For the entire code snippet in this post, use an HTML widget within Duda and paste the code inside.

That’s it! You’ve successfully added a dynamic, functional Table of Contents to your Duda site.

Purchase this as a widget instead

If you would rather purchase this as a widget, instead of using the DIY solution, we would greatly appreciate that. You can checkout the widget in this post at the top of the article. You can purchase the widget HERE