Core Components | Table Of Contents | How does it work ?

[VeenaVikraman]

Hi All

   There is a client requirement for which we thought Table of Contents component would work well, but the thing is I was not able to get this working in WKND project where I was trying out this component to propose it to the client. Anyone have any idea how this component is working ?

Thanks

Veena

[arunpatidar]

@VeenaVikraman 
You can check here

https://www.aemcomponents.dev/content/core-components-examples/library/core-structure/table-of-conte... 

The Table of Contents Component creates a ToC based on the titles in your page content allowing your readers to quickly navigate the page.

It is similar to confluence table of content macro https://confluence.atlassian.com/doc/table-of-contents-macro-182682099.html 

[Nirmal_Jose · Accepted solution]

Hi @VeenaVikraman ,

If you are using CS, you need to enable the the filter using the osgi config at [1]. You need to deploy the config using full pipeline

As Arun mentioned document, the component will parse through the H1-H6 tags on the page and generate the anchor linked table of contents. In an ideal SEO compatible page, there will be one H1 and the order of H2 and subsequent header tags will be in order.

Please note this actually picks up <h2></h2> like content and not <p class="h2"></p> like content.

[1] - https://github.com/adobe/aem-core-wcm-components/blob/main/config/src/content/jcr_root/apps/core/wcm...

[VeenaVikraman]

Thanks a lot @Nirmal_Jose I never saw anything mentioned about this config in the documentation https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/tabl... 

I got it working

But I could see a small line mentioned in the GITHUB URL https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wc... 

You saved my day

Thanks

Veena ✌