vuepress-plugin-right-anchor

English ｜中文

Add anchor navigation bar to the right of the document page written in Vuepress 2.x

Version

• 2.x.x -> Vuepress 2.x -> npm next -> master branch
• 0.x.x -> Vuepress 1.x -> npm latest -> legacy branch

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.
• Non global component, which can be freely used in the page.

Install

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

Use

Add in .vuepress/config.js

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

Style

Add in .vuepress/styles/index.scss

.right-anchor {
  --rightAnchorTextColor: var(--c-text);
  --rightAnchorFontSize: 14px;
  /* Btn */
  --rightAnchorBtnTextColor: var(--rightAnchorTextColor);
  --rightAnchorBtnBgColor: var(--c-bg);
  /* Menu */
  --rightAnchorMenuTextColor: var(--rightAnchorTextColor);
  --rightAnchorMenuBgColor: var(--c-bg);
}

/* dark theme */
.dark .right-anchor {
  --rightAnchorTextColor: var(--c-text);
  --rightAnchorFontSize: 14px;
  /* Btn */
  --rightAnchorBtnTextColor: var(--rightAnchorTextColor);
  --rightAnchorBtnBgColor: var(--c-bg);
  /* Menu */
  --rightAnchorMenuTextColor: var(--rightAnchorTextColor);
  --rightAnchorMenuBgColor: var(--c-bg);
}

Global Config

Add in .vuepress/config.js

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

Param description

showDepth

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

• Type: array
• Default: []

expand

About expand configuration of menu.

• Type: object
  • trigger: string => The trigger mode of the open menu. 'hover' | 'click'
  • clickModeDefaultOpen: boolean => Click mode is default open?
• Default:

  {
    trigger: 'hover',
    clickModeDefaultOpen: true
  }

customClass

Your customClass for right-anchor.

• Type: null | string
• Default: null

Page Config

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

---
rightAnchor: 
  showDepth: 1
  expand:
    trigger: hover
    clickModeDefaultOpen: true
  customClass: your-customClass
---