theme async

1733735097 · Jun 4, 2023 · 1513ab8 · 1513ab8
1 parent 351878d
commit 1513ab8
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 27 deletions.
diff --git a/lib/memorize.js b/lib/memorize.js
diff --git a/lib/utils.js b/lib/utils.js
@@ -1,5 +1,15 @@
 // 封装异步加载资源的方法
+import { memo } from 'react'
 
+/**
+ * 组件持久化
+ */
+export const memorize = (Component) => {
+  const MemoizedComponent = (props) => {
+    return <Component {...props} />
+  }
+  return memo(MemoizedComponent)
+}
 /**
  * 加载外部资源
  * @param url 地址 例如 https://xx.com/xx.js

diff --git a/pages/[...slug].js b/pages/[...slug].js
@@ -5,7 +5,7 @@ import { useGlobal } from '@/lib/global'
 import { useEffect, useState } from 'react'
 import { idToUuid } from 'notion-utils'
 import { useRouter } from 'next/router'
-import { isBrowser } from '@/lib/utils'
+import { isBrowser, memorize } from '@/lib/utils'
 import { getNotion } from '@/lib/notion/getNotion'
 import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
 import md5 from 'js-md5'
@@ -17,7 +17,7 @@ import Loading from '@/components/Loading'
  * @param {*} props
  * @returns
  */
-const Slug = props => {
+const Slug = memorize(props => {
   const { theme, changeLoadingState } = useGlobal()
   const { post, siteInfo } = props
   const router = useRouter()
@@ -60,9 +60,9 @@ const Slug = props => {
   }
 
   /**
-   * 验证文章密码
-   * @param {*} result
-   */
+     * 验证文章密码
+     * @param {*} result
+     */
   const validPassword = passInput => {
     const encrypt = md5(post.slug + passInput)
 
@@ -86,9 +86,9 @@ const Slug = props => {
   }
 
   return (
-    <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
+      <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
   )
-}
+})
 
 export async function getStaticPaths() {
   if (!BLOG.isProd) {

diff --git a/pages/archive/index.js b/pages/archive/index.js
@@ -16,7 +16,7 @@ const ArchiveIndex = props => {
     type: 'website'
   }
 
-  const LayoutArchive = dynamic(() => import(`@/themes/${theme}/LayoutArchive`).then(async (m) => { return m.LayoutArchive }), { ssr: true, loading: () => <Loading /> })
+  const LayoutArchive = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutArchive }), { ssr: true, loading: () => <Loading /> })
   return <LayoutArchive {...props} meta={meta} />
 }
 

diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js
@@ -15,7 +15,7 @@ export default function Category(props) {
   const { siteInfo, posts } = props
   const { locale } = useGlobal()
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props} />
   }
   const meta = {
@@ -28,7 +28,7 @@ export default function Category(props) {
     type: 'website'
   }
 
-  const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
+  const LayoutCategory = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
   return <LayoutCategory {...props} meta={meta} />
 }
 

diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js
@@ -15,7 +15,7 @@ export default function Category(props) {
   const { siteInfo, posts } = props
   const { locale } = useGlobal()
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props} />
   }
   const meta = {
@@ -28,7 +28,7 @@ export default function Category(props) {
     type: 'website'
   }
 
-  const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
+  const LayoutCategory = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategory }), { ssr: true, loading: () => <Loading /> })
   return <LayoutCategory {...props} meta={meta} />
 }
 

diff --git a/pages/category/index.js b/pages/category/index.js
@@ -20,7 +20,7 @@ export default function Category(props) {
     slug: 'category',
     type: 'website'
   }
