Closed ArsalaBangash closed 3 years ago
Table of contents snippet from: https://content.nuxtjs.org/snippets#table-of-contents
Add a table of contents by looping over our array of toc and use the id to link to it and the text to show the title. We can use the depth to style the titles differently:
<template>
<ul>
<li
v-for="link of article.toc"
:key="link.id"
:class="{ 'toc2': link.depth === 2, 'toc3': link.depth === 3 }"
>
<NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink>
</li>
</ul>
</template>
<script>
export default {
async asyncData({ $content, params }) {
const article = await $content('articles', params.slug)
.fetch()
return {
article
}
}
}
</script>
The previous Hacklab website had a useful side bar which gave an outline of the doc.