How to Programmatically Add TOC to a Page and Widget Areas in Botble

[Fledardev]

Hello,

I'm currently working with the Easy Table of Contents plugin and need some guidance on how to achieve the following tasks via code:

Programmatically Add TOC to a Specific Page: I'd like to know the best way to insert a Table of Contents (TOC) into a specific page programmatically. Could you provide an example or point me in the right direction on how to accomplish this within the plugin's framework?

Add TOC to Widget Areas in Botble: I'm using Botble as the CMS platform and would like to add the TOC element into the widget areas provided by Botble. Is there a recommended approach or any documentation on integrating the TOC within these widget zones?

Any code snippets, documentation links, or general advice would be greatly appreciated.

Thank you for your assistance!

Best regards,

[nivianh]

@Fledardev add to Page can ref: https://github.com/nivianh/toc/issues/5#issuecomment-1907344480

[Fledardev]

Hello @nivianh,

Thank you for your response. However, my need is not to add the TOC to a specific page, but rather to integrate it as a widget in different sections of my site, specifically in the sidebar of a blog post.

Could you provide any guidance or documentation on how to insert the TOC into widget areas within Botble CMS? This would allow me to display it dynamically in specific sections of the site.

Thank you for your help!

Best regards,

[Fledardev]

Hello @nivianh,

Could you please explain how to create a shortcode for calling the plugin on any page or post? I would like to insert the plugin content wherever I need on the site using a shortcode.

Thank you!

[nivianh]

Hello @nivianh,

Could you please explain how to create a shortcode for calling the plugin on any page or post? I would like to insert the plugin content wherever I need on the site using a shortcode.

Thank you!

@Fledardev

The plugin currently does not have this feature.

[Fledardev]

Hello @nivianh,

It's too bad that this feature isn't available, as it would be a very useful addition and probably easy for you to develop. In the meantime, I'll try to look into the code to manually move the display of the

into the blog's sidebar.

Thank you!

[nivianh]

Hello @nivianh,

It's too bad that this feature isn't available, as it would be a very useful addition and probably easy for you to develop. In the meantime, I'll try to look into the code to manually move the display of the

into the blog's sidebar. Thank you!

@Fledardev It's a cool feature, but I don't have time to develop it right now You can use javascript to move to the sidebar selection

[Fledardev]

@Fledardev It's a cool feature, but I don't have time to develop it right now You can use javascript to move to the sidebar selection

@nivianh, this is the JS custom code that I use. It is not perfect but it works :

// Select the parent element where the divs should appear var observerTarget = document.body; // Create a mutation observer var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // Select divs with the class 'toc-container table-of-content contracted' var sourceDivs = document.querySelectorAll('.toc-container.table-of-content.contracted'); var destinationDiv = document.querySelector('.custom-toc'); // Replace with the actual destination class if (sourceDivs.length > 0 && destinationDiv) { // For each found source div, move its content to the destination div sourceDivs.forEach(function(sourceDiv) { while (sourceDiv.firstChild) { destinationDiv.appendChild(sourceDiv.firstChild); } // Remove the source div once it's empty sourceDiv.remove(); }); // Stop the observer once the divs are found and processed observer.disconnect(); } }); }); // Set the observer options var config = { childList: true, subtree: true }; // Start observing changes in the DOM observer.observe(observerTarget, config);