vuepress-----25、右侧目录
2023-12-14 19:52:44
# 25、vuepress 右侧目录
https://github.com/xuek9900/vuepress-plugin-right-anchor
vuepress-plugin-right-anchor
English |中文
在用 Vuepress 2.x 编写的文档页面右侧添加 锚点导航栏
# 版本
- 2.x.x -> Vuepress 2.x -> npm next -> master 分支
- 0.x.x -> Vuepress 1.x -> npm latest -> legacy 分支
# 特性
- 简化左侧边栏结构的同时不丢失页面内标题导航的功能。
- 点击锚点标签页面滚动过度。
- 页面滚动时对应锚点标签跟随高亮。
- 非全局组件,可在页面内自由使用。
# 安装
yarn add vuepress-plugin-right-anchor@next
# or
npm i vuepress-plugin-right-anchor@next -D
# 使用
在 .vuepress/config.js
添加如下配置。
module.exports = {
// ...
plugins: [
// ...
['vuepress-plugin-right-anchor']
]
}
# 样式
在 .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);
}
# 全局配置
在 .vuepress/config.js
添加如下配置。
module.exports = {
// ...
plugins: [
// ...
[
'vuepress-plugin-right-anchor',
{
showDepth: 1,
ignore: [
'/',
'/api/'
// 更多...
],
expand: {
trigger: 'hover',
clickModeDefaultOpen: true
},
customClass: 'your-customClass',
}
]
]
}
# 参数说明
# showDepth
在右锚显示中将使用哪一级别的标题。 该值的指向含义与 themeconfig.sidebardepth (opens new window) 相同。
- Type: null | number
- Default: null
# ignore
不显示 right-anchor 的页面。
- Type: array
- Default: []
# expand
关于菜单的展开配置。
-
Type: object
- trigger: string => 展开菜单的触发方式。
'hover' | 'click'
- clickModeDefaultOpen: boolean => 点击模式下是否默认打开菜单?
- trigger: string => 展开菜单的触发方式。
-
Default:
{ trigger: 'hover', clickModeDefaultOpen: true }
# customClass
自定义的 right-anchor
类名。
- Type: null | string
- Default: null
# 页面单独配置
在 .md
中通过 vuepress
推荐的方式设置 front-matter
。
---
rightAnchor:
showDepth: 1
expand:
trigger: hover
clickModeDefaultOpen: true
customClass: your-customClass
---
本文转自 https://docs.xiaoshaozi.site/zs-tool-%E6%A1%86%E6%9E%B6/vuepress/
文章来源:https://blog.csdn.net/weixin_44235759/article/details/135001568
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!