JSPM

vuepress-plugin-anchor-toc

0.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q11192F
  • License MIT

Right-anchor TOC plugin for VuePress

Package Exports

  • vuepress-plugin-anchor-toc

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuepress-plugin-anchor-toc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VuePress Anchor TOC Plugin

Table of Contents

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