Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

Create TOC with multiple level

Avatar

Level 1

how can I create table of content of a page which has H2, H3,, H4.

 

I want al heading level to appear in TOC.

1 Reply

Avatar

Community Advisor

There are many ways to implement your required, but here's what you can try. 

  1. Create a section-container component (sling:superResourceType parsys or responsive-grid).
  2. The section-container will allow dialogue configurations to include a title & title header level.
  3. The section-container allows content components be added in its content body.
  4. Create a TOC component;
  5. The TOC component with one to one relationship with a Sling Model.
  6. The TOC component will have logic to search for all section-container components configured on the page and display the title & title header level properties.
  7. Complete.

The page will only be constructed with the section-container component. While the TOC component sites on top of the section-container component.

JCR View:

/content/my-site/page/jcr:content/par/toccomponent
/content/my-site/page/jcr:content/par/sectioncontainercomponent0
/content/my-site/page/jcr:content/par/sectioncontainercomponent1
/content/my-site/page/jcr:content/par/sectioncontainercomponent2
/content/my-site/page/jcr:content/par/sectioncontainercomponent3