vuepress-plugin-anchor-toc

VuePress Anchor TOC Plugin

Table of Contents

• About the Project
• Features
• Install
• Configuration
• License
• Credits

About

Adds anchor navigation bar to the right of the document page written in VuePress.

vuepress-plugin-anchor-toc is a shameless fork of vuepress-plugin-right-anchor!

See credits!

The only difference between these two is that vuepress-plugin-anchor-toc uses slightly different CSS settings and a TOC header ("On this page")

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.

Install

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

Add to .vuepress/config.js

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

Configuration

Adjust the background color of the TOC.

Add to .vuepress/styles/palette.styl

$rightAnchorBgColor = #fff

Set the "depth"

Add in .vuepress/config.js

module.exports = {
  // ...
  plugins: [
    // ...
    [
      'vuepress-plugin-anchor-toc',
      {
        showDepth: 1,
        customClass: 'your-customClass'
        ignore: [
          '/',
          '/api/'
          // more...
        ]
      }
    ]
  ]
}

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

customClass

Your customClass for right-anchor.

• Type: null | string
• Default: null

ignore

Don't show right-anchor's page.

• Type: array
• Default: []

Page Config

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

---
rightAnchor:
  showDepth: 1
  customClass: your-customClass
---

License

Distributed under the MIT license.

Credits

• xuek

Changelog

[0.0.3] - 2020-11-06

• Create GiHub repo
• Adjust padding-left of TOC header