为掘金小册增添目录，提升阅读体验

前端

2023-10-12 08:57:23

作为技术博客创作专家，我经常在掘金小册上发表文章。然而，我发现掘金小册的一个缺点是它没有目录。当文章较长时，这会给阅读带来极大的不便。

为了解决这个问题，我决定创建本指南，向大家展示如何为掘金小册添加目录。本指南将涵盖以下内容：

为掘金小册添加目录的好处
如何使用 JavaScript 创建目录
如何使用 CSS 样式目录
SEO 最佳实践

为掘金小册添加目录的好处

为掘金小册添加目录有几个好处：

改善内容组织：目录使读者可以轻松浏览文章结构并快速找到他们感兴趣的部分。
提升文章导航：目录允许读者直接跳转到文章的特定部分，无需滚动浏览整个页面。
提高用户体验：目录为读者提供了更好的阅读体验，让他们可以更有效地找到所需信息。

如何使用 JavaScript 创建目录

以下是如何使用 JavaScript 为掘金小册添加目录的步骤：

在文章中添加锚点：在文章中，为每个标题添加一个唯一的 ID。这将使我们能够链接到这些标题。
创建 JavaScript 函数：创建一个 JavaScript 函数来生成目录。该函数将遍历标题，为每个标题创建一个链接并将其添加到目录中。
在文章底部添加目录：在文章底部添加一个 HTML 元素，我们将目录添加到其中。
调用 JavaScript 函数：调用 JavaScript 函数来生成目录并将其添加到页面中。

以下是一个示例 JavaScript 代码：

function createTOC() {
  // 获取所有标题元素
  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

  // 创建目录元素
  const toc = document.createElement('div');
  toc.id = 'toc';

  // 遍历标题并创建链接
  for (let i = 0; i < headings.length; i++) {
    const heading = headings[i];

    // 获取标题 ID
    const id = heading.id;

    // 创建链接
    const link = document.createElement('a');
    link.href = `#${id}`;
    link.textContent = heading.textContent;

    // 将链接添加到目录
    toc.appendChild(link);
  }

  // 将目录添加到页面
  document.body.appendChild(toc);
}

createTOC();

如何使用 CSS 样式目录

一旦你创建了目录，你可以使用 CSS 来样式化它。以下是一些常见的 CSS 样式：

#toc {
  position: fixed;
  top: 0;
  right: 0;
  padding: 1rem;
  background-color: #fff;
}

#toc a {
  display: block;
  padding: 0.5rem;
  text-decoration: none;
  color: #000;
}

#toc a:hover {
  background-color: #eee;
}