右侧边锚点导航栏

简介: 右侧边锚点导航栏

安装

$ yarn add -D vuepress-plugin-right-anchor点击复制复制失败已复制


配置

.vuepress/config.js 文件中配置 plugin 字段,如下所示:

module.exports = {
    // ...
    plugins: [
        // ...
        ['vuepress-plugin-right-anchor']
    ]
}点击复制复制失败已复制


增加 .vuepress/styles/palette.styl 文件,写入如下内容

$rightAnchorBgColor = #fff;
$rightAnchorTextColor = $textColor;
$rightAnchorFontSize = 14px;
// btn
$rightAnchorBtnTextColor = $rightAnchorTextColor;
$rightAnchorBtnBgColor = $rightAnchorBgColor;
// menu
$rightAnchorMenuTextColor = $rightAnchorTextColor;点击复制复制失败已复制


个性化配置

默认插件的配置是在右侧有一个小按钮,鼠标移动上去之后展示锚点导航功能,我希望是进入页面后直接打开锚点导航功能。


修改.vuepress/config.js 文件中 plugin 配置,如下所示:

module.exports = {
  // ...
  plugins: [
    // ...
    [
      'vuepress-plugin-right-anchor',
      {
        expand: {
          trigger: 'click',
          clickModeDefaultOpen: true
        }
      }
    ]
  ]
}
目录
相关文章
|
6月前
|
前端开发
顶部导航栏
顶部导航栏
51 0
|
6月前
|
小程序
小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明?
小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明?
|
3月前
自定义顶部导航栏
自定义顶部导航栏
38 1
|
3月前
|
前端开发
导航栏也疯狂:CSS动画让导航栏活起来,跟随鼠标滑动!
导航栏也疯狂:CSS动画让导航栏活起来,跟随鼠标滑动!
|
4月前
|
JavaScript 容器
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
750 0
|
6月前
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
55 0
|
6月前
|
前端开发 JavaScript
左侧导航菜单
左侧导航菜单
|
小程序 JavaScript
小程序顶部导航栏,可滑动,可动态选中放大
小程序顶部导航栏,可滑动,可动态选中放大
200 0
|
小程序 JavaScript 数据库
小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
207 0
|
前端开发
简单侧边导航栏
简单侧边导航栏
112 0
简单侧边导航栏