anchors_keys 是一个 npm 包，用于在网页中为标题自动生成固定链接。在构建大型网站或博客时，往往需要为文章标题添加固定链接，以便读者可以方便的通过链接跳转到指定的标题位置。手动添加固定链接会非常繁琐和耗时，而 anchors_keys 就是一个用于自动生成固定链接的解决方案。
本文将介绍 anchors_keys 的使用方法和示例代码，并且探讨该包的实现原理和一些使用技巧。
安装 anchors_keys
首先需要使用 npm 安装 anchors_keys，打开终端并输入以下命令：
npm install anchors_keys
安装完成后，在需要使用 anchors_keys 的项目中引入包：
import "anchors_keys";
使用 anchors_keys
anchors_keys 默认会自动扫描页面中所有的标题，并在标题前生成一个锚点链接。为了更方便的进行样式定制，可以使用 anchors_keys 命令来为 anchors_keys 设置自定义的 class 名称。
anchors_keys.add('h1', {
class: 'header-anchor',
});以上代码会将所有 h1 标题前的锚点链接的 class 设置为 header-anchor，接下来只需要在样式表中定义该类名的样式即可。
当然，有时候某些标题不希望生成锚点链接，这时可以使用 exclude 选项来指定那些标题不需要生成锚点链接。
anchors_keys.add('.no-anchor', {
exclude: true,
});此代码将不为带有 no-anchor 类名的标题生成锚点链接。
示例代码
下面是一个完整的示例代码，展示了如何使用 anchors_keys 生成带有固定链接的页面。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------- ----------
-------
-------------- -
-------- -------------
------------- ----
-------------- ------
---------- ----
------ -----
---------------- -----
-------------- ------ --- -----
-
-------------------- -
-------------- ------ --- -----
------ -----
-
--------
-------
------
---------------- -------
---
-- ---------- ------------ ---------------------------
---- ------------ ------
------------ --- --- --------------------
----
------ -----------------
---
-- --- -- -------------
--------- ------- -------------------
----
------ -----------------
---
-- ------------ --
------------ ----------------------
----
------- -----------------------------------------------------------------------------
--------
------------------------------------- -
------ ----------------
---
---------
-------
-------anchors_keys 实现原理
anchors_keys 的实现原理非常简单，它会在页面加载完成后监听所有标题元素的点击事件。当用户点击标题时，anchors_keys 会根据标题对应的 id 将页面滚动到正确的位置。
anchors_keys 还会在标题前添加一个锚点链接，便于用户在页面中的任何位置都可以通过链接跳转到指定标题的位置。
总结
anchors_keys 是一个非常实用的 npm 包，可以方便地为网页添加固定链接。在构建大型网站或博客时，使用 anchors_keys 可以提高效率，降低工作难度。
在使用 anchors_keys 时，需要注意一些使用技巧，并合理地进行样式定制，以获得更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ad481e8991b448d86cb