Sebastian Rose has written a JavaScript program especially designed to allow two different ways of viewing HTML files created with Org. One is an Info-like mode where each section is displayed separately and navigation can be done with the n and p keys, and some other keys as well, press ? for an overview of the available keys. The second one has a folding view, much like Org provides inside Emacs. The script is available at https://orgmode.org/org-info.js and the documentation at https://orgmode.org/worg/code/org-info-js/. The script is hosted on https://orgmode.org, but for reliability, prefer installing it on your own web server.
To use this program, just add this line to the Org file:
#+INFOJS_OPT: view:info toc:nil
The HTML header now has the code needed to automatically invoke the script. For setting options, use the syntax from the above line for options described below:
The path to the script. The default is to grab the script from https://orgmode.org/org-info.js, but you might want to have a local copy and use a path like ‘../scripts/org-info.js’.
Initial view when the website is first shown. Possible values are:
| ‘info’ | Info-like interface with one section per page |
| ‘overview’ | Folding interface, initially showing only top-level |
| ‘content’ | Folding interface, starting with all headlines visible |
| ‘showall’ | Folding interface, all headlines and text visible |
Maximum headline level still considered as an independent section
for info and folding modes. The default is taken from
org-export-headline-levels, i.e., the ‘H’ switch in ‘OPTIONS’. If
this is smaller than in org-export-headline-levels, each
info/folding section can still contain child headlines.
Should the table of contents initially be visible? Even when ‘nil’, you can always get to the “toc” with i.
The depth of the table of contents. The defaults are taken from the
variables org-export-headline-levels and org-export-with-toc.
Does the CSS of the page specify a fixed position for the “toc”? If yes, the toc is displayed as a section.
Should there be short contents (children) in each section? Make this ‘above’ if the section should be above initial text.
Headings are highlighted when the mouse is over them. Should be ‘underline’ (default) or a background color like ‘#cccccc’.
Should view-toggle buttons be everywhere? When ‘nil’ (the default), only one such button is present.
You can choose default values for these options by customizing the
variable org-infojs-options. If you always want to apply the script
to your pages, configure the variable org-export-html-use-infojs.