VuePress 生态系统VuePress 生态系统
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • active-header-links
  • git
  • palette
  • reading-time
  • rtl
  • Sass Palette
    • 指南
    • 配置
  • theme-data
  • toc

active-header-links

@vuepress/plugin-active-header-links

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

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

使用方法

npm i -D @vuepress/plugin-active-header-links@next
.vuepress/config.ts
import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'

export default {
  plugins: [
    activeHeaderLinksPlugin({
      // 配置项
    }),
  ],
}

配置项

headerLinkSelector

  • 类型: string

  • 默认值: 'a.vp-sidebar-item'

  • 详情:

    标题链接 的选择器。

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

headerAnchorSelector

  • 类型: string

  • 默认值: '.header-anchor'

  • 详情:

    标题锚点 的选择器。

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

  • 参考:

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

delay

  • 类型: number

  • 默认值: 200

  • 详情:

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

offset

  • 类型: number

  • 默认值: 5

  • 详情:

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

在 GitHub 上编辑此页
上次更新: 2025/4/12 19:03
贡献者: Mister-Hope
Next
git