0

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.

1 Answer 1

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.