fix: the progress bar provides configuration options.

packages/docs/.vitepress/config.ts

@@ -22,6 +22,9 @@ export default defineConfigWithTheme<ThemeConfig>({
       darkTheme: 'catppuccin_macchiato',
       lightTheme: 'catppuccin_latte'
     },
+    progressBar: {
+      speed: 200
+    },
     rss: {
       title: 'Hacxy',
       baseUrl: 'https"//theme.hacxy.cn',

packages/theme/index.ts

@@ -1,11 +1,11 @@
 import type { Theme } from 'vitepress';
+import type { ThemeConfig } from './types';
 import { setup } from '@css-render/vue3-ssr';
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client';
 import { MotionPlugin } from '@vueuse/motion';
 import { NImage, NImageGroup } from 'naive-ui';
 import VPTheme from 'vitepress/theme';
 import BlogPage from './src/components/BlogPage.vue';
-import Comment from './src/components/Comment.vue';
 import DocsHeaderInfo from './src/components/DocsHeaderInfo.vue';
 import Tags from './src/components/Tags.vue';
 import { useProgress } from './src/hooks/useProgress';
@@ -16,7 +16,8 @@ import './src/styles/index.scss';
 const MildTheme: Theme = {
   extends: VPTheme,
   Layout,
-  enhanceApp({ app, router }) {
+  enhanceApp({ app, router, siteData }) {
+    const themeConfig: ThemeConfig = siteData.value.themeConfig;
     const originalConsoleError = console.error;
     // 重写 console.error 方法
     console.error = function (message, ...optionalParams) {
@@ -49,17 +50,20 @@ const MildTheme: Theme = {
           window.scrollTo(0, scrollPosition);
         });
       }
-      const { np } = useProgress();
-      app.provide('progress', np.value);
 
-      router.onBeforePageLoad = () => {
-        np.value.start();
-        return true;
-      };
+      if (themeConfig.progressBar !== false) {
+        const { np } = useProgress(themeConfig.progressBar);
+        app.provide('progress', np.value);
 
-      router.onAfterPageLoad = () => {
-        np.value.done();
-      };
+        router.onBeforePageLoad = () => {
+          np.value.start();
+          return true;
+        };
+
+        router.onAfterPageLoad = () => {
+          np.value.done();
+        };
+      }
     }
     app.use(MotionPlugin);
     app.use(TwoslashFloatingVue);
@@ -68,7 +72,6 @@ const MildTheme: Theme = {
     app.component('DocsHeaderInfo', DocsHeaderInfo);
     app.component('Image', NImage);
     app.component('ImageGroup', NImageGroup);
-    app.component('Comment', Comment);
   }
 };
 export { Layout };

packages/theme/node.ts

@@ -39,7 +39,6 @@ const baseConfig: RawConfigExports<DefaultTheme.Config> = {
       pageData.frontmatter.sidebar = false;
     }
   },
-
   vite: {
     ssr: {
       noExternal: ['naive-ui']

packages/theme/src/hooks/useProgress.ts

@@ -1,10 +1,12 @@
-import type { NProgress as NP } from 'nprogress';
+import type { NProgress as NP, NProgressOptions } from 'nprogress';
 import NProgress from 'nprogress';
 import { ref } from 'vue';
 
-export function useProgress() {
+export function useProgress(config?: Partial<NProgressOptions>) {
+  const defaultConfig: Partial<NProgressOptions> = { showSpinner: false, speed: 500 };
+  const finalConfig = Object.assign(defaultConfig, config);
   const np = ref<NP>(NProgress);
-  np.value.configure({ showSpinner: false, speed: 500 });
+  np.value.configure(finalConfig);
   return {
     np
   };

packages/theme/types/index.d.ts

@@ -1,4 +1,5 @@
 import type { GiscusProps, Theme as GiscusTheme } from '@giscus/vue';
+import type { NProgressOptions } from 'nprogress';
 import type { DefaultTheme, Theme } from 'vitepress';
 import type { RSSOptions } from 'vitepress-plugin-rss';
 import Layout from '../src/Layout.vue';
@@ -24,11 +25,10 @@ declare interface ThemeConfig extends Omit<DefaultTheme.Config, 'sidebar'> {
   comment?: Comment
 
   rss?: RSSOptions
-  // /**
-  //  * Is the progress bar enabled
-  //  * @default true
-  //  */
-  // progressBar?: boolean
+  /**
+   * Is the progress bar config
+   */
+  progressBar?: Partial<NProgressOptions> | false
 
   // /**
   //  * Typescript Twoslash