VuePress 生态系统VuePress 生态系统
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • back-to-top
  • catalog
  • copy-code
  • copyright
  • icon
  • medium-zoom
  • notice
  • nprogress
  • photo-swipe
  • watermark

nprogress

@vuepress/plugin-nprogress

将 nprogress 集成到 VuePress 中,在切换到另一个页面时会展示进度条。

该插件已经集成到默认主题中。

使用方法

npm i -D @vuepress/plugin-nprogress@next
.vuepress/config.ts
import { nprogressPlugin } from '@vuepress/plugin-nprogress'

export default {
  plugins: [nprogressPlugin()],
}

样式

你可以通过 CSS 变量来自定义进度条的样式:

:root {
  --nprogress-c: var(--vp-c-accent);
  --nprogress-z-index: 1031;
}
在 GitHub 上编辑此页
上次更新: 2025/4/12 19:03
贡献者: Mister-Hope
Prev
notice
Next
photo-swipe