vuepress-plugin-right-anchor

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.
Disable global ui component.

Sample

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.styl

$rightAnchorBgColor = #fff;
$rightAnchorTextColor = $textColor;
$rightAnchorFontSize = 14px;
// btn
$rightAnchorBtnTextColor = $rightAnchorTextColor;
$rightAnchorBtnBgColor = $rightAnchorBgColor;
// menu
$rightAnchorMenuTextColor = $rightAnchorTextColor;

Global Config

Add in .vuepress/config.js

module.exports = {
  // ...
  plugins: [
    // ...
    [
      'vuepress-plugin-right-anchor',
      {
        showDepth: 1,
        ignore: [
          '/',
          '/api/'
          // more...
        ],
        expand: {
          default: true,
          trigger: 'hover'
        },
        customClass: 'your-customClass',
        disableGlobalUI: false,
      }
    ]
  ]
}

Param description

showDepth

!!! showLevel is abandoned in 0.3.x， but it's still compatible ( Not recommended ).

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: null | number
Default: null

ignore

Don't show right-anchor's page.

Type: array
Default: []

expand

About expand configuration of menu.

Type: object
- default: boolean => Whether to default expand menu?
- trigger: string => The trigger mode of the expand menu. 'hover' | 'click'
Default:
```
{
  default: true,
  trigger: 'hover'
}
```

customClass

Your customClass for right-anchor.

Type: null | string
Default: null

disableGlobalUI

Disable globalUIComponent in every page.

Type: boolean
Default: false

If you want disable globalUIComponent in specific page, try frontmatter

---
rightAnchor:
  disableGlobalUI: true
---

Page Config

Set front-matter by vuepress recommended method in .md.

---
rightAnchor: 
  showDepth: 1
  expand:
    default: true
    trigger: hover
  customClass: your-customClass
  disableGlobalUI: false
---

lhldyf / vuepress-plugin-right-anchor