Formatting: Manual ToC


About

The Manual ToC formatting is an HTML format for creating a table of contents manually - (Demo). Related to the Overlay ToC feature, a manual table of contents will be prioritized than the Auto Scan content.



Specification




Configuration




Usage

  1. FORMAT WITHOUT SUB 
          	
<div class='w-toc'>
  <ol>
    <li><a href='#target_id1'>Heading 1</a></li>
    <li><a href='#target_id2'>Heading 2</a></li>
  </ol>
</div>


    FORMAT WITH SUB 
          
<div class='w-toc'>
  <ol>
    <li><a href='#target_id1'>Heading 1</a></li>
    <li>
      <a href='#target_id2'>Heading 2</a>
      <ol>
        <li><a href='#target_id2_1'>Heading 2.1</a></li>
        <li><a href='#target_id2_2'>Heading 2.2</a></li>
      </ol>
    </li>
  </ol>
</div>

    Note: In the HTML above, item 2 has a sub. You can also add further sub-items under item 2.1 as needed.


  2. Adding Configurations Add the desired configuration by adding the
    data-configuration-name='Value' attribute to the element with class w-toc.

    Example: 
          
<div class='w-toc' data-nested-counter='no'>
  <ol>
    <li><a href='#target_id1'>Heading 1</a></li>
    <li>
      <a href='#target_id2'>Heading 2</a>
      <ol>
        <li><a href='#target_id2_1'>Heading 2.1</a></li>
        <li><a href='#target_id2_2'>Heading 2.2</a></li>
      </ol>
    </li>
  </ol>
</div>


Others

Setting Marker Type
In all the HTML above, all items are defined with the OL tag, which means the marker used for the items is Number. You can also use bullet markers by using the UL tag. 

          
          <div class='w-toc'>
            <ol>
              <li><a href='#target_id1'>Heading 1</a></li>
              <li>
                <a href='#target_id2'>Heading 2</a>
                <ul>
                  <li><a href='#target_id2_1'>Heading 2.1</a></li>
                  <li><a href='#target_id2_2'>Heading 2.2</a></li>
                </ul>
              </li>
            </ol>
          </div>

Adding Title Elements
This formatting only cover for list elements. You can add title elements using Formatting Heading. Place the title HTML right before the wrapper element (the element with class w-toc).

Example: 
          
        <div class='w-heading'>
          <div class='w-title'>
            Table of Contents:
          </div>
        </div>
        <div class='w-toc'>
          <ol>
            <li><a href='#target_id1'>Heading 1</a></li>
            <li><a href='#target_id2'>Heading 2</a></li>
          </ol>
        </div>

About Nested-Counter Configuration
When the nested-counter configuration is added to the wrapper element, the configuration will be applied to all OL elements. To set the nested counter only on specific OL elements, simply add the configuration to the OL elements.

Example: 
          
        <div class='w-toc'>
          <ol>
            <li>
              <a href='#target_id1'>Heading 1</a>
              <ol data-nested-counter='no'>
                <li><a href='#target_id1_1'>Heading 1.1</a></li>
                <li><a href='#target_id1_2'>Heading 1.2</a></li>
              </ol>
            </li>
            <li>
              <a href='#target_id2'>Heading 2</a>
              <ol>
                <li><a href='#target_id2_1'>Heading 2.1</a></li>
                <li><a href='#target_id2_2'>Heading 2.2</a></li>
              </ol>
            </li>
          </ol>
        </div>


When data-nested-counter='no' is present on an OL element, the nested counter on that OL element and all its sub-elements will always be disabled. In other words, data-nested-counter='yes' cannot be used within data-nested-counter='no'.

About Target ID
For those who are not familiar with the role of each ID in the format above (target_id1, target_id2, etc.), you can visit the page: How to create links to specific sections.
Have Question?