English |中文
Add anchor navigation bar to the right of the document page written in Vuepress 2.x
yarn add vuepress-plugin-right-anchor@next
# or
npm i vuepress-plugin-right-anchor@next -D
Add in .vuepress/config.js
module.exports = {
// ...
plugins: [
// ...
['vuepress-plugin-right-anchor']
]
}
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);
}
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',
}
]
]
}
Which level of title will be used in the right anchor display. The pointing meaning of the value is the same as themeconfig.sidebardepth.
Don't show right-anchor's pages.
About expand configuration of menu.
'hover' | 'click'
{
trigger: 'hover',
clickModeDefaultOpen: true
}
Your customClass for right-anchor.
Set front-matter
by vuepress
recommended method in .md
.
---
rightAnchor:
showDepth: 1
expand:
trigger: hover
clickModeDefaultOpen: true
customClass: your-customClass
---