Auto table of contents -- in HubL (module or template)
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>
Jan 20, 20224:40 AM - edited Jan 20, 20228:52 AM
Member
Auto table of contents -- in HubL (module or template)
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.