ventoTOC(userOptions?: TOCGeneratorOptions): (pages: Page[]) => void
Generates a table of contents (TOC) from headings in Vento-rendered pages.
This processor:
- Extracts heading elements with IDs (assumes headings already have IDs from ventoHeadingAnchors)
- Builds a hierarchical tree structure
- Stores TOC in
page.data.tocfor use in templates - Only processes pages rendered with specified template engines (default: Vento)
Important: This processor should run AFTER ventoHeadingAnchors to ensure headings have IDs.
Example 1
Example 1
// In your Lume _config.ts: import { ventoHeadingAnchors, ventoTOC } from "hibana/mod.ts"; const site = lume(); // IMPORTANT: Add anchors BEFORE generating TOC site.process([".html"], ventoHeadingAnchors({ level: 2, maxLevel: 4, })); site.process([".html"], ventoTOC({ level: 2, maxLevel: 4, key: "toc", // Stores in page.data.toc }));
Example 2
Example 2
<!-- In your layout template --> {{ if toc && toc.length > 0 }} <nav class="toc"> <h2>Table of Contents</h2> <ul> {{ for item of toc }} <li> <a href="{{ item.url }}">{{ item.text }}</a> {{ if item.children.length > 0 }} <ul> {{ for child of item.children }} <li><a href="{{ child.url }}">{{ child.text }}</a></li> {{ /for }} </ul> {{ /if }} </li> {{ /for }} </ul> </nav> {{ /if }}
optional
userOptions: TOCGeneratorOptions
Configuration options