nuxt-toc

一个用于在您的 Nuxt Content 项目中创建目录 (TOC) 组件的 Nuxt 模块。

✨ 发行说明

功能 ✨

🎨 高度可定制：根据您的独特需求进行定制。
🔍 活动目录高亮显示：轻松查看您所在的章节。
📦 开箱即用：只需最少的设置即可使用。
🔗 章节链接：在内容中无缝导航。
♿ ARIA 支持：确保所有用户都能访问。
🆓 免费且开源 (MIT 许可证)：尽情享受使用、修改和分发的自由。

快速入门 🔧

将模块安装到您的 Nuxt 应用程序中

npx nuxi module add nuxt-toc

在您需要目录的位置添加 <TableOfContents />。

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

您也可以自己传入 TOC 以防止重复获取。

<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>

属性

属性	类型	默认值	描述
`toc`	JSON	`null`	使用提供的 `toc` 数据。如果传递了 `toc`，则此组件不会自行获取 TOC 信息，并且 `path` 属性将被忽略。
`path`	字符串	`''`	生成 TOC 的内容的路径。如果未设置，则默认为使用当前 URI。
`isSublistShown`	布尔值	`true`	确定 TOC 中的子列表是否显示。
`isTitleShownWithNoContent`	布尔值	`false`	确定即使 TOC 中没有内容是否也显示标题。
`title`	字符串	`'目录'`	TOC 的标题。

样式

ID/类	类型	描述
`toc-container`	ID	目录 (TOC) 的容器。
`toc-title`	ID	目录的标题。
`toc-item`	类	TOC 项目的通用类。
`toc-topitem`	类	顶级 TOC 项目的特定类。
`active-toc-item`	类	应用于活动 TOC 项目。
`active-toc-topitem`	类	应用于活动顶级 TOC 项目。
`toc-link`	类	TOC 链接的通用类。
`toc-toplink`	类	顶级 TOC 链接的特定类。
`toc-sublist`	类	设置 TOC 中子列表的样式。
`toc-subitem`	类	子级 TOC 项目的特定类。
`active-toc-subitem`	类	应用于活动子级 TOC 项目。
`toc-sublink`	类	子级 TOC 链接的特定类。
`toc-item-${link.id}`	ID	根据 `link.id` 为每个 TOC 项目动态生成的 ID。
`toc-topitem-and-sublist`	类	设置顶级 TOC 项目及其子列表的样式。

！注意 <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 许可证。