Core Components | Table Of Contents | How does it work ? | Community
Skip to main content
VeenaVikraman
VeenaVikraman
New Participant
February 1, 2023
Solved

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

  • February 1, 2023
  • 2 replies
  • 1709 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Nirmal_Jose

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/config/com.adobe.cq.wcm.core.components.internal.servlets.TableOfContentsFilter.config

2 replies

Nirmal_Jose
Nirmal_JoseAccepted solution
Employee
February 1, 2023

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/config/com.adobe.cq.wcm.core.components.internal.servlets.TableOfContentsFilter.config

    VeenaVikraman
    VeenaVikramanAuthor
    New Participant
    February 2, 2023

    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/tableofcontents.html?lang=en 

     

    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/wcm/components/tableofcontents/v1/tableofcontents 

     

    You saved my day 👍👍

    Thanks

    Veena ✌

    arunpatidar
    arunpatidar
    New Participant
    February 1, 2023

    @veenavikraman 
    You can check here

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

     

    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 

    Arun Patidar
      Terms & ConditionsAccessibility statement

      Loading footer...