diff --git a/themes/example/LayoutBase.js b/themes/example/LayoutBase.js
index 90ec3ff9..9ca0eb5e 100644
--- a/themes/example/LayoutBase.js
+++ b/themes/example/LayoutBase.js
@@ -7,6 +7,7 @@ import { Title } from './components/Title'
 import { SideBar } from './components/SideBar'
 import JumpToTopButton from './components/JumpToTopButton'
 import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
 
@@ -15,6 +16,14 @@ import BLOG from '@/blog.config'
  */
 const LayoutBase = props => {
   const { children, meta } = props
+  const { onLoading } = useGlobal()
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+
   return (
         <div id='theme-example' className='dark:text-gray-300  bg-white dark:bg-black'>
             <CommonHead meta={meta} />
@@ -31,7 +40,7 @@ const LayoutBase = props => {
 
                 <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>
 
-                    <div className='w-full max-w-3xl xl:px-14 lg:px-4 '>{children}</div>
+                    <div className='w-full max-w-3xl xl:px-14 lg:px-4 '> {onLoading ? LoadingCover : children}</div>
 
                     <SideBar {...props} />
 
diff --git a/themes/fukasawa/LayoutBase.js b/themes/fukasawa/LayoutBase.js
index a99dea5d..2c6d030e 100644
--- a/themes/fukasawa/LayoutBase.js
+++ b/themes/fukasawa/LayoutBase.js
@@ -4,6 +4,7 @@ import AsideLeft from './components/AsideLeft'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -20,17 +21,21 @@ import { isBrowser, loadExternalResource } from '@/lib/utils'
  * @constructor
  */
 const LayoutBase = (props) => {
-  const {
-    children,
-    headerSlot,
-    meta
-  } = props
+  const { children, headerSlot, meta } = props
   const leftAreaSlot = <Live2D/>
 
   if (isBrowser()) {
     loadExternalResource('/css/theme-fukasawa.css', 'css')
   }
 
+  const { onLoading } = useGlobal()
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+
   return (<div id='theme-fukasawa' >
     <CommonHead meta={meta} />
     <TopNav {...props}/>
@@ -41,7 +46,7 @@ const LayoutBase = (props) => {
       <main id='wrapper' className='relative flex w-full py-8 justify-center z-10'>
         <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative'>
           <div> {headerSlot} </div>
-          <div>{children}</div>
+          <div> {onLoading ? LoadingCover : children} </div>
         </div>
       </main>
 
diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js
index 34f90c96..9d3a9eff 100644
--- a/themes/medium/LayoutBase.js
+++ b/themes/medium/LayoutBase.js
@@ -25,6 +25,13 @@ const LayoutBase = props => {
   const { locale } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
+  const { onLoading } = useGlobal()
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
 
   return (
         <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
@@ -42,7 +49,8 @@ const LayoutBase = props => {
 
                         <div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
                             {slotTop}
-                            {children}
+
+                            {onLoading ? LoadingCover : children}
 
                             {/* 回顶按钮 */}
                             <div
diff --git a/themes/nobelium/LayoutBase.js b/themes/nobelium/LayoutBase.js
index 8a84843b..8a48ad76 100644
--- a/themes/nobelium/LayoutBase.js
+++ b/themes/nobelium/LayoutBase.js
@@ -4,6 +4,7 @@ import Nav from './components/Nav'
 import { Footer } from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
 import Live2D from '@/components/Live2D'
+import { useGlobal } from '@/lib/global'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
 
@@ -14,7 +15,13 @@ const LayoutBase = props => {
   const { children, meta, post } = props
 
   const fullWidth = post?.fullWidth ?? false
+  const { onLoading } = useGlobal()
 
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
   return (
         <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen'>
             <CommonHead meta={meta} />
@@ -22,11 +29,9 @@ const LayoutBase = props => {
             {/* 顶部导航栏 */}
             <Nav {...props} />
 
-            <main className={`relative m-auto flex-grow w-full transition-all ${
-                !fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'
-                }`}>
+            <main className={`relative m-auto flex-grow w-full transition-all ${!fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'}`}>
 
-                {children}
+                {onLoading ? LoadingCover : children}
 
             </main>
 
diff --git a/themes/simple/LayoutBase.js b/themes/simple/LayoutBase.js
index be0846bd..ec6920d8 100644
--- a/themes/simple/LayoutBase.js
+++ b/themes/simple/LayoutBase.js
@@ -47,12 +47,12 @@ const LayoutBase = props => {
             <NavBar {...props} />
 
             {/* 主体 */}
-            <div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
+            <div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
                 <div id='container-inner ' className='w-full flex-grow'>
                     {onLoading ? LoadingCover : children}
                 </div>
 
-                <div className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
+                <div id='right-sidebar' className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
                     <SideBar {...props} />
                 </div>