TableOfContents Customization Possible?

Hello. I am trying to generate the ordered ToC in goldmark renderer. It’s very nice, thank you.

I would like to have the ordering as following:

1
2
3
4
5
6
7
7.1
8
9
9.1
9.2
9.2.1
9.2.2
9.3
10

Etc. Etc. and So forth.

I use Gitbook for my book on DMT, and I have not yet looked up the kind of parser it uses, but I get the following output there:

Please let me know if this is possible. I am hoping to have such a ToC ordered generated if possible.

I don’t know if this is possible from Hugo’s side. But it is possible from the CSS side by using a counter() (the example on that page already does something what you want).

Good luck!

1 Like

Thank you. I’ll have to work that out. For anyone else interested in this, I have the following CSS which works for the actual article .Content:

/* post counter */

#post-content {
counter-reset: h1;
}

#post-content h1 {
counter-reset : h2;
}

#post-content h2 {
counter-reset : h3;
}

#post-content h3 {
counter-reset : h4;
}

#post-content h4 {
counter-reset : h5;
}

#post-content h5 {
counter-reset : h6;
}

#post-content h1:before {
content : counter(h1,decimal) ". ";
counter-increment : h1;
}


#post-content h2:before {
	content : counter(h1,decimal) "." counter(h2,decimal) ". ";
	counter-increment : h2;
}
#post-content h3:before {
content : counter(h1,decimal) "." counter(h2,decimal) "." counter(h3,decimal) ". ";
counter-increment : h3;
}
#post-content h4:before {
content : counter(h1,decimal) "." counter(h2,decimal) "." counter(h3,decimal) "." counter(h4,decimal) ". ";
counter-increment : h4;
}
#post-content h5:before {
content : counter(h1,decimal) "." counter(h2,decimal) "." counter(h3,decimal) "." counter(h4,decimal) ". " counter(h5,decimal) ". ";
counter-increment : h5;
}
h1.nocount:before, h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before {
	content : "";
	counter-increment : none;
}

which looks like:

counter

The code for the Table of Contents, I am still working on. It is a CSS issue now and not a Hugo issue, but still if anyone wants to reply, that’ll be good too:

/* coutner */
#TableOfContents ol {
	counter-reset: section;
	list-style-type: none;
}

#TableOfContents li::before {
	counter-increment: section;
	content: counters(section, ".") " ";
}

That’s fine. Thank you.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.