Auto table of contents -- in HubL (module or template)

[SimonPadbury]

Hi,

How can I create an auto TOC in HubL? is it possible?

I already have a JS powered auto TOC, but I would like a HubL way of doing the same kind of thing instead, so that it is pre-generated.

Thanks in advance.

[piersg]

That makes life more complicated. To access content from a module outside of said module and in the page template you have to do something like this: content.widgets.module_163881811404819.body.main_title . However, that module name in the middle with all the numbers is auto-generated whenever you add a module to a new page or template so you can't really write a method to grab lots of titles in a way that will be consistent no matter what modules were added to a template.

If the template is static and there won't by any modules added or deleted, then it's do-able (see second example below of creating an array of titles, just use the above reference for the variables in the array). If not, if you need to grab every h2, h3, h4 on a page regardless of where it comes from then I think the only way to do this is as you are currently with JS. Happy to be proved wrong by someone, though.

Within a module, you would just have to reference the variables for the titles, e.g. if they were repeating you'd do this

<ul class="contents">
  {% for item in module.items %}
    <a href="#{{item.title|lower|replace(" ", "-")}}"><li>{{item.title}}</li></a>
  {% endfor %}
</ul>

Or if they were separate title variables, e.g. one text field with id "main_title", another with "subtitle_1" etc, you could create an array and do the same thing

{% set titleArray = [main_title, subtitle_1, subtitle_2] %}
<ul class="contents">
  {% for title in titleArray %}
    <a href="#{{title|lower|replace(" ", "-")}}"><li>{{title}}</li></a>
  {% endfor %}
</ul>

[SimonPadbury]

Hi piersg,

Thankyou for this. I will try it out next week.

[piersg]

Are all the headings you want to grab contained within one module, or are they split across multiple modules?

[SimonPadbury]

They can sometimes be accross multiple modules. (On new HTML templates.)

[piersg]

What content do you want to tabulate? If it's content input as HubL variables, e.g. in a module, then this is definitely possible.

[SimonPadbury]

How, please?

[SimonPadbury]

I just want to grab headings (h2 -- h4) within the content, and automatically make a list of #links for an “On this page“ menu.

I am already doing this by JavaScript, client-side. But the ToC of course doesn't exist until after page load. So how can I kind-of do the same thing during the page build instead, using HubL instead? That way, the ToC would already be there in the HTML.

I.e. I would like to do something analogous to the WordPress plugin https://wordpress.org/plugins/easy-table-of-contents/ -- but that's PHP, not HubL.