右侧边锚点导航栏

简介: 右侧边锚点导航栏

安装

$ 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
        }
      }
    ]
  ]
}
目录
相关文章
|
安全 应用服务中间件 数据安全/隐私保护
企业实战(5) Docker私有镜像仓库Harbor的部署与使用详解
企业实战(5) Docker私有镜像仓库Harbor的部署与使用详解
621 0
|
应用服务中间件 nginx
403 Forbidden nginx/1.20.1
403 Forbidden nginx/1.20.1
1432 0
403 Forbidden nginx/1.20.1
|
12月前
|
API 开发者
通义灵码实践场景与效果分享
作为后端开发工程师,我利用通义灵码结合企业知识库和代码库,生成符合团队规范的代码,效率提升约40%。灵码支持实时智能补全、代码质量提升及文档自动生成,简化了开发流程,减少了重复工作,显著提升了团队的开发效率和代码质量。
执行npm run dev的时候发生了什么
执行npm run dev的时候发生了什么
1080 60
|
Linux 开发工具
Linux E325: 注意 发现交换文件 “*.swp“
Linux E325: 注意 发现交换文件 “*.swp“
356 0
|
12月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
1976 0
文本,vitepress两栏怎样设置,应用场景是每个导航都是单独的markdown文件
文本,vitepress两栏怎样设置,应用场景是每个导航都是单独的markdown文件
|
人工智能
MidJourney以图生图的详细教程(含6种案例介绍)(上)
MidJourney以图生图的详细教程(含6种案例介绍)
|
Android开发 开发者
安卓投屏神器 Scrcpy安 报错ERROR: Could not find any ADB device
使用Scrcpy安卓投屏工具时遇到报错,问题根源是未开启开发者模式。解决步骤:进入设置,点击【关于手机】→连续点击版本号激活开发者模式,然后在【系统设置】→【开发者选项】中开启USB调试。参照此方法后可正常执行。Scrcpy软件下载链接和GitHub页面也已提供。
1864 1