- {% if page.toc %} + {% if page.toc and page.toc.beginning %}
{% toc %}
diff --git a/_posts/2023-03-20-table-of-contents.md b/_posts/2023-03-20-table-of-contents.md index dac570922e59..f94c52b0ee8c 100644 --- a/_posts/2023-03-20-table-of-contents.md +++ b/_posts/2023-03-20-table-of-contents.md @@ -6,13 +6,19 @@ description: an example of a blog post with table of contents categories: sample-posts toc giscus_comments: true related_posts: false -toc: true +toc: + beginning: true --- -This post shows how to add a table of contents. +This post shows how to add a table of contents in the beginning of the post. ## Adding a Table of Contents -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. +To add a table of contents to a post, simply add +```yml +toc: + beginning: true +``` +to the front matter of the post. The table of contents will be automatically generated from the headings in the post. ### Example of Sub-Heading 1 diff --git a/_posts/2023-04-25-sidebar-table-of-contents.md b/_posts/2023-04-25-sidebar-table-of-contents.md new file mode 100644 index 000000000000..6159587d53a9 --- /dev/null +++ b/_posts/2023-04-25-sidebar-table-of-contents.md @@ -0,0 +1,42 @@ +--- +layout: post +title: a post with table of contents on a sidebar +date: 2023-04-25 10:14:00-0400 +description: an example of a blog post with table of contents on a sidebar +categories: sample-posts toc sidebar +giscus_comments: true +related_posts: false +toc: + sidebar: left +--- +This post shows how to add a table of contents as a sidebar. + +## Adding a Table of Contents + +To add a table of contents to a post as a sidebar, simply add +```yml +toc: + sidebar: left +``` +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`. + +### Example of Sub-Heading 1 + +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. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed 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. + +### Example of another Sub-Heading 1 + +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. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed 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. + +## Customizing Your Table of Contents +{:data-toc-text="Customizing"} + +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. + +### Example of Sub-Heading 2 + +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. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed 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. + +### Example of another Sub-Heading 2 + +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. Pinterest DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade cold-pressed 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. diff --git a/_sass/_base.scss b/_sass/_base.scss index c9e44b8912e3..2a14ec84b6b3 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -860,3 +860,17 @@ progress::-moz-progress-bar { opacity: 1; } } + +nav[data-toggle="toc"] { + top: 5rem; +} + +/* small screens */ +@media (max-width: 576px) { + /* override stickyness so that the navigation does not follow scrolling */ + nav[data-toggle="toc"] { + visibility: hidden; + height: 0; + top: 0; + } +} \ No newline at end of file diff --git a/assets/js/common.js b/assets/js/common.js index 5ffcb5010904..00119639c370 100644 --- a/assets/js/common.js +++ b/assets/js/common.js @@ -9,3 +9,15 @@ $(document).ready(function() { }); $('a').removeClass('waves-effect waves-light'); }); + +// bootstrap-toc +$(function () { + if($('#toc-sidebar').length){ + var navSelector = "#toc-sidebar"; + var $myNav = $(navSelector); + Toc.init($myNav); + $("body").scrollspy({ + target: navSelector, + }); + } +}); \ No newline at end of file