-  const LayoutCategoryIndex = dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`).then(async (m) => { return m.LayoutCategoryIndex }), { ssr: false })
+  const LayoutCategoryIndex = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutCategoryIndex }), { ssr: false })
   return <LayoutCategoryIndex {...props} meta={meta} />
 }
 

diff --git a/pages/index.js b/pages/index.js
@@ -6,19 +6,24 @@ import { generateRss } from '@/lib/rss'
 import { generateRobotsTxt } from '@/lib/robots.txt'
 import dynamic from 'next/dynamic'
 import Loading from '@/components/Loading'
+import { memorize } from '@/lib/utils'
 
 /**
  * 首页布局
  * @param {*} props
  * @returns
  */
-const Index = props => {
+const Index = memorize(props => {
   const { theme } = useGlobal()
-  const LayoutIndex = dynamic(() => import(`@/themes/${theme}`)
-    .then(async (m) => { return m.LayoutIndex }), { ssr: true, loading: () => <Loading /> }
+  const LayoutIndex = dynamic(
+    () =>
+      import(`@/themes/${theme}`).then((m) => {
+        return m.LayoutIndex
+      }),
+    { ssr: true, loading: () => <Loading /> }
   )
   return <LayoutIndex {...props} />
-}
+})
 
 /**
  * SSG 获取数据

diff --git a/pages/page/[page].js b/pages/page/[page].js
@@ -19,7 +19,7 @@ const Page = props => {
     type: 'website'
   }
 
-  const LayoutPage = dynamic(() => import(`@/themes/${theme}/LayoutPage`).then(async (m) => { return m.LayoutPage }), { ssr: true, loading: () => <Loading /> })
+  const LayoutPage = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutPage }), { ssr: true, loading: () => <Loading /> })
   return <LayoutPage {...props} meta={meta} />
 }
 

diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js
@@ -17,7 +17,7 @@ const Index = props => {
   }
   const { theme } = useGlobal()
 
-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
   return <LayoutSearch {...props} currentSearch={keyword} meta={meta} />
 }
 

diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js
@@ -16,7 +16,7 @@ const Index = props => {
     type: 'website'
   }
   const { theme } = useGlobal()
-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
   return <LayoutSearch {...props} currentSearch={keyword} meta={meta} />
 }
 

diff --git a/pages/search/index.js b/pages/search/index.js
@@ -34,7 +34,7 @@ const Search = props => {
 
   const { theme } = useGlobal()
 
-  const LayoutSearch = dynamic(() => import(`@/themes/${theme}/LayoutSearch`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
+  const LayoutSearch = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSearch }), { ssr: true, loading: () => <Loading /> })
   return <LayoutSearch {...props} posts={filteredPosts} currentSearch={keyword} meta={meta} />
 }
 

diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js
@@ -10,7 +10,7 @@ const Tag = props => {
   const { tag, siteInfo, posts } = props
 
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props}/>
   }
 
@@ -21,8 +21,8 @@ const Tag = props => {
     slug: 'tag/' + tag,
     type: 'website'
   }
-  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => <Loading /> })
-  return <LayoutTagIndex {...props} meta={meta} />
+  const LayoutTag = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => <Loading /> })
+  return <LayoutTag {...props} meta={meta} />
 }
 
 export async function getStaticProps({ params: { tag } }) {

diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js
@@ -10,7 +10,7 @@ const Tag = props => {
   const { tag, siteInfo, posts } = props
 
   if (!posts) {
-    const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
+    const Layout404 = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.Layout404 }), { ssr: true, loading: () => <Loading /> })
     return <Layout404 {...props}/>
   }
 
@@ -21,7 +21,7 @@ const Tag = props => {
     slug: 'tag/' + tag,
     type: 'website'
   }
-  const LayoutTag = dynamic(() => import(`@/themes/${theme}/LayoutTag`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => <Loading /> })
+  const LayoutTag = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTag }), { ssr: true, loading: () => <Loading /> })
   return <LayoutTag {...props} meta={meta} />
 }
 

diff --git a/pages/tag/index.js b/pages/tag/index.js
@@ -21,7 +21,7 @@ const TagIndex = props => {
     slug: 'tag',
     type: 'website'
   }
-  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}/LayoutTagIndex`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => <Loading /> })
+  const LayoutTagIndex = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutTagIndex }), { ssr: true, loading: () => <Loading /> })
   return <LayoutTagIndex {...props} meta={meta} />
 }