Skip to content

Commit 67e5fcd

Browse files
authored
Added support for table of contents in blog posts (alshedivat#1278)
![image](https://user-images.githubusercontent.com/31376482/226411600-e5619108-3842-4c44-b582-61fcc94a1b0c.png) --------- Signed-off-by: George Araújo <george.gcac@gmail.com>
1 parent ee3f2b9 commit 67e5fcd

File tree

4 files changed

+47
-2
lines changed

4 files changed

+47
-2
lines changed

Gemfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ group :jekyll_plugins do
1212
gem 'jekyll-paginate-v2'
1313
gem 'jekyll-scholar'
1414
gem 'jekyll-sitemap'
15+
gem 'jekyll-toc'
1516
gem 'jekyll-twitter-plugin'
1617
gem 'jemoji'
1718
gem 'mini_racer'

_config.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,11 +220,12 @@ plugins:
220220
- jekyll-email-protect
221221
- jekyll-feed
222222
- jekyll-imagemagick
223+
- jekyll-link-attributes
223224
- jekyll-minifier
224225
- jekyll-paginate-v2
225226
- jekyll/scholar
226227
- jekyll-sitemap
227-
- jekyll-link-attributes
228+
- jekyll-toc
228229
- jekyll-twitter-plugin
229230
- jemoji
230231

_layouts/post.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,15 @@ <h1 class="post-title">{{ page.title }}</h1>
4040
</header>
4141

4242
<article class="post-content">
43-
{{ content }}
43+
{% if page.toc %}
44+
<div id="table-of-contents">
45+
{% toc %}
46+
</div>
47+
<hr>
48+
{% endif %}
49+
<div id="markdown-content">
50+
{{ content }}
51+
</div>
4452
</article>
4553

4654
{%- if site.related_blog_posts.enabled -%}
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
layout: post
3+
title: a post with table of contents
4+
date: 2023-03-20 11:59:00-0400
5+
description: an example of a blog post with table of contents
6+
categories: sample-posts toc
7+
giscus_comments: true
8+
related_posts: false
9+
toc: true
10+
---
11+
This post shows how to add a table of contents.
12+
13+
## Adding a Table of Contents
14+
15+
To add a table of contents to a post, simply add `toc: true` to the front matter of the post. The table of contents will be automatically generated from the headings in the post.
16+
17+
### Example of Sub-Heading 1
18+
19+
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. <a href="https://www.pinterest.com">Pinterest</a> DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade <a href="https://en.wikipedia.org/wiki/Cold-pressed_juice">cold-pressed</a> meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
20+
21+
### Example of another Sub-Heading 1
22+
23+
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. <a href="https://www.pinterest.com">Pinterest</a> DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade <a href="https://en.wikipedia.org/wiki/Cold-pressed_juice">cold-pressed</a> meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
24+
25+
## Table of Contents Options
26+
27+
If you want to learn more about how to customize the table of contents, you can check the [jekyll-toc](https://github.com/toshimaru/jekyll-toc) repository.
28+
29+
### Example of Sub-Heading 2
30+
31+
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. <a href="https://www.pinterest.com">Pinterest</a> DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade <a href="https://en.wikipedia.org/wiki/Cold-pressed_juice">cold-pressed</a> meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
32+
33+
### Example of another Sub-Heading 2
34+
35+
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. <a href="https://www.pinterest.com">Pinterest</a> DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade <a href="https://en.wikipedia.org/wiki/Cold-pressed_juice">cold-pressed</a> meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.

0 commit comments

Comments
 (0)