Merge pull request #2683 from tangly1024/release/4.6.2

HEO添加加载动画

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 && <AdBlockDetect />}
       {TIANLI_KEY && <TianLiGPT />}
       <VConsole />
-      <LoadingProgress />
+      {ENABLE_NPROGRSS && <LoadingProgress />}
       <AosAnimation />
       {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && <LA51 />}
 

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 ? (
+    <div
+      id='loading-cover'
+      onClick={handleClick}
+      className={`dark:text-white text-black bg-white dark:bg-black animate__animated ${
+        onLoading ? 'animate__fadeIn' : 'animate__fadeOut'
+      } flex flex-col justify-center z-50 w-full h-screen fixed top-0 left-0`}>
+      <div className='mx-auto'>
+        <style global>
+          {`
+      .loader {
+        width: 20px;
+        aspect-ratio: 1;
+        border-radius: 50%;
+        background: #000;
+        box-shadow: 0 0 0 0 #0004;
+        animation: l2 1.5s infinite linear;
+        position: relative;
+      }
+      .loader:before,
+      .loader:after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        box-shadow: 0 0 0 0 #0004;
+        animation: inherit;
+        animation-delay: -0.5s;
+      }
+      .loader:after {
+        animation-delay: -1s;
+      }
+      @keyframes l2 {
+        100% {
+          box-shadow: 0 0 0 40px #0000;
+        }
+      }`}
+        </style>
+        <div className='loader'></div>
+      </div>
+    </div>
+  ) : null
+}

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()

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 (
     <GlobalContext.Provider

pages/index.js

@@ -3,6 +3,7 @@ import { siteConfig } from '@/lib/config'
 import { getGlobalData, getPostBlocks } from '@/lib/db/getSiteData'
 import { generateRobotsTxt } from '@/lib/robots.txt'
 import { generateRss } from '@/lib/rss'
+import { generateSitemapXml } from '@/lib/sitemap.xml'
 import { getLayoutByTheme } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
@@ -62,6 +63,8 @@ export async function getStaticProps(req) {
   generateRobotsTxt(props)
   // 生成Feed订阅
   generateRss(props)
+  // 生成
+  generateSitemapXml(props)
 
   // 生成全文索引 - 仅在 yarn build 时执行 && process.env.npm_lifecycle_event === 'build'
 

themes/heo/components/LoadingCover.js

@@ -1,8 +0,0 @@
-export default function LoadingCover () {
-  return (<div id="loading-cover" className={'md:-mt-20 flex-grow dark:text-white text-black animate__animated animate__fadeIn flex flex-col justify-center z-50 w-full h-screen container mx-auto'}>
-  <div className="mx-auto">
-    <i className="fas fa-spinner animate-spin"/>
-  </div>
-</div>
-  )
-}

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,
 

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 => {
 
       {/* 页脚 */}
       <Footer title={siteConfig('TITLE')} />
+
+      {HEO_LOADING_COVER && <LoadingCover />}
     </div>
   )
 }