当你切换页面，顶部会显示进度条，使用的是 @Skyleen77/nprogress-v2
pnpmyarnnpmbun
sh
pnpm add -D nprogress-v2sh
yarn add -D nprogress-v2sh
npm install nprogress-v2sh
bun add -D nprogress-v2在 docs\.vitepress\theme\index.ts 中配置
非 SSR 环境下配置不蒜子统计配置
ts
import { NProgress } from "nprogress-v2/dist/index.js"; // 进度条组件
import "nprogress-v2/dist/index.css"; // 进度条样式
export default {
extends: Teek, //teek主题
async enhanceApp({ app, router }) {//添加router和async
// 非SSR环境下配置路由进度条
// @ts-ignore-error
if (!import.meta.env.SSR) {
NProgress.configure({ showSpinner: false });
router.onBeforeRouteChange = () => NProgress.start();
router.onAfterRouteChange = () => {
setTimeout(() => {
NProgress.done();
}, 100);
};
}
},
};ts
import { inBrowser } from "vitepress"; //不蒜子统计插件
import busuanzi from "busuanzi.pure.js"; // 导入不蒜子统计插件
import "nprogress-v2/dist/index.css"; // 进度条样式 ]
export default {
extends: Teek, //teek主题
async enhanceApp({ app, router }) {//添加router和async
// 不蒜子环境下配置路由进度条
if (inBrowser) {
NProgress.configure({ showSpinner: false });
router.onBeforeRouteChange = () => {
NProgress.start(); // 开始进度条
};
router.onAfterRouteChanged = () => {
NProgress.done(); // 停止进度条
};
}
},
};两种方案一种是改原始代码，另一个改自定义css样式，推荐自定义css样式：
docs\.vitepress\theme\style\var.scss,添加以下代码scss
/* 自定义css样式 */
// 切换路由进度条颜色样式
.nprogress .bar {
background: linear-gradient(
114.2deg,
rgba(184, 215, 21, 1) -15.3%,
rgba(148, 187, 233, 1) 14.5%,
rgba(21, 215, 182, 1) 38.7%,
rgba(129, 189, 240, 1) 58.8%,
rgba(219, 108, 205, 1) 77.3%,
rgba(240, 129, 129, 1) 88.5%
) !important;
}node_modules\.pnpm\nprogress-v2@1.1.10\node_modules\nprogress-v2\dist\index.csscss
/* 改原始代码 */
.nprogress .bar {
background: linear-gradient(
114.2deg,
rgba(184, 215, 21, 1) -15.3%,
rgba(148, 187, 233, 1) 14.5%,
rgba(21, 215, 182, 1) 38.7%,
rgba(129, 189, 240, 1) 58.8%,
rgba(219, 108, 205, 1) 77.3%,
rgba(240, 129, 129, 1) 88.5%
);
position: fixed;
z-index: 99999;
top: 0;
left: 0;
width: 100%;
height: 2px;
}可以参考博主VitePress
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。