How to create a table of contents to Jekyll blog post?
I'm assuming you mean a list of all H1, H2 elements etc in the content itself? I don't think Jekyll has anything built-in to handle that. I suspect the easiest way is to let Javascript generate it for you once the page has rendered, using something like this jQuery plugin, or one of the many other plugins/snippets available.
That is the markup parser's task.
In case of Markdown one of the syntax extensions defines Automatic generation of the table of contents:
* This will become a table of contents (this text will be scrapped).
{:toc}
This works in Maruku and kramdown.
I have TOC for Jekyll blog which looks similar to Wikipedia TOC
So all my Jekyll posts have a Table of Contents section. It can be done just using kramdown.
Use this code inside your post where you want the TOC to appear
* Do not remove this line (it will not be displayed)
{:toc}
And use this CSS to style it like Wikipedia TOC
// Adding 'Contents' headline to the TOC
#markdown-toc::before {
content: "Contents";
font-weight: bold;
}
// Using numbers instead of bullets for listing
#markdown-toc ul {
list-style: decimal;
}
#markdown-toc {
border: 1px solid #aaa;
padding: 1.5em;
list-style: decimal;
display: inline-block;
}
Use appropriate colors that suit your blog.
That is it!
TOC can also be done with the help of jekyll-table-of-contents, if in any case the above method doesn't work. This one uses Jquery and a js file.
Here is the detailed guide on how I did it: Jekyll TOC