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
- + return
+
+
+
} export default Loading 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 + 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 }> + + } 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 }> - - + return }> + + } /** 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 }> - - + return }> + + } 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 }> - - + return }> + + } /** 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]) 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) => {
-
-
+
+
{headerSlot}
{onLoading ? LoadingCover : children}
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 }) => {
} {/* 子菜单 */} - {hasSubMenu &&
    + {hasSubMenu &&
      {link?.subMenus?.map(sLink => { return
    • 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 (<> -