From a6d6127ea79e9100321df554f85b40250365ad3f Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 29 Aug 2024 12:43:39 +0800 Subject: [PATCH] =?UTF-8?q?HEO=E6=B7=BB=E5=8A=A0=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ExternalPlugins.js | 3 +- components/LoadingCover.js | 71 +++++++++++++++++++++++++++ components/LoadingProgress.js | 3 +- lib/global.js | 26 ++++------ themes/heo/components/LoadingCover.js | 8 --- themes/heo/config.js | 1 + themes/heo/index.js | 4 ++ 7 files changed, 90 insertions(+), 26 deletions(-) create mode 100644 components/LoadingCover.js delete mode 100644 themes/heo/components/LoadingCover.js 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 => { {/* 页脚 */}