In Confluence versions 5.8 and later, Table of Contents macros are no longer rendered server-side anymore – meaning that we have to include a few resources in order to create a TOC.
In your head, include these resources:
<head>
$page.resources.css
$page.resources.js
$page.resources.meta
</head>
For this to work, the script looks for all headings within an HTML element with the id "main-content" and class "wiki-content". Which in turn should be wrapped by an element with id "content" and class "page". So make sure, that the elements that wrap $page.content have the correct IDs and classes.
<div id="content" class="page">
<div id="main-content" class="wiki-content">
$page.content
</div>
</div>
You can add the following style to clean up the clutter generated by the macro for Viewport.
<style>
.hidden-outline .toc-outline {
display: none;
}
.toc-outline {
padding-right: .25em;
}
</style>