Search code examples
htmlcssemacsorg-mode

How to use display Table of Contents in sidebar with arbitrary HTML file?

I would like to make a webpage with a sidebar table of contents (TOC) like these examples:

  1. Bookdown
  2. Jupyter's TOC2

I generate HTML files (using emacs org-mode) which appears to include the following description of Table of Contents:

<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul style="list-style-type:none">
<li><a href="#org0595c1a">1. Heading 1</a></li>
<li><a href="#orgb4d7ab6">2. Heading 2</a></li>
</ul>
</div>

With org-mode, there is a possibility to use CSS files when exported with this line the file:

#+html_head: <link rel="stylesheet" type="text/css" href="style.css"/>

But I have not found a CSS file which creates this TOC in the sidebar.

I do not know javascript or CSS so I would appreciate any suggestions.

Solution

  • Here's an example how you could do it with the ReadTheDocs theme from fniessen/org-html-themes. The key bit below is #+SETUPFILE of course.

    #+TITLE: My Website
#+SETUPFILE: https://fniessen.github.io/org-html-themes/org/theme-readtheorg.setup

* Top-Level Heading
** About Me
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Egestas fringilla phasellus
faucibus scelerisque eleifend donec pretium. Imperdiet proin fermentum leo vel
orci. Habitasse platea dictumst vestibulum rhoncus est. Netus et malesuada fames
ac turpis. Molestie ac feugiat sed lectus vestibulum. Vitae justo eget magna
fermentum iaculis eu non. Proin sed libero enim sed faucibus turpis in eu. Sit
amet consectetur adipiscing elit ut aliquam purus sit amet. Vel pharetra vel
turpis nunc eget lorem dolor sed. Morbi non arcu risus quis varius quam quisque.
Sed nisi lacus sed viverra tellus in hac habitasse. Tortor pretium viverra
suspendisse potenti.


** Coding Exercise
Here's a little C code example that started my journey in the exciting world of
programming.

#+begin_src C
#include <stdio.h>
int main() {
   printf("Hello, World!");
   return 0;
}
#+end_src

    Result: org-export website