:WIP: [Feature] Table of contents

[pad92]

#219

[rootkea]

Hi! Is this complete?
I just checked out the toc branch and cloned in my 'themes' folder but I still can't see the table of contents beside any post.

BTW, I am testing exampleSite with hugo serve -D --themesDir ../..

Am I missing something?

Thanks!

[pad92]

you need to enable it, by default it's disabled

{{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) }}

TODO :

• update readme
• update exemple config

[rootkea]

{{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) }}

Oops! My bad!

BTW, I think we should make ToC sticky to the side while page gets scrolled just like er theme.

[pad92]

BTW, I think we should make ToC sticky to the side while page gets scrolled just like er theme.

Do you have js/css that ? :)

[rootkea]

umm.. We can look at the AllinOne[0] and/or Er[1] theme.

Sorry, I'm not good at css/js so can't really help :(

[0] https://themes.gohugo.io//theme/AllinOne/blog/2018-08/%E9%9F%B3%E4%B9%90%E5%89%A7catrepo/
[1] https://themes.gohugo.io//theme/er/post/migrate-from-jekyll/

[VincentTam]

@pad92 Thanks again for your PR. Here's my another quick test result on my demo site at https://vincenttam.gitlab.io/bhdemo (source) built for testitng #222 and eduardoboucas/staticman#219.

Unluckily, your PR contains a bug, which can be easily fixed by applying the Go-HTML template in gohugoio/hugo#1778 (comment). Mind to fix that?

[pad92]

thx @VincentTam

[VincentTam]

@pad92 In esponse to the original version of your previous comment, I've updated my demo site to include your commits, as well as #169

[pad92]

i have css with exempleSite ( from toc branch )

[VincentTam]

@pad92 Thx for feedback. I have really no idea why your CSS code in static/css/main.css doesn't come up despite the merge commit 993979f of my fork of this theme on GitLab. Since I'm not proficient in HTML/CSS/JS at all (despite the submission of another PR supporting Staticman's nested comments), I regret to put this aside for the moment.

[pad92]

i retry and have css
Do you clear your browser's cache ?

git clone --single-branch -b toc [email protected]:pad92/beautifulhugo.git
cd beautifulhugo/exampleSite/
hugo server --themesDir ../../

and open http://localhost:1313/post/2017-03-05-math-sample/

[VincentTam]

I've tried that on another device.

[VincentTam]

It seems that in my site, your CSS is overidden by other rules, so I followed your instructions to test this PR. Your TOC seems a bit aligned to the right. The colors are consistent with the whole theme. I would like to leave a little remark that the border is a bit angled. In the homepage, the border for the front matter has border-bottom-left-radius: 4px (idem for right).

[pad92]

if someone has an idea to fix ... I'm open :)

[pad92]

I've tried that on another device.

i'm unable to reproduce this issue.

https://pad92.gitlab.io/demo_beautifulhugo/posts/my-second-post/
fork from your demo
( https://gitlab.com/pad92/demo_beautifulhugo )

If you have time to improve and update this request.

I want this feature for in the main project to delete my fork:)

[pad92]

umm.. We can look at the AllinOne[0] and/or Er[1] theme.

Sorry, I'm not good at css/js so can't really help :(

[0] https://themes.gohugo.io//theme/AllinOne/blog/2018-08/%E9%9F%B3%E4%B9%90%E5%89%A7catrepo/
[1] https://themes.gohugo.io//theme/er/post/migrate-from-jekyll/

🎉 https://pad92.gitlab.io/demo_beautifulhugo/posts/my-second-post/ :)

I ended up listening to you, yes, it's easier that way.
I hope it doesn't generate too much overlap.

[rootkea]

Suggestions:

1. Check out this AllinOne theme page. Observe how the control jumps from one item to another of the ToC as we scroll the page
2. Clicking on a particular item of ToC, it smoothly scrolls (and not abruptly jumps) the page to that section.