- Get started with theme development
- Gulp Viewport and Developer tools
- Theme development troubleshooting
- Password-protect content for anonymous users
- Advanced content rendering
- Develop Pluggable Placeholders
- Get help with theme development
- Page context
- Blog overview context
- Search context
- Error context
- Supported macros
- Theme guidelines
- Theme properties
- Search and SEO
Confluence/Viewport macros and features
- Enabling custom Source Code Highlighting
- Customizing the Attachments Macro in a Viewport
- Displaying and Adding User Comments
- Displaying forms
- Add a like button to pages, comments or attachments
- Adding a Slideshow
- Overriding the output of macros
- Customize RSS feed for blog posts
- "Share the page" in a Viewport
- (External) files and media
- Integration with other Scroll Add-ons
Integration with third-party software
- Displaying Additional User Information from the User Profile Plugin
- General 3rd party add-on implementation
- Integrating Disqus Comments
- Making Gliffy macros resizable
- Making UI-Expand macro of RefinedToolkit work
- Displaying Viewport Content in an iframe
- Integrate Midoris Archiving Plugin
- Trigger EliteSofts Page View Macro through Scroll Viewport
- Make your app compatible with Scroll Viewport
- Content Management via Page properties
- Context-Sensitive Help
A table of contents (TOC) can make page navigation much easier for users.
Luckily, Confluence includes a TOC macro – however, it must be added manually to every page. The approach described here shows you how to make the Viewport theme automatically generate a TOC based on a page's headings.
TOC generation is based on the jQuery TOC plugin.
Download and include the plugin in your theme.
See Referencing JS/CSS and Image Files for more information.
Add a list to your template
This will contain all of your page's headings.
Place the following code to the template where the TOC should appear:
That's it. This is everything needed to display a TOC.
If you want to generate a TOC based on a certain part of the page, you can pass the containing element as option:
Additionally, you can choose to only generate a TOC for just a few heading levels.
<ul data-toc data-toc-headings="h2,h3,h4"></ul>
Of course you can combine the options.
You can find more information on the options at the TOC jquery plugin site.
For a smoother scrolling experience, you can include zenscroll. This enables users to glide to each section rather than jumping straight there.