From 4f74836d028057ca7bf0dda2c5639e4dc9a94f48 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Sat, 10 Jun 2023 10:55:57 +0800
Subject: [PATCH 1/4] animation-loading

---
 components/Loading.js                      | 8 +++++---
 themes/fukasawa/LayoutBase.js              | 4 ++--
 themes/fukasawa/components/MenuItemDrop.js | 2 +-
 themes/fukasawa/components/MenuList.js     | 4 ++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/Loading.js b/components/Loading.js
index d02ab07e..2207eb91 100644
--- a/components/Loading.js
+++ b/components/Loading.js
@@ -1,11 +1,13 @@
 
 /**
- * 异步文件加载过程中的占位符
+ * 异步文件加载时的占位符
  * @returns
  */
 const Loading = (props) => {
-  return <div id="loading-bg" className="-z-10 w-screen h-screen flex justify-center items-center fixed left-0 top-0">
-       <i className='fas fa-spinner animate-spin text-3xl' />
+  return <div id="loading-container" className="-z-10 w-screen h-screen flex justify-center items-center fixed left-0 top-0">
+        <div id="loading-wrapper">
+            <div className="loading"> <i className="fas fa-spinner animate-spin text-3xl "/></div>
+        </div>
     </div>
 }
 export default Loading
diff --git a/themes/fukasawa/LayoutBase.js b/themes/fukasawa/LayoutBase.js
index 2c6d030e..d000cfe0 100644
--- a/themes/fukasawa/LayoutBase.js
+++ b/themes/fukasawa/LayoutBase.js
@@ -43,8 +43,8 @@ const LayoutBase = (props) => {
     <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
       <AsideLeft {...props} slot={leftAreaSlot}/>
 
-      <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'>
+      <main id='wrapper' className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
+        <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
           <div> {headerSlot} </div>
           <div> {onLoading ? LoadingCover : children} </div>
         </div>
diff --git a/themes/fukasawa/components/MenuItemDrop.js b/themes/fukasawa/components/MenuItemDrop.js
index db0c4123..8c768478 100644
--- a/themes/fukasawa/components/MenuItemDrop.js
+++ b/themes/fukasawa/components/MenuItemDrop.js
@@ -22,7 +22,7 @@ export const MenuItemDrop = ({ link }) => {
             </div>}
 
         {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} py-1 absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
+        {hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} z-20 py-1 absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
             {link?.subMenus?.map(sLink => {
               return <li key={sLink.id}>
                     <Link href={sLink.to} className='my-auto py-1 px-2 items-center justify-start flex text-gray-500 dark:text-gray-300 hover:text-black  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
diff --git a/themes/fukasawa/components/MenuList.js b/themes/fukasawa/components/MenuList.js
index deee93d9..af4f8c1b 100644
--- a/themes/fukasawa/components/MenuList.js
+++ b/themes/fukasawa/components/MenuList.js
@@ -30,10 +30,10 @@ export const MenuList = (props) => {
   }
 
   return (<>
-        <nav id='nav-pc' className='hidden md:block font-sans text-sm z-20'>
+        <nav id='nav-pc' className='hidden md:block font-sans text-sm z-10'>
             {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
         </nav>
-        <nav id='nav-mobile' className='block md:hidden font-sans text-sm z-20 pb-1'>
+        <nav id='nav-mobile' className='block md:hidden font-sans text-sm z-10 pb-1'>
             {links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={props.onHeightChange}/>)}
         </nav>
     </>

From 425ebe4e3dfa315f18c5a1223569dc59b09ba74a Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sat, 10 Jun 2023 18:20:52 +0800
Subject: [PATCH 2/4] animation-loading

---
 pages/404.js                             | 25 ++++++++++++++++++++++--
 pages/[...slug].js                       |  7 +++++--
 pages/archive/index.js                   |  8 +++++---
 pages/category/[category]/index.js       |  8 +++++---
 pages/category/[category]/page/[page].js |  9 +++++----
 pages/category/index.js                  |  8 +++++---
 pages/index.js                           | 18 ++++++++++-------
 pages/page/[page].js                     | 14 ++++++++-----
 pages/search/[keyword]/index.js          |  6 ++++--
 pages/search/[keyword]/page/[page].js    |  7 +++++--
 pages/search/index.js                    | 19 +++++++++---------
 pages/tag/[tag]/index.js                 |  7 ++++---
 pages/tag/[tag]/page/[page].js           |  6 ++++--
 pages/tag/index.js                       |  6 ++++--
 14 files changed, 99 insertions(+), 49 deletions(-)

diff --git a/pages/404.js b/pages/404.js
index f23edcec..cb7ec336 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,6 +1,15 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
+import Loading from '@/components/Loading'
+import { Suspense, useEffect, useState } from 'react'
+import BLOG from '@/blog.config'
+
+const layout = 'Layout404'
+/**
+ * 加载默认主题
+ */
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 404
@@ -10,8 +19,20 @@ import dynamic from 'next/dynamic'
 const NoFound = props => {
   const { theme, siteInfo } = useGlobal()
   const meta = { title: `${props?.siteInfo?.title} | 页面找不到啦`, image: siteInfo?.pageCover }
-  const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`))
-  return <Layout404 {...props} meta={meta}/>
+  const [Layout, setLayout] = useState(DefaultLayout)
+  useEffect(() => {
+    const loadLayout = async () => {
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
+    }
+    loadLayout()
+  }, [theme])
+
+  props = { ...props, meta }
+
+  return <Suspense fallback={<Loading/>}>
+    <Layout {...props} />
+  </Suspense>
 }
 
 export async function getStaticProps () {
diff --git a/pages/[...slug].js b/pages/[...slug].js
index d62a110a..cc2edcd5 100644
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -12,10 +12,12 @@ import md5 from 'js-md5'
 import dynamic from 'next/dynamic'
 import Loading from '@/components/Loading'
 
+const layout = 'LayoutSlug'
+
 /**
  * 懒加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSlug`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 根据notion的slug访问页面
@@ -31,7 +33,8 @@ const Slug = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSlug`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
diff --git a/pages/archive/index.js b/pages/archive/index.js
index bb095411..32eeefbb 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -3,13 +3,14 @@ import React, { Suspense, useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
-
 import Loading from '@/components/Loading'
 
+const layout = 'LayoutArchive'
+
 /**
  * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutArchive`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const ArchiveIndex = props => {
   const { siteInfo } = props
@@ -18,7 +19,8 @@ const ArchiveIndex = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutArchive`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js
index 1db1e85c..f8ac5188 100644
--- a/pages/category/[category]/index.js
+++ b/pages/category/[category]/index.js
@@ -3,13 +3,13 @@ import React, { Suspense, useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
-
 import Loading from '@/components/Loading'
 
+const layout = 'LayoutCategory'
 /**
  * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutCategory`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 分类页
@@ -20,10 +20,12 @@ export default function Category(props) {
   const { siteInfo } = props
   const { locale, theme } = useGlobal()
   const [Layout, setLayout] = useState(DefaultLayout)
+
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategory`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js
index 7ed2d109..26799686 100644
--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -3,13 +3,14 @@ import React, { Suspense, useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
-
 import Loading from '@/components/Loading'
 
+const layout = 'LayoutCategory'
+
 /**
  * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutCategory`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 分类页
@@ -20,12 +21,12 @@ export default function Category(props) {
   const { theme } = useGlobal()
   const { siteInfo } = props
   const { locale } = useGlobal()
-
   const [Layout, setLayout] = useState(DefaultLayout)
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategory`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
diff --git a/pages/category/index.js b/pages/category/index.js
index d4c6ab00..4f09ebeb 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -3,13 +3,14 @@ import React, { Suspense, useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
 import BLOG from '@/blog.config'
-
 import Loading from '@/components/Loading'
 
+const layout = 'LayoutCategoryIndex'
+
 /**
  * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutCategoryIndex`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 分类首页
@@ -25,7 +26,8 @@ export default function Category(props) {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
diff --git a/pages/index.js b/pages/index.js
index 9331cb5a..56a0bf6b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -8,10 +8,12 @@ import dynamic from 'next/dynamic'
 import { Suspense, useEffect, useState } from 'react'
 import Loading from '@/components/Loading'
 
+const layout = 'LayoutIndex'
+
 /**
- * 懒加载默认主题
+ * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutIndex`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 首页布局
@@ -21,17 +23,19 @@ const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutIndex`)
 const Index = props => {
   // 动态切换主题
   const { theme } = useGlobal()
-  const [Layout, setLayoutIndex] = useState(DefaultLayout)
+  const [Layout, setLayout] = useState(DefaultLayout)
+  // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayoutIndex(dynamic(() => import(`@/themes/${theme}/LayoutIndex`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Suspense fallback={<Loading />}>
+        <Layout {...props} />
+    </Suspense>
 }
 
 /**
diff --git a/pages/page/[page].js b/pages/page/[page].js
index e3b03ddd..76a115ae 100644
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -5,10 +5,13 @@ import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
 import { Suspense, useEffect, useState } from 'react'
 import Loading from '@/components/Loading'
+
+const layout = 'LayoutPage'
+
 /**
  * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutPage`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 文章列表分页
@@ -22,7 +25,8 @@ const Page = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutPage`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
@@ -37,9 +41,9 @@ const Page = props => {
 
   props = { ...props, meta }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Suspense fallback={<Loading />}>
+        <Layout {...props} />
+    </Suspense>
 }
 
 export async function getStaticPaths() {
diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js
index 92b18fb3..46b254e0 100644
--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -6,10 +6,11 @@ import dynamic from 'next/dynamic'
 import { Suspense, useEffect, useState } from 'react'
 import Loading from '@/components/Loading'
 
+const layout = 'LayoutSearch'
 /**
  * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSearch`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Index = props => {
   const { keyword, siteInfo } = props
@@ -18,7 +19,8 @@ const Index = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js
index a279f332..b0cdf51d 100644
--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -6,10 +6,11 @@ import BLOG from '@/blog.config'
 import { Suspense, useEffect, useState } from 'react'
 import Loading from '@/components/Loading'
 
+const layout = 'LayoutSearch'
 /**
  * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSearch`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Index = props => {
   const { keyword, siteInfo } = props
@@ -18,10 +19,12 @@ const Index = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
+
   const meta = {
     title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
     description: siteInfo?.title,
diff --git a/pages/search/index.js b/pages/search/index.js
index 06fd3984..937e8c18 100644
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -5,27 +5,29 @@ import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import { Suspense, useEffect, useState } from 'react'
 import Loading from '@/components/Loading'
+const layout = 'LayoutSearch'
 /**
  * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutSearch`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Search = props => {
   const { posts, siteInfo } = props
-  const { theme } = useGlobal()
+  const { theme, locale } = useGlobal()
   const [Layout, setLayout] = useState(DefaultLayout)
+  const router = useRouter()
+  const keyword = getSearchKey(router)
 
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutSearch`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
 
-  const router = useRouter()
   let filteredPosts
-  const keyword = getSearchKey(router)
   // 静态过滤
   if (keyword) {
     filteredPosts = posts.filter(post => {
@@ -39,7 +41,6 @@ const Search = props => {
     filteredPosts = []
   }
 
-  const { locale } = useGlobal()
   const meta = {
     title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
     description: siteInfo?.description,
@@ -50,9 +51,9 @@ const Search = props => {
 
   props = { ...props, meta, posts: { filteredPosts } }
 
-  return <Suspense fallback={<Loading/>}>
-    <Layout {...props} />
-  </Suspense>
+  return <Suspense fallback={<Loading />}>
+        <Layout {...props} />
+    </Suspense>
 }
 
 /**
diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js
index 8b5729f3..c3b55d1d 100644
--- a/pages/tag/[tag]/index.js
+++ b/pages/tag/[tag]/index.js
@@ -4,11 +4,11 @@ import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import { Suspense, useEffect, useState } from 'react'
 import Loading from '@/components/Loading'
-
+const layout = 'LayoutTag'
 /**
  * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutTag`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Tag = props => {
   const { theme } = useGlobal()
@@ -19,7 +19,8 @@ const Tag = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTag`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js
index 2adb6c2c..fb585b15 100644
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -5,10 +5,11 @@ import dynamic from 'next/dynamic'
 import { Suspense, useEffect, useState } from 'react'
 import Loading from '@/components/Loading'
 
+const layout = 'LayoutTag'
 /**
  * 加载默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutTag`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 const Tag = props => {
   const { theme } = useGlobal()
@@ -18,7 +19,8 @@ const Tag = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTag`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])
diff --git a/pages/tag/index.js b/pages/tag/index.js
index 8b8bc1c7..a058d5d3 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -4,10 +4,11 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import Loading from '@/components/Loading'
+const layout = 'LayoutTagIndex'
 /**
  * 默认主题
  */
-const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/LayoutTagIndex`), { ssr: true })
+const DefaultLayout = dynamic(() => import(`@/themes/${BLOG.THEME}/${layout}`), { ssr: true })
 
 /**
  * 标签首页
@@ -22,7 +23,8 @@ const TagIndex = props => {
   // 切换主题
   useEffect(() => {
     const loadLayout = async () => {
-      setLayout(dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`)))
+      const newLayout = await dynamic(() => import(`@/themes/${theme}/${layout}`))
+      setLayout(newLayout)
     }
     loadLayout()
   }, [theme])

From b10f1ffbfc412dfe77a4c1f3bdc3fc4cab8290e7 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sat, 10 Jun 2023 18:51:34 +0800
Subject: [PATCH 3/4] bg-header

---
 themes/hexo/components/Header.js   | 72 ++++++++----------------------
 themes/matery/components/Header.js | 59 ++++--------------------
 themes/matery/config_matery.js     |  1 +
 3 files changed, 28 insertions(+), 104 deletions(-)

diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Header.js
index e72a931a..88fca1c2 100644
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -1,16 +1,12 @@
 // import Image from 'next/image'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_HEXO from '../config_hexo'
 import NavButtonGroup from './NavButtonGroup'
-import throttle from 'lodash.throttle'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 
 let wrapperTop = 0
-let windowTop = 0
-let autoScroll = true
-const enableAutoScroll = false // 是否开启自动吸附滚动
 
 /**
  *
@@ -20,6 +16,9 @@ const Header = props => {
   const [typed, changeType] = useState()
   const { siteInfo } = props
   const { locale } = useGlobal()
+  const scrollToWrapper = () => {
+    window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
+  }
   useEffect(() => {
     updateHeaderHeight()
 
@@ -36,16 +35,8 @@ const Header = props => {
       )
     }
 
-    if (enableAutoScroll) {
-      scrollTrigger()
-      window.addEventListener('scroll', scrollTrigger)
-    }
-
     window.addEventListener('resize', updateHeaderHeight)
     return () => {
-      if (enableAutoScroll) {
-        window.removeEventListener('scroll', scrollTrigger)
-      }
       window.removeEventListener('resize', updateHeaderHeight)
     }
   })
@@ -57,58 +48,33 @@ const Header = props => {
     })
   }
 
-  const autoScrollEnd = () => {
-    if (autoScroll) {
-      windowTop = window.scrollY
-      autoScroll = false
-    }
-  }
-  const throttleMs = 200
-  const scrollTrigger = useCallback(throttle(() => {
-    if (screen.width <= 768) {
-      return
-    }
-
-    const scrollS = window.scrollY
-    // 自动滚动
-    if ((scrollS > windowTop) & (scrollS < window.innerHeight) && !autoScroll
-    ) {
-      autoScroll = true
-      window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
-      autoScrollEnd()
-    }
-    if ((scrollS < windowTop) && (scrollS < window.innerHeight) && !autoScroll) {
-      autoScroll = true
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-      autoScrollEnd()
-    }
-    windowTop = scrollS
-  }, throttleMs))
-
   return (
-        <header id="header" style={{ zIndex: 1 }} className="w-full h-screen relative" >
-
-            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
-                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
+        <header
+            id="header" style={{ zIndex: 1 }}
+            className="w-full h-screen relative bg-black"
+        >
 
             <div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
+                {/* 站点标题 */}
                 <div className='font-black text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
+                {/* 站点欢迎语 */}
                 <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
                     <span id='typed' />
                 </div>
 
-                {/* 首页导航插件 */}
+                {/* 首页导航大按钮 */}
                 {CONFIG_HEXO.HOME_NAV_BUTTONS && <NavButtonGroup {...props} />}
 
+                {/* 滚动按钮 */}
+                <div onClick={scrollToWrapper} className="z-10 cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white">
+                    <div className="opacity-70 animate-bounce text-xs">{locale.COMMON.START_READING}</div>
+                    <i className='opacity-70 animate-bounce fas fa-angle-down' />
+                </div>
             </div>
 
-            <div
-                onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
-                className="cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white"
-            >
-                <div className="opacity-70 animate-bounce text-xs">{locale.COMMON.START_READING}</div>
-                <i className='opacity-70 animate-bounce fas fa-angle-down' />
-            </div>
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
+                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`} />
+
         </header>
   )
 }
diff --git a/themes/matery/components/Header.js b/themes/matery/components/Header.js
index c21c5523..639cfd9d 100644
--- a/themes/matery/components/Header.js
+++ b/themes/matery/components/Header.js
@@ -1,15 +1,11 @@
 // import Image from 'next/image'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_MATERY from '../config_matery'
-import throttle from 'lodash.throttle'
 import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
 
 let wrapperTop = 0
-let windowTop = 0
-let autoScroll = false
-const enableAutoScroll = false // 是否开启自动吸附滚动
-const throttleMs = 200
 
 /**
  *
@@ -21,12 +17,11 @@ const Header = props => {
   const { locale } = useGlobal()
 
   useEffect(() => {
-    scrollTrigger()
     updateHeaderHeight()
     if (!typed && window && document.getElementById('typed')) {
       changeType(
         new Typed('#typed', {
-          strings: CONFIG_MATERY.HOME_BANNER_GREETINGS,
+          strings: BLOG.GREETING_WORDS.split(','),
           typeSpeed: 200,
           backSpeed: 100,
           backDelay: 400,
@@ -35,51 +30,13 @@ const Header = props => {
         })
       )
     }
-    if (enableAutoScroll) {
-      scrollTrigger()
-      window.addEventListener('scroll', scrollTrigger)
-    }
+
     window.addEventListener('resize', updateHeaderHeight)
     return () => {
-      if (enableAutoScroll) {
-        window.removeEventListener('scroll', scrollTrigger)
-      } window.removeEventListener('resize', updateHeaderHeight)
+      window.removeEventListener('resize', updateHeaderHeight)
     }
   }, [])
 
-  const autoScrollEnd = () => {
-    if (autoScroll) {
-      windowTop = window.scrollY
-      autoScroll = false
-    }
-  }
-
-  /**
-     * 吸附滚动，移动端关闭
-     * @returns
-     */
-  const scrollTrigger = useCallback(throttle(() => {
-    if (screen.width <= 768) {
-      return
-    }
-
-    const scrollS = window.scrollY
-
-    // 自动滚动
-    if ((scrollS > windowTop) & (scrollS < window.innerHeight) && !autoScroll
-    ) {
-      autoScroll = true
-      window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
-      setTimeout(autoScrollEnd, 500)
-    }
-    if ((scrollS < windowTop) && (scrollS < window.innerHeight) && !autoScroll) {
-      autoScroll = true
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-      setTimeout(autoScrollEnd, 500)
-    }
-    windowTop = scrollS
-  }, throttleMs))
-
   function updateHeaderHeight() {
     requestAnimationFrame(() => {
       const wrapperElement = document.getElementById('wrapper')
@@ -90,11 +47,11 @@ const Header = props => {
   return (
         <header
             id="header" style={{ zIndex: 1 }}
-            className=" w-full h-screen bg-black text-white relative"
+            className=" w-full h-screen relative bg-black"
         >
 
-            <div className="absolute flex flex-col h-full items-center justify-center w-full ">
-                <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
+            <div className="text-white absolute flex flex-col h-full items-center justify-center w-full ">
+                <div className='text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
                 <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
                     <span id='typed' />
                 </div>
diff --git a/themes/matery/config_matery.js b/themes/matery/config_matery.js
index c169345c..6704f642 100644
--- a/themes/matery/config_matery.js
+++ b/themes/matery/config_matery.js
@@ -1,5 +1,6 @@
 const CONFIG_MATERY = {
   HOME_BANNER_ENABLE: true,
+  // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。
   HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
 
   HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮

From a8fa08cbd61b8d9199e6aa371dedc5aa09d37f9a Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sat, 10 Jun 2023 18:52:00 +0800
Subject: [PATCH 4/4] header-cover

---
 themes/matery/components/Header.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/themes/matery/components/Header.js b/themes/matery/components/Header.js
index 639cfd9d..42a75663 100644
--- a/themes/matery/components/Header.js
+++ b/themes/matery/components/Header.js
@@ -51,10 +51,13 @@ const Header = props => {
         >
 
             <div className="text-white absolute flex flex-col h-full items-center justify-center w-full ">
+                {/* 站点标题 */}
                 <div className='text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
+                {/* 站点欢迎语 */}
                 <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
                     <span id='typed' />
                 </div>
+                {/* 滚动按钮 */}
                 <div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
                     className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40">
                     <i className='animate-bounce fas fa-angle-double-down' /> <span>{locale.COMMON.START_READING}</span>
@@ -62,7 +65,7 @@ const Header = props => {
             </div>
 
             <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
-                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_MATERY.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
+                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_MATERY.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`} />
 
         </header>
   )