active-header-links

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

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

安装

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

配置项

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 偏移量来避免这个误差。