0

I have a gh-pages with jekyll minima theme on https://physicys.github.io/

Site source: https://github.com/Physicys/physicys.github.io

How can I create a Table of Contents on the left/right side exactly like this site: https://0xdf.gitlab.io/2022/10/08/htb-opensource.html

So the ToC will still there/following when I scroll down or click on the content.

image

Updates:

I don't see how it can automatically generate the ToC on a specific post based on heading elements. like this afeld.github.io/bootstrap-toc but I have no idea how to implement it in Jekyll based site. talk.jekyllrb.com/t/jekyll-minima-toc-on-the-left-side/7734/3

I play around with bootstrap-toc for a while, it require bootstrap.min.css and bootstrap.bundle.min.js which turns out messing with my dark theme and the ToC doesn’t look like working as intended. I can't embed the screenshot here. talk.jekyllrb.com/t/jekyll-minima-toc-on-the-left-side/7734/5

Christian
  • 4,902
  • 4
  • 24
  • 42
Physicys
  • 17
  • 4

1 Answers1

0

I had some trouble getting your page to work after looking at https://afeld.github.io/bootstrap-toc/#headings.

On your sample page, the "Recon" heading is an <h2>, and the subordinated headings are <h3>. Your page contains an h1, then h2 and h2, h2, and finally an h3.

I used this page content for testing (with some longer lorem ipsum) texts between the headings:

h2
h3
h3
h2
h3
h3
h3
h3
h2

Screenshot from my 2022-10-21-Toc-Test.md page

I have removed the following part (from the _layout.scss) to have the correct distances (using the new CSS below):

nav[data-toggle="toc"] {
  top: 42px;
}

I have added this new CSS (to the main.css):

.sticky-top {
  position: sticky;
  top: 100px;
  align-self: flex-start;
}

The idea is from My position: sticky element isn't sticky when using flexbox.

Note: I have not edited the margins/distances of the hover effects to match the screenshot but I am sure you will find it out.

Christian
  • 4,902
  • 4
  • 24
  • 42
  • Add that new css to nav elements? https://github.com/Physicys/physicys.github.io/commit/37010f11834c9cb484cc0a3c204106ea8fe6027a – Physicys Oct 23 '22 at 23:44
  • No, sorry, updated the above. I think it was the `sticky-top` class. – Christian Oct 24 '22 at 00:34
  • It works! probably need to adjust the content margins so it more wide. I added that .sticky-top to bootstrap main.css but unfortunately it's impacting the minima dark theme that I already have and icon in footer part, is there a workaround for this issue? Have a look https://physicys.github.io/Toc-Test – Physicys Oct 24 '22 at 03:17
  • Just restyle the toc CSS, in worst case overwrite the style with !important. – Christian Oct 24 '22 at 06:56