Rehype 的目录插件

A 类 复韵 在页面上添加目录( TOC) 的插件

特征

• 添加一个 <nav> 财务报告和审定财务报表 <ol> 列表,列出页面上的所有标题
• 与 重击- slug 创建每个标题的链接
• 忽略标题 <main> 如果它存在的话
• 您可以自定义包含哪些标题( 默认为 <h1> - 说吧 <h6>(中文(简体) )
• 您可以在每个 TOC 元素上自定义 CSS 类
• Hooks 使您完全定制生成的 HTML

示例

输入.html
以下是HTML的原始文件. 标题分为三个层次:<h1> - 说吧 <h3>他们中没有一个有身份证.

<html>
  <body>
    <h1>Apple Pie Recipe</h1>
    <p>This is the world's best apple pie recipe...</p>

    <div>
      <h2>Filling</h2>
      <p>The filling is the best part...</p>

      <h3>Preparing the apples</h3>
      <p>Cut the apples into 1/4 inch slices...</p>

      <h3>Preparing the spice mix</h3>
      <p>In a mixing bowl, combine sugar, cinnamon...</p>
    </div>

    <div>
      <h2>Crust</h2>
      <p>How to make the perfect flaky crust...</p>

      <h3>Preparing the dough</h3>
      <p>Combine flour, sugar, salt...</p>

      <h3>The criss-cross top</h3>
      <p>Cut the top crust into 1/2 inch strips...</p>
    </div>
  </body>
</html>

实例.js
此脚本读取 input.html 上方文件将结果写入 output.html (下划线). 脚本使用 统一, (中文(简体) ), 复韵区, (中文(简体) ), 重击- slug,以及 重排字符串。 。 。 .

const unified = require("unified");
const parse = require("rehype-parse");
const slug = require("rehype-slug");
const toc = require("@jsdevtools/rehype-toc");
const stringify = require("rehype-stringify");
const fs = require("fs");

async function example() {
  // Create a Rehype processor with the TOC plugin
  const processor = unified()
    .use(parse)
    .use(slug)
    .use(toc)
    .use(stringify);

  // Read the original HTML file
  let inputHTML = await fs.promises.readFile("input.html");

  // Process the HTML, adding heading IDs and Table of Contents
  let outputHTML = await processor.process(inputHTML);

  // Save the new HTML
  await fs.promises.writeFile("output.html", outputHTML);
}

输出.html
以下是上面的脚本所创建的HTML. 注意目录已添加到 <body>,并附有页面上每个标题的链接。 这些标题现在也有身份证,因为 重击- slug。 。 。 .

<html>
  <body>
    <nav class="toc">
      <ol class="toc-level toc-level-1">
        <li class="toc-item toc-item-h1">
          <a class="toc-link toc-link-h1" href="#apple-pie-recipe">
            Apple Pie Recipe
          </a>

          <ol class="toc-level toc-level-2">
            <li class="toc-item toc-item-h2">
              <a class="toc-link toc-link-h2" href="#filling">
                Filling
              </a>

              <ol class="toc-level toc-level-3">
                <li class="toc-item toc-item-h3">
                  <a class="toc-link toc-link-h3" href="#preparing-the-apples">
                    Preparing the apples
                  </a>
                </li>
                <li class="toc-item toc-item-h3">
                  <a class="toc-link toc-link-h3" href="#preparing-the-spice-mix">
                    Preparing the spice mix
                  </a>
                </li>
              </ol>
            </li>

            <li class="toc-item toc-item-h2">
              <a class="toc-link toc-link-h2" href="#crust">
                Crust
              </a>

              <ol class="toc-level toc-level-3">
                <li class="toc-item toc-item-h3">
                  <a class="toc-link toc-link-h3" href="#preparing-the-dough">
                    Preparing the dough
                  </a>
                </li>
                <li class="toc-item toc-item-h3">
                  <a class="toc-link toc-link-h3" href="#the-criss-cross-top">
                    The criss-cross top
                  </a>
                </li>
              </ol>
            </li>
          </ol>
        </li>
      </ol>
    </nav>

    <h1 id="apple-pie-recipe">Apple Pie Recipe</h1>
    <p>This is the world's best apple pie recipe...</p>

    <div>
      <h2 id="filling">Filling</h2>
      <p>The filling is the best part...</p>

      <h3 id="preparing-the-apples">Preparing the apples</h3>
      <p>Cut the apples into 1/4 inch slices...</p>

      <h3 id="preparing-the-spice-mix">Preparing the spice mix</h3>
      <p>In a mixing bowl, combine sugar, cinnamon...</p>
    </div>

    <div>
      <h2 id="crust">Crust</h2>
      <p>How to make the perfect flaky crust...</p>

      <h3 id="preparing-the-dough">Preparing the dough</h3>
      <p>Combine flour, sugar, salt...</p>

      <h3 id="the-criss-cross-top">The criss-cross top</h3>
      <p>Cut the top crust into 1/2 inch strips...</p>
    </div>
  </body>
</html>

安装

您可以通过 Rehype TOC 安装 无。 。 。 .

npm install @jsdevtools/rehype-toc

你可能会想安装 统一, (中文(简体) ), 复韵区, (中文(简体) ), 重排字符串,以及 重击- slug 还有.

npm install unified rehype-parse rehype-stringify rehype-slug

使用量

使用Rehype TOC插件需要了解如何使用United和Rehype. 这里有一个优秀的指南 学习基础.

Rehype TOC插件和任何其他的Rehype插件一样有效. 传过来 页:1 .use() 方法,可选择使用 选项对象。 。 。 .

const unified = require("unified");
const toc = require("@jsdevtools/rehype-toc");

// Use the Rehype TOC plugin with its default options
unified().use(toc);

// Use the Rehype TOC plugin with custom options
unified().use(toc, {
  headings: ["h1", "h2"],     // Only include <h1> and <h2> headings in the TOC
  cssClasses: {
    toc: "page-outline",      // Change the CSS class for the TOC
    link: "page-link",        // Change the CSS class for links in the TOC
  }
});

选项

Rehype TOC 插件支持以下选项:

捐款

欢迎贡献、增强和错误修正! 打开一个问题 关于 GitHub 和 提交拉动请求。 。 。 .

大楼

要在您的计算机上本地构建工程:

1. 克隆这个还原
   git clone https://github.com/JS-DevTools/rehype-toc.git

2. 安装依赖关系
   npm install

3. 构建代码
   npm run build

4. 运行测试
   npm test

许可证

Rehype TOC是100%的自由和开放源码,在 麻省理工学院许可证随意使用.

这个软件包是 树件如果你把它用于生产,那么我们要求你 给世界买一棵树 感谢我们的工作。 将会为当地家庭创造就业机会.

谢谢

感谢这些优秀的公司对开源开发商的支持 QQ