Table of Contents


Add a Table of Contents to your book.

Table of Contents (ToC) provides critical access to the content deep inside your book and helps the reader jump from one page to another easily. ToC can be added via the Cover page or the landing page of your book. The textarea accepts stripped HTML in the following format:

<!-- An unordered list with a className `toc` like so: -->

<ul class="toc">
    <li><a href="https://bubblin.io/book/official-handbook-by-marvin-danig/2"> Ambience </a><span class="flex"> 2</span></li>
    <li><a href="https://bubblin.io/book/official-handbook-by-marvin-danig/10"> Prologue </a><span class="flex"> 10</span></li>
    <li><a href="https://bubblin.io/book/official-handbook-by-marvin-danig/18"> New Project </a><span class="flex"> 18</span></li>
    …
    …
    <!--- List of absolute urls here --->
</ul>

Note the href attribute of anchors contain full absolute url of the book at page_no. The Superbook container will automatically lift the internal links of your book via page_numbers at the end of the absolute urls. Feel free to use HTML of this very official handbook (available under MIT License ) to make a Table of Contents for your own work. It is recommended to write the HTML of Table of Contents by hand only after all formatting and finishing of the book has been completed.

Automatic Generation

Bookiza Abelone along with m2s CLI can generate Table of Contents automatically. Discussion about how that works is (TODO) available on their respective READMEs.

Styling Table of Contents:

The table_of_contents can also be placed directly on a page inside the book but this is generally not recommended. Doing so restricts access to the table_of_contents only on the page it is on and, therefore, cannot be accessed from elsewhere in the book. The following toc CSS rules are in use on the book of Bookiza documentation.


body {
  font: 3vw/1.15 "PT Sans Narrow", sans-serif;
}

.leaf {
  height: 100vh;
  width: 80%;
  margin: auto;
}

.justify {
  text-align: unset;
}

.center {
  text-align: auto;
  margin: unset;
}

.inner {
  margin: 15% auto;
  width: 100%;
}

ul.toc {
  margin: 0;
  padding: 0;
  li {
    line-height: 3vw;
    list-style: outside none none;
    margin: 0;
  }
}

a {
  background: rgba(255, 255, 255, 1);
  color: hsla(0, 5%, 35%, 1);
  float: left;
  width: 90%;
  clear: both;
  text-decoration: none;
  margin: 1px 0;
  padding: 1.5% 5%;
  -webkit-border-radius: 1vw;
  -moz-border-radius: 1vw;
  -o-border-radius: 1vw;
  -ms-border-radius: 1vw;
  border-radius: 1vw;
  &:hover {
    background: hsla(144, 80%, 33%, 1);
    color: white;
    float: left;
    width: 90%;
    clear: both;
    text-decoration: none;
    cursor: pointer;
    text-shadow: none;
  }
  span {
    float: right;
    font-size: 80%;
  }
}