nuxt-toc

一個用於 Nuxt Content 專案中目錄 (TOC) 元件的 Nuxt 模組。

✨ 版本說明

功能 ✨

🎨 高度可自訂：量身打造以符合您的獨特需求。
🔍 活動目錄反白：輕鬆查看您所在的區塊。
📦 開箱即用：只需最少的設定即可使用。
🔗 章節連結：在您的內容中順暢導覽。
♿ ARIA 支援：確保所有使用者皆可存取。
🆓 免費且開放原始碼 (MIT 授權)：享有使用、修改和散佈的自由。

快速開始 🔧

將模組安裝到您的 Nuxt 應用程式

npx nuxi module add nuxt-toc

在您需要目錄的地方新增 <TableOfContents />。

<template>
    <ContentDoc />
    <TableOfContents />
</template>

您也可以自行傳入目錄，以防止重複提取。

<template>
    <ContentRenderer :value="data" />
    <TableOfContents :toc="data.body.toc" />
</template>

<script setup>
const route = useRoute()

const { data } = await useAsyncData('home', () => queryContent(route.path).findOne())
</script>

Props

Prop	類型	預設值	描述
`toc`	JSON	`null`	使用提供的 `toc` 資料。如果傳入 `toc`，此元件將不會自行提取目錄資訊，並且 `path` prop 將被忽略。
`path`	字串	`''`	要產生目錄的內容路徑。如果未設定，預設為使用當前 URI。
`isSublistShown`	布林值	`true`	決定是否顯示目錄中的子列表。
`isTitleShownWithNoContent`	布林值	`布林值`	false
`title`	字串	`'目錄'`	目錄的標題。

樣式

ID/類別	類型	描述
`toc-container`	ID	目錄 (TOC) 的容器。
`toc-title`	ID	目錄的標題。
`toc-item`	類別	目錄項目的通用類別。
`toc-topitem`	類別	頂層目錄項目的特定類別。
`active-toc-item`	類別	套用於活動目錄項目。
`active-toc-topitem`	類別	套用於活動頂層目錄項目。
`toc-link`	類別	目錄連結的通用類別。
`toc-toplink`	類別	頂層目錄連結的特定類別。
`toc-sublist`	類別	設定目錄中子列表的樣式。
`toc-subitem`	類別	子層目錄項目的特定類別。
`active-toc-subitem`	類別	套用於活動子層目錄項目。
`toc-sublink`	類別	子層目錄連結的特定類別。
`toc-item-${link.id}`	ID	基於 `link.id` 為每個目錄項目動態生成的 ID。
`toc-topitem-and-sublist`	類別	設定頂層目錄項目及其子列表的樣式。

!注意 <TableOfContents /> 元件的預設樣式為

.active-toc-item {
  color: #fef08a;
}

.toc-sublist-item {
  padding-left: 1rem;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

您可以使用以下方式自訂樣式或重設樣式：

.active-toc-item {
  color: initial;
}

.toc-sublist-item {
  padding-left: initial;
}

a {
  text-decoration: underline;
  color: initial;
}

ul,
ol {
  list-style: initial;
  padding: initial;
  margin: initial;
}

範例

範例一

活動項目的自訂顏色和子項目的自訂內距

<template>
    <ContentDoc />
    <TableOfContents />
</template>

<style>
/* Styling for active Table of Contents items */
.active-toc-item {
  color: #4ade80;
}

/* Indentation for second-level Table of Contents items */
.toc-sublist-item {
  padding-left: 1.5rem;
}
</style>

<!-- Or with Tailwind CSS
<style>
.active-toc-item {
  @apply text-green-300
}

.toc-sublist-item {
  @apply pl-1.5
}
</style>
-->

結果

範例二

在每個項目的左側加上一個條

<template>
    <ContentDoc />
    <TableOfContents />
</template>

<style>
.toc-item {
  border-left-width: 2px;
  border-left-style: solid;
  border-color: #e5e7eb;
  padding-left: 0.25rem /* 4px */;
}

.active-toc-item {
  color: #60a5fa;
  border-color: #60a5fa;
}

.toc-sublist-item {
  padding-left: 1rem;
}
</style>

<!-- Or with Tailwind CSS
<style>
.toc-item {
  @apply border-l-2 pl-1
}

.active-toc-item {
  @apply text-blue-400 border-blue-400
}

.toc-sublist-item {
  @apply pl-4
}
</style>
-->

結果

範例三

當任何第二層標題處於活動狀態時，第一層標題也處於活動狀態。

<template>
    <ContentDoc />
    <TableOfContents />
</template>

<style>
/* Sublist item is contained in sub list, which is top item's sibling */
.active-toc-item, .toc-topitem:has(+ .toc-sublist .active-toc-sublist-item) {
  color: #60a5fa
}

.active-toc-sublist-item {
  color: #4ade80
}

.toc-sublist-item {
  padding-left: 1rem /* 16px */;
}
</style>

<!-- Or with Tailwind CSS
<style>
.active-toc-item, .toc-topitem:has(+ .toc-sublist .active-toc-sublist-item) {
  @apply text-blue-400
}

.active-toc-sublist-item {
  @apply text-green-400
}

.toc-sublist-item {
  @apply pl-4
}
</style>
-->

結果

授權

此專案採用 MIT 授權。