From 5ccf8823a64e2942a0b4a8d8f17545f1d5908c88 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 2 Nov 2023 14:10:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E7=90=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DebugPanel.js                      |  8 ++--
 components/ExternalPlugins.js                 | 42 +++++++++----------
 components/ThemeSwitch.js                     |  8 ++--
 lib/config.js                                 | 20 ++++++++-
 lib/global.js                                 | 10 ++---
 lib/lang.js                                   |  3 +-
 pages/404.js                                  |  2 +-
 pages/[prefix]/index.js                       |  4 +-
 pages/archive/index.js                        |  2 +-
 pages/category/[category]/index.js            |  2 +-
 pages/category/[category]/page/[page].js      |  2 +-
 pages/category/index.js                       |  2 +-
 pages/index.js                                |  4 +-
 pages/page/[page].js                          |  2 +-
 pages/search/[keyword]/index.js               |  2 +-
 pages/search/[keyword]/page/[page].js         |  2 +-
 pages/search/index.js                         |  2 +-
 pages/tag/[tag]/index.js                      |  2 +-
 pages/tag/[tag]/page/[page].js                |  2 +-
 pages/tag/index.js                            |  2 +-
 themes/example/components/BlogPostCard.js     |  4 +-
 themes/example/components/Title.js            |  2 +-
 themes/fukasawa/components/AsideLeft.js       |  2 +-
 .../fukasawa/components/MenuItemCollapse.js   |  4 +-
 themes/heo/components/MenuItemCollapse.js     |  4 +-
 themes/matery/components/MenuItemCollapse.js  |  4 +-
 themes/matery/components/MenuItemDrop.js      |  4 +-
 themes/next/components/Logo.js                |  2 +-
 themes/next/components/MenuItemCollapse.js    |  4 +-
 .../nobelium/components/MenuItemCollapse.js   |  4 +-
 themes/nobelium/components/MenuItemDrop.js    |  6 +--
 themes/simple/components/MenuItemCollapse.js  |  4 +-
 themes/simple/components/MenuItemDrop.js      |  4 +-
 themes/theme.js                               | 10 ++---
 34 files changed, 101 insertions(+), 80 deletions(-)

diff --git a/components/DebugPanel.js b/components/DebugPanel.js
index 026b5ee0..29408994 100644
--- a/components/DebugPanel.js
+++ b/components/DebugPanel.js
@@ -1,9 +1,10 @@
-import BLOG from '@/blog.config'
 import { useEffect, useState } from 'react'
 import Select from './Select'
 import { useGlobal } from '@/lib/global'
 import { THEMES } from '@/themes/theme'
 import { useRouter } from 'next/router'
+import { siteConfigMap } from '@/lib/config'
+import { getQueryParam } from '@/lib/utils'
 
 /**
  *
@@ -13,13 +14,14 @@ const DebugPanel = () => {
   const [show, setShow] = useState(false)
   const { theme, switchTheme, locale } = useGlobal()
   const router = useRouter()
+  const currentTheme = getQueryParam(router.asPath, 'theme') || theme
   const [siteConfig, updateSiteConfig] = useState({})
 
   // 主题下拉框
   const themeOptions = THEMES?.map(t => ({ value: t, text: t }))
 
   useEffect(() => {
-    updateSiteConfig(Object.assign({}, BLOG))
+    updateSiteConfig(Object.assign({}, siteConfigMap()))
     // updateThemeConfig(Object.assign({}, ThemeMap[BLOG.THEME].THEME_CONFIG))
   }, [])
 
@@ -71,7 +73,7 @@ const DebugPanel = () => {
                     <div className='flex'>
                         <Select
                             label={locale.COMMON.THEME_SWITCH}
-                            value={theme}
+                            value={currentTheme}
                             options={themeOptions}
                             onChange={handleUpdateDebugTheme}
                         />
diff --git a/components/ExternalPlugins.js b/components/ExternalPlugins.js
index c65836c4..1ea45d61 100644
--- a/components/ExternalPlugins.js
+++ b/components/ExternalPlugins.js
@@ -1,4 +1,4 @@
-import BLOG from 'blog.config'
+import { siteConfig } from '@/lib/config'
 import dynamic from 'next/dynamic'
 import WebWhiz from './Webwhiz'
 
@@ -30,26 +30,26 @@ const AdBlockDetect = dynamic(() => import('@/components/AdBlockDetect'), { ssr:
  */
 const ExternalPlugin = (props) => {
   return <>
-          {JSON.parse(BLOG.THEME_SWITCH) && <ThemeSwitch />}
-          {JSON.parse(BLOG.DEBUG) && <DebugPanel />}
-          {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
-          {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
-          {BLOG.ANALYTICS_VERCEL && <Analytics />}
-          {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi />}
-          {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
-          {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
-          {JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
-          {JSON.parse(BLOG.SAKURA) && <Sakura />}
-          {JSON.parse(BLOG.STARRY_SKY) && <StarrySky />}
-          {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
-          {JSON.parse(BLOG.NEST) && <Nest />}
-          {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
-          {JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...props}/>}
-          {JSON.parse(BLOG.RIBBON) && <Ribbon />}
-          {JSON.parse(BLOG.CUSTOM_RIGHT_CLICK_CONTEXT_MENU) && <CustomContextMenu {...props} />}
-          {!JSON.parse(BLOG.CAN_COPY) && <DisableCopy/>}
-          {JSON.parse(BLOG.WEB_WHIZ_ENABLED) && <WebWhiz/>}
-          {JSON.parse(BLOG.AD_WWADS_BLOCK_DETECT) && <AdBlockDetect/>}
+          {JSON.parse(siteConfig('THEME_SWITCH')) && <ThemeSwitch />}
+          {JSON.parse(siteConfig('DEBUG')) && <DebugPanel />}
+          {siteConfig('ANALYTICS_ACKEE_TRACKER') && <Ackee />}
+          {siteConfig('ANALYTICS_GOOGLE_ID') && <Gtag />}
+          {siteConfig('ANALYTICS_VERCEL') && <Analytics />}
+          {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && <Busuanzi />}
+          {siteConfig('ADSENSE_GOOGLE_ID') && <GoogleAdsense />}
+          {siteConfig('FACEBOOK_APP_ID') && siteConfig('FACEBOOK_PAGE_ID') && <Messenger />}
+          {JSON.parse(siteConfig('FIREWORKS')) && <Fireworks />}
+          {JSON.parse(siteConfig('SAKURA')) && <Sakura />}
+          {JSON.parse(siteConfig('STARRY_SKY')) && <StarrySky />}
+          {JSON.parse(siteConfig('MUSIC_PLAYER')) && <MusicPlayer />}
+          {JSON.parse(siteConfig('NEST')) && <Nest />}
+          {JSON.parse(siteConfig('FLUTTERINGRIBBON')) && <FlutteringRibbon />}
+          {JSON.parse(siteConfig('COMMENT_TWIKOO_COUNT_ENABLE')) && <TwikooCommentCounter {...props}/>}
+          {JSON.parse(siteConfig('RIBBON')) && <Ribbon />}
+          {JSON.parse(siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU')) && <CustomContextMenu {...props} />}
+          {!JSON.parse(siteConfig('CAN_COPY')) && <DisableCopy/>}
+          {JSON.parse(siteConfig('WEB_WHIZ_ENABLED')) && <WebWhiz/>}
+          {JSON.parse(siteConfig('AD_WWADS_BLOCK_DETECT')) && <AdBlockDetect/>}
           <VConsole/>
       </>
 }
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 1e140d79..a4b13f31 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -1,9 +1,10 @@
 import { useGlobal } from '@/lib/global'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Draggable } from './Draggable'
 import { THEMES } from '@/themes/theme'
 import { useRouter } from 'next/router'
 import DarkModeButton from './DarkModeButton'
+import { getQueryParam } from '@/lib/utils'
 /**
  *
  * @returns 主题切换
@@ -11,6 +12,7 @@ import DarkModeButton from './DarkModeButton'
 const ThemeSwitch = () => {
   const { theme } = useGlobal()
   const router = useRouter()
+  const currentTheme = getQueryParam(router.asPath, 'theme') || theme
   const [isLoading, setIsLoading] = useState(false)
 
   // 修改当前路径url中的 theme 参数
@@ -31,13 +33,13 @@ const ThemeSwitch = () => {
                 <div className="p-3 w-full flex items-center text-sm group duration-200 transition-all">
                     <DarkModeButton className='mr-2' />
                     <div className='w-0 group-hover:w-20 transition-all duration-200 overflow-hidden'>
-                        <select value={theme} onChange={onSelectChange} name="themes" className='appearance-none outline-none dark:text-white bg-gray-50 dark:bg-black uppercase cursor-pointer'>
+                        <select value={currentTheme} onChange={onSelectChange} name="themes" className='appearance-none outline-none dark:text-white bg-gray-50 dark:bg-black uppercase cursor-pointer'>
                             {THEMES?.map(t => {
                               return <option key={t} value={t}>{t}</option>
                             })}
                         </select>
                     </div>
-                    <i className="fa-solid fa-palette pl-2"></i>
+                    <i className="fa-solid fa-palette pl-2"/>
                 </div>
             </div>
             {/* 切换主题加载时的全屏遮罩 */}
diff --git a/lib/config.js b/lib/config.js
index ff931386..56ae36ee 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -2,6 +2,7 @@
 
 import BLOG from '@/blog.config'
 import { useGlobal } from './global'
+import { deepClone } from './utils'
 
 /**
  * 读取配置
@@ -47,6 +48,23 @@ export const siteConfig = (key) => {
   if (!val) {
     val = BLOG[key]
   }
-  console.log('实际配置', key, val)
+  //   console.log('实际配置', key, val)
+  return val
+}
+
+/**
+ * 读取所有配置
+ * 1. 优先读取NotionConfig表
+ * 2. 其次读取环境变量
+ * 3. 再读取blog.config.js文件
+ * @param {*} key
+ * @returns
+ */
+export const siteConfigMap = () => {
+  const val = deepClone(BLOG)
+  for (const key in val) {
+    val[key] = siteConfig(key)
+    console.log('site', key, val[key], siteConfig(key))
+  }
   return val
 }
diff --git a/lib/global.js b/lib/global.js
index 548b6d8c..204fc432 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -17,12 +17,11 @@ const GlobalContext = createContext()
  */
 export function GlobalContextProvider(props) {
   const { children, siteInfo, categoryOptions, tagOptions, NOTION_CONFIG } = props
-  console.log('config', NOTION_CONFIG)
   const router = useRouter()
-  const [lang, updateLang] = useState(NOTION_CONFIG.LANG || BLOG.LANG) // 默认语言
-  const [locale, updateLocale] = useState(generateLocaleDict(NOTION_CONFIG.LANG || BLOG.LANG)) // 默认语言
-  const [theme, setTheme] = useState(NOTION_CONFIG.THEME || BLOG.THEME) // 默认博客主题
-  const [isDarkMode, updateDarkMode] = useState(NOTION_CONFIG.APPEARANCE || BLOG.APPEARANCE === 'dark') // 默认深色模式
+  const [lang, updateLang] = useState(NOTION_CONFIG?.LANG || BLOG.LANG) // 默认语言
+  const [locale, updateLocale] = useState(generateLocaleDict(NOTION_CONFIG?.LANG || BLOG.LANG)) // 默认语言
+  const [theme, setTheme] = useState(NOTION_CONFIG?.THEME || BLOG.THEME) // 默认博客主题
+  const [isDarkMode, updateDarkMode] = useState(NOTION_CONFIG?.APPEARANCE || BLOG.APPEARANCE === 'dark') // 默认深色模式
   const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
 
   // 切换主题
@@ -98,7 +97,6 @@ export function GlobalContextProvider(props) {
 
 /**
  * 切换主题时的特殊处理
- * @param {*} setTheme
  */
 const checkThemeDOM = () => {
   if (isBrowser) {
diff --git a/lib/lang.js b/lib/lang.js
index d69da08f..15106572 100644
--- a/lib/lang.js
+++ b/lib/lang.js
@@ -34,7 +34,7 @@ export function generateLocaleDict(langString) {
   let userLocale
 
   // 将语言字符串拆分为语言和地区代码，例如将 "zh-CN" 拆分为 "zh" 和 "CN"
-  const [language, region] = langString.split(/[-_]/)
+  const [language, region] = langString?.split(/[-_]/)
 
   // 优先匹配语言和地区都匹配的情况
   const specificLocale = `${language}-${region}`
@@ -70,6 +70,7 @@ export function initLocale(lang, locale, changeLang, changeLocale) {
     if (queryLang !== lang) {
       currentLang = queryLang
     }
+    console.log('初始化语言', currentLang)
     changeLang(currentLang)
     saveLangToCookies(currentLang)
 
diff --git a/pages/404.js b/pages/404.js
index 1c9e5c30..ae8eea37 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -14,7 +14,7 @@ const NoFound = props => {
   props = { ...props, meta }
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   return <Layout {...props} />
 }
diff --git a/pages/[prefix]/index.js b/pages/[prefix]/index.js
index b350fb18..dfc90fcc 100644
--- a/pages/[prefix]/index.js
+++ b/pages/[prefix]/index.js
@@ -67,7 +67,7 @@ const Slug = props => {
   }, [post])
 
   const meta = {
-    title: post ? `${post?.title} | ${siteConfig('TITLE')}` : `${props?.siteConfig('TITLE') || BLOG.TITLE} | loading`,
+    title: post ? `${post?.title} | ${siteConfig('TITLE')}` : `${siteConfig('TITLE')} | loading`,
     description: post?.summary,
     type: post?.type,
     slug: post?.slug,
@@ -77,7 +77,7 @@ const Slug = props => {
   }
   props = { ...props, lock, meta, setLock, validPassword }
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
   return <Layout {...props} />
 }
 
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 3726291d..662cb7b6 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -13,7 +13,7 @@ const ArchiveIndex = props => {
   const { locale } = useGlobal()
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   useEffect(() => {
     if (isBrowser) {
diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js
index a2c30722..9c90f22d 100644
--- a/pages/category/[category]/index.js
+++ b/pages/category/[category]/index.js
@@ -16,7 +16,7 @@ export default function Category(props) {
   const { locale } = useGlobal()
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
     title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js
index 8a6cccc8..dee16235 100644
--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -16,7 +16,7 @@ export default function Category(props) {
   const { siteInfo } = props
   const { locale } = useGlobal()
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
     title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
diff --git a/pages/category/index.js b/pages/category/index.js
index 8f6d98bc..78e7676e 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -16,7 +16,7 @@ export default function Category(props) {
   const { siteInfo } = props
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
     title: `${locale.COMMON.CATEGORY} | ${siteConfig('TITLE')}`,
diff --git a/pages/index.js b/pages/index.js
index ac72c1b5..6a02cd98 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,9 +3,9 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalData } from '@/lib/notion/getNotionData'
 import { generateRss } from '@/lib/rss'
 import { generateRobotsTxt } from '@/lib/robots.txt'
-import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
 import { siteConfig } from '@/lib/config'
+import { useRouter } from 'next/router'
 
 /**
  * 首页布局
@@ -14,7 +14,7 @@ import { siteConfig } from '@/lib/config'
  */
 const Index = props => {
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
     title: `${siteConfig('TITLE')} | ${siteConfig('BIO')}`,
diff --git a/pages/page/[page].js b/pages/page/[page].js
index 131feb45..6e83c5a6 100644
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -14,7 +14,7 @@ const Page = props => {
   const { siteInfo } = props
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
     title: `${props?.page} | Page | ${siteConfig('TITLE')}`,
diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js
index bc2514a1..cd6166ed 100644
--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -11,7 +11,7 @@ const Index = props => {
   const { locale } = useGlobal()
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
     title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteConfig('TITLE')}`,
diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js
index c5c4aeb8..9de43cc1 100644
--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -11,7 +11,7 @@ const Index = props => {
   const { locale } = useGlobal()
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
     title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteConfig('TITLE')}`,
diff --git a/pages/search/index.js b/pages/search/index.js
index 31d09af3..1504fe86 100644
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -15,7 +15,7 @@ const Search = props => {
   const { locale } = useGlobal()
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const router = useRouter()
   const keyword = getSearchKey(router)
diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js
index f12cdc41..8805c686 100644
--- a/pages/tag/[tag]/index.js
+++ b/pages/tag/[tag]/index.js
@@ -15,7 +15,7 @@ const Tag = props => {
   const { tag, siteInfo } = props
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
     title: `${tag} | ${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js
index c708793b..7cbb2e6a 100644
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -10,7 +10,7 @@ const Tag = props => {
   const { tag, siteInfo } = props
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
     title: `${tag} | ${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
diff --git a/pages/tag/index.js b/pages/tag/index.js
index cb6db4da..f82613eb 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -15,7 +15,7 @@ const TagIndex = props => {
   const { siteInfo } = props
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
     title: `${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
diff --git a/themes/example/components/BlogPostCard.js b/themes/example/components/BlogPostCard.js
index fb91a307..5e9bdd33 100644
--- a/themes/example/components/BlogPostCard.js
+++ b/themes/example/components/BlogPostCard.js
@@ -41,9 +41,9 @@ const BlogPostCard = ({ post }) => {
         </div>
         {/* 图片封面 */}
         {showPageCover && (
-            <div className="md:w-5/12 w-full overflow-hidden p-1">
+            <div className="md:w-5/12 w-full h-44 overflow-hidden p-1">
                 <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                    <LazyImage src={post?.pageCoverThumbnail} className='h-44 bg-center bg-cover hover:scale-110 duration-200' />
+                    <LazyImage src={post?.pageCoverThumbnail} className='w-full bg-cover hover:scale-110 duration-200' />
                 </Link>
             </div>
         )}
diff --git a/themes/example/components/Title.js b/themes/example/components/Title.js
index a1512af2..5c251b0d 100644
--- a/themes/example/components/Title.js
+++ b/themes/example/components/Title.js
@@ -7,7 +7,7 @@ import { siteConfig } from '@/lib/config'
  */
 export const Title = (props) => {
   const { post } = props
-  const title = post?.title || siteConfig('HOME_BANNER_IMAGE')
+  const title = post?.title || siteConfig('TITLE')
   const description = post?.description || siteConfig('AUTHOR')
 
   return <div className="text-center px-6 py-12 mb-6 bg-gray-100 dark:bg-hexo-black-gray dark:border-hexo-black-gray border-b">
diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js
index 131e5f31..f3ca1e98 100644
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -63,7 +63,7 @@ function AsideLeft(props) {
             <Logo {...props} />
 
             <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
-                {siteConfig('HOME_BANNER_IMAGE')}
+                {siteConfig('DESCRIPTION')}
             </section>
 
             <section className='flex flex-col text-gray-600'>
diff --git a/themes/fukasawa/components/MenuItemCollapse.js b/themes/fukasawa/components/MenuItemCollapse.js
index a70e43bb..f854c16f 100644
--- a/themes/fukasawa/components/MenuItemCollapse.js
+++ b/themes/fukasawa/components/MenuItemCollapse.js
@@ -48,8 +48,8 @@ export const MenuItemCollapse = (props) => {
 
         {/* 折叠子菜单 */}
         {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map(sLink => {
-              return <div key={sLink.id} className='whitespace-nowrap dark:text-gray-200
+            {link.subMenus.map((sLink, index) => {
+              return <div key={index} className='whitespace-nowrap dark:text-gray-200
               not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
               font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
diff --git a/themes/heo/components/MenuItemCollapse.js b/themes/heo/components/MenuItemCollapse.js
index 89b5f012..ab1472c1 100644
--- a/themes/heo/components/MenuItemCollapse.js
+++ b/themes/heo/components/MenuItemCollapse.js
@@ -42,8 +42,8 @@ export const MenuItemCollapse = ({ link }) => {
 
         {/* 折叠子菜单 */}
         {hasSubMenu && <Collapse isOpen={isOpen} className='rounded-xl'>
-            {link.subMenus.map(sLink => {
-              return <div key={sLink.id} className='dark:bg-black dark:text-gray-200 text-left px-3 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
+            {link.subMenus.map((sLink, index) => {
+              return <div key={index} className='dark:bg-black dark:text-gray-200 text-left px-3 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
                         <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
                     </Link>
diff --git a/themes/matery/components/MenuItemCollapse.js b/themes/matery/components/MenuItemCollapse.js
index 1bf88c81..dbd9aca1 100644
--- a/themes/matery/components/MenuItemCollapse.js
+++ b/themes/matery/components/MenuItemCollapse.js
@@ -49,8 +49,8 @@ export const MenuItemCollapse = ({ link }) => {
 
         {/* 折叠子菜单 */}
         {hasSubMenu && <Collapse isOpen={isOpen}>
-            {link.subMenus.map(sLink => {
-              return <div key={sLink.id} className='cursor-pointer whitespace-nowrap dark:text-gray-200  w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100  hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
+            {link.subMenus.map((sLink, index) => {
+              return <div key={index} className='cursor-pointer whitespace-nowrap dark:text-gray-200  w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100  hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
                         <span className='text-sm'><i className={`${sLink.icon} w-4 mr-3 text-center`} />{sLink.title}</span>
                     </Link>
diff --git a/themes/matery/components/MenuItemDrop.js b/themes/matery/components/MenuItemDrop.js
index 1fb3263a..5e666fa4 100644
--- a/themes/matery/components/MenuItemDrop.js
+++ b/themes/matery/components/MenuItemDrop.js
@@ -28,8 +28,8 @@ export const MenuItemDrop = ({ link }) => {
 
         {/* 子菜单 */}
         {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block  `}>
-            {link.subMenus.map(sLink => {
-              return <li key={sLink.id} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
+            {link.subMenus.map((sLink, index) => {
+              return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
                         <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
                     </Link>
diff --git a/themes/next/components/Logo.js b/themes/next/components/Logo.js
index 9619a454..7306052f 100644
--- a/themes/next/components/Logo.js
+++ b/themes/next/components/Logo.js
@@ -17,7 +17,7 @@ const Logo = props => {
                     data-aos-delay="300"
                     data-aos-once="true"
                     data-aos-anchor-placement="top-bottom"
-                    className='text-sm text-gray-300 font-light text-center'> {siteConfig('HOME_BANNER_IMAGE')}</div>
+                    className='text-sm text-gray-300 font-light text-center'> {siteConfig('DESCRIPTION')}</div>
             </div>
         </Link>
   )
diff --git a/themes/next/components/MenuItemCollapse.js b/themes/next/components/MenuItemCollapse.js
index 20a26521..77fd4282 100644
--- a/themes/next/components/MenuItemCollapse.js
+++ b/themes/next/components/MenuItemCollapse.js
@@ -39,8 +39,8 @@ export const MenuItemCollapse = (props) => {
 
         {/* 折叠子菜单 */}
         {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map(sLink => {
-              return <div key={sLink.id} className='whitespace-nowrap   dark:text-gray-200
+            {link.subMenus.map((sLink, index) => {
+              return <div key={index} className='whitespace-nowrap   dark:text-gray-200
               not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
               font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
diff --git a/themes/nobelium/components/MenuItemCollapse.js b/themes/nobelium/components/MenuItemCollapse.js
index d2fd9d87..8f53f622 100644
--- a/themes/nobelium/components/MenuItemCollapse.js
+++ b/themes/nobelium/components/MenuItemCollapse.js
@@ -43,8 +43,8 @@ export const MenuItemCollapse = (props) => {
 
         {/* 折叠子菜单 */}
         {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map(sLink => {
-              return <div key={sLink.id} className='font-extralight dark:bg-black text-left px-10 justify-start  bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
+            {link.subMenus.map((sLink, index) => {
+              return <div key={index} className='font-extralight dark:bg-black text-left px-10 justify-start  bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
                         <span className='text-xs'>{sLink.title}</span>
                     </Link>
diff --git a/themes/nobelium/components/MenuItemDrop.js b/themes/nobelium/components/MenuItemDrop.js
index 9ea57461..0386910c 100644
--- a/themes/nobelium/components/MenuItemDrop.js
+++ b/themes/nobelium/components/MenuItemDrop.js
@@ -30,12 +30,12 @@ export const MenuItemDrop = ({ link }) => {
 
             {/* 子菜单 */}
             {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-                {link.subMenus.map(sLink => {
-                  return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
+                {link.subMenus.map((sLink, index) => {
+                  return <div key={index} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
                         <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} >
                             <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
                         </Link>
-                    </li>
+                    </div>
                 })}
             </ul>}
 
diff --git a/themes/simple/components/MenuItemCollapse.js b/themes/simple/components/MenuItemCollapse.js
index 1d3face5..d335d806 100644
--- a/themes/simple/components/MenuItemCollapse.js
+++ b/themes/simple/components/MenuItemCollapse.js
@@ -43,8 +43,8 @@ export const MenuItemCollapse = (props) => {
 
         {/* 折叠子菜单 */}
         {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map(sLink => {
-              return <div key={sLink.id} className='font-extralight dark:bg-black text-left px-10 justify-start text-blue-400 bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
+            {link.subMenus.map((sLink, index) => {
+              return <div key={index} className='font-extralight dark:bg-black text-left px-10 justify-start text-blue-400 bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
                         <span className='ml-4 text-xs'>{sLink?.icon && <span className='mr-2 w-4'><i className={sLink.icon}/></span>}{sLink.title}</span>
                     </Link>
diff --git a/themes/simple/components/MenuItemDrop.js b/themes/simple/components/MenuItemDrop.js
index 9f79e609..81f57d31 100644
--- a/themes/simple/components/MenuItemDrop.js
+++ b/themes/simple/components/MenuItemDrop.js
@@ -28,8 +28,8 @@ export const MenuItemDrop = ({ link }) => {
 
         {/* 子菜单 */}
         {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-10'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-            {link.subMenus.map(sLink => {
-              return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-blue-500 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800  py-3 pr-6 pl-2'>
+            {link.subMenus.map((sLink, index) => {
+              return <li key={index} className='not:last-child:border-b-0 border-b text-blue-500 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800  py-3 pr-6 pl-2'>
                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
                         <span className='text-sm text-nowrap font-extralight'>{sLink?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
                     </Link>
diff --git a/themes/theme.js b/themes/theme.js
index f03f3fe6..d375d661 100644
--- a/themes/theme.js
+++ b/themes/theme.js
@@ -12,13 +12,13 @@ export const { THEMES = [] } = getConfig().publicRuntimeConfig
  * @param {*} router
  * @returns
  */
-export const getLayoutByTheme = (router) => {
-  const themeQuery = getQueryParam(router.asPath, 'theme') || BLOG.THEME
-  const layout = getLayoutNameByPath(router.pathname)
+export const getLayoutByTheme = ({ router, theme }) => {
+  const themeQuery = getQueryParam(router.asPath, 'theme') || theme
+  const layoutName = getLayoutNameByPath(router.pathname)
   if (themeQuery !== BLOG.THEME) {
-    return dynamic(() => import(`@/themes/${themeQuery}`).then(m => m[layout]), { ssr: true })
+    return dynamic(() => import(`@/themes/${themeQuery}`).then(m => m[layoutName]), { ssr: true })
   } else {
-    return ThemeComponents[layout]
+    return ThemeComponents[layoutName]
   }
 }