Han.js - 滚动同步目录插件

欢迎

Han.js 是一个轻量级、可定制的 JavaScript 插件，用于生成滚动同步的目录。 它会自动检测文章中的标题，并创建一个带有活动状态高亮显示的导航目录。

安装

通过 NPM

npm install han-js

通过 CDN

<script src="https://cdn.jsdelivr.net/gh/hanluim/han@main/han.js"></script>

使用方法

基本用法

要使用 Han.js，您需要通过传递文章容器和目录容器的选择器来初始化它。

const toc = new HanluTableOfContents('#article-container', '#toc-container');

自定义选项

您可以传递一个选项对象来自定义 Han.js 的行为：

const toc = new HanluTableOfContents('#article-container', '#toc-container', {
    headingTags: ['H1', 'H2'],
    offsetScroll: 50,
    linkClassPrefix: 'custom-toc-style-',
    activeClass: 'custom-active',
    idPrefix: 'custom-id-'
});

配置选项

完整示例

以下是一个完整的示例，演示如何在网页中使用 Han.js。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例文章</title>
    <style>
        .custom-active {
            font-weight: bold;
            color: red;
        }
        .custom-toc-style-1 {
            margin-left: 0;
        }
        .custom-toc-style-2 {
            margin-left: 20px;
        }
    </style>
</head>
<body>

<div id="toc-container">
    <!-- 目录将在这里生成 -->
</div>

<div id="article-container">
    <h1>介绍</h1>
    <p>这是介绍段落。</p>
    <h2>章节 1</h2>
    <p>这是第一个章节。</p>
    <h2>章节 2</h2>
    <p>这是第二个章节。</p>
    <h3>子章节 2.1</h3>
    <p>这是一个子章节。</p>
</div>

<script src="han.js"></script>
<script>
    const toc = new HanluTableOfContents('#article-container', '#toc-container', {
        headingTags: ['H1', 'H2', 'H3'],
        offsetScroll: 50,
        linkClassPrefix: 'custom-toc-style-',
        activeClass: 'custom-active',
        idPrefix: 'custom-id-'
    });
</script>

</body>
</html>

联系与支持

如果您有任何问题或需要帮助，请随时联系我们。

电子邮件: hanlu2611@gmail.com