How to export an html file with a foldable & dynamic TOC from an org file?

Question

When HTML pages are extended I find it quite useful to have a TOC (table of Content) available all along with your scrolling.

A good example of an implementation of such a functionality is the Worg webpages (here is an example), which are generated from org files.

So my question is, how is this done? Is it done through a CSS file? If it is, what would the CSS code be?

score 2 · Answer 1 · answered Jan 06 '21 at 01:53

2

It's done with a Javascript library called org-info.js, written by Sebastian Rose. See the Javascript support section of the Org mode manual. There is also some additional documentation in Worg.

answered Jan 06 '21 at 01:53

NickD

27,023
3
23
42

1

Hi NickD, are you sure org-info.js handles dynamic TOC? My goal is not to have an Info-like, nor a folding view – crocefisso Jan 06 '21 at 02:35
1

Ok, it actually was done through a CSS: https://orgmode.org/worg/style/worg.css – crocefisso Jan 06 '21 at 03:02
1

Oh, I probably conflated the two. Sorry about that. – NickD Jan 06 '21 at 13:30

crocefisso · Accepted Answer · 2021-01-11T01:32:49.210

1

Following line has to be put on top of your org file:

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://orgmode.org/worg/style/worg.css"/>

edited Jan 11 '21 at 01:32

answered Jan 06 '21 at 02:50

crocefisso

1,141
7
15

How to export an html file with a foldable & dynamic TOC from an org file?

2 Answers2