重构；DynamicLayout组件重写，移除blog.config.js中的MAPPING配置

lib/utils/index.js

@@ -204,6 +204,9 @@ export function getQueryVariable(key) {
  * @returns {string|null}
  */
 export function getQueryParam(url, param) {
+  if (!url) {
+    return ''
+  }
   // 移除哈希部分
   const urlWithoutHash = url.split('#')[0]
   const searchParams = new URLSearchParams(urlWithoutHash.split('?')[1])

pages/404.js

@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 404
@@ -10,9 +9,8 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const NoFound = props => {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='Layout404' {...props} />
 }
 
 export async function getStaticProps(req) {

pages/[prefix]/index.js

@@ -87,7 +87,7 @@ const Slug = props => {
   return (
     <>
       {/* 文章布局 */}
-      <DynamicLayout theme={theme} router={router} {...props} />
+      <DynamicLayout theme={theme} layoutName='LayoutSlug' {...props} />
       {/* 解锁密码提示框 */}
       {post?.password && post?.password !== '' && !lock && <Notification />}
       {/* 导流工具 */}

pages/_app.js

@@ -8,7 +8,7 @@ import 'react-notion-x/src/styles.css' // 原版的react-notion-x
 
 import useAdjustStyle from '@/hooks/useAdjustStyle'
 import { GlobalContextProvider } from '@/lib/global'
-import { getGlobalLayoutByTheme } from '@/themes/theme'
+import { getBaseLayoutByTheme } from '@/themes/theme'
 import { useRouter } from 'next/router'
 import { useCallback, useMemo } from 'react'
 import { getQueryParam } from '../lib/utils'
@@ -34,7 +34,7 @@ const MyApp = ({ Component, pageProps }) => {
   useAdjustStyle()
 
   const route = useRouter()
-  const queryParam = useMemo(() => {
+  const theme = useMemo(() => {
     return (
       getQueryParam(route.asPath, 'theme') ||
       pageProps?.NOTION_CONFIG?.THEME ||
@@ -45,10 +45,10 @@ const MyApp = ({ Component, pageProps }) => {
   // 整体布局
   const GLayout = useCallback(
     props => {
-      const Layout = getGlobalLayoutByTheme(queryParam)
+      const Layout = getBaseLayoutByTheme(theme)
       return <Layout {...props} />
     },
-    [queryParam]
+    [theme]
   )
 
   const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

pages/archive/index.js

@@ -4,7 +4,6 @@ import { getGlobalData } from '@/lib/db/getSiteData'
 import { isBrowser } from '@/lib/utils'
 import { formatDateFmt } from '@/lib/utils/formatDate'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
 /**
@@ -27,9 +26,8 @@ const ArchiveIndex = props => {
     }
   }, [])
 
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutArchive' {...props} />
 }
 
 export async function getStaticProps({ locale }) {

pages/category/[category]/index.js

@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 分类页
@@ -10,9 +9,8 @@ import { useRouter } from 'next/router'
  * @returns
  */
 export default function Category(props) {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutPostList' {...props} />
 }
 
 export async function getStaticProps({ params: { category }, locale }) {

pages/category/[category]/page/[page].js

@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 分类页
@@ -11,9 +10,8 @@ import { useRouter } from 'next/router'
  */
 
 export default function Category(props) {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutPostList' {...props} />
 }
 
 export async function getStaticProps({ params: { category, page } }) {

pages/category/index.js

@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 分类首页
@@ -10,9 +9,8 @@ import { useRouter } from 'next/router'
  * @returns
  */
 export default function Category(props) {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutPostList' {...props} />
 }
 
 export async function getStaticProps({ locale }) {

pages/dashboard/[[...index]].js

@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 根据notion的slug访问页面
@@ -11,9 +10,8 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const Dashboard = props => {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutDashboard' {...props} />
 }
 
 export async function getStaticProps({ locale }) {

pages/index.js

@@ -5,7 +5,6 @@ import { generateRobotsTxt } from '@/lib/robots.txt'
 import { generateRss } from '@/lib/rss'
 import { generateSitemapXml } from '@/lib/sitemap.xml'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 首页布局
@@ -13,9 +12,8 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const Index = props => {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutIndex' {...props} />
 }
 
 /**

pages/page/[page].js

@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData, getPostBlocks } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 文章列表分页
@@ -10,9 +9,8 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const Page = props => {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutPostList' {...props} />
 }
 
 export async function getStaticPaths({ locale }) {

pages/search/[keyword]/index.js

@@ -3,12 +3,10 @@ import { getDataFromCache } from '@/lib/cache/cache_manager'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 const Index = props => {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutSearch' {...props} />
 }
 
 /**

pages/search/[keyword]/page/[page].js

@@ -3,15 +3,13 @@ import { getDataFromCache } from '@/lib/cache/cache_manager'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 const Index = props => {
   const { keyword } = props
   props = { ...props, currentSearch: keyword }
 
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutSearch' {...props} />
 }
 
 /**

pages/search/index.js

@@ -32,7 +32,7 @@ const Search = props => {
   props = { ...props, posts: filteredPosts }
 
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutSearch' {...props} />
 }
 
 /**

pages/sign-in/[[...index]].js

@@ -3,7 +3,6 @@ import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 // import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 登录
@@ -11,9 +10,8 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const SignIn = props => {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutSignIn' {...props} />
 }
 
 export async function getStaticProps(req) {

pages/sign-up/[[...index]].js

@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 注册
@@ -10,9 +9,8 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const SignUp = props => {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutSignUp' {...props} />
 }
 
 export async function getStaticProps(req) {

pages/tag/[tag]/index.js

@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 /**
  * 标签下的文章列表
@@ -10,9 +9,8 @@ import { useRouter } from 'next/router'
  * @returns
  */
 const Tag = props => {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutPostList' {...props} />
 }
 
 export async function getStaticProps({ params: { tag }, locale }) {

pages/tag/[tag]/page/[page].js

@@ -2,12 +2,10 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
 import { DynamicLayout } from '@/themes/theme'
-import { useRouter } from 'next/router'
 
 const Tag = props => {
-  const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutPostList' {...props} />
 }
 
 export async function getStaticProps({ params: { tag, page }, locale }) {

pages/tag/index.js

@@ -12,7 +12,7 @@ import { useRouter } from 'next/router'
 const TagIndex = props => {
   const router = useRouter()
   const theme = siteConfig('THEME', BLOG.THEME, props.NOTION_CONFIG)
-  return <DynamicLayout theme={theme} router={router} {...props} />
+  return <DynamicLayout theme={theme} layoutName='LayoutPostList' {...props} />
 }
 
 export async function getStaticProps(req) {

styles/globals.css

@@ -19,6 +19,7 @@ html {
   position: sticky;
   z-index: 10;
   top: -1px;
+  -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
   border-bottom-color: transparent;
@@ -74,6 +75,7 @@ nav {
 
 @supports not (backdrop-filter: none) {
   .sticky-nav {
+    -webkit-backdrop-filter: none;
     backdrop-filter: none;
     @apply bg-day dark:bg-gray-800;
   }

themes/theme.js

@@ -2,6 +2,7 @@ import BLOG, { LAYOUT_MAPPINGS } from '@/blog.config'
 import * as ThemeComponents from '@theme-components'
 import getConfig from 'next/config'
 import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
 import { getQueryParam, getQueryVariable, isBrowser } from '../lib/utils'
 
 // 在next.config.js中扫描所有主题
@@ -56,19 +57,20 @@ export const getThemeConfig = async themeQuery => {
 
 /**
  * 加载全局布局
- * @param {*} themeQuery
+ * @param {*} theme
  * @returns
  */
-export const getGlobalLayoutByTheme = themeQuery => {
-  if (themeQuery !== BLOG.THEME) {
+export const getBaseLayoutByTheme = theme => {
+  const LayoutBase = ThemeComponents['LayoutBase']
+  const isDefaultTheme = !theme || theme === BLOG.THEME
+  if (!isDefaultTheme) {
     return dynamic(
-      () =>
-        import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]),
+      () => import(`@/themes/${theme}`).then(m => m['LayoutBase']),
       { ssr: true }
     )
-  } else {
-    return ThemeComponents[getLayoutNameByPath('-1')]
   }
+
+  return LayoutBase
 }
 
 /**
@@ -76,8 +78,8 @@ export const getGlobalLayoutByTheme = themeQuery => {
  * @param {*} props
  */
 export const DynamicLayout = props => {
-  const { router, theme } = props
-  const SelectedLayout = getLayoutByTheme({ router, theme })
+  const { theme, layoutName } = props
+  const SelectedLayout = getLayoutByTheme({ layoutName, theme })
   return <SelectedLayout {...props} />
 }
 
@@ -87,26 +89,30 @@ export const DynamicLayout = props => {
  * @param {*} theme
  * @returns
  */
-export const getLayoutByTheme = ({ router, theme }) => {
-  const themeQuery = getQueryParam(router.asPath, 'theme') || theme
-  const layoutName = getLayoutNameByPath(router.pathname, router.asPath)
+export const getLayoutByTheme = ({ layoutName, theme }) => {
+  // const layoutName = getLayoutNameByPath(router.pathname, router.asPath)
+  const LayoutComponents =
+    ThemeComponents[layoutName] || ThemeComponents.LayoutSlug
+
+  const router = useRouter()
+  const themeQuery = getQueryParam(router?.asPath, 'theme') || theme
   const isDefaultTheme = !themeQuery || themeQuery === BLOG.THEME
 
-  const loadThemeComponents = componentsSource => {
-    const components =
-      componentsSource[layoutName] || componentsSource.LayoutSlug
-    setTimeout(fixThemeDOM, isDefaultTheme ? 100 : 500) // 根据主题选择延迟时间
-    return components
-  }
-
-  if (isDefaultTheme) {
-    return loadThemeComponents(ThemeComponents)
-  } else {
+  // 加载非当前默认主题
+  if (!isDefaultTheme) {
+    const loadThemeComponents = componentsSource => {
+      const components =
+        componentsSource[layoutName] || componentsSource.LayoutSlug
+      setTimeout(fixThemeDOM, 500)
+      return components
+    }
     return dynamic(
       () => import(`@/themes/${themeQuery}`).then(m => loadThemeComponents(m)),
       { ssr: true }
     )
   }
+
+  return LayoutComponents
 }
 
 /**
@@ -128,8 +134,6 @@ const fixThemeDOM = () => {
   if (isBrowser) {
     const elements = document.querySelectorAll('[id^="theme-"]')
     if (elements?.length > 1) {
-      elements[elements.length - 1].scrollIntoView()
-      // 删除前面的元素，只保留最后一个元素
       for (let i = 0; i < elements.length - 1; i++) {
         if (
           elements[i] &&
@@ -139,6 +143,7 @@ const fixThemeDOM = () => {
           elements[i].parentNode.removeChild(elements[i])
         }
       }
+      elements[0]?.scrollIntoView()
     }
   }
 }