saicaca / fuwari

✨A static blog template built with Astro.
https://fuwari.vercel.app
MIT License
1.24k stars 270 forks source link

Feat: Table of Contents #117

Open n1ckisthereu opened 3 months ago

n1ckisthereu commented 3 months ago

Well, I don't know about the design decisions chosen for this theme (which are incredible) but I believe it would be cool if when opening a post, we would have a kind of navigation tab, something like this:

image

basically implementing the topics created on the page in this new "menu".

davidvkimball commented 3 months ago

I think something like this might suit your needs:

Readme Card

davidvkimball commented 3 months ago

In case you're still interested in adding this, all you have to do is use pnpm add remark-toc and add it to your Astro config file, and you're done! Each time you want a table of contents, just create a heading called ## Contents and it will automatically generate it for you.

I just added this new line and modified the remarkPlugins line in my astro.config.mjs file:

import remarkToc from "remark-toc" remarkPlugins: [remarkMath, remarkReadingTime, remarkDirective, parseDirectiveNode, [remarkToc, { maxDepth: 2 }]],

I gave it a maxDepth of 2 because I only wanted to display H2 headings. By default it goes all the way to 6, and I found displaying even just H3s and H4s to be a bit too much. But if you want to see it in action, here it is on my blog.

dabuside commented 2 months ago

Post with dynamic anchor support will be a great help

demo