/pandoc-toc-sidebar

A Pandoc HTML template with TOC on the sidebar, using Bootstrap 3

Primary LanguageHTML

pandoc-toc-sidebar

A Pandoc HTML template modified from Bootstrap dashboard example.
It has a navbar on the top of the page for website navigation, and a TOC (table of contents) on the sidebar for page navigaion, suitable for building website with Pandoc.

Usage

  1. Download the ZIP file then unzip it, or
git clone https://github.com/Mushiyo/pandoc-toc-sidebar.git
  1. Put the file(s) which you want to convert into HTML with Pandoc into the pandoc-toc-sidebar folder. Then
cd pandoc-toc-sidebar

  1. Modify the nav file to fit your website structure.
    The code in the nav file is a Bootstrap navbar.

  2. Assume the file to convert is input.md, then the command will look like

pandoc input.md --template toc-sidebar.html -B nav -o outWithoutTOC.html

If you want to add TOC, then the command will look like

pandoc input.md --template toc-sidebar.html --toc -B nav -o outWithTOC.html

Options

Local or self-contained css and JavaScript files

For local css and JavaScript files, or using Pandoc's --self-contained option, replace toc-sidebar.html with toc-sidebarL.html in step 4.

<table> styles

The <table> styles here are the following Bootstrap table classes: .table, table-bordered and table-hover. You can change the styles by modifying line 104 in toc-sidebar.html (or toc-sidebarL.html if local css and js files are used). For example, if you want .table-striped, just replace table table-bordered table-hover into table table-striped. Read Bootstrap documentation for more Bootstrap table styles.

No navbar

If you do not want a navbar, you can remove -B nav option in step 4. However, for the time being, this will result in a not good looking layout :(

Output examples

A single page

The following output examples are converted from Pandoc's README file and is using toc-sidebarL.html template

A website

My notes, the contents are mostly written in Chinese, you can find the markdown source files here.