vuepress-plugin-right-anchor

Version NPM

English |中文

Add anchor navigation bar to the right of the document page written in vuepress

# Features

  • Simplify the structure of the left sidebar without losing the function of Title navigation within the page。
  • Click anchor label page over scrolling。
  • When the page scrolls, the corresponding anchor label follows the highlight。

# Sample

soonspacejs document

# Install

yarn add vuepress-plugin-right-anchor -D
# or
npm i vuepress-plugin-right-anchor -D

# Use

Add in .vuepress/config.js

module.exports = {
  // ...
  plugins: [
    // ...
    ['vuepress-plugin-right-anchor']
  ]
}

# Style

Add in .vuepress/styles/palette.js

$rightAnchorBgColor = #fff

# Config

Add in .vuepress/config.js

module.exports = {
  // ...
  plugins: [
    // ...
    [
      'vuepress-plugin-right-anchor',
      {
        showLevel: 1,
        ignore: [
          '/',
          '/api/'
          // more...
        ]
      }
    ]
  ]
}

# Param description

# showLevel

Which level of title will be used in the right anchor display. The pointing meaning of the value is the same as themeconfig.sidebardepth.

  • Type: number
  • Default: 1

# ignore

Don't show right-anchor's page.

  • Type: array
  • Default: []

Made with ❤️ by Ahmad Mostafa - @z3by