For longer pages, it's helpful to have a mini-TOC to show the various contents. You can implement the Table of Contents jQuery plugin into Oxygen's webhelp.
Tip: For a demo of the mini-TOC, see this https://s3.us-west-1.wasabisys.com/idbwmedia.com/files/oxygendemos/minitoc/
-
Download the minified JS script from the jQuery TOC plugin site. Open the jquery.toc.min.js file and copy its contents.
-
In a text editor, open the JavaScript file located here: [Oxygen Install Directory]/frameworks/dita/DITA-OT/plugins/com.oxygenxml.webhelp/oxygen-webhelp/resources/js/webhelp_topic.js.
-
Insert the minified JS script at the bottom, before the closing
});
. -
Add the following trigger below the script:
$("p.toc").toc({content: ".body", headings: "h2,h3"});
-
Add the following styles to your custom skin's stylesheet:
p.toc { background-color: whitesmoke; margin-bottom: 20px; list-style-type: square; padding: 20px; border-radius: 6px; float: right; margin-left: 20px; } p.toc li { margin-bottom: 5px; } p.toc h3 { margin-left: auto; margin-right: auto; width: 30%; }
-
On a page where you want to insert the TOC, add
<p outputclass="toc"/>
.
Collected links