active-header-links

该插件会监听页面滚动事件。当页面滚动至某个 标题锚点 后，如果存在对应的 标题链接 ，那么该插件会将路由 Hash 更改为该 标题锚点 。

该插件主要用于开发主题，并且已经集成到默认主题中。大部分情况下你不需要直接使用它。

使用方法

npm i -D @vuepress/plugin-active-header-links@next

const { activeHeaderLinksPlugin } = require('@vuepress/plugin-active-header-links')
module.exports = {
  plugins: [
    activeHeaderLinksPlugin({
      // 配置项
    }),
  ],
}

配置项

headerLinkSelector

• 类型： string

• 默认值： 'a.sidebar-item'

• 详情：

  标题链接 的选择器。

  如果一个 标题锚点 没有对应的 标题链接 ，那么即使滚动到这个 标题锚点 ，该插件也不会更改路由 Hash 。

headerAnchorSelector

• 类型： string

• 默认值： '.header-anchor'

• 详情：

  标题锚点 的选择器。

  你通常不需要设置该选项，除非你通过 markdown.anchor 修改了 markdown-it-anchor 的 permalinkClass 选项。

• 参考：

  • 指南 > Markdown > 语法扩展 > 标题锚点

delay

• 类型： number

• 默认值： 200

• 详情：

  滚动事件监听器的 Debounce 延迟。

offset

• 类型： number

• 默认值： 5

• 详情：

  即便直接点击 标题锚点 的链接， scrollTop 也可能不会完全等于 标题锚点 的 offsetTop ，所以我们添加一个 Offset 偏移量来避免这个误差。