带目录的文章示例

本文演示了如何在文章中启用自动目录功能。通过在文章前置元数据中设置 toc: "YES"，文章右侧将自动显示目录导航。

什么是目录功能

目录（Table of Contents，简称TOC）是一种导航辅助工具，它可以帮助读者快速了解文章结构，并方便地跳转到感兴趣的部分。对于长篇文章或教程，目录功能尤为重要，能够大大提升用户阅读体验。

目录的优势

提供文章结构概览
便于读者快速导航
改善长文章的阅读体验
增强文章的专业性和可用性

如何启用目录功能

启用目录功能非常简单，只需在文章的前置元数据中添加以下内容：

---
title: "文章标题"
description: "文章描述"
toc: "YES"
---

其中，toc 属性可以设置为以下值之一：

"YES" - 启用目录
true - 同样启用目录
"yes" - 不区分大小写，也会启用目录

自定义目录样式

目录的样式已经根据网站的整体设计进行了优化，包括：

粘性定位，滚动时保持可见
响应式设计，在小屏幕设备上自动隐藏
当前章节高亮显示
点击平滑滚动到目标位置

目录中的标题级别

目录会自动提取文章中的标题，并按照层级关系显示。默认情况下，目录会包含以下级别的标题：

H1 标题（一级标题）
H2 标题（二级标题）
H3 标题（三级标题）

标题锚点

每个标题会自动生成锚点链接，这样不仅可以通过目录导航，还可以直接通过URL分享特定章节。

实际应用场景

目录功能在多种类型的内容中都非常有用：

技术教程

对于分步骤的技术教程，目录可以帮助读者了解整个学习路径，并随时跳转到特定步骤。

产品文档

产品文档通常包含多个章节，目录可以帮助用户快速找到需要的信息。

学术论文

学术论文结构严谨，通过目录可以清晰展示论文的逻辑结构和论证过程。

高级目录应用

目录功能还可以与其他内容元素结合使用，创造更丰富的阅读体验。

与图表结合

在包含多个图表的文章中，目录可以帮助读者快速定位到特定图表的解释部分。

与代码示例结合

对于包含多个代码示例的技术文章，目录可以帮助开发者快速跳转到感兴趣的代码部分。

// 目录组件示例代码
function TableOfContents({ headings }) {
  return (
    <nav className="toc">
      <h4>目录</h4>
      <ul>
        {headings.map(heading => (
          <li key={heading.id} style={{ marginLeft: `${(heading.level - 1) * 16}px` }}>
            <a href={`#${heading.id}`}>{heading.text}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

结论

合理使用目录功能可以显著提升文章的可读性和用户体验。对于结构复杂或内容较长的文章，强烈建议启用目录功能，帮助读者更好地理解和导航内容。

现在，您可以尝试点击右侧的目录链接，体验平滑滚动和当前章节高亮功能。