Skip to content

Commit bbf1758

Browse files
george-gcageorge-gca
authored
Toc sidebar (alshedivat#1366)
Implemented alshedivat#966. ![image](https://user-images.githubusercontent.com/31376482/234411523-b02087d9-a437-4f77-9f54-de5eef122439.png) --------- Signed-off-by: George Araujo <george.gcac@gmail.com>
1 parent 0b109a2 commit bbf1758

File tree

8 files changed

+116
-6
lines changed

8 files changed

+116
-6
lines changed

‎_includes/head.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@
1313
<!-- Code Syntax Highlighting -->
1414
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jwarby/jekyll-pygments-themes@master/{{ site.highlight_theme_light | append: '.css' }}" media="" id="highlight_theme_light" />
1515

16+
{% if page.toc and page.toc.sidebar %}
17+
<!-- Sidebar Table of Contents -->
18+
<link href="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.css" rel="stylesheet" />
19+
{% endif %}
20+
1621
<!-- Styles -->
1722
{% if site.icon.size <= 4 %}
1823
<link rel="shortcut icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ site.icon }}</text></svg>">
@@ -21,7 +26,7 @@
2126
{% endif %}
2227
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
2328
<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
24-
29+
2530
<!-- Dark Mode -->
2631
{% if site.enable_darkmode %}
2732
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jwarby/jekyll-pygments-themes@master/{{ site.highlight_theme_dark | append: '.css' }}" media="none" id="highlight_theme_dark" />

‎_includes/scripts/misc.html

+5
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
<script defer src="{{ '/assets/js/zoom.js' | relative_url }}"></script>
1111
{%- endif -%}
1212

13+
{% if page.toc and page.toc.sidebar %}
14+
<!-- Sidebar Table of Contents -->
15+
<script defer src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script>
16+
{% endif %}
17+
1318
<!-- Load Common JS -->
1419
<script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>
1520
<script defer src="{{ '/assets/js/copy_code.js' | relative_url }}" type="text/javascript"></script>

‎_layouts/default.html

+27-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,33 @@
1717

1818
<!-- Content -->
1919
<div class="container mt-5">
20-
{{ content }}
20+
{% if page.toc and page.toc.sidebar %}
21+
{% if page.toc.sidebar == "right" %}
22+
<div class="row">
23+
<!-- main content area -->
24+
<div class="col-sm-9">
25+
{{ content }}
26+
</div>
27+
<!-- sidebar, which will move to the top on a small screen -->
28+
<div class="col-sm-3">
29+
<nav id="toc-sidebar" class="sticky-top"></nav>
30+
</div>
31+
</div>
32+
{% else %}
33+
<div class="row">
34+
<!-- sidebar, which will move to the top on a small screen -->
35+
<div class="col-sm-3">
36+
<nav id="toc-sidebar" class="sticky-top"></nav>
37+
</div>
38+
<!-- main content area -->
39+
<div class="col-sm-9">
40+
{{ content }}
41+
</div>
42+
</div>
43+
{% endif %}
44+
{% else %}
45+
{{ content }}
46+
{% endif %}
2147
</div>
2248

2349
<!-- Footer -->

‎_layouts/post.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ <h1 class="post-title">{{ page.title }}</h1>
4040
</header>
4141

4242
<article class="post-content">
43-
{% if page.toc %}
43+
{% if page.toc and page.toc.beginning %}
4444
<div id="table-of-contents">
4545
{% toc %}
4646
</div>

‎_posts/2023-03-20-table-of-contents.md

+9-3
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,19 @@ description: an example of a blog post with table of contents
66
categories: sample-posts toc
77
giscus_comments: true
88
related_posts: false
9-
toc: true
9+
toc:
10+
beginning: true
1011
---
11-
This post shows how to add a table of contents.
12+
This post shows how to add a table of contents in the beginning of the post.
1213

1314
## Adding a Table of Contents
1415

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+
To add a table of contents to a post, simply add
17+
```yml
18+
toc:
19+
beginning: true
20+
```
21+
to the front matter of the post. The table of contents will be automatically generated from the headings in the post.
1622
1723
### Example of Sub-Heading 1
1824

‎_posts/2023-04-25-sidebar-table-of-contents.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
layout: post
3+
title: a post with table of contents on a sidebar
4+
date: 2023-04-25 10:14:00-0400
5+
description: an example of a blog post with table of contents on a sidebar
6+
categories: sample-posts toc sidebar
7+
giscus_comments: true
8+
related_posts: false
9+
toc:
10+
sidebar: left
11+
---
12+
This post shows how to add a table of contents as a sidebar.
13+
14+
## Adding a Table of Contents
15+
16+
To add a table of contents to a post as a sidebar, simply add
17+
```yml
18+
toc:
19+
sidebar: left
20+
```
21+
to the front matter of the post. The table of contents will be automatically generated from the headings in the post. If you wish to display the sidebar to the right, simply change `left` to `right`.
22+
23+
### Example of Sub-Heading 1
24+
25+
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.
26+
27+
### Example of another Sub-Heading 1
28+
29+
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.
30+
31+
## Customizing Your Table of Contents
32+
{:data-toc-text="Customizing"}
33+
34+
If you want to learn more about how to customize the table of contents of your sidebar, you can check the [bootstrap-toc](https://afeld.github.io/bootstrap-toc/) documentation. Notice that you can even customize the text of the heading that will be displayed on the sidebar.
35+
36+
### Example of Sub-Heading 2
37+
38+
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.
39+
40+
### Example of another Sub-Heading 2
41+
42+
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.

‎_sass/_base.scss

+14
Original file line numberDiff line numberDiff line change
@@ -860,3 +860,17 @@ progress::-moz-progress-bar {
860860
opacity: 1;
861861
}
862862
}
863+
864+
nav[data-toggle="toc"] {
865+
top: 5rem;
866+
}
867+
868+
/* small screens */
869+
@media (max-width: 576px) {
870+
/* override stickyness so that the navigation does not follow scrolling */
871+
nav[data-toggle="toc"] {
872+
visibility: hidden;
873+
height: 0;
874+
top: 0;
875+
}
876+
}

‎assets/js/common.js

+12
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,15 @@ $(document).ready(function() {
99
});
1010
$('a').removeClass('waves-effect waves-light');
1111
});
12+
13+
// bootstrap-toc
14+
$(function () {
15+
if($('#toc-sidebar').length){
16+
var navSelector = "#toc-sidebar";
17+
var $myNav = $(navSelector);
18+
Toc.init($myNav);
19+
$("body").scrollspy({
20+
target: navSelector,
21+
});
22+
}
23+
});

0 commit comments

Comments
 (0)