Hey, I was wondering if it is possible to make a table of contents with multiple level

Make a nested table of contents about epub-gen HOT 2 CLOSED

dehlen commented on July 20, 2024 3

Make a nested table of contents

from epub-gen.

Comments (2)

maple3142 commented on July 20, 2024

+1 for this, it will be very useful for me.

from epub-gen.

mrkvon commented on July 20, 2024

I did this using the option customHtmlTocTemplatePath with the following custom template:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="<%- lang %>" lang="<%- lang %>">
<head>
    <title><%= title %></title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1 class="h1"><%= tocTitle %></h1>
<nav id="toc" epub:type="toc">
    <%
    // sort content into Parts, Chapters and Sections, hierarchically
    // each part has multiple chapters, each chapter has multiple sections...
    const hierarchical = [];
    const cm = /^Chapter/
    const sm = /^Section/

    let lastPart;
    let lastChapter;

    for (const c of content) {
      if (!sm.test(c.title) && !cm.test(c.title)) {
        lastPart = {
          title: c.title,
          url: c.url,
          href: c.href,
          chapters: []
        };

        hierarchical.push(lastPart);
      } else if (cm.test(c.title)) {
        lastChapter = {
          title: c.title,
          url: c.url,
          href: c.href,
          sections: []
        };
        lastPart.chapters.push(lastChapter);
      } else {
        lastChapter.sections.push({
          title: c.title,
          url: c.url,
          href: c.href,
        })
      }
    }
    
    // display hierarchically organized parts, chapters, and sections in TOC
    hierarchical.forEach(({ title, href, chapters }, i) => {
    %>
    <h2><a href="<%= href %>">Part <%= i+1 %>: <%= title %></a></h2>
    <%
      chapters.forEach(({ title, href, sections }) => {
        %>
        <h3><a href="<%= href %>"><%= title %></a></h3>
        <ul>
        <%
        sections.forEach(({ title, href }) => {
          %>
          <li><a href="<%= href %>"><%= title %></a></li>
          <%
        })
        %>
        </ul>
        <%
      })
    })
    %>
</nav>

</body>
</html>