diff --git a/components/AOSAnimation.js b/components/AOSAnimation.js
index c5dd4d92..48e5829c 100644
--- a/components/AOSAnimation.js
+++ b/components/AOSAnimation.js
@@ -1,5 +1,5 @@
+import { isBrowser } from '@/lib/utils'
import AOS from 'aos'
-import { isBrowser } from 'react-notion-x'
/**
* 加载滚动动画
diff --git a/components/LoadingProgress.js b/components/LoadingProgress.js
index d7f7b5f7..61ea172e 100644
--- a/components/LoadingProgress.js
+++ b/components/LoadingProgress.js
@@ -1,20 +1,36 @@
+import { loadExternalResource } from '@/lib/utils'
import { useRouter } from 'next/router'
-import NProgress from 'nprogress'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
/**
* 出现页面加载进度条
*/
export default function LoadingProgress() {
const router = useRouter()
+ const [NProgress, setNProgress] = useState(null)
// 加载进度条
useEffect(() => {
- const handleStart = (url) => {
- NProgress.start()
+ loadExternalResource(
+ 'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js',
+ 'js'
+ ).then(() => {
+ if (window.NProgress) {
+ setNProgress(window.NProgress)
+ // 调速
+ window.NProgress.settings.minimun = 0.1
+ loadExternalResource(
+ 'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css',
+ 'css'
+ )
+ }
+ })
+
+ const handleStart = url => {
+ NProgress?.start()
}
const handleStop = () => {
- NProgress.done()
+ NProgress?.done()
}
router.events.on('routeChangeStart', handleStart)
diff --git a/package.json b/package.json
index b7aa769d..38c2e9cb 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
"next": "13.3.1",
"notion-client": "6.15.6",
"notion-utils": "6.15.6",
- "nprogress": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-facebook": "^8.1.4",
diff --git a/pages/_app.js b/pages/_app.js
index cf71fe18..4b7d9a38 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,24 +1,23 @@
// import '@/styles/animate.css' // @see https://animate.style/
import '@/styles/globals.css'
-import '@/styles/nprogress.css'
import '@/styles/utility-patterns.css'
// core styles shared by all of react-notion-x (required)
-import 'react-notion-x/src/styles.css'
import '@/styles/notion.css' // 重写部分样式
import 'aos/dist/aos.css' // You can also use for styles
+import 'react-notion-x/src/styles.css'
+import useAdjustStyle from '@/hooks/useAdjustStyle'
import { GlobalContextProvider } from '@/lib/global'
import { getGlobalLayoutByTheme } from '@/themes/theme'
import { useRouter } from 'next/router'
import { useCallback, useMemo } from 'react'
import { getQueryParam } from '../lib/utils'
-import useAdjustStyle from '@/hooks/useAdjustStyle'
// 各种扩展插件 这个要阻塞引入
+import BLOG from '@/blog.config'
import ExternalPlugins from '@/components/ExternalPlugins'
import GlobalHead from '@/components/GlobalHead'
-import BLOG from '@/blog.config'
/**
* App挂载DOM 入口文件
@@ -27,11 +26,15 @@ import BLOG from '@/blog.config'
*/
const MyApp = ({ Component, pageProps }) => {
// 一些可能出现 bug 的样式，可以统一放入该钩子进行调整
- useAdjustStyle();
+ useAdjustStyle()
const route = useRouter()
const queryParam = useMemo(() => {
- return getQueryParam(route.asPath, 'theme') || pageProps?.NOTION_CONFIG?.THEME || BLOG.THEME
+ return (
+ getQueryParam(route.asPath, 'theme') ||
+ pageProps?.NOTION_CONFIG?.THEME ||
+ BLOG.THEME
+ )
}, [route])
// 整体布局
@@ -47,7 +50,7 @@ const MyApp = ({ Component, pageProps }) => {
return (
-
+
diff --git a/styles/nprogress.css b/styles/nprogress.css
deleted file mode 100644
index 2b405742..00000000
--- a/styles/nprogress.css
+++ /dev/null
@@ -1,84 +0,0 @@
-/* Make clicks pass-through */
-#nprogress {
- pointer-events: none;
-}
-
-#nprogress .bar {
- background: #29d;
-
- position: fixed;
- z-index: 1031;
- top: 0;
- left: 0;
-
- width: 100%;
- height: 2px;
-}
-
-/* Fancy blur effect */
-#nprogress .peg {
- display: block;
- position: absolute;
- right: 0px;
- width: 100px;
- height: 100%;
- box-shadow: 0 0 10px #29d, 0 0 5px #29d;
- opacity: 1;
-
- -webkit-transform: rotate(3deg) translate(0px, -4px);
- -ms-transform: rotate(3deg) translate(0px, -4px);
- transform: rotate(3deg) translate(0px, -4px);
-}
-
-/* Remove these to get rid of the spinner */
-#nprogress .spinner {
- display: block;
- position: fixed;
- z-index: 1031;
- top: 15px;
- right: 15px;
-}
-
-#nprogress .spinner-icon {
- width: 18px;
- height: 18px;
- box-sizing: border-box;
-
- border: solid 2px transparent;
- border-top-color: #29d;
- border-left-color: #29d;
- border-radius: 50%;
-
- -webkit-animation: nprogress-spinner 400ms linear infinite;
- animation: nprogress-spinner 400ms linear infinite;
-}
-
-.nprogress-custom-parent {
- overflow: hidden;
- position: relative;
-}
-
-.nprogress-custom-parent #nprogress .spinner,
-.nprogress-custom-parent #nprogress .bar {
- position: absolute;
-}
-
-@-webkit-keyframes nprogress-spinner {
- 0% {
- -webkit-transform: rotate(0deg);
- }
-
- 100% {
- -webkit-transform: rotate(360deg);
- }
-}
-
-@keyframes nprogress-spinner {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(360deg);
- }
-}
diff --git a/yarn.lock b/yarn.lock
index 87c1b1f9..1a6cc2a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2918,11 +2918,6 @@ notion-utils@^6.15.6, notion-utils@^6.16.0:
notion-types "^6.16.0"
p-queue "^7.2.0"
-nprogress@^0.2.0:
- version "0.2.0"
- resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
- integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
-
object-assign@^4.0.1, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"