Override table-of-content HTML in the template.

src/_assets/js/main.js

@@ -38,18 +38,6 @@ function adjustToc() {
     $('html, body').animate({ scrollTop: 0 }, 'fast');
   })
 
-  // TODO: consider doing most of the HTML TOC manipulation statically (maybe requiring a jekyll-toc adaptor plugin)
-  // Bootstrap 4's ScrollSpy works only for .nav or .list-group,
-  // with items and link classes set too. Add the classes.
-  var toc = $(tocWrapper).find('ul.section-nav');
-  $(toc).addClass('nav');
-
-  var ul = $(toc).find('ul');
-  $(ul).addClass('nav');
-  var li = $(toc).find('.toc-entry');
-  $(li).addClass('nav-item');
-  $(li).find('a').addClass('nav-link');
-
   $('body').scrollspy({ offset: 100, target: '#site-toc--side' });
 }
 

src/_includes/navigation-toc.html

@@ -1,9 +1,16 @@
 {% unless page.toc == false or page.layout == 'homepage' %}
+{% assign toc = content | toc_only %}
+{% if include.extendToc -%}
+  {% assign toc = toc | replace: '<ul>', '<ul class="nav">' %}
+  {% assign toc = toc | replace: '<ul class="section-nav">', '<ul class="section-nav nav">' %}
+  {% assign toc = toc | replace: 'class="toc-entry', 'class="toc-entry nav-item' %}
+  {% assign toc = toc | replace: '<a href="#', '<a class="nav-link" href="#' %}
+{% endif -%}
 <div id="{{include.id}}" class="site-toc">
   <header class="site-toc__title">
     Contents
     <button type="button" class="btn site-toc--button__page-top" aria-label="Page top"></button>
   </header>
-  {{ content | toc_only }}
+  {{ toc }}
 </div>
 {% endunless %}

src/_layouts/default.html

@@ -5,7 +5,7 @@
     {% include page-header.html %}
     {% include navigation-side.html %}
     <main id="page-content">
-      {% include navigation-toc.html id='site-toc--side' %}
+      {% include navigation-toc.html id='site-toc--side' extendToc=true %}
       <article>
         <div class="content">
           {% if site.show_banner %} {% include banner.html %} {% endif %}