Merge branch 'feat/notion-config' of https://github.com/tangly1024/NotionNext into feat/notion-config

2026-05-16 07:26:47 +00:00 · 2023-11-01 22:01:33 +08:00
parent 67db4ff52a 47b82d12bd
commit ef6e9e0d95
87 changed files with 331 additions and 213 deletions
--- a/blog.config.js
+++ b/blog.config.js
@@ -114,7 +114,9 @@ const BLOG = {

  CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || true, // 代码左上角显示mac的红黄绿图标
  CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || false, // 是否显示行号
-  CODE_COLLAPSE: process.env.NEXT_PUBLIC_CODE_COLLAPSE || true, // 是否折叠代码框
+  CODE_COLLAPSE: process.env.NEXT_PUBLIC_CODE_COLLAPSE || true, // 是否支持折叠代码框
+  CODE_COLLAPSE_EXPAND_DEFAULT: process.env.NEXT_PUBLIC_CODE_COLLAPSE_EXPAND_DEFAULT || true, // 折叠代码默认是展开状态
+
  // END********代码相关********

  // Mermaid 图表CDN
--- a/components/Artalk.js
+++ b/components/Artalk.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
 // import { loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
@@ -19,7 +20,7 @@ const Artalk = ({ siteInfo }) => {
      locale: BLOG.LANG,
      //   pageKey: '/post/1', // 固定链接 (留空自动获取)
      //   pageTitle: '关于引入 Artalk 的这档子事', // 页面标题 (留空自动获取)
-      site: siteInfo?.title // 你的站点名
+      site: siteConfig('TITLE') // 你的站点名
    })
  }, [])
  return (
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -86,7 +86,7 @@ const Comment = ({ siteInfo, frontMatter, className }) => {
    <div key={frontMatter?.id} id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
        <Tabs>
             {BLOG.COMMENT_ARTALK_SERVER && (<div key='Artalk'>
-                <Artalk siteInfo={siteInfo} />
+                <Artalk />
            </div>)}

            {BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
--- a/components/CommonHead.js
+++ b/components/CommonHead.js
@@ -1,34 +1,34 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Head from 'next/head'

 const CommonHead = ({ meta, children }) => {
-  let url = BLOG?.PATH?.length ? `${BLOG.LINK}/${BLOG.SUB_PATH}` : BLOG.LINK
+  let url = siteConfig('PATH')?.length ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH')}` : siteConfig('LINK')
  let image
  if (meta) {
    url = `${url}/${meta.slug}`
    image = meta.image || '/bg_image.jpg'
  }
-  const title = meta?.title || BLOG.TITLE
-  const description = meta?.description || BLOG.DESCRIPTION
+  const title = meta?.title || siteConfig('TITLE')
+  const description = meta?.description || siteConfig('DESCRIPTION')
  const type = meta?.type || 'website'
-  const keywords = meta?.tags || BLOG.KEYWORDS
-  const lang = BLOG.LANG.replace('-', '_') // Facebook OpenGraph 要 zh_CN 這樣的格式才抓得到語言
-  const category = meta?.category || BLOG.KEYWORDS || '軟體科技' // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
+  const keywords = meta?.tags || siteConfig('KEYWORDS')
+  const lang = siteConfig('LANG').replace('-', '_') // Facebook OpenGraph 要 zh_CN 這樣的格式才抓得到語言
+  const category = meta?.category || siteConfig('KEYWORDS') || '軟體科技' // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類

  return (
        <Head>
            <title>{title}</title>
-            <meta name="theme-color" content={BLOG.BACKGROUND_DARK} />
+            <meta name="theme-color" content={siteConfig('BACKGROUND_DARK')} />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0" />
            <meta name="robots" content="follow, index" />
            <meta charSet="UTF-8" />
-            {BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
+            {siteConfig('SEO_GOOGLE_SITE_VERIFICATION') && (
                <meta
                    name="google-site-verification"
-                    content={BLOG.SEO_GOOGLE_SITE_VERIFICATION}
+                    content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')}
                />
            )}
-            {BLOG.SEO_BAIDU_SITE_VERIFICATION && (<meta name="baidu-site-verification" content={BLOG.SEO_BAIDU_SITE_VERIFICATION} />)}
+            {siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (<meta name="baidu-site-verification" content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')} />)}
            <meta name="keywords" content={keywords} />
            <meta name="description" content={description} />
            <meta property="og:locale" content={lang} />
@@ -36,33 +36,33 @@ const CommonHead = ({ meta, children }) => {
            <meta property="og:description" content={description} />
            <meta property="og:url" content={url} />
            <meta property="og:image" content={image} />
-            <meta property="og:site_name" content={BLOG.TITLE} />
+            <meta property="og:site_name" content={siteConfig('TITLE')} />
            <meta property="og:type" content={type} />
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:description" content={description} />
            <meta name="twitter:title" content={title} />

-            {BLOG.COMMENT_WEBMENTION.ENABLE && (
+            {siteConfig('COMMENT_WEBMENTION').ENABLE && (
                <>
-                    <link rel="webmention" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/webmention`} />
-                    <link rel="pingback" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/xmlrpc`} />
+                    <link rel="webmention" href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION').HOSTNAME}/webmention`} />
+                    <link rel="pingback" href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION').HOSTNAME}/xmlrpc`} />
                </>
            )}

-            {BLOG.COMMENT_WEBMENTION.ENABLE && BLOG.COMMENT_WEBMENTION.AUTH !== '' && (
-                <link href={BLOG.COMMENT_WEBMENTION.AUTH} rel="me" />
+            {siteConfig('COMMENT_WEBMENTION').ENABLE && siteConfig('COMMENT_WEBMENTION').AUTH !== '' && (
+                <link href={siteConfig('COMMENT_WEBMENTION').AUTH} rel="me" />
            )}

-            {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <meta name="referrer" content="no-referrer-when-downgrade" />}
+            {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && <meta name="referrer" content="no-referrer-when-downgrade" />}
            {meta?.type === 'Post' && (
                <>
                    <meta
                        property="article:published_time"
                        content={meta.publishDay}
                    />
-                    <meta property="article:author" content={BLOG.AUTHOR} />
+                    <meta property="article:author" content={siteConfig('AUTHOR')} />
                    <meta property="article:section" content={category} />
-                    <meta property="article:publisher" content={BLOG.FACEBOOK_PAGE} />
+                    <meta property="article:publisher" content={siteConfig('FACEBOOK_PAGE')} />
                </>
            )}
            {children}
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -105,13 +105,20 @@ const renderCollapseCode = () => {
    codeBlock.parentNode.insertBefore(collapseWrapper, codeBlock)
    panel.appendChild(codeBlock)

-    header.addEventListener('click', () => {
+    function collapseCode() {
      panel.classList.toggle('invisible')
      panel.classList.toggle('h-0')
      panel.classList.toggle('h-auto')
      header.querySelector('svg').classList.toggle('rotate-180')
      panelWrapper.classList.toggle('border-gray-300')
-    })
+    }
+
+    // 点击后折叠展开代码
+    header.addEventListener('click', collapseCode)
+    // 是否自动展开
+    if (JSON.parse(BLOG.CODE_COLLAPSE_EXPAND_DEFAULT)) {
+      header.click()
+    }
  }
 }

--- a/lib/config.js
+++ b/lib/config.js
@@ -0,0 +1,52 @@
+'use client'
+
+import BLOG from '@/blog.config'
+import { useGlobal } from './global'
+
+/**
+ * 读取配置
+ * 1. 优先读取NotionConfig表
+ * 2. 其次读取环境变量
+ * 3. 再读取blog.config.js文件
+ * @param {*} key
+ * @returns
+ */
+export const siteConfig = (key) => {
+  let global = null
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    global = useGlobal()
+  } catch (error) {}
+
+  // 首先 配置最优先读取NOTION中的表格配置
+  let val = null
+  let siteInfo = null
+
+  if (global) {
+    val = global.NOTION_CONFIG?.[key]
+    siteInfo = global.siteInfo
+    console.log('当前变量', key, val)
+  }
+
+  if (!val) {
+    // 这里针对部分key做一些兼容处理
+    switch (key) {
+      case 'HOME_BANNER_IMAGE':
+        val = siteInfo?.pageCover // 封面图取Notion的封面
+        break
+      case 'AVATAR':
+        val = siteInfo?.icon // 封面图取Notion的封面
+        break
+      case 'TITLE':
+        val = siteConfig('TITLE') // 标题取Notion中的标题
+        break
+    }
+  }
+
+  // 其次 NOTION没有找到配置，则会读取blog.config.js文件
+  if (!val) {
+    val = BLOG[key]
+  }
+  console.log('配置', key, val)
+  return val
+}
--- a/lib/global.js
+++ b/lib/global.js
@@ -1,10 +1,10 @@
 import { generateLocaleDict, initLocale } from './lang'
 import { createContext, useContext, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import BLOG from '@/blog.config'
 import { THEMES, initDarkMode } from '@/themes/theme'
 import NProgress from 'nprogress'
 import { getQueryVariable, isBrowser } from './utils'
+import BLOG from '@/blog.config'

 const GlobalContext = createContext()

@@ -15,7 +15,7 @@ const GlobalContext = createContext()
 * @constructor
 */
 export function GlobalContextProvider(props) {
-  const { children, siteInfo, categoryOptions, tagOptions } = props
+  const { children, siteInfo, categoryOptions, tagOptions, NOTION_CONFIG } = props
  const router = useRouter()
  const [lang, updateLang] = useState(BLOG.LANG) // 默认语言
  const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG)) // 默认语言
@@ -68,6 +68,7 @@ export function GlobalContextProvider(props) {

  return (
        <GlobalContext.Provider value={{
+          NOTION_CONFIG,
          onLoading,
          setOnLoading,
          locale,
--- a/lib/notion/getNotionConfig.js
+++ b/lib/notion/getNotionConfig.js
@@ -69,7 +69,7 @@ export async function getConfigMapFromConfigPage(allPages) {
    console.error(`pageId "${configTableId}" is not a database`)
    return null
  }
-  console.log('表格', databaseRecordMap, block, rawMetadata)
+  //   console.log('表格', databaseRecordMap, block, rawMetadata)
  const collectionId = rawMetadata?.collection_id
  const collection = pageRecordMap.collection[collectionId].value
  const collectionQuery = pageRecordMap.collection_query
@@ -127,7 +127,7 @@ export async function getConfigMapFromConfigPage(allPages) {

      // 只导入生效的配置
      if (config.enable) {
-        console.log('[覆盖代码配置]', config.key)
+        // console.log('[覆盖代码配置]', config.key)
        notionConfig[config.key] = config.value
      }
    }
--- a/lib/notion/getNotionData.js
+++ b/lib/notion/getNotionData.js
@@ -285,7 +285,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
  })

  // 站点配置优先读取配置表格，否则读取blog.config.js 文件
-  const CONFIG = await getConfigMapFromConfigPage(collectionData) || BLOG
+  const NOTION_CONFIG = await getConfigMapFromConfigPage(collectionData) || BLOG

  // Sort by date
  if (BLOG.POSTS_SORT_BY === 'date') {
@@ -305,7 +305,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
  const allNavPages = getNavPages({ allPages })

  return {
-    CONFIG,
+    NOTION_CONFIG,
    notice,
    siteInfo,
    allPages,
--- a/lib/notion/mapImage.js
+++ b/lib/notion/mapImage.js
@@ -67,13 +67,10 @@ const mapImgUrl = (img, block, type = 'block', from) => {
    ret = BLOG.NOTION_HOST + '/image/' + encodeURIComponent(ret) + '?table=' + type + '&id=' + block.id
  }

-  // UnSplash 随机图片接口优化
-  if (ret.includes('source.unsplash.com/random')) {
-    // 检查原始URL是否已经包含参数
-    const separator = ret.includes('?') ? '&' : '?'
-    // 拼接唯一识别参数，防止请求的图片被缓存
-    ret = `${ret}${separator}random=${block.id}`
-  }
+  // 随机图片接口优化 防止因url一致而随机结果相同
+  const separator = ret.includes('?') ? '&' : '?'
+  // 拼接唯一识别参数，防止请求的图片被缓存
+  ret = `${ret.trim()}${separator}t=${block.id}`

  // 文章封面
  if (from === 'pageCoverThumbnail') {
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,7 +1,7 @@
 import { getGlobalData } from '@/lib/notion/getNotionData'
-import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 /**
 * 404
@@ -9,8 +9,7 @@ import { getLayoutByTheme } from '@/themes/theme'
 * @returns
 */
 const NoFound = props => {
-  const { siteInfo } = useGlobal()
-  const meta = { title: `${props?.siteInfo?.title} | 页面找不到啦`, image: siteInfo?.pageCover }
+  const meta = { title: `${siteConfig('TITLE')} | 页面找不到啦`, image: siteConfig('HOME_BANNER_IMAGE') }

  props = { ...props, meta }

--- a/pages/[prefix]/index.js
+++ b/pages/[prefix]/index.js
@@ -10,6 +10,7 @@ import { getLayoutByTheme } from '@/themes/theme'
 import md5 from 'js-md5'
 import { isBrowser } from '@/lib/utils'
 import { uploadDataToAlgolia } from '@/lib/algolia'
+import { siteConfig } from '@/lib/config'

 /**
 * 根据notion的slug访问页面
@@ -66,7 +67,7 @@ const Slug = props => {
  }, [post])

  const meta = {
-    title: post ? `${post?.title} | ${siteInfo?.title}` : `${props?.siteInfo?.title || BLOG.TITLE} | loading`,
+    title: post ? `${post?.title} | ${siteConfig('TITLE')}` : `${props?.siteConfig('TITLE') || BLOG.TITLE} | loading`,
    description: post?.summary,
    type: post?.type,
    slug: post?.slug,
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -6,6 +6,7 @@ import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
 import { isBrowser } from '@/lib/utils'
 import { formatDateFmt } from '@/lib/formatDate'
+import { siteConfig } from '@/lib/config'

 const ArchiveIndex = props => {
  const { siteInfo } = props
@@ -29,8 +30,8 @@ const ArchiveIndex = props => {
  }, [])

  const meta = {
-    title: `${locale.NAV.ARCHIVE} | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${locale.NAV.ARCHIVE} | ${siteConfig('TITLE')}`,
+    description: siteConfig('HOME_BANNER_IMAGE'),
    image: siteInfo?.pageCover,
    slug: 'archive',
    type: 'website'
--- a/pages/category/[category]/index.js
+++ b/pages/category/[category]/index.js
@@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 /**
 * 分类页
@@ -19,9 +20,9 @@ export default function Category(props) {

  const meta = {
    title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
-      siteInfo?.title || ''
+      siteConfig('TITLE') || ''
    }`,
-    description: siteInfo?.description,
+    description: siteConfig('HOME_BANNER_IMAGE'),
    slug: 'category/' + props.category,
    image: siteInfo?.pageCover,
    type: 'website'
--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 /**
 * 分类页
@@ -19,9 +20,9 @@ export default function Category(props) {

  const meta = {
    title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
-      siteInfo?.title || ''
+      siteConfig('TITLE') || ''
    }`,
-    description: siteInfo?.description,
+    description: siteConfig('HOME_BANNER_IMAGE'),
    slug: 'category/' + props.category,
    image: siteInfo?.pageCover,
    type: 'website'
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 /**
 * 分类首页
@@ -18,8 +19,8 @@ export default function Category(props) {
  const Layout = getLayoutByTheme(useRouter())

  const meta = {
-    title: `${locale.COMMON.CATEGORY} | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${locale.COMMON.CATEGORY} | ${siteConfig('TITLE')}`,
+    description: siteConfig('HOME_BANNER_IMAGE'),
    image: siteInfo?.pageCover,
    slug: 'category',
    type: 'website'
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,6 +5,7 @@ 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'

 /**
 * 首页布局
@@ -14,7 +15,15 @@ import { getLayoutByTheme } from '@/themes/theme'
 const Index = props => {
  // 根据页面路径加载不同Layout文件
  const Layout = getLayoutByTheme(useRouter())
-  return <Layout {...props} />
+
+  const meta = {
+    title: `${siteConfig('TITLE')} | ${siteConfig('BIO')}`,
+    description: siteConfig('DESCRIPTION'),
+    image: siteConfig('HOME_BANNER_IMAGE'),
+    slug: '',
+    type: 'website'
+  }
+  return <Layout meta={meta} {...props} />
 }

 /**
@@ -25,16 +34,8 @@ export async function getStaticProps() {
  const from = 'index'
  const props = await getGlobalData({ from })

-  const { siteInfo } = props
  props.posts = props.allPages?.filter(page => page.type === 'Post' && page.status === 'Published')

-  const meta = {
-    title: `${siteInfo?.title} | ${siteInfo?.description}`,
-    description: siteInfo?.description,
-    image: siteInfo?.pageCover,
-    slug: '',
-    type: 'website'
-  }
  // 处理分页
  if (BLOG.POST_LIST_STYLE === 'scroll') {
    // 滚动列表默认给前端返回所有数据
@@ -65,10 +66,7 @@ export async function getStaticProps() {
  delete props.allPages

  return {
-    props: {
-      meta,
-      ...props
-    },
+    props,
    revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND)
  }
 }
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -3,6 +3,7 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalData } from '@/lib/notion/getNotionData'
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 /**
 * 文章列表分页
@@ -16,8 +17,8 @@ const Page = props => {
  const Layout = getLayoutByTheme(useRouter())

  const meta = {
-    title: `${props?.page} | Page | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${props?.page} | Page | ${siteConfig('TITLE')}`,
+    description: siteConfig('HOME_BANNER_IMAGE'),
    image: siteInfo?.pageCover,
    slug: 'page/' + props.page,
    type: 'website'
--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -4,6 +4,7 @@ import { getDataFromCache } from '@/lib/cache/cache_manager'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 const Index = props => {
  const { keyword, siteInfo } = props
@@ -13,8 +14,8 @@ const Index = props => {
  const Layout = getLayoutByTheme(useRouter())

  const meta = {
-    title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
-    description: siteInfo?.title,
+    title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteConfig('TITLE')}`,
+    description: siteConfig('TITLE'),
    image: siteInfo?.pageCover,
    slug: 'search/' + (keyword || ''),
    type: 'website'
--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -4,6 +4,7 @@ import { getDataFromCache } from '@/lib/cache/cache_manager'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 const Index = props => {
  const { keyword, siteInfo } = props
@@ -13,8 +14,8 @@ const Index = props => {
  const Layout = getLayoutByTheme(useRouter())

  const meta = {
-    title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
-    description: siteInfo?.title,
+    title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteConfig('TITLE')}`,
+    description: siteConfig('TITLE'),
    image: siteInfo?.pageCover,
    slug: 'search/' + (keyword || ''),
    type: 'website'
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 /**
 * 搜索路由
@@ -34,8 +35,8 @@ const Search = props => {
  }

  const meta = {
-    title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${siteConfig('TITLE')}`,
+    description: siteConfig('HOME_BANNER_IMAGE'),
    image: siteInfo?.pageCover,
    slug: 'search',
    type: 'website'
--- a/pages/tag/[tag]/index.js
+++ b/pages/tag/[tag]/index.js
@@ -3,6 +3,7 @@ import { getGlobalData } from '@/lib/notion/getNotionData'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 /**
 * 标签下的文章列表
@@ -17,8 +18,8 @@ const Tag = props => {
  const Layout = getLayoutByTheme(useRouter())

  const meta = {
-    title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${tag} | ${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
+    description: siteConfig('HOME_BANNER_IMAGE'),
    image: siteInfo?.pageCover,
    slug: 'tag/' + tag,
    type: 'website'
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -3,6 +3,7 @@ import { getGlobalData } from '@/lib/notion/getNotionData'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 const Tag = props => {
  const { locale } = useGlobal()
@@ -12,8 +13,8 @@ const Tag = props => {
  const Layout = getLayoutByTheme(useRouter())

  const meta = {
-    title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${tag} | ${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
+    description: siteConfig('HOME_BANNER_IMAGE'),
    image: siteInfo?.pageCover,
    slug: 'tag/' + tag,
    type: 'website'
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'

 /**
 * 标签首页
@@ -17,8 +18,8 @@ const TagIndex = props => {
  const Layout = getLayoutByTheme(useRouter())

  const meta = {
-    title: `${locale.COMMON.TAGS} | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
+    description: siteConfig('HOME_BANNER_IMAGE'),
    image: siteInfo?.pageCover,
    slug: 'tag',
    type: 'website'
--- a/themes/example/components/BlogPostCard.js
+++ b/themes/example/components/BlogPostCard.js
@@ -3,6 +3,7 @@ import CONFIG from '../config'
 import Link from 'next/link'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'

 const BlogPostCard = ({ post }) => {
  const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail
@@ -18,7 +19,7 @@ const BlogPostCard = ({ post }) => {
            </h2>

            <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
-                by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {post.date?.start_date || post.createdTime}
+                by <a href="#" className="text-gray-700 dark:text-gray-300">{siteConfig('AUTHOR')}</a> on {post.date?.start_date || post.createdTime}
                <TwikooCommentCount post={post} className='pl-1'/>
                <span className="font-bold mx-1"> | </span>
                <a href={`/category${post.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{post.category}</a>
--- a/themes/example/components/Footer.js
+++ b/themes/example/components/Footer.js
@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import DarkModeButton from '@/components/DarkModeButton'
+import { siteConfig } from '@/lib/config'

 export const Footer = (props) => {
  const d = new Date()
@@ -15,7 +16,7 @@ export const Footer = (props) => {
        <DarkModeButton className='text-center pt-4'/>

        <div className="container mx-auto max-w-4xl py-6 md:flex flex-wrap md:flex-no-wrap md:justify-between items-center text-sm">
-            <div className='text-center'> &copy;{`${copyrightDate}`} {BLOG.AUTHOR}. All rights reserved.</div>
+            <div className='text-center'> &copy;{`${copyrightDate}`} {siteConfig('AUTHOR')}. All rights reserved.</div>
            <div className="md:p-0 text-center md:text-right text-xs">
                {/* 右侧链接 */}
                {/* <a href="#" className="text-black no-underline hover:underline">Privacy Policy</a> */}
--- a/themes/example/components/Header.js
+++ b/themes/example/components/Header.js
@@ -1,12 +1,11 @@
 import Link from 'next/link'
+import { siteConfig } from '@/lib/config'

 /**
 * 网站顶部
 * @returns
 */
 export const Header = (props) => {
-  const { siteInfo } = props
-
  return (
      <header className="w-full px-6 bg-white  dark:bg-black relative z-10">
            <div className="container mx-auto max-w-4xl md:flex justify-between items-center">
@@ -14,7 +13,7 @@ export const Header = (props) => {
                    href='/'
                    className="py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center">

-                    {siteInfo?.title}
+                    {siteConfig('TITLE')}
                </Link>
                <div className="w-full md:w-auto text-center md:text-right">
                    {/* 右侧文字 */}
--- a/themes/example/components/Title.js
+++ b/themes/example/components/Title.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'

 /**
 * 标题栏
@@ -6,9 +6,9 @@ import BLOG from '@/blog.config'
 * @returns
 */
 export const Title = (props) => {
-  const { siteInfo, post } = props
-  const title = post?.title || siteInfo?.description
-  const description = post?.description || BLOG.AUTHOR
+  const { post } = props
+  const title = post?.title || siteConfig('HOME_BANNER_IMAGE')
+  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">
        <h1 className=" text-xl md:text-4xl pb-4">{title}</h1>
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -12,9 +12,7 @@ import SocialButton from './SocialButton'
 import { useFukasawaGlobal } from '..'
 import CONFIG from '@/themes/fukasawa/config'
 import { AdSlot } from '@/components/GoogleAdsense'
-
-// import { debounce } from 'lodash'
-// import { useEffect } from 'react'
+import { siteConfig } from '@/lib/config'

 /**
 * 侧边栏
@@ -22,7 +20,7 @@ import { AdSlot } from '@/components/GoogleAdsense'
 * @returns
 */
 function AsideLeft(props) {
-  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo, notice } = props
+  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, notice } = props
  const router = useRouter()
  const { isCollapsed, setIsCollapse } = useFukasawaGlobal()
  // 折叠侧边栏
@@ -65,7 +63,7 @@ function AsideLeft(props) {
            <Logo {...props} />

            <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
-                {siteInfo?.description}
+                {siteConfig('HOME_BANNER_IMAGE')}
            </section>

            <section className='flex flex-col text-gray-600'>
--- a/themes/fukasawa/components/Logo.js
+++ b/themes/fukasawa/components/Logo.js
@@ -1,13 +1,13 @@
 import Link from 'next/link'
+import { siteConfig } from '@/lib/config'

 const Logo = props => {
-  const { siteInfo } = props
  return (
   <section className='flex'>
    <Link
     href='/'
     className='hover:bg-black hover:text-white border-black border-2 duration-500 px-4 py-2 cursor-pointer dark:text-gray-300 dark:border-gray-300 font-black'>
-     {siteInfo?.title}
+     {siteConfig('TITLE')}
    </Link>
   </section>
  );
--- a/themes/fukasawa/components/SiteInfo.js
+++ b/themes/fukasawa/components/SiteInfo.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'

 function SiteInfo ({ title }) {
  const d = new Date()
@@ -14,7 +15,7 @@ function SiteInfo ({ title }) {
        <footer
            className='relative leading-6 justify-start w-full text-gray-600 dark:text-gray-300 text-xs font-sans'
        >
-            <span> © {`${copyrightDate}`} <span> <a href={BLOG.LINK}> <i className='mx-1 animate-pulse fas fa-heart'/> {BLOG.AUTHOR}</a>. <br /></span>
+            <span> © {`${copyrightDate}`} <span> <a href={BLOG.LINK}> <i className='mx-1 animate-pulse fas fa-heart'/> {siteConfig('AUTHOR')}</a>. <br /></span>

            {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}

--- a/themes/gitbook/components/Footer.js
+++ b/themes/gitbook/components/Footer.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'

 const Footer = ({ siteInfo }) => {
  const d = new Date()
@@ -18,7 +19,7 @@ const Footer = ({ siteInfo }) => {
            <hr className='pb-2' />

            <div className='flex justify-center'>
-                <div><i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br /></div>
+                <div><i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br /></div>
                © {`${copyrightDate}`}
            </div>

@@ -30,7 +31,7 @@ const Footer = ({ siteInfo }) => {
                <i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
            <span className='pl-2 hidden busuanzi_container_site_uv'>
                <i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
-            <h1 className='pt-1'>{siteInfo?.title}</h1>
+            <h1 className='pt-1'>{siteConfig('TITLE')}</h1>

        </footer>
  )
--- a/themes/gitbook/components/InfoCard.js
+++ b/themes/gitbook/components/InfoCard.js
@@ -1,17 +1,17 @@
 import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
 import Router from 'next/router'
-import React from 'react'
 import SocialButton from './SocialButton'
+import { siteConfig } from '@/lib/config'

 const InfoCard = (props) => {
  const { siteInfo } = props
  return <div id='info-card' className='py-4'>
    <div className='items-center justify-center'>
        <div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
-            <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+            <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={siteConfig('AUTHOR')}/>
         </div>
-        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{siteConfig('AUTHOR')}</div>
        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
        <SocialButton/>
    </div>
--- a/themes/gitbook/components/LogoBar.js
+++ b/themes/gitbook/components/LogoBar.js
@@ -1,7 +1,7 @@
-import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
 import { useGitBookGlobal } from '@/themes/gitbook'
 import Link from 'next/link'
+import { siteConfig } from '@/lib/config'

 /**
 * Logo区域
@@ -21,8 +21,8 @@ export default function LogoBar(props) {
                <i className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
            </div>
            <Link href='/' className='flex text-md md:text-xl dark:text-gray-200'>
-                <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2 hidden md:block' />
-                {siteInfo?.title}
+                <LazyImage src={siteInfo?.icon} width={24} height={24} alt={siteConfig('AUTHOR')} className='mr-2 hidden md:block' />
+                {siteConfig('TITLE')}
            </Link>
        </div>
  )
--- a/themes/heo/components/ArticleCopyright.js
+++ b/themes/heo/components/ArticleCopyright.js
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'

 export default function ArticleCopyright () {
  const router = useRouter()
@@ -24,7 +25,7 @@ export default function ArticleCopyright () {
        <li>
          <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
          <Link href={'/about'} className="hover:underline">
-            {BLOG.AUTHOR}
+            {siteConfig('AUTHOR')}
          </Link>
        </li>
        <li>
--- a/themes/heo/components/Footer.js
+++ b/themes/heo/components/Footer.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import BLOG from '@/blog.config'
 import SocialButton from './SocialButton'
-// import DarkModeButton from '@/components/DarkModeButton'
+import { siteConfig } from '@/lib/config'

 const Footer = ({ title }) => {
  const d = new Date()
@@ -34,7 +34,7 @@ const Footer = ({ title }) => {
            <div id='footer-bottom' className='w-full h-20 flex flex-col p-3 lg:flex-row justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#30343f]'>

                <div id='footer-bottom-left'>
-                   NotionNext {BLOG.VERSION} <i className='fas fa-copyright' /> {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold  dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
+                   NotionNext {BLOG.VERSION} <i className='fas fa-copyright' /> {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold  dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.
                </div>

            <div id='footer-bottom-right'>
--- a/themes/heo/components/InfoCard.js
+++ b/themes/heo/components/InfoCard.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
@@ -26,12 +26,12 @@ export function InfoCard(props) {
                {/* 问候语 */}
                <GreetingsWords />
                <div className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-5 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}>
-                    <LazyImage src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={BLOG.AUTHOR} />
+                    <LazyImage src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={siteConfig('AUTHOR')} />
                </div>
            </div>

            <h2 className='text-3xl font-extrabold mt-3'>
-                {BLOG.AUTHOR}
+                {siteConfig('AUTHOR')}
            </h2>

            {/* 公告栏 */}
--- a/themes/heo/components/Logo.js
+++ b/themes/heo/components/Logo.js
@@ -2,17 +2,17 @@ import BLOG from '@/blog.config'
 import { Home } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
-import React from 'react'
+import { siteConfig } from '@/lib/config'

 const Logo = props => {
  const { siteInfo } = props
  return (
        <Link href='/' passHref legacyBehavior>
            <div className='flex flex-nowrap justify-center items-center cursor-pointer font-extrabold'>
-                <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-4 hidden md:block' />
+                <LazyImage src={siteInfo?.icon} width={24} height={24} alt={siteConfig('AUTHOR')} className='mr-4 hidden md:block' />
                <div id='logo-text' className='group rounded-2xl flex-none relative'>
                    <div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
-                        {siteInfo?.title || BLOG.TITLE}
+                        {siteConfig('TITLE') || BLOG.TITLE}
                    </div>
                    <div className='flex justify-center rounded-2xl group-hover:bg-indigo-600 w-full group-hover:opacity-100 opacity-0 invisible group-hover:visible absolute top-0 py-1 duration-200'>
                        <Home className={'w-6 h-6 stroke-white stroke-2 '}/>
--- a/themes/heo/components/NavBar.js
+++ b/themes/heo/components/NavBar.js
@@ -9,6 +9,8 @@ import ReadingProgress from './ReadingProgress'
 import { MenuListTop } from './MenuListTop'
 import { isBrowser } from '@/lib/utils'
 import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
+
 /**
 * 顶部导航
 * @param {*} param0
@@ -139,7 +141,7 @@ const NavBar = props => {
                {/* 中间菜单 */}
                <div id='nav-bar-swipe' className={`hidden lg:flex flex-grow flex-col items-center justify-center h-full relative w-full ${activeIndex === 0 ? 'fade-in-down' : 'fade-in-up'}`}>
                    {activeIndex === 0 && <MenuListTop {...props} />}
-                    {activeIndex === 1 && <h1 className='font-bold text-center text-light-400 dark:text-gray-400'>{BLOG.AUTHOR || BLOG.TITLE} {BLOG.BIO && <>|</>} {BLOG.BIO}</h1>}
+                    {activeIndex === 1 && <h1 className='font-bold text-center text-light-400 dark:text-gray-400'>{siteConfig('AUTHOR') || siteConfig('TITLE')} {siteConfig('BIO') && <>|</>} {BLOG.BIO}</h1>}
                </div>

                {/* 右侧固定 */}
--- a/themes/heo/components/SideBar.js
+++ b/themes/heo/components/SideBar.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
 import { useRouter } from 'next/router'
 import MenuGroupCard from './MenuGroupCard'
@@ -21,7 +21,7 @@ const SideBar = (props) => {
                    <div onClick={() => { router.push('/') }}
                        className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
+                        <LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={siteConfig('AUTHOR')} />
                    </div>
                    <MenuGroupCard {...props} />
                </div>
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -40,6 +40,7 @@ import replaceSearchResult from '@/components/Mark'
 import LazyImage from '@/components/LazyImage'
 import WWAds from '@/components/WWAds'
 import { AdSlot } from '@/components/GoogleAdsense'
+import { siteConfig } from '@/lib/config'

 /**
 * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -53,7 +54,6 @@ const LayoutBase = props => {
    headerSlot,
    slotTop,
    slotRight,
-    siteInfo,
    className,
    meta
  } = props
@@ -95,7 +95,7 @@ const LayoutBase = props => {
      </main>

      {/* 页脚 */}
-      <Footer title={siteInfo?.title || BLOG.TITLE} />
+      <Footer title={siteConfig('TITLE')} />
    </div>
  )
 }
--- a/themes/hexo/components/ArticleCopyright.js
+++ b/themes/hexo/components/ArticleCopyright.js
@@ -4,11 +4,9 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'

 export default function ArticleCopyright () {
-  if (!CONFIG.ARTICLE_COPYRIGHT) {
-    return <></>
-  }
  const router = useRouter()
  const [path, setPath] = useState(BLOG.LINK + router.asPath)
  useEffect(() => {
@@ -16,13 +14,18 @@ export default function ArticleCopyright () {
  })

  const { locale } = useGlobal()
+
+  if (!CONFIG.ARTICLE_COPYRIGHT) {
+    return <></>
+  }
+
  return (
    <section className="dark:text-gray-300 mt-6 mx-1 ">
      <ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-2 border-indigo-500">
        <li>
          <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
          <Link href={'/about'} className="hover:underline">
-            {BLOG.AUTHOR}
+            {siteConfig('AUTHOR')}
          </Link>
        </li>
        <li>
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -9,7 +9,7 @@ import LazyImage from '@/components/LazyImage'
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
  const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
  if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
-    post.pageCover = siteInfo?.pageCoverThumbnail
+    post.pageCoverThumbnail = siteInfo?.pageCover
  }
  const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
  //   const delay = (index % 2) * 200
--- a/themes/hexo/components/Footer.js
+++ b/themes/hexo/components/Footer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import BLOG from '@/blog.config'
-// import DarkModeButton from '@/components/DarkModeButton'
+import { siteConfig } from '@/lib/config'

 const Footer = ({ title }) => {
  const d = new Date()
@@ -18,7 +18,7 @@ const Footer = ({ title }) => {
    >
      {/* <DarkModeButton/> */}

-      <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold  dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>
+      <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold  dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br/>

      {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}

--- a/themes/hexo/components/Hero.js
+++ b/themes/hexo/components/Hero.js
@@ -6,6 +6,7 @@ import NavButtonGroup from './NavButtonGroup'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'

 let wrapperTop = 0

@@ -57,7 +58,7 @@ const Hero = props => {

            <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='font-black text-4xl md:text-5xl shadow-text'>{siteConfig('TITLE')}</div>
                {/* 站点欢迎语 */}
                <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
                    <span id='typed' />
--- a/themes/hexo/components/InfoCard.js
+++ b/themes/hexo/components/InfoCard.js
@@ -4,6 +4,7 @@ import Card from './Card'
 import SocialButton from './SocialButton'
 import MenuGroupCard from './MenuGroupCard'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'

 /**
 * 社交信息卡
@@ -22,9 +23,9 @@ export function InfoCard(props) {
                }}
            >
                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
+                <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={siteConfig('AUTHOR')} />
            </div>
-            <div className='font-medium text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
+            <div className='font-medium text-center text-xl pb-4'>{siteConfig('AUTHOR')}</div>
            <div className='text-sm text-center'>{BLOG.BIO}</div>
            <MenuGroupCard {...props} />
            <SocialButton />
--- a/themes/hexo/components/Logo.js
+++ b/themes/hexo/components/Logo.js
@@ -1,13 +1,13 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 import React from 'react'
+import { siteConfig } from '@/lib/config'

 const Logo = props => {
-  const { siteInfo } = props
  return (
    <Link href='/' passHref legacyBehavior>
      <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-        <div className='font-medium text-lg p-1.5 rounded dark:border-white menu-link transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
+        <div className='font-medium text-lg p-1.5 rounded dark:border-white menu-link transform duration-200'> {siteConfig('TITLE') || BLOG.TITLE}</div>
      </div>
    </Link>
  )
--- a/themes/hexo/components/MenuGroupCard.js
+++ b/themes/hexo/components/MenuGroupCard.js
@@ -16,6 +16,12 @@ const MenuGroupCard = (props) => {
    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG }
  ]

+  for (let i = 0; i < links.length; i++) {
+    if (links[i].id !== i) {
+      links[i].id = i
+    }
+  }
+
  return (
    <nav id='nav' className='leading-8 flex justify-center  dark:text-gray-200 w-full'>
        {links.map(link => {
--- a/themes/hexo/components/MenuListSide.js
+++ b/themes/hexo/components/MenuListSide.js
@@ -18,6 +18,12 @@ export const MenuListSide = (props) => {
  if (customNav) {
    links = customNav.concat(links)
  }
+  
+  for (let i = 0; i < links.length; i++) {
+    if (links[i].id !== i) {
+      links[i].id = i
+    }
+  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
  if (BLOG.CUSTOM_MENU) {
--- a/themes/hexo/components/MenuListTop.js
+++ b/themes/hexo/components/MenuListTop.js
@@ -20,6 +20,12 @@ export const MenuListTop = (props) => {
    links = links.concat(customNav)
  }

+  for (let i = 0; i < links.length; i++) {
+    if (links[i].id !== i) {
+      links[i].id = i
+    }
+  }
+
  // 如果 开启自定义菜单，则覆盖Page生成的菜单
  if (BLOG.CUSTOM_MENU) {
    links = customMenu
--- a/themes/hexo/components/SideBar.js
+++ b/themes/hexo/components/SideBar.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
 import { useRouter } from 'next/router'
 import MenuGroupCard from './MenuGroupCard'
@@ -20,7 +20,7 @@ const SideBar = (props) => {
                <div>
                    <div onClick={() => { router.push('/') }}
                        className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
-                        <LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
+                        <LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={siteConfig('AUTHOR')} />
                    </div>
                    <MenuGroupCard {...props} />
                </div>
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -6,7 +6,6 @@ import Footer from './components/Footer'
 import SideRight from './components/SideRight'
 import TopNav from './components/TopNav'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
 import { isBrowser } from '@/lib/utils'
 import BlogPostListPage from './components/BlogPostListPage'
 import BlogPostListScroll from './components/BlogPostListScroll'
@@ -33,6 +32,7 @@ import SlotBar from './components/SlotBar'
 import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
+import { siteConfig } from '@/lib/config'

 /**
 * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -70,7 +70,7 @@ const LayoutBase = props => {

            {/* 主区块 */}
            <main id="wrapper" className={`${CONFIG.HOME_BANNER_ENABLE ? '' : 'pt-16'} bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative`}>
-                <div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
+                <div id="container-inner" className={(siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
                    <div className={`${className || ''} w-full max-w-4xl h-full overflow-hidden`}>

                        <Transition
@@ -100,7 +100,7 @@ const LayoutBase = props => {
            <RightFloatArea floatSlot={floatSlot} />

            {/* 页脚 */}
-            <Footer title={siteInfo?.title || BLOG.TITLE} />
+            <Footer title={siteConfig('TITLE') || siteConfig('TITLE')} />
        </div>
  )
 }
@@ -124,7 +124,7 @@ const LayoutIndex = (props) => {
 const LayoutPostList = (props) => {
  return <LayoutBase {...props} className='pt-8'>
        <SlotBar {...props} />
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
    </LayoutBase>
 }

@@ -155,7 +155,7 @@ const LayoutSearch = props => {
        <LayoutBase {...props} currentSearch={currentSearch} className='pt-8'>
            {!currentSearch
              ? <SearchNav {...props} />
-              : <div id="posts-wrapper"> {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}  </div>}
+              : <div id="posts-wrapper"> {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}  </div>}
        </LayoutBase>
  )
 }
--- a/themes/matery/components/ArticleCopyright.js
+++ b/themes/matery/components/ArticleCopyright.js
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'

 export default function ArticleCopyright () {
  const router = useRouter()
@@ -24,7 +25,7 @@ export default function ArticleCopyright () {
        <li>
          <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
          <Link href={'/about'} className="hover:underline">
-            {BLOG.AUTHOR}
+            {siteConfig('AUTHOR')}
          </Link>
        </li>
        <li>
--- a/themes/matery/components/Footer.js
+++ b/themes/matery/components/Footer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import BLOG from '@/blog.config'
-// import DarkModeButton from '@/components/DarkModeButton'
+import { siteConfig } from '@/lib/config'

 const Footer = ({ title }) => {
  const d = new Date()
@@ -18,7 +18,7 @@ const Footer = ({ title }) => {
    >
      {/* <DarkModeButton/> */}

-      <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold  dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>
+      <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold  dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br/>

      {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}

--- a/themes/matery/components/Hero.js
+++ b/themes/matery/components/Hero.js
@@ -5,6 +5,7 @@ import CONFIG from '../config'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'

 let wrapperTop = 0

@@ -53,7 +54,7 @@ const Hero = 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='text-4xl md:text-5xl shadow-text'>{siteConfig('TITLE')}</div>
                {/* 站点欢迎语 */}
                <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
                    <span id='typed' />
--- a/themes/matery/components/InfoCard.js
+++ b/themes/matery/components/InfoCard.js
@@ -4,6 +4,8 @@ import Card from './Card'
 import SocialButton from './SocialButton'
 import MenuGroupCard from './MenuGroupCard'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+
 export function InfoCard (props) {
  const { className, siteInfo } = props
  const router = useRouter()
@@ -14,9 +16,9 @@ export function InfoCard (props) {
        router.push('/')
      }}
    >
-    <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+    <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={siteConfig('AUTHOR')}/>
    </div>
-    <div className='text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
+    <div className='text-center text-xl pb-4'>{siteConfig('AUTHOR')}</div>
    <div className='text-sm text-center'>{BLOG.BIO}</div>
    <MenuGroupCard {...props}/>
    <SocialButton />
--- a/themes/matery/components/Logo.js
+++ b/themes/matery/components/Logo.js
@@ -1,13 +1,13 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 import React from 'react'
+import { siteConfig } from '@/lib/config'

 const Logo = props => {
-  const { siteInfo } = props
  return (
    <Link href='/' passHref legacyBehavior>
      <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-        <div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
+        <div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteConfig('TITLE') || BLOG.TITLE}</div>
      </div>
    </Link>
  )
--- a/themes/matery/components/SideBar.js
+++ b/themes/matery/components/SideBar.js
@@ -1,6 +1,6 @@
-import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
 import { MenuListSide } from './MenuListSide'
+import { siteConfig } from '@/lib/config'

 /**
 * 侧边抽屉
@@ -16,9 +16,9 @@ const SideBar = (props) => {
      <div id='side-bar'>
          <div className="mh-48 w-full bg-indigo-700">
              <div className='mx-5 pt-6 pb-2'>
-                  <LazyImage src={siteInfo?.icon} className='cursor-pointer rounded-full' width={80} alt={BLOG.AUTHOR} />
-                  <div className='text-white text-xl my-1'>{siteInfo?.title}</div>
-                  <div className='text-xs my-1 text-gray-300'>{siteInfo?.description}</div>
+                  <LazyImage src={siteInfo?.icon} className='cursor-pointer rounded-full' width={80} alt={siteConfig('AUTHOR')} />
+                  <div className='text-white text-xl my-1'>{siteConfig('TITLE')}</div>
+                  <div className='text-xs my-1 text-gray-300'>{siteConfig('HOME_BANNER_IMAGE')}</div>
              </div>
          </div>
          <MenuListSide {...props} />
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -31,6 +31,7 @@ import BlogListBar from './components/BlogListBar'
 import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
+import { siteConfig } from '@/lib/config'

 /**
 * 基础布局
@@ -101,7 +102,7 @@ const LayoutBase = props => {
            <RightFloatButtons {...props} />

            {/* 页脚 */}
-            <Footer title={siteInfo?.title || BLOG.TITLE} />
+            <Footer title={siteConfig('TITLE')} />
        </div>
  )
 }
--- a/themes/medium/components/ArticleInfo.js
+++ b/themes/medium/components/ArticleInfo.js
@@ -1,6 +1,6 @@
-import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
+import { siteConfig } from '@/lib/config'

 /**
 * 文章详情页介绍
@@ -26,10 +26,10 @@ export default function ArticleInfo(props) {
            </div>
            <Link href="/about" passHref legacyBehavior>
                <div className='flex pt-2'>
-                    <LazyImage src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
+                    <LazyImage src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={siteConfig('AUTHOR')} />

                    <div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
-                        {BLOG.AUTHOR}
+                        {siteConfig('AUTHOR')}
                    </div>
                </div>
            </Link>
--- a/themes/medium/components/Footer.js
+++ b/themes/medium/components/Footer.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import BLOG from '@/blog.config'
 import DarkModeButton from '@/components/DarkModeButton'
+import { siteConfig } from '@/lib/config'

 const Footer = ({ title }) => {
  const d = new Date()
@@ -17,7 +18,7 @@ const Footer = ({ title }) => {
      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 relative'
    >
       <DarkModeButton/>
-      <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>
+      <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br/>

      {BLOG.BEI_AN && <><i className='fas fa-shield-alt'/> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}

--- a/themes/medium/components/InfoCard.js
+++ b/themes/medium/components/InfoCard.js
@@ -3,15 +3,16 @@ import LazyImage from '@/components/LazyImage'
 import Router from 'next/router'
 import React from 'react'
 import SocialButton from './SocialButton'
+import { siteConfig } from '@/lib/config'

 const InfoCard = (props) => {
  const { siteInfo } = props
  return <div id='info-card' className='py-4'>
    <div className='items-center justify-center'>
        <div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
-            <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+            <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={siteConfig('AUTHOR')}/>
         </div>
-        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{siteConfig('AUTHOR')}</div>
        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
        <SocialButton/>
    </div>
--- a/themes/medium/components/LogoBar.js
+++ b/themes/medium/components/LogoBar.js
@@ -1,11 +1,11 @@
 import Link from 'next/link'
+import { siteConfig } from '@/lib/config'

 export default function LogoBar (props) {
-  const { siteInfo } = props
  return (
    <div id='top-wrapper' className='w-full flex items-center '>
          <Link href='/' className='text-md md:text-xl dark:text-gray-200'>
-            {siteInfo?.title}
+            {siteConfig('TITLE')}
          </Link>
    </div>
  );
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -36,6 +36,7 @@ import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import ArticleInfo from './components/ArticleInfo'
 import CommonHead from '@/components/CommonHead'
+import { siteConfig } from '@/lib/config'

 // 主题全局状态
 const ThemeGlobalMedium = createContext()
@@ -48,7 +49,7 @@ export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
 * @constructor
 */
 const LayoutBase = props => {
-  const { children, showInfoCard = true, slotRight, slotTop, siteInfo, notice, meta } = props
+  const { children, showInfoCard = true, slotRight, slotTop, notice, meta } = props
  const { locale } = useGlobal()
  const router = useRouter()
  const [tocVisible, changeTocVisible] = useState(false)
@@ -93,7 +94,7 @@ const LayoutBase = props => {
                        </div>

                        {/* 底部 */}
-                        <Footer title={siteInfo?.title} />
+                        <Footer title={siteConfig('TITLE')} />
                    </div>

                    {/* 桌面端右侧 */}
--- a/themes/nav/components/Footer.js
+++ b/themes/nav/components/Footer.js
@@ -1,5 +1,5 @@
-import React from 'react'
 import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'

 const Footer = ({ siteInfo }) => {
  const d = new Date()
@@ -18,7 +18,7 @@ const Footer = ({ siteInfo }) => {
            {/* <hr className='pb-2' /> */}

            <div className='flex justify-center'>
-                <div><i className='text-xs mx-1 animate-pulse fas fa-heart' /><a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br /></div>
+                <div><i className='text-xs mx-1 animate-pulse fas fa-heart' /><a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br /></div>
                © {`${copyrightDate}`}
            </div>

@@ -30,7 +30,7 @@ const Footer = ({ siteInfo }) => {
                <i className='text-xs fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
            <span className='pl-2 hidden busuanzi_container_site_uv'>
                <i className='text-xs fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
-            {/*<h1 className='pt-1'>{siteInfo?.title}</h1>*/}
+            {/* <h1 className='pt-1'>{siteConfig('TITLE')}</h1> */}

        </footer>
  )
--- a/themes/nav/components/InfoCard.js
+++ b/themes/nav/components/InfoCard.js
@@ -1,17 +1,17 @@
 import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
 import Router from 'next/router'
-import React from 'react'
 import SocialButton from './SocialButton'
+import { siteConfig } from '@/lib/config'

 const InfoCard = (props) => {
  const { siteInfo } = props
  return <div id='info-card' className='py-4'>
    <div className='items-center justify-center'>
        <div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
-            <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+            <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={siteConfig('AUTHOR')}/>
         </div>
-        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{siteConfig('AUTHOR')}</div>
        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
        <SocialButton/>
    </div>
--- a/themes/nav/components/LogoBar.js
+++ b/themes/nav/components/LogoBar.js
@@ -1,6 +1,7 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'

 /**
 * Logo区域
@@ -15,8 +16,8 @@ export default function LogoBar(props) {
                <Link href='/' className='md:w-48 grid justify-items-center text-md md:text-xl dark:text-gray-200'>
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img src={siteInfo?.icon?.replaceAll('width=400', 'width=280')}
-                        height='44px' alt={BLOG.AUTHOR + ' - ' + BLOG.NEXT_PUBLIC_BIO} className='md:block transition-all hover:scale-110 duration-150' placeholderSrc='' />
-                    {CONFIG.SHOW_TITLE_TEXT && siteInfo?.title}
+                        height='44px' alt={siteConfig('AUTHOR') + ' - ' + BLOG.NEXT_PUBLIC_BIO} className='md:block transition-all hover:scale-110 duration-150' placeholderSrc='' />
+                    {CONFIG.SHOW_TITLE_TEXT && siteConfig('TITLE')}
                </Link>
        </div>
  )
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -14,6 +14,7 @@ import CONFIG from '../config'
 import NotionIcon from '@/components/NotionIcon'
 import LazyImage from '@/components/LazyImage'
 import { formatDateFmt } from '@/lib/formatDate'
+import { siteConfig } from '@/lib/config'

 /**
 *
@@ -88,7 +89,7 @@ export default function ArticleDetail(props) {
                    <ShareBar post={post} />

                    {/* 版权声明 */}
-                    {post?.type === 'Post' && <ArticleCopyright author={BLOG.AUTHOR} url={url} />}
+                    {post?.type === 'Post' && <ArticleCopyright author={siteConfig('AUTHOR')} url={url} />}

                    {/* 推荐文章 */}
                    {post?.type === 'Post' && <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />}
--- a/themes/next/components/Footer.js
+++ b/themes/next/components/Footer.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 import BLOG from '@/blog.config'
 import DarkModeButton from '@/components/DarkModeButton'

@@ -20,7 +20,7 @@ const Footer = ({ title }) => {
            <span>
                <DarkModeButton />

-                <i className='fas fa-copyright' /> {`${copyrightDate}`} <span className='mx-1 animate-pulse'><i className='fas fa-heart' /></span> <a href={BLOG.LINK} className='underline font-bold '>{BLOG.AUTHOR}</a>.<br />
+                <i className='fas fa-copyright' /> {`${copyrightDate}`} <span className='mx-1 animate-pulse'><i className='fas fa-heart' /></span> <a href={BLOG.LINK} className='underline font-bold '>{siteConfig('AUTHOR')}</a>.<br />

                {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br /></>}

--- a/themes/next/components/InfoCard.js
+++ b/themes/next/components/InfoCard.js
@@ -1,17 +1,17 @@
 import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
 import Router from 'next/router'
-import React from 'react'
 import SocialButton from './SocialButton'
+import { siteConfig } from '@/lib/config'

 const InfoCard = (props) => {
  const { siteInfo } = props
  return <>
    <div className='flex flex-col items-center justify-center '>
        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}>
-        <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+        <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={siteConfig('AUTHOR')}/>
        </div>
-        <div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
+        <div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{siteConfig('AUTHOR')}</div>
        <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center'>{BLOG.BIO}</div>
        <SocialButton/>
    </div>
--- a/themes/next/components/Logo.js
+++ b/themes/next/components/Logo.js
@@ -1,8 +1,9 @@
 import Link from 'next/link'
 import React from 'react'
+import { siteConfig } from '@/lib/config'

 const Logo = props => {
-  const { siteInfo, className } = props
+  const { className } = props
  return (
        <Link href='/' passHref legacyBehavior>
            <div className={'flex flex-col justify-center items-center cursor-pointer bg-black dark:bg-gray-800 space-y-3 font-bold ' + className}>
@@ -10,13 +11,13 @@ const Logo = props => {
                    data-aos-duration="500"
                    data-aos-once="true"
                    data-aos-anchor-placement="top-bottom"
-                    className='font-serif text-xl text-white'> {siteInfo?.title}</div>
+                    className='font-serif text-xl text-white'> {siteConfig('TITLE')}</div>
                <div data-aos="fade-down"
                    data-aos-duration="500"
                    data-aos-delay="300"
                    data-aos-once="true"
                    data-aos-anchor-placement="top-bottom"
-                    className='text-sm text-gray-300 font-light text-center'> {siteInfo?.description}</div>
+                    className='text-sm text-gray-300 font-light text-center'> {siteConfig('HOME_BANNER_IMAGE')}</div>
            </div>
        </Link>
  )
--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -26,6 +26,7 @@ import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import CommonHead from '@/components/CommonHead'
+import { siteConfig } from '@/lib/config'

 /**
 * 基础布局 采用左中右三栏布局，移动端使用顶部导航栏
@@ -33,7 +34,7 @@ import CommonHead from '@/components/CommonHead'
 * @constructor
 */
 const LayoutBase = (props) => {
-  const { children, headerSlot, floatSlot, rightAreaSlot, siteInfo, meta } = props
+  const { children, headerSlot, floatSlot, rightAreaSlot, meta } = props
  const { onLoading } = useGlobal()
  const targetRef = useRef(null)
  const floatButtonGroup = useRef(null)
@@ -119,7 +120,7 @@ const LayoutBase = (props) => {
            </div>

            {/* 页脚 */}
-            <Footer title={siteInfo?.title} />
+            <Footer title={siteConfig('TITLE')} />
        </div>
  )
 }
--- a/themes/nobelium/components/BlogListScroll.js
+++ b/themes/nobelium/components/BlogListScroll.js
@@ -1,9 +1,10 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
-import React from 'react'
 import throttle from 'lodash.throttle'
 import { deepClone } from '@/lib/utils'
+import { siteConfig } from '@/lib/config'
+import { useEffect } from 'react'

 export const BlogListScroll = props => {
  const { posts } = props
@@ -36,7 +37,7 @@ export const BlogListScroll = props => {
    }
  }, 500))

-  React.useEffect(() => {
+  useEffect(() => {
    window.addEventListener('scroll', scrollTrigger)

    return () => {
@@ -57,7 +58,7 @@ export const BlogListScroll = props => {
                      </h2>

                      <div className="mb-4 text-sm text-gray-700">
-                          by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
+                          by <a href="#" className="text-gray-700">{siteConfig('AUTHOR')}</a> on {p.date?.start_date || p.createdTime}
                          <span className="font-bold mx-1"> | </span>
                          <a href="#" className="text-gray-700">{p.category}</a>
                          <span className="font-bold mx-1"> | </span>
--- a/themes/nobelium/components/Footer.js
+++ b/themes/nobelium/components/Footer.js
@@ -1,6 +1,7 @@
 import BLOG from '@/blog.config'
 import DarkModeButton from '@/components/DarkModeButton'
 import Vercel from '@/components/Vercel'
+import { siteConfig } from '@/lib/config'

 export const Footer = (props) => {
  const d = new Date()
@@ -25,7 +26,7 @@ export const Footer = (props) => {
     <div className="my-4 text-sm leading-6">
       <div className="flex align-baseline justify-between flex-wrap">
         <p>
-           © {BLOG.AUTHOR} {copyrightDate}
+           © {siteConfig('AUTHOR')} {copyrightDate}
         </p>
         <Vercel />
       </div>
--- a/themes/nobelium/components/Nav.js
+++ b/themes/nobelium/components/Nav.js
@@ -10,6 +10,7 @@ import { MenuItemCollapse } from './MenuItemCollapse'
 import LazyImage from '@/components/LazyImage'
 import RandomPostButton from './RandomPostButton'
 import SearchButton from './SearchButton'
+import { siteConfig } from '@/lib/config'

 const Nav = props => {
  const { navBarTitle, fullWidth, siteInfo } = props
@@ -48,7 +49,7 @@ const Nav = props => {
                    <div className="h-6 w-6">
                        {/* <SvgIcon/> */}
                        {CONFIG.NAV_NOTION_ICON
-                          ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
+                          ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={siteConfig('AUTHOR')} />
                          : <SvgIcon />}

                    </div>
@@ -62,8 +63,8 @@ const Nav = props => {
                    )
                  : (
                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-                            {siteInfo?.title}
-                            {/* ,{' '}<span className="font-normal">{siteInfo?.description}</span> */}
+                            {siteConfig('TITLE')}
+                            {/* ,{' '}<span className="font-normal">{siteConfig('HOME_BANNER_IMAGE')}</span> */}
                        </p>
                    )}
            </div>
--- a/themes/nobelium/components/Title.js
+++ b/themes/nobelium/components/Title.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'

 /**
 * 标题栏
@@ -6,9 +6,9 @@ import BLOG from '@/blog.config'
 * @returns
 */
 export const Title = (props) => {
-  const { siteInfo, post } = props
-  const title = post?.title || siteInfo?.description
-  const description = post?.description || BLOG.AUTHOR
+  const { post } = props
+  const title = post?.title || siteConfig('HOME_BANNER_IMAGE')
+  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">
        <h1 className=" text-xl md:text-4xl pb-4">{title}</h1>
--- a/themes/plog/components/BlogListScroll.js
+++ b/themes/plog/components/BlogListScroll.js
@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import React from 'react'
 import throttle from 'lodash.throttle'
+import { siteConfig } from '@/lib/config'

 export const BlogListScroll = props => {
  const { posts } = props
@@ -56,7 +57,7 @@ export const BlogListScroll = props => {
                      </h2>

                      <div className="mb-4 text-sm text-gray-700">
-                          by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
+                          by <a href="#" className="text-gray-700">{siteConfig('AUTHOR')}</a> on {p.date?.start_date || p.createdTime}
                          <span className="font-bold mx-1"> | </span>
                          <a href="#" className="text-gray-700">{p.category}</a>
                          <span className="font-bold mx-1"> | </span>
--- a/themes/plog/components/Footer.js
+++ b/themes/plog/components/Footer.js
@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import Vercel from '@/components/Vercel'
+import { siteConfig } from '@/lib/config'

 export const Footer = (props) => {
  const d = new Date()
@@ -15,7 +16,7 @@ export const Footer = (props) => {
  return <footer className={'z-10 relative mt-6 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 transition-all' } >
     <div className="my-4 text-sm leading-6">
       <div className="flex align-baseline justify-start flex-wrap space-x-6">
-         <div> © {BLOG.AUTHOR} {copyrightDate}  </div>
+         <div> © {siteConfig('AUTHOR')} {copyrightDate}  </div>
         <div>Powered By <a href="https://github.com/tangly1024/NotionNext" className='underline'>NotionNext {BLOG.VERSION}</a></div>
         <Vercel />
       </div>
--- a/themes/plog/components/LogoBar.js
+++ b/themes/plog/components/LogoBar.js
@@ -3,6 +3,7 @@ import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
 import CONFIG from '../config'
 import { SvgIcon } from './SvgIcon'
+import { siteConfig } from '@/lib/config'

 /**
 * logo文字栏
@@ -16,7 +17,7 @@ export default function LogoBar(props) {
    <Link href="/" aria-label={BLOG.title}>
        <div className="h-6 w-6">
            {CONFIG.NAV_NOTION_ICON
-              ? <LazyImage src={siteInfo?.icon} className='rounded-full' width={24} height={24} alt={BLOG.AUTHOR} />
+              ? <LazyImage src={siteInfo?.icon} className='rounded-full' width={24} height={24} alt={siteConfig('AUTHOR')} />
              : <SvgIcon />}
        </div>
    </Link>
@@ -30,8 +31,8 @@ export default function LogoBar(props) {
        )
      : (
            <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-                <Link href="/" aria-label={BLOG.title}> {siteInfo?.title}</Link>
-                {' '}<span className="font-normal text-sm text-gray-00 dark:text-gray-400">{siteInfo?.description}</span>
+                <Link href="/" aria-label={BLOG.title}> {siteConfig('TITLE')}</Link>
+                {' '}<span className="font-normal text-sm text-gray-00 dark:text-gray-400">{siteConfig('HOME_BANNER_IMAGE')}</span>
            </p>
        )}
 </div>
--- a/themes/plog/components/Nav.js
+++ b/themes/plog/components/Nav.js
@@ -8,11 +8,12 @@ import { MenuItemDrop } from './MenuItemDrop'
 import Collapse from '@/components/Collapse'
 import { MenuItemCollapse } from './MenuItemCollapse'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'

 const Header = props => {
  const { fullWidth, siteInfo } = props

-  const title = siteInfo?.title
+  const title = siteConfig('TITLE')

  return <div className='md:hidden fixed top-0 w-full z-20'>
        <div id="sticky-nav"
@@ -23,12 +24,12 @@ const Header = props => {
                        <div className="h-6 w-6">
                            {/* <SvgIcon/> */}
                            {CONFIG.NAV_NOTION_ICON
-                              ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
+                              ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={siteConfig('AUTHOR')} />
                              : <SvgIcon />}

                        </div>
                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-                            {title}  {/* ,{' '}<span className="font-normal">{siteInfo?.description}</span> */}
+                            {title}  {/* ,{' '}<span className="font-normal">{siteConfig('HOME_BANNER_IMAGE')}</span> */}
                        </p>
                    </>
                </Link>
--- a/themes/plog/components/SlideOvers.js
+++ b/themes/plog/components/SlideOvers.js
@@ -3,6 +3,7 @@ import { Dialog, Transition } from '@headlessui/react'
 import { Footer } from './Footer'
 import SocialButton from './SocialButton'
 import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'

 /**
 * 侧拉抽屉
@@ -61,7 +62,7 @@ export default function SlideOvers({ children, cRef }) {
                                        leaveTo="opacity-0 transition-y-32"
                                    >
                                        <div className='max-w-7xl mx-auto space-y-6'>
-                                            <h2 className='text-4xl text-gray-200'>关于{BLOG.AUTHOR}</h2>
+                                            <h2 className='text-4xl text-gray-200'>关于{siteConfig('AUTHOR')}</h2>
                                            <h2 className='text-2xl text-gray-400'>{BLOG.BIO}</h2>
                                            <h2 className='text-4xl text-gray-200'>联系我</h2>
                                            <SocialButton/>
--- a/themes/plog/components/Title.js
+++ b/themes/plog/components/Title.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'

 /**
 * 标题栏
@@ -6,9 +6,9 @@ import BLOG from '@/blog.config'
 * @returns
 */
 export const Title = (props) => {
-  const { siteInfo, post } = props
-  const title = post?.title || siteInfo?.description
-  const description = post?.description || BLOG.AUTHOR
+  const { post } = props
+  const title = post?.title || siteConfig('HOME_BANNER_IMAGE')
+  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">
        <h1 className=" text-xl md:text-4xl pb-4">{title}</h1>
--- a/themes/simple/components/ArticleInfo.js
+++ b/themes/simple/components/ArticleInfo.js
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { formatDateFmt } from '@/lib/formatDate'

 export const ArticleInfo = (props) => {
@@ -19,7 +19,7 @@ export const ArticleInfo = (props) => {

                {post?.type !== 'Page' && (<>
                    <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
-                        <span> <i className="fa-regular fa-user"></i> <a href={CONFIG.AUTHOR_LINK}>{BLOG.AUTHOR}</a></span>
+                        <span> <i className="fa-regular fa-user"></i> <a href={CONFIG.AUTHOR_LINK}>{siteConfig('AUTHOR')}</a></span>
                        <span> - <i className="fa-regular fa-clock"></i> {post?.publishDay}</span>
                        {post?.category && <span> - <i className="fa-regular fa-folder"></i> <a href={`/category/${post?.category}`} className="hover:text-red-400 transition-all duration-200">{post?.category}</a></span>}
                        {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <span key={t}> / <Link href={`/tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)}
--- a/themes/simple/components/BlogItem.js
+++ b/themes/simple/components/BlogItem.js
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import CONFIG from '../config'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
 import { formatDateFmt } from '@/lib/formatDate'
+import { siteConfig } from '@/lib/config'

 export const BlogItem = props => {
  const { post } = props
@@ -22,7 +23,7 @@ export const BlogItem = props => {

        <div className="mb-5 text-md text-gray-700 dark:text-gray-300 flex-wrap flex leading-6">
            <div className='space-x-2'>
-                <span>  <a href={CONFIG.AUTHOR_LINK} className='p-1 hover:text-red-400 transition-all duration-200'><i className="fa-regular fa-user"></i> {BLOG.AUTHOR}</a></span>
+                <span>  <a href={CONFIG.AUTHOR_LINK} className='p-1 hover:text-red-400 transition-all duration-200'><i className="fa-regular fa-user"></i> {siteConfig('AUTHOR')}</a></span>
                <span>
                    <Link className='p-1 hover:text-red-400 transition-all duration-200' href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
                        <i className="fa-regular fa-clock" /> {post.date?.start_date || post.createdTime}
--- a/themes/simple/components/Footer.js
+++ b/themes/simple/components/Footer.js
@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import DarkModeButton from '@/components/DarkModeButton'
+import { siteConfig } from '@/lib/config'

 export const Footer = (props) => {
  const d = new Date()
@@ -15,7 +16,7 @@ export const Footer = (props) => {
        <DarkModeButton className='text-center pt-4'/>

        <div className="text-yellow-300 container mx-auto max-w-4xl py-6 md:flex flex-wrap md:flex-no-wrap md:justify-between items-center text-sm">
-            <div className='text-center'> &copy;{`${copyrightDate}`} {BLOG.AUTHOR}. All rights reserved.</div>
+            <div className='text-center'> &copy;{`${copyrightDate}`} {siteConfig('AUTHOR')}. All rights reserved.</div>
            <div className="md:p-0 text-center md:text-right text-xs">
                {/* 右侧链接 */}
                {/* <a href="#" className="text-black no-underline hover:underline">Privacy Policy</a> */}
--- a/themes/simple/components/Header.js
+++ b/themes/simple/components/Header.js
@@ -3,7 +3,7 @@ import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
 import CONFIG from '../config'
 import SocialButton from './SocialButton'
-// import CONFIG from '../config_simple'
+import { siteConfig } from '@/lib/config'

 /**
 * 网站顶部
@@ -20,11 +20,11 @@ export const Header = (props) => {
                    {/* 可使用一张单图作为logo */}
                    <div className='flex space-x-6'>
                        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'>
-                            <LazyImage src={avatar} className='rounded-full' width={130} height={130} alt={BLOG.AUTHOR} />
+                            <LazyImage src={avatar} className='rounded-full' width={130} height={130} alt={siteConfig('AUTHOR')} />
                        </div>

                        <div className='flex-col flex justify-center'>
-                            <div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
+                            <div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{siteConfig('AUTHOR')}</div>
                            <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center' dangerouslySetInnerHTML={{ __html: CONFIG.LOGO_DESCRIPTION }} />
                        </div>
                    </div>
@@ -33,7 +33,7 @@ export const Header = (props) => {
                <div className='flex justify-center'>
                <SocialButton />
                </div>
-                <div className='text-xs mt-4 text-gray-500 dark:text-gray-300'>{siteInfo?.description}</div>
+                <div className='text-xs mt-4 text-gray-500 dark:text-gray-300'>{siteConfig('HOME_BANNER_IMAGE')}</div>
            </div>
        </header>
  )
--- a/themes/simple/components/Title.js
+++ b/themes/simple/components/Title.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'

 /**
 * 标题栏
@@ -6,9 +6,9 @@ import BLOG from '@/blog.config'
 * @returns
 */
 export const Title = (props) => {
-  const { siteInfo, post } = props
-  const title = post?.title || siteInfo?.description
-  const description = post?.description || BLOG.AUTHOR
+  const { post } = props
+  const title = post?.title || siteConfig('HOME_BANNER_IMAGE')
+  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">
        <h1 className=" text-xl md:text-4xl pb-4">{title}</h1>