什么是 @vuepress/plugin-active-header-links
@vuepress/plugin-active-header-links 是一个可以帮助我们实现在Vuepress网站中自动高亮导航栏链接的npm包。通过使用它，我们可以让我们的网站更加易于导航和更具可读性。
怎么使用 @vuepress/plugin-active-header-links
下面是使用 @vuepress/plugin-active-header-links 的步骤：
步骤一：安装 @vuepress/plugin-active-header-links
通过使用 npm 包管理器，我们可以轻松地安装 @vuepress/plugin-active-header-links, 只需要运行以下命令即可：
npm install @vuepress/plugin-active-header-links --save-dev
步骤二：配置 Vuepress 主题配置文件
在项目的 .vuepress/config.js 文件中加入以下配置：
-- -------------------- ---- -------
-------------- - -
------------ -
-- -------
-- ---------------
-------- -
---------------------------------------
-
-- ----
-------------------- ----------------
--------------------- ----------------
-
-
-
--可以看到，我们需要传入两个参数来配置插件，分别是 sidebarLinkSelector 和 headerAnchorSelector 。其中， sidebarLinkSelector 应该和你的导航栏链接的 class 名称一致，headerAnchorSelector 应该和你的标题前缀选择器的 class 名称一致。
步骤三：构建 Vuepress 网站
在配置文件完成后，我们需要重新构建我们的Vuepress网页，以体现 @vuepress/plugin-active-header-links的效果。可以在终端使用以下命令：
npm run docs:dev
步骤四：享受 @vuepress/plugin-active-header-links 带来的便利
现在，你的网站已经可以自动高亮导航栏条目了！无论你是从顶部滚动到最下面，还是从底部向上滚动，导航栏中的条目都会自动高亮。这样，你的读者就可以更轻松地在你的网站中浏览并阅读。
示列代码
下面是一个简单的导航栏和正文的示例代码。
-- -------------------- ---- ------- ---- --- --- --- ---------------------- ------ -------------------- ------------------------ ---------- ------ -------------------- ------------------------ ---------- ------ -------------------- ------------------------ ---------- ----- ---- -- --- --- ------------- ----------------------------- ------ -------------- --- ------------- ----------------------------- ------ -------------- --- ------------- ----------------------------- ------ --------------
当您滚动到每个章节时，对应的导航栏链接将被高亮。
结语
@vuepress/plugin-active-header-links 是一个非常有用的npm包，它可以帮助我们更好地组织和架构我们的 Vuepress 网站。希望这篇使用教程对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f05d614403f2923b035bf18