diff --git a/components/ExternalPlugins.js b/components/ExternalPlugins.js
index 24ba5b55bb1..ce0b5e63ab0 100644
--- a/components/ExternalPlugins.js
+++ b/components/ExternalPlugins.js
@@ -63,6 +63,7 @@ const ExternalPlugin = props => {
const MOUSE_FOLLOW = siteConfig('MOUSE_FOLLOW')
const CUSTOM_EXTERNAL_CSS = siteConfig('CUSTOM_EXTERNAL_CSS')
const CUSTOM_EXTERNAL_JS = siteConfig('CUSTOM_EXTERNAL_JS')
+ const ENABLE_NPROGRSS = siteConfig('ENABLE_NPROGRSS', true)
// 自定义样式css和js引入
if (isBrowser) {
@@ -145,7 +146,7 @@ const ExternalPlugin = props => {
{AD_WWADS_BLOCK_DETECT && }
{TIANLI_KEY && }
-
+ {ENABLE_NPROGRSS && }
{ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && }
diff --git a/components/LoadingCover.js b/components/LoadingCover.js
new file mode 100644
index 00000000000..ca0198f2b1a
--- /dev/null
+++ b/components/LoadingCover.js
@@ -0,0 +1,71 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useState } from 'react'
+/**
+ * @see https://css-loaders.com/
+ * @returns 加载动画
+ */
+export default function LoadingCover() {
+ const { onLoading, setOnLoading } = useGlobal()
+ const [isVisible, setIsVisible] = useState(false) // 初始状态设置为false,避免服务端渲染与客户端渲染不一致
+
+ useEffect(() => {
+ // 确保在客户端渲染时才设置可见性
+ if (onLoading) {
+ setIsVisible(true)
+ } else {
+ const timeout = setTimeout(() => setIsVisible(false), 1000) // 等待淡出动画结束
+ return () => clearTimeout(timeout)
+ }
+ }, [onLoading])
+
+ const handleClick = () => {
+ setOnLoading(false) // 强行关闭 LoadingCover
+ }
+
+ if (typeof window === 'undefined') {
+ return null // 避免在服务端渲染时渲染出这个组件
+ }
+
+ return isVisible ? (
+
+ ) : null
+}
diff --git a/components/LoadingProgress.js b/components/LoadingProgress.js
index f217765ff57..81b98b84181 100644
--- a/components/LoadingProgress.js
+++ b/components/LoadingProgress.js
@@ -3,7 +3,8 @@ import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
/**
- * 出现页面加载进度条
+ * 加载进度条
+ * NProgress实现
*/
export default function LoadingProgress() {
const router = useRouter()
diff --git a/lib/global.js b/lib/global.js
index 1dcd0c9f857..6aac3b3ba11 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -15,12 +15,6 @@ import {
} from './lang'
const GlobalContext = createContext()
-/**
- * 定义全局变量,包括语言、主题、深色模式、加载状态
- * @param children
- * @returns {JSX.Element}
- * @constructor
- */
export function GlobalContextProvider(props) {
const {
post,
@@ -40,7 +34,7 @@ export function GlobalContextProvider(props) {
const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE
const [isDarkMode, updateDarkMode] = useState(defaultDarkMode === 'dark') // 默认深色模式
- const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
+ const [onLoading, setOnLoading] = useState(true) // 抓取文章数据
const router = useRouter()
// 是否全屏
@@ -74,10 +68,6 @@ export function GlobalContextProvider(props) {
htmlElement.classList?.add(newStatus ? 'dark' : 'light')
}
- /**
- * 更新语言
- * 这里是代码级别的多语言,整个站点和文章内容的多语言不在此处理
- */
function changeLang(lang) {
if (lang) {
saveLangToLocalStorage(lang)
@@ -89,13 +79,12 @@ export function GlobalContextProvider(props) {
useEffect(() => {
initDarkMode(updateDarkMode, defaultDarkMode)
initLocale(lang, locale, updateLang, updateLocale)
- // 可以
if (NOTION_CONFIG?.REDIRECT_LANG) {
redirectUserLang(NOTION_PAGE_ID)
}
+ setOnLoading(false)
}, [])
- // 加载进度条
useEffect(() => {
const handleStart = url => {
const { theme } = router.query
@@ -103,10 +92,15 @@ export function GlobalContextProvider(props) {
const newUrl = `${url}${url.includes('?') ? '&' : '?'}theme=${theme}`
router.push(newUrl)
}
- setOnLoading(true)
+ if (!onLoading) {
+ setOnLoading(true)
+ }
}
+
const handleStop = () => {
- setOnLoading(false)
+ if (onLoading) {
+ setOnLoading(false)
+ }
}
const currentTheme = router?.query?.theme || theme
@@ -120,7 +114,7 @@ export function GlobalContextProvider(props) {
router.events.off('routeChangeComplete', handleStop)
router.events.off('routeChangeError', handleStop)
}
- }, [router])
+ }, [router, onLoading])
return (
-
-
-
-
- )
-}
diff --git a/themes/heo/config.js b/themes/heo/config.js
index b3a830a3f7b..436ad33daa6 100644
--- a/themes/heo/config.js
+++ b/themes/heo/config.js
@@ -1,5 +1,6 @@
const CONFIG = {
HEO_HOME_POST_TWO_COLS: true, // 首页博客两列显示,若为false则只显示一列
+ HEO_LOADING_COVER: true, // 页面加载的遮罩动画
HEO_HOME_BANNER_ENABLE: true,
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 33f88f270de..b496ef20bfd 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -10,6 +10,7 @@ import Comment from '@/components/Comment'
import { AdSlot } from '@/components/GoogleAdsense'
import { HashTag } from '@/components/HeroIcons'
import LazyImage from '@/components/LazyImage'
+import LoadingCover from '@/components/LoadingCover'
import replaceSearchResult from '@/components/Mark'
import NotionPage from '@/components/NotionPage'
import ShareBar from '@/components/ShareBar'
@@ -82,6 +83,7 @@ const LayoutBase = props => {
false,
CONFIG
)
+ const HEO_LOADING_COVER = siteConfig('HEO_LOADING_COVER', true, CONFIG)
// 加载wow动画
useEffect(() => {
@@ -121,6 +123,8 @@ const LayoutBase = props => {
{/* 页脚 */}
+
+ {HEO_LOADING_COVER && }
)
}