diff --git a/.env.local b/.env.local
index 48b76dc9..cfc0b2cd 100644
--- a/.env.local
+++ b/.env.local
@@ -1,2 +1,174 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.0.18
\ No newline at end of file
+NEXT_PUBLIC_VERSION=4.2.0
+
+
+# 可在此添加环境变量，去掉最左边的（# ）注释即可
+# Notion页面ID,必须
+# NOTION_PAGE_ID= 
+
+# 非必须
+# NEXT_PUBLIC_PSEUDO_STATIC=
+# NEXT_PUBLIC_REVALIDATE_SECOND=  
+# NEXT_PUBLIC_THEME=
+# NEXT_PUBLIC_THEME_SWITCH=
+# NEXT_PUBLIC_LANG=
+# NEXT_PUBLIC_APPEARANCE=
+# NEXT_PUBLIC_APPEARANCE_DARK_TIME=
+# NEXT_PUBLIC_GREETING_WORDS=
+# NEXT_PUBLIC_CUSTOM_MENU=
+# NEXT_PUBLIC_AUTHOR=
+# NEXT_PUBLIC_BIO=
+# NEXT_PUBLIC_LINK=
+# NEXT_PUBLIC_KEYWORD=
+# NEXT_PUBLIC_CONTACT_EMAIL=
+# NEXT_PUBLIC_CONTACT_WEIBO=
+# NEXT_PUBLIC_CONTACT_TWITTER= 
+# NEXT_PUBLIC_CONTACT_GITHUB=
+# NEXT_PUBLIC_CONTACT_TELEGRAM=
+# NEXT_PUBLIC_CONTACT_LINKEDIN=
+# NEXT_PUBLIC_CONTACT_INSTAGRAM=
+# NEXT_PUBLIC_CONTACT_BILIBILI=
+# NEXT_PUBLIC_CONTACT_YOUTUBE=
+# NEXT_PUBLIC_FAVICON=
+# NEXT_PUBLIC_FONT_STYLE=
+# NEXT_PUBLIC_FONT_URL=
+# NEXT_PUBLIC_FONT_SANS=
+# NEXT_PUBLIC_FONT_SERIF=
+# NEXT_PUBLIC_FONT_AWESOME_PATH=
+# NEXT_PUBLIC_PRISM_THEME_PREFIX_PATH=  
+# NEXT_PUBLIC_PRISM_THEME_SWITCH=
+# NEXT_PUBLIC_PRISM_THEME_LIGHT_PATH=   
+# NEXT_PUBLIC_PRISM_THEME_DARK_PATH=
+# NEXT_PUBLIC_CODE_MAC_BAR=
+# NEXT_PUBLIC_CODE_LINE_NUMBERS=  
+# NEXT_PUBLIC_CODE_COLLAPSE=
+# NEXT_PUBLIC_CODE_COLLAPSE_EXPAND_DEFAULT=
+# NEXT_PUBLIC_MERMAID_CDN=
+# NEXT_PUBLIC_QR_CODE_CDN=
+# NEXT_PUBLIC_BACKGROUND_LIGHT=   
+# NEXT_PUBLIC_BACKGROUND_DARK=
+# NEXT_PUBLIC_SUB_PATH=
+# NEXT_PUBLIC_POST_SHARE_BAR=
+# NEXT_PUBLIC_POST_SHARE_SERVICES=
+# NEXT_PUBLIC_POST_URL_PREFIX=  
+# NEXT_PUBLIC_POST_LIST_STYLE=
+# NEXT_PUBLIC_POST_PREVIEW=
+# NEXT_PUBLIC_POST_RECOMMEND_COUNT=
+# NEXT_PUBLIC_POSTS_PER_PAGE=
+# NEXT_PUBLIC_POST_SORT_BY=
+# NEXT_PUBLIC_ALGOLIA_APP_ID=
+# ALGOLIA_ADMIN_APP_KEY=
+# NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_APP_KEY=    
+# NEXT_PUBLIC_ALGOLIA_INDEX=
+# NEXT_PUBLIC_PREVIEW_CATEGORY_COUNT=  
+# NEXT_PUBLIC_PREVIEW_TAG_COUNT=
+# NEXT_PUBLIC_POST_DISABLE_GALLERY_CLICK=   
+# NEXT_PUBLIC_FIREWORKS=
+# NEXT_PUBLIC_FIREWORKS_COLOR=
+# NEXT_PUBLIC_SAKURA=
+# NEXT_PUBLIC_NEST=
+# NEXT_PUBLIC_FLUTTERINGRIBBON=
+# NEXT_PUBLIC_RIBBON=
+# NEXT_PUBLIC_STARRY_SKY=
+# NEXT_PUBLIC_CHATBASE_ID=
+# NEXT_PUBLIC_WEB_WHIZ_ENABLED=
+# NEXT_PUBLIC_WEB_WHIZ_BASE_URL=
+# NEXT_PUBLIC_WEB_WHIZ_CHAT_BOT_ID=  
+# NEXT_PUBLIC_WIDGET_PET=
+# NEXT_PUBLIC_WIDGET_PET_LINK=
+# NEXT_PUBLIC_WIDGET_PET_SWITCH_THEME=
+# NEXT_PUBLIC_MUSIC_PLAYER=
+# NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE=
+# NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY=    
+# NEXT_PUBLIC_MUSIC_PLAYER_LRC_TYPE=
+# NEXT_PUBLIC_MUSIC_PLAYER_CDN_URL=
+# NEXT_PUBLIC_MUSIC_PLAYER_ORDER=
+# NEXT_PUBLIC_MUSIC_PLAYER_AUDIO_LIST=
+# NEXT_PUBLIC_MUSIC_PLAYER_METING=
+# NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER=
+# NEXT_PUBLIC_MUSIC_PLAYER_METING_ID=
+# NEXT_PUBLIC_MUSIC_PLAYER_METING_LRC_TYPE=  
+# NEXT_PUBLIC_COMMENT_ARTALK_SERVER=
+# NEXT_PUBLIC_COMMENT_ARTALK_JS= 
+# NEXT_PUBLIC_COMMENT_ARTALK_CSS=   
+# NEXT_PUBLIC_COMMENT_ENV_ID=  
+# NEXT_PUBLIC_COMMENT_TWIKOO_COUNT_ENABLE=
+# NEXT_PUBLIC_COMMENT_TWIKOO_CDN_URL=
+# NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO=    
+# NEXT_PUBLIC_COMMENT_GISCUS_REPO=
+# NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID=
+# NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID=
+# NEXT_PUBLIC_COMMENT_GISCUS_MAPPING=
+# NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED=
+# NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA=
+# NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION=
+# NEXT_PUBLIC_COMMENT_GISCUS_LANG=     
+# NEXT_PUBLIC_COMMENT_GISCUS_LOADING=
+# NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN=
+# NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID=  
+# NEXT_PUBLIC_COMMENT_CUSDIS_HOST=
+# NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC=
+# NEXT_PUBLIC_COMMENT_GITALK_REPO=
+# NEXT_PUBLIC_COMMENT_GITALK_OWNER=    
+# NEXT_PUBLIC_COMMENT_GITALK_ADMIN=  
+# NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID=
+# NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET=
+# NEXT_PUBLIC_COMMENT_GITALK_JS_CDN_URL=
+# NEXT_PUBLIC_COMMENT_GITALK_CSS_CDN_URL=   
+# NEXT_PUBLIC_COMMENT_GITTER_ROOM=  
+# NEXT_PUBLIC_COMMENT_DAO_VOICE_ID=
+# NEXT_PUBLIC_COMMENT_TIDIO_ID=
+# NEXT_PUBLIC_VALINE_CDN=    
+# NEXT_PUBLIC_VALINE_ID=
+# NEXT_PUBLIC_VALINE_KEY=
+# NEXT_PUBLIC_VALINE_SERVER_URLS=
+# NEXT_PUBLIC_VALINE_PLACEHOLDER=
+# NEXT_PUBLIC_WALINE_SERVER_URL=
+# NEXT_PUBLIC_WALINE_RECENT=
+# NEXT_PUBLIC_WEBMENTION_ENABLE=
+# NEXT_PUBLIC_WEBMENTION_AUTH=
+# NEXT_PUBLIC_WEBMENTION_HOSTNAME=
+# NEXT_PUBLIC_TWITTER_USERNAME=
+# NEXT_PUBLIC_WEBMENTION_TOKEN= 
+# NEXT_PUBLIC_ANALYTICS_VERCEL=    
+# NEXT_PUBLIC_ANALYTICS_BUSUANZI_ENABLE=   
+# NEXT_PUBLIC_ANALYTICS_BAIDU_ID=  
+# NEXT_PUBLIC_ANALYTICS_CNZZ_ID=   
+# NEXT_PUBLIC_ANALYTICS_GOOGLE_ID=
+# NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER=
+# NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER=  
+# NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID=
+# NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION=     
+# NEXT_PUBLIC_SEO_BAIDU_SITE_VERIFICATION=    
+# NEXT_PUBLIC_ADSENSE_GOOGLE_ID=
+# NEXT_PUBLIC_ADSENSE_GOOGLE_TEST=  
+# NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_IN_ARTICLE=
+# NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_FLOW=
+# NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_NATIVE=     
+# NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_AUTO=  
+# NEXT_PUBLIC_WWAD_ID=    
+# NEXT_PUBLIC_WWADS_AD_BLOCK_DETECT=
+# NEXT_PUBLIC_NOTION_PROPERTY_PASSWORD=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE_POST=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE_PAGE=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE_MENU=
+# NEXT_PUBLIC_NOTION_PROPERTY_TYPE_SUB_MENU=
+# NEXT_PUBLIC_NOTION_PROPERTY_TITLE=
+# NEXT_PUBLIC_NOTION_PROPERTY_STATUS=   
+# NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH=
+# NEXT_PUBLIC_NOTION_PROPERTY_STATUS_INVISIBLE=    
+# NEXT_PUBLIC_NOTION_PROPERTY_SUMMARY=  
+# NEXT_PUBLIC_NOTION_PROPERTY_SLUG=
+# NEXT_PUBLIC_NOTION_PROPERTY_CATEGORY=   
+# NEXT_PUBLIC_NOTION_PROPERTY_DATE=
+# NEXT_PUBLIC_NOTION_PROPERTY_TAGS=
+# NEXT_PUBLIC_NOTION_PROPERTY_ICON=
+# NEXT_PUBLIC_ENABLE_RSS=  
+# MAILCHIMP_LIST_ID=
+# MAILCHIMP_API_KEY=    
+# NEXT_PUBLIC_DEBUG=
+# ENABLE_CACHE=
+# VERCEL_ENV=
+# NEXT_PUBLIC_VERSION=
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 943cf303..4ea399c0 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -12,23 +12,23 @@ assignees: tangly1024
 -->
 
 **描述bug**
-简单说明bug的现象、相关的错误提示、日志等
+【此项必填】简单说明bug的现象、相关的错误提示、日志等
 
 **复现步骤**
-出现这个bug的操作步骤
+【此项必填】出现这个bug的操作步骤
 
 **期望的正常结果**
-希望按这个步骤，正常操作结果是什么
+【此项必填】希望按这个步骤，正常操作结果是什么
 
 **截图**
-相关的页面，应该的结果
+【可选】相关的页面，应该的结果
 
 **环境**
 
-- 操作系统: [例如. iOS, Android, macOS, windows]
-- 浏览器 [例如. chrome, safari, firefox]
-- NotionNext版本 [e.g. 3.13.6]
-- 主题 [例如. hexo]
+- 【必填】NotionNext版本 [例如. 4.0.18]
+- 【必填】主题 [例如. hexo]
+- 【可选】操作系统: [例如. iOS, Android, macOS, windows]
+- 【可选】浏览器 [例如. chrome, safari, firefox]
 
 **补充说明**
-与问题相关的其它说明
\ No newline at end of file
+【可选】与问题相关的其它说明
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index 8a50c9d3..402e20f7 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,6 +1,6 @@
 ---
 name: Feature request （新特性建议）
-about: Suggest an idea for Nobelium.
+about: Suggest an idea for Notion Next.
 title: ''
 labels: enhancement
 assignees: tangly1024
diff --git a/README.md b/README.md
index dffdd401..33be50b7 100644
--- a/README.md
+++ b/README.md
@@ -201,6 +201,9 @@
 - **图标**: [Fontawesome](https://fontawesome.com/v6/icons/)
 
 
+## 🔗 友情链接
+- [Elog](https://github.com/LetTTGACO/elog) Markdown 批量导出工具、开放式跨平台博客解决方案，随意组合写作平台(语雀/Notion/FlowUs/飞书)和博客平台(Hexo/Vitepress/Halo/Confluence/WordPress等)
+
 ## License
 
 The MIT License.
diff --git a/blog.config.js b/blog.config.js
index ae020dac..8f35f94d 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -5,10 +5,10 @@ const BLOG = {
         process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5',
   PSEUDO_STATIC: process.env.NEXT_PUBLIC_PSEUDO_STATIC || false, // 伪静态路径，开启后所有文章URL都以 .html 结尾。
   NEXT_REVALIDATE_SECOND: process.env.NEXT_PUBLIC_REVALIDATE_SECOND || 5, // 更新内容缓存间隔 单位(秒)；即每个页面有5秒的纯静态期、此期间无论多少次访问都不会抓取notion数据；调大该值有助于节省Vercel资源、同时提升访问速率，但也会使文章更新有延迟。
-  THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 当前主题，在themes文件夹下可找到所有支持的主题；主题名称就是文件夹名，例如 example,fukasawa,gitbook,heo,hexo,landing,matery,medium,next,nobelium,plog,simple
+  THEME: process.env.NEXT_PUBLIC_THEME || 'simple', // 当前主题，在themes文件夹下可找到所有支持的主题；主题名称就是文件夹名，例如 example,fukasawa,gitbook,heo,hexo,landing,matery,medium,next,nobelium,plog,simple
   THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
   LANG: process.env.NEXT_PUBLIC_LANG || 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
-  SINCE: 2021, // e.g if leave this empty, current year will be used.
+  SINCE: process.env.NEXT_SINCE || 2021, // e.g if leave this empty, current year will be used.
   APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
   APPEARANCE_DARK_TIME: process.env.NEXT_PUBLIC_APPEARANCE_DARK_TIME || [18, 6], // 夜间模式起至时间，false时关闭根据时间自动切换夜间模式
 
@@ -37,6 +37,11 @@ const BLOG = {
 
   BLOG_FAVICON: process.env.NEXT_PUBLIC_FAVICON || '/favicon.ico', // blog favicon 配置, 默认使用 /public/favicon.ico，支持在线图片，如 https://img.imesong.com/favicon.png
 
+  RANDOM_IMAGE_URL: process.env.NEXT_PUBLIC_RANDOM_IMAGE_URL || '', // 随机图片API,如果未配置下面的关键字，主页封面，头像，文章封面图都会被替换为随机图片
+  RANDOM_IMAGE_REPLACE_TEXT: process.env.NEXT_PUBLIC_RANDOM_IMAGE_NOT_REPLACE_TEXT || 'images.unsplash.com', // 触发替换图片的 url 关键字(多个支持用英文逗号分开)，只有图片地址中包含此关键字才会替换为上方随机图片url
+  // eg: images.unsplash.com(notion图床的所有图片都会替换),如果你在 notion 里已经添加了一个随机图片 url，恰巧那个服务跑路或者挂掉，想一键切换所有配图可以将该 url 配置在这里
+  // 默认下会将你上传到 notion的主页封面图和头像也给替换，建议将主页封面图和头像放在其他图床，在 notion 里配置 link 即可。
+
   // START ************网站字体*****************
 
   FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-sans', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
@@ -85,13 +90,14 @@ const BLOG = {
   // END ************网站字体*****************
   CAN_COPY: process.env.NEXT_PUBLIC_CAN_COPY || true, // 是否允许复制页面内容 默认允许，如果设置为false、则全栈禁止复制内容。
   CUSTOM_RIGHT_CLICK_CONTEXT_MENU: process.env.NEXT_PUBLIC_CUSTOM_RIGHT_CLICK_CONTEXT_MENU || true, // 自定义右键菜单，覆盖系统菜单
+  CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH: process.env.NEXT_PUBLIC_CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH || true,
 
   // 自定义外部脚本，外部样式
   CUSTOM_EXTERNAL_JS: [''], // e.g. ['http://xx.com/script.js','http://xx.com/script.js']
   CUSTOM_EXTERNAL_CSS: [''], // e.g. ['http://xx.com/style.css','http://xx.com/style.css']
 
   // 侧栏布局 是否反转(左变右,右变左) 已支持主题: hexo next medium fukasawa example
-  LAYOUT_SIDEBAR_REVERSE: false,
+  LAYOUT_SIDEBAR_REVERSE: process.env.NEXT_PUBLIC_LAYOUT_SIDEBAR_REVERSE || false,
 
   // 一个小插件展示你的facebook fan page~ @see https://tw.andys.pro/article/add-facebook-fanpage-notionnext
   FACEBOOK_PAGE_TITLE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || null, // 邊欄 Facebook Page widget 的標題欄，填''則無標題欄 e.g FACEBOOK 粉絲團'
@@ -179,13 +185,20 @@ const BLOG = {
   STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关
 
   //   ********挂件组件相关********
+  // AI 文章摘要生成 @see https://docs_s.tianli0.top/
+  TianliGPT_CSS: process.env.NEXT_PUBLIC_TIANLI_GPT_CSS || 'https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.15.2/tianli_gpt.css',
+  TianliGPT_JS: process.env.NEXT_PUBLIC_TIANLI_GPT_JS || 'https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.15.2/tianli_gpt.js',
+  TianliGPT_KEY: process.env.NEXT_PUBLIC_TIANLI_GPT_KEY || '',
+
   // Chatbase 是否显示chatbase机器人 https://www.chatbase.co/
   CHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || null,
   // WebwhizAI 机器人 @see https://github.com/webwhiz-ai/webwhiz
   WEB_WHIZ_ENABLED: process.env.NEXT_PUBLIC_WEB_WHIZ_ENABLED || false, // 是否显示
   WEB_WHIZ_BASE_URL: process.env.NEXT_PUBLIC_WEB_WHIZ_BASE_URL || 'https://api.webwhiz.ai', // 可以自建服务器
   WEB_WHIZ_CHAT_BOT_ID: process.env.NEXT_PUBLIC_WEB_WHIZ_CHAT_BOT_ID || null, // 在后台获取ID
-
+  DIFY_CHATBOT_ENABLED: process.env.NEXT_PUBLIC_DIFY_CHATBOT_ENABLED || false,
+  DIFY_CHATBOT_BASE_URL: process.env.NEXT_PUBLIC_DIFY_CHATBOT_BASE_URL || '',
+  DIFY_CHATBOT_TOKEN: process.env.NEXT_PUBLIC_DIFY_CHATBOT_TOKEN || '',
   // 悬浮挂件
   WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
   WIDGET_PET_LINK:
@@ -231,6 +244,8 @@ const BLOG = {
   //   ********挂件组件相关********
   // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
 
+  COMMENT_HIDE_SINGLE_TAB: process.env.NEXT_PUBLIC_COMMENT_HIDE_SINGLE_TAB || false, //Whether hide the tab when there's no tabs. 只有一个评论组件时是否隐藏切换组件的标签页
+
   // artalk 评论插件
   COMMENT_ARTALK_SERVER: process.env.NEXT_PUBLIC_COMMENT_ARTALK_SERVER || '', // ArtalkServert后端地址 https://artalk.js.org/guide/deploy.html
   COMMENT_ARTALK_JS: process.env.NEXT_PUBLIC_COMMENT_ARTALK_JS || 'https://cdnjs.cloudflare.com/ajax/libs/artalk/2.5.5/Artalk.js', // ArtalkServert js cdn
@@ -239,7 +254,7 @@ const BLOG = {
   // twikoo
   COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', // TWIKOO后端地址 腾讯云环境填envId；Vercel环境填域名，教程：https://tangly1024.com/article/notionnext-twikoo
   COMMENT_TWIKOO_COUNT_ENABLE: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_COUNT_ENABLE || false, // 博客列表是否显示评论数
-  COMMENT_TWIKOO_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_CDN_URL || 'https://cdn.staticfile.org/twikoo/1.6.16/twikoo.min.js', // twikoo客户端cdn
+  COMMENT_TWIKOO_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_CDN_URL || 'https://cdn.staticfile.org/twikoo/1.6.17/twikoo.min.js', // twikoo客户端cdn
 
   // utterance
   COMMENT_UTTERRANCES_REPO:
@@ -304,13 +319,11 @@ const BLOG = {
   // HOSTNAME: Webmention绑定之网域，通常即为本站网址
   // TWITTER_USERNAME: 评论显示区域需要的资讯
   // TOKEN: Webmention的API token
-  COMMENT_WEBMENTION: {
-    ENABLE: process.env.NEXT_PUBLIC_WEBMENTION_ENABLE || false,
-    AUTH: process.env.NEXT_PUBLIC_WEBMENTION_AUTH || '',
-    HOSTNAME: process.env.NEXT_PUBLIC_WEBMENTION_HOSTNAME || '',
-    TWITTER_USERNAME: process.env.NEXT_PUBLIC_TWITTER_USERNAME || '',
-    TOKEN: process.env.NEXT_PUBLIC_WEBMENTION_TOKEN || ''
-  },
+  COMMENT_WEBMENTION_ENABLE: process.env.NEXT_PUBLIC_WEBMENTION_ENABLE || false,
+  COMMENT_WEBMENTION_AUTH: process.env.NEXT_PUBLIC_WEBMENTION_AUTH || '',
+  COMMENT_WEBMENTION_HOSTNAME: process.env.NEXT_PUBLIC_WEBMENTION_HOSTNAME || '',
+  COMMENT_WEBMENTION_TWITTER_USERNAME: process.env.NEXT_PUBLIC_TWITTER_USERNAME || '',
+  COMMENT_WEBMENTION_TOKEN: process.env.NEXT_PUBLIC_WEBMENTION_TOKEN || '',
 
   // <---- 评论插件
 
@@ -321,6 +334,13 @@ const BLOG = {
   ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
   ANALYTICS_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX
 
+  // 51la 站点统计 https://www.51.la/
+  ANALYTICS_51LA_ID: process.env.NEXT_PUBLIC_ANALYTICS_51LA_ID || '', // id，在51la后台获取 参阅 https://docs.tangly1024.com/article/notion-next-51-la
+  ANALYTICS_51LA_CK: process.env.NEXT_PUBLIC_ANALYTICS_51LA_CK || '', // ck，在51la后台获取
+
+  // Matomo 网站统计
+  MATOMO_HOST_URL: process.env.NEXT_PUBLIC_MATOMO_HOST_URL || '', // Matomo服务器地址，不带斜杠
+  MATOMO_SITE_ID: process.env.NEXT_PUBLIC_MATOMO_SITE_ID || '', // Matomo网站ID
   // ACKEE网站访客统计工具
   ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.com/tracker.js'
   ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.com , don't end with a slash
@@ -332,6 +352,9 @@ const BLOG = {
   SEO_BAIDU_SITE_VERIFICATION:
         process.env.NEXT_PUBLIC_SEO_BAIDU_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code
 
+  // 微软 Clarity 站点分析
+  CLARITY_ID: process.env.NEXT_PUBLIC_CLARITY_ID || null , // 只需要复制Clarity脚本中的ID部分，ID是一个十位的英文数字组合
+
   // <---- 站点统计
 
   // START---->营收相关
@@ -392,12 +415,14 @@ const BLOG = {
   IMG_LAZY_LOAD_PLACEHOLDER: process.env.NEXT_PUBLIC_IMG_LAZY_LOAD_PLACEHOLDER || 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==', // 懒加载占位图片地址，支持base64或url
   IMG_URL_TYPE: process.env.NEXT_PUBLIC_IMG_TYPE || 'Notion', // 此配置已失效，请勿使用；AMAZON方案不再支持，仅支持Notion方案。 ['Notion','AMAZON'] 站点图片前缀 默认 Notion:(https://notion.so/images/xx) ， AMAZON(https://s3.us-west-2.amazonaws.com/xxx)
   IMG_SHADOW: process.env.NEXT_PUBLIC_IMG_SHADOW || false, // 文章图片是否自动添加阴影
+  IMG_COMPRESS_WIDTH: process.env.NEXT_PUBLIC_IMG_COMPRESS_WIDTH || 800, // Notion图片压缩宽度
 
   // 开发相关
   NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
   ENABLE_CACHE: process.env.ENABLE_CACHE || process.env.npm_lifecycle_event === 'build', // 缓存在开发调试和打包过程中选择性开启，正式部署开启此功能意义不大。
   isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
+  BUNDLE_ANALYZER: process.env.ANALYZE === 'true' || false, // 是否展示编译依赖内容与大小
   VERSION: process.env.NEXT_PUBLIC_VERSION // 版本号
 }
 
diff --git a/components/AOSAnimation.js b/components/AOSAnimation.js
new file mode 100644
index 00000000..c5dd4d92
--- /dev/null
+++ b/components/AOSAnimation.js
@@ -0,0 +1,12 @@
+import AOS from 'aos'
+import { isBrowser } from 'react-notion-x'
+
+/**
+ * 加载滚动动画
+ * https://michalsnik.github.io/aos/
+ */
+export default function AOSAnimation() {
+  if (isBrowser) {
+    AOS.init()
+  }
+}
diff --git a/components/Ackee.js b/components/Ackee.js
index 8a002bc1..2383f982 100644
--- a/components/Ackee.js
+++ b/components/Ackee.js
@@ -1,45 +1,47 @@
 'use strict'
 
 import { useEffect } from 'react'
-import BLOG from '@/blog.config'
 import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
+import { siteConfig } from '@/lib/config'
 const Ackee = () => {
   const router = useRouter()
+  const server = siteConfig('ANALYTICS_ACKEE_DATA_SERVER')
+  const domainId = siteConfig('ANALYTICS_ACKEE_DOMAIN_ID')
+
+  // 或者使用其他依赖数组，根据需要执行 handleAckee
+  useEffect(() => {
+    handleAckeeCallback()
+  }, [router])
 
   // handleAckee 函数
   const handleAckeeCallback = () => {
     handleAckee(
       router.asPath,
       {
-        server: BLOG.ANALYTICS_ACKEE_DATA_SERVER,
-        domainId: BLOG.ANALYTICS_ACKEE_DOMAIN_ID
+        server: server,
+        domainId: domainId
       },
       {
         /*
-         * Enable or disable tracking of personal data.
-         * We recommend to ask the user for permission before turning this option on.
-         */
+                 * Enable or disable tracking of personal data.
+                 * We recommend to ask the user for permission before turning this option on.
+                 */
         detailed: true,
         /*
-        * Enable or disable tracking when on localhost.
-        */
+                * Enable or disable tracking when on localhost.
+                */
         ignoreLocalhost: false,
         /*
-        * Enable or disable the tracking of your own visits.
-        * This is enabled by default, but should be turned off when using a wildcard Access-Control-Allow-Origin header.
-        * Some browsers strictly block third-party cookies. The option won't have an impact when this is the case.
-        */
+                * Enable or disable the tracking of your own visits.
+                * This is enabled by default, but should be turned off when using a wildcard Access-Control-Allow-Origin header.
+                * Some browsers strictly block third-party cookies. The option won't have an impact when this is the case.
+                */
         ignoreOwnVisits: false
       }
     )
   }
 
-  // 或者使用其他依赖数组，根据需要执行 handleAckee
-  useEffect(() => {
-    handleAckeeCallback()
-  }, [router])
-
   return null
 }
 
@@ -53,8 +55,8 @@ export default Ackee
  * @param {Object} environment - Object containing the URL of the Ackee server and the domain id.
  * @param {?Object} options - Ackee options.
  */
-const handleAckee = async function(pathname, environment, options = {}) {
-  await loadExternalResource(BLOG.ANALYTICS_ACKEE_TRACKER, 'js')
+const handleAckee = async function (pathname, environment, options = {}) {
+  await loadExternalResource(siteConfig('ANALYTICS_ACKEE_TRACKER'), 'js')
   const ackeeTracker = window.ackeeTracker
 
   const instance = ackeeTracker?.create(environment.server, options)
diff --git a/components/AlgoliaSearchModal.js b/components/AlgoliaSearchModal.js
index e1ba9f3e..7c6bfdcb 100644
--- a/components/AlgoliaSearchModal.js
+++ b/components/AlgoliaSearchModal.js
@@ -1,10 +1,10 @@
 import { useState, useImperativeHandle, useRef } from 'react'
-import BLOG from '@/blog.config'
 import algoliasearch from 'algoliasearch'
 import replaceSearchResult from '@/components/Mark'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import throttle from 'lodash/throttle'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 结合 Algolia 实现的弹出式搜索框
@@ -31,8 +31,8 @@ export default function AlgoliaSearchModal({ cRef }) {
     }
   })
 
-  const client = algoliasearch(BLOG.ALGOLIA_APP_ID, BLOG.ALGOLIA_SEARCH_ONLY_APP_KEY)
-  const index = client.initIndex(BLOG.ALGOLIA_INDEX)
+  const client = algoliasearch(siteConfig('ALGOLIA_APP_ID'), siteConfig('ALGOLIA_SEARCH_ONLY_APP_KEY'))
+  const index = client.initIndex(siteConfig('ALGOLIA_INDEX'))
 
   /**
    * 搜索
@@ -97,48 +97,79 @@ export default function AlgoliaSearchModal({ cRef }) {
     setIsModalOpen(false)
   }
 
-  if (!BLOG.ALGOLIA_APP_ID) {
+  if (!siteConfig('ALGOLIA_APP_ID')) {
     return <></>
   }
 
   return (
-        <div id='search-wrapper' className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none'} z-30 fixed h-screen w-screen left-0 top-0 mt-12 flex items-start justify-center`}>
-
-            {/* 模态框 */}
-            <div className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10'} flex flex-col justify-between w-full min-h-[10rem] max-w-xl dark:bg-hexo-black-gray dark:border-gray-800 bg-white dark:bg- p-5 rounded-lg z-50 shadow border hover:border-blue-600 duration-300 transition-all `}>
-
-                <div className='flex justify-between items-center'>
-                    <div className='text-2xl text-blue-600 font-bold'>搜索</div>
-                    <div><i className="text-gray-600 fa-solid fa-xmark p-1 cursor-pointer hover:text-blue-600" onClick={closeModal} ></i></div>
-                </div>
-
-                <input type="text" placeholder="在这里输入搜索关键词..." onChange={(e) => handleInputChange(e)}
-                    className="text-black dark:text-gray-200 bg-gray-50 dark:bg-gray-600 outline-blue-500 w-full px-4 my-2 py-1 mb-4 border rounded-md" />
-
-                {/* 标签组 */}
-                <div className='mb-4'>
-                    <TagGroups/>
-                </div>
-
-                <ul>
-                    {searchResults.map((result) => (
-                        <li key={result.objectID} className="replace my-2">
-                            <a href={`${BLOG.SUB_PATH}/${result.slug}`} className="font-bold hover:text-blue-600 text-black dark:text-gray-200">
-                                {result.title}
-                            </a>
-                        </li>
-                    ))}
-                </ul>
-
-                <Pagination totalPage={totalPage} page={page} switchPage={switchPage}/>
-                <div>{totalHit > 0 && <div>共搜索到 {totalHit} 条结果，用时 {useTime} 毫秒</div> }</div>
-                <div className='text-gray-600 mt-2'><span><i className="fa-brands fa-algolia"></i> Algolia 提供搜索服务</span> </div>
-            </div>
-
-            {/* 遮罩 */}
-            <div onClick={closeModal} className="z-30 fixed top-0 left-0 w-full h-full flex items-center justify-center glassmorphism" />
-
+    <div
+      id="search-wrapper"
+      className={`${
+        isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none'
+      } z-30 fixed h-screen w-screen left-0 top-0 mt-12 flex items-start justify-center`}
+    >
+      {/* 模态框 */}
+      <div
+        className={`${
+          isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10'
+        } flex flex-col justify-between w-full min-h-[10rem] max-w-xl dark:bg-hexo-black-gray dark:border-gray-800 bg-white dark:bg- p-5 rounded-lg z-50 shadow border hover:border-blue-600 duration-300 transition-all `}
+      >
+        <div className="flex justify-between items-center">
+          <div className="text-2xl text-blue-600 font-bold">搜索</div>
+          <div>
+            <i
+              className="text-gray-600 fa-solid fa-xmark p-1 cursor-pointer hover:text-blue-600"
+              onClick={closeModal}
+            ></i>
+          </div>
         </div>
+
+        <input
+          type="text"
+          placeholder="在这里输入搜索关键词..."
+          onChange={e => handleInputChange(e)}
+          className="text-black dark:text-gray-200 bg-gray-50 dark:bg-gray-600 outline-blue-500 w-full px-4 my-2 py-1 mb-4 border rounded-md"
+        />
+
+        {/* 标签组 */}
+        <div className="mb-4">
+          <TagGroups />
+        </div>
+
+        <ul>
+          {searchResults.map(result => (
+            <li key={result.objectID} className="replace my-2">
+              <a
+                href={`${siteConfig('SUB_PATH', '')}/${result.slug}`}
+                className="font-bold hover:text-blue-600 text-black dark:text-gray-200"
+              >
+                {result.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+
+        <Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
+        <div>
+          {totalHit > 0 && (
+            <div>
+              共搜索到 {totalHit} 条结果，用时 {useTime} 毫秒
+            </div>
+          )}
+        </div>
+        <div className="text-gray-600 mt-2">
+          <span>
+            <i className="fa-brands fa-algolia"></i> Algolia 提供搜索服务
+          </span>{' '}
+        </div>
+      </div>
+
+      {/* 遮罩 */}
+      <div
+        onClick={closeModal}
+        className="z-30 fixed top-0 left-0 w-full h-full flex items-center justify-center glassmorphism"
+      />
+    </div>
   )
 }
 
diff --git a/components/Artalk.js b/components/Artalk.js
index 0da7734f..e44edaab 100644
--- a/components/Artalk.js
+++ b/components/Artalk.js
@@ -1,27 +1,34 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
-// import { loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
 
 /**
- * Giscus评论 @see https://giscus.app/zh-CN
- * Contribute by @txs https://github.com/txs/NotionNext/commit/1bf7179d0af21fb433e4c7773504f244998678cb
+ * Artalk 自托管评论系统 @see https://artalk.js.org/
  * @returns {JSX.Element}
  * @constructor
  */
 
 const Artalk = ({ siteInfo }) => {
+  const artalkCss = siteConfig('COMMENT_ARTALK_CSS')
+  const artalkServer = siteConfig('COMMENT_ARTALK_SERVER')
+  const artalkLocale = siteConfig('LANG')
+  const site = siteConfig('TITLE')
+
   useEffect(() => {
-    loadExternalResource(BLOG.COMMENT_ARTALK_CSS, 'css')
+    initArtalk()
+  }, [])
+
+  const initArtalk = async () => {
+    await loadExternalResource(artalkCss, 'css')
     window?.Artalk?.init({
-      server: BLOG.COMMENT_ARTALK_SERVER, // 后端地址
+      server: artalkServer, // 后端地址
       el: '#artalk', // 容器元素
-      locale: BLOG.LANG,
+      locale: artalkLocale,
       //   pageKey: '/post/1', // 固定链接 (留空自动获取)
       //   pageTitle: '关于引入 Artalk 的这档子事', // 页面标题 (留空自动获取)
-      site: siteInfo?.title // 你的站点名
+      site: site // 你的站点名
     })
-  }, [])
+  }
   return (
         <div id="artalk"></div>
   )
diff --git a/components/Busuanzi.js b/components/Busuanzi.js
index fec41e5f..cbeb54da 100644
--- a/components/Busuanzi.js
+++ b/components/Busuanzi.js
@@ -2,14 +2,14 @@ import busuanzi from '@/lib/busuanzi'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 // import { useRouter } from 'next/router'
-import React from 'react'
+import { useEffect } from 'react'
 
 let path = ''
 
 export default function Busuanzi () {
   const { theme } = useGlobal()
-  const Router = useRouter()
-  Router.events.on('routeChangeComplete', (url, option) => {
+  const router = useRouter()
+  router.events.on('routeChangeComplete', (url, option) => {
     if (url !== path) {
       path = url
       busuanzi.fetch()
@@ -17,7 +17,7 @@ export default function Busuanzi () {
   })
 
   // 更换主题时更新
-  React.useEffect(() => {
+  useEffect(() => {
     if (theme) {
       busuanzi.fetch()
     }
diff --git a/components/ChatBase.js b/components/ChatBase.js
index 5decc833..b114fdf6 100644
--- a/components/ChatBase.js
+++ b/components/ChatBase.js
@@ -1,17 +1,17 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 这是一个嵌入组件，可以在任意位置全屏显示您的chat-base对话框
  * 暂时没有页面引用
- * 因为您可以直接用内嵌网页的方式放入您的notion中 https://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}
+ * 因为您可以直接用内嵌网页的方式放入您的notion中 https://www.chatbase.co/chatbot-iframe/${siteConfig('CHATBASE_ID')}
  */
 export default function ChatBase() {
-  if (!BLOG.CHATBASE_ID) {
+  if (!siteConfig('CHATBASE_ID')) {
     return <></>
   }
 
   return <iframe
-        src={`https://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}`}
+        src={`https://www.chatbase.co/chatbot-iframe/${siteConfig('CHATBASE_ID')}`}
         width="100%"
         style={{ height: '100%', minHeight: '700px' }}
         frameborder="0"
diff --git a/components/Comment.js b/components/Comment.js
index 6be4bc64..4f4107b8 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -1,9 +1,9 @@
-import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import Tabs from '@/components/Tabs'
-import { isBrowser } from '@/lib/utils'
+import { isBrowser, isSearchEngineBot } from '@/lib/utils'
 import { useRouter } from 'next/router'
 import Artalk from './Artalk'
+import { siteConfig } from '@/lib/config'
 
 const WalineComponent = dynamic(
   () => {
@@ -55,13 +55,6 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
   ssr: false
 })
 
-/**
- * 是否有评论
- */
-export const commentEnable = BLOG.COMMENT_TWIKOO_ENV_ID || BLOG.COMMENT_WALINE_SERVER_URL || BLOG.COMMENT_VALINE_APP_ID ||
-BLOG.COMMENT_GISCUS_REPO || BLOG.COMMENT_CUSDIS_APP_ID || BLOG.COMMENT_UTTERRANCES_REPO ||
- BLOG.COMMENT_GITALK_CLIENT_ID || BLOG.COMMENT_WEBMENTION.ENABLE
-
 /**
  * 评论组件
  * @param {*} param0
@@ -70,6 +63,21 @@ BLOG.COMMENT_GISCUS_REPO || BLOG.COMMENT_CUSDIS_APP_ID || BLOG.COMMENT_UTTERRANC
 const Comment = ({ siteInfo, frontMatter, className }) => {
   const router = useRouter()
 
+  const COMMENT_ARTALK_SERVER = siteConfig('COMMENT_ARTALK_SERVER')
+  const COMMENT_TWIKOO_ENV_ID = siteConfig('COMMENT_TWIKOO_ENV_ID')
+  const COMMENT_WALINE_SERVER_URL = siteConfig('COMMENT_WALINE_SERVER_URL')
+  const COMMENT_VALINE_APP_ID = siteConfig('COMMENT_VALINE_APP_ID')
+  const COMMENT_GISCUS_REPO = siteConfig('COMMENT_GISCUS_REPO')
+  const COMMENT_CUSDIS_APP_ID = siteConfig('COMMENT_CUSDIS_APP_ID')
+  const COMMENT_UTTERRANCES_REPO = siteConfig('COMMENT_UTTERRANCES_REPO')
+  const COMMENT_GITALK_CLIENT_ID = siteConfig('COMMENT_GITALK_CLIENT_ID')
+  const COMMENT_WEBMENTION_ENABLE = siteConfig('COMMENT_WEBMENTION_ENABLE')
+
+  if (isSearchEngineBot()) {
+    return null
+  }
+
+  // 当连接中有特殊参数时跳转到评论区
   if (isBrowser && ('giscus' in router.query || router.query.target === 'comment')) {
     setTimeout(() => {
       const url = router.asPath.replace('?target=comment', '')
@@ -83,47 +91,47 @@ const Comment = ({ siteInfo, frontMatter, className }) => {
   }
 
   return (
-    <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} />
-            </div>)}
+        <div key={frontMatter?.id} id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
+            <Tabs>
+                {COMMENT_ARTALK_SERVER && (<div key='Artalk'>
+                    <Artalk />
+                </div>)}
 
-            {BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
-                <TwikooCompenent />
-            </div>)}
+                {COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
+                    <TwikooCompenent />
+                </div>)}
 
-            {BLOG.COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
-                <WalineComponent />
-            </div>)}
+                {COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
+                    <WalineComponent />
+                </div>)}
 
-            {BLOG.COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
-                <ValineComponent path={frontMatter.id} />
-            </div>)}
+                {COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
+                    <ValineComponent path={frontMatter.id} />
+                </div>)}
 
-            {BLOG.COMMENT_GISCUS_REPO && (
-                <div key="Giscus">
-                    <GiscusComponent className="px-2" />
-                </div>
-            )}
+                {COMMENT_GISCUS_REPO && (
+                    <div key="Giscus">
+                        <GiscusComponent className="px-2" />
+                    </div>
+                )}
 
-            {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-                <CusdisComponent frontMatter={frontMatter} />
-            </div>)}
+                {COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
+                    <CusdisComponent frontMatter={frontMatter} />
+                </div>)}
 
-            {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
-                <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-            </div>)}
+                {COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
+                    <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+                </div>)}
 
-            {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
-                <GitalkComponent frontMatter={frontMatter} />
-            </div>)}
+                {COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
+                    <GitalkComponent frontMatter={frontMatter} />
+                </div>)}
 
-            {BLOG.COMMENT_WEBMENTION.ENABLE && (<div key='WebMention'>
-                <WebMentionComponent frontMatter={frontMatter} className="px-2" />
-            </div>)}
-        </Tabs>
-    </div>
+                {COMMENT_WEBMENTION_ENABLE && (<div key='WebMention'>
+                    <WebMentionComponent frontMatter={frontMatter} className="px-2" />
+                </div>)}
+            </Tabs>
+        </div>
   )
 }
 
diff --git a/components/CommonHead.js b/components/CommonHead.js
index 24bfae69..1aeb36dd 100644
--- 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}
diff --git a/components/CommonScript.js b/components/CommonScript.js
deleted file mode 100644
index 2d6afe14..00000000
--- a/components/CommonScript.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import BLOG from '@/blog.config'
-
-/**
- * 第三方代码 统计脚本
- * @returns {JSX.Element}
- * @constructor
- */
-const CommonScript = () => {
-  return (<>
-
-    {BLOG.CHATBASE_ID && (<>
-        <script id={BLOG.CHATBASE_ID} src="https://www.chatbase.co/embed.min.js" defer/>
-        <script async dangerouslySetInnerHTML={{
-          __html: `
-             window.chatbaseConfig = {
-                chatbotId: "${BLOG.CHATBASE_ID}",
-            }
-        `
-        }}/>
-    </>)}
-
-    {BLOG.COMMENT_DAO_VOICE_ID && (<>
-      {/* DaoVoice 反馈 */}
-      <script async dangerouslySetInnerHTML={{
-        __html: `
-                  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/daf1a94b.js","daovoice")
-                  `
-      }}
-      />
-      <script async dangerouslySetInnerHTML={{
-        __html: `
-                 daovoice('init', {
-                    app_id: "${BLOG.COMMENT_DAO_VOICE_ID}"
-                  });
-                  daovoice('update');
-                  `
-      }}
-      />
-    </>)}
-
-    {BLOG.AD_WWADS_ID && <script type="text/javascript" charSet="UTF-8" src="https://cdn.wwads.cn/js/makemoney.js" async></script>}
-
-    {BLOG.COMMENT_CUSDIS_APP_ID && <script defer src={`https://cusdis.com/js/widget/lang/${BLOG.LANG.toLowerCase()}.js`} />}
-
-    {BLOG.COMMENT_TWIKOO_ENV_ID && <script defer src={BLOG.COMMENT_TWIKOO_CDN_URL}/> }
-
-    {BLOG.COMMENT_ARTALK_SERVER && <script defer src={BLOG.COMMENT_ARTALK_JS}/> }
-
-    {BLOG.COMMENT_TIDIO_ID && <script async src={`//code.tidio.co/${BLOG.COMMENT_TIDIO_ID}.js`} />}
-
-    {/* gitter聊天室 */}
-    {BLOG.COMMENT_GITTER_ROOM && (<>
-      <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer/>
-      <script async dangerouslySetInnerHTML={{
-        __html: `
-                ((window.gitter = {}).chat = {}).options = {
-                  room: '${BLOG.COMMENT_GITTER_ROOM}'
-                };
-                `
-      }}/>
-    </>)}
-
-    {/* 代码统计 */}
-    {/* ackee统计脚本 */}
-    {/* {BLOG.ANALYTICS_ACKEE_TRACKER && (
-      <script async src={BLOG.ANALYTICS_ACKEE_TRACKER}
-              data-ackee-server={BLOG.ANALYTICS_ACKEE_DATA_SERVER}
-              data-ackee-domain-id={BLOG.ANALYTICS_ACKEE_DOMAIN_ID}
-      />
-    )} */}
-
-    {/* 百度统计 */}
-    {BLOG.ANALYTICS_BAIDU_ID && (
-      <script async
-              dangerouslySetInnerHTML={{
-                __html: `
-              var _hmt = _hmt || [];
-              (function() {
-                var hm = document.createElement("script");
-                hm.src = "https://hm.baidu.com/hm.js?${BLOG.ANALYTICS_BAIDU_ID}";
-                var s = document.getElementsByTagName("script")[0]; 
-                s.parentNode.insertBefore(hm, s);
-              })();
-              `
-              }}
-      />
-    )}
-
-    {/* 站长统计 */}
-    {BLOG.ANALYTICS_CNZZ_ID && (
-      <script async
-              dangerouslySetInnerHTML={{
-                __html: `
-              document.write(unescape("%3Cspan style='display:none' id='cnzz_stat_icon_${BLOG.ANALYTICS_CNZZ_ID}'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D${BLOG.ANALYTICS_CNZZ_ID}' type='text/javascript'%3E%3C/script%3E"));
-              `
-              }}
-      />
-    )}
-
-    {/* 谷歌统计 */}
-    {BLOG.ANALYTICS_GOOGLE_ID && (<>
-      <script async
-              src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
-      />
-      <script async
-              dangerouslySetInnerHTML={{
-                __html: `
-                    window.dataLayer = window.dataLayer || [];
-                    function gtag(){dataLayer.push(arguments);}
-                    gtag('js', new Date());
-                    gtag('config', '${BLOG.ANALYTICS_GOOGLE_ID}', {
-                      page_path: window.location.pathname,
-                    });
-                  `
-              }}
-      />
-    </>)}
-
-    {/* 引入音乐播放 */}
-    {JSON.parse(BLOG.MUSIC_PLAYER) && <script async src={BLOG.MUSIC_PLAYER_CDN_URL} />}
-    {JSON.parse(BLOG.MUSIC_PLAYER) && JSON.parse(BLOG.MUSIC_PLAYER_METING) && <script async src="https://cdnjs.cloudflare.com/ajax/libs/meting/2.0.1/Meting.min.js" />}
-  </>)
-}
-
-export default CommonScript
diff --git a/components/CusdisComponent.js b/components/CusdisComponent.js
index ad780aea..148ee0c7 100644
--- a/components/CusdisComponent.js
+++ b/components/CusdisComponent.js
@@ -1,28 +1,34 @@
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { loadExternalResource } from '@/lib/utils'
+import { siteConfig } from '@/lib/config'
 
 const CusdisComponent = ({ frontMatter }) => {
-  const { locale } = useGlobal()
   const router = useRouter()
-  const { isDarkMode } = useGlobal()
+  const { isDarkMode, lang } = useGlobal()
+  const src = siteConfig('COMMENT_CUSDIS_SCRIPT_SRC')
+  const i18nForCusdis = siteConfig('LANG').toLowerCase().indexOf('zh') === 0 ? siteConfig('LANG').toLowerCase() : siteConfig('LANG').toLowerCase().substring(0, 2)
+  const langCDN = siteConfig('COMMENT_CUSDIS_LANG_SRC', `https://cusdis.com/js/widget/lang/${i18nForCusdis}.js`)
 
   //   处理cusdis主题
   useEffect(() => {
-    loadExternalResource(BLOG.COMMENT_CUSDIS_SCRIPT_SRC, 'js').then(url => {
-      const CUSDIS = window.CUSDIS
-      CUSDIS?.initial()
-    })
-  }, [isDarkMode])
+    loadCusdis()
+  }, [isDarkMode, lang])
+
+  const loadCusdis = async () => {
+    await loadExternalResource(langCDN, 'js')
+    await loadExternalResource(src, 'js')
+
+    window?.CUSDIS?.initial()
+  }
 
   return <div id="cusdis_thread"
-        lang={locale.LOCALE.toLowerCase()}
-        data-host={BLOG.COMMENT_CUSDIS_HOST}
-        data-app-id={BLOG.COMMENT_CUSDIS_APP_ID}
+        lang={lang.toLowerCase()}
+        data-host={siteConfig('COMMENT_CUSDIS_HOST')}
+        data-app-id={siteConfig('COMMENT_CUSDIS_APP_ID')}
         data-page-id={frontMatter.id}
-        data-page-url={BLOG.LINK + router.asPath}
+        data-page-url={siteConfig('LINK') + router.asPath}
         data-page-title={frontMatter.title}
         data-theme={isDarkMode ? 'dark' : 'light'}
     ></div>
diff --git a/components/CustomContextMenu.js b/components/CustomContextMenu.js
index 2d0634f6..bf396d39 100644
--- a/components/CustomContextMenu.js
+++ b/components/CustomContextMenu.js
@@ -3,8 +3,8 @@ import { useRouter } from 'next/router'
 import { useEffect, useState, useRef, useLayoutEffect } from 'react'
 import { useGlobal } from '@/lib/global'
 import { saveDarkModeToCookies, THEMES } from '@/themes/theme'
-import BLOG from '@/blog.config'
 import useWindowSize from '@/hooks/useWindowSize'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 自定义右键菜单
@@ -28,7 +28,7 @@ export default function CustomContextMenu(props) {
   function handleJumpToRandomPost() {
     const randomIndex = Math.floor(Math.random() * latestPosts.length)
     const randomPost = latestPosts[randomIndex]
-    router.push(`${BLOG.SUB_PATH}/${randomPost?.slug}`)
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
   }
 
   useLayoutEffect(() => {
@@ -162,10 +162,12 @@ export default function CustomContextMenu(props) {
                         {isDarkMode ? <i className="fa-regular fa-sun mr-2" /> : <i className="fa-regular fa-moon mr-2" />}
                         <div className='whitespace-nowrap'> {isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE}</div>
                     </div>
+          {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH') && (
                     <div onClick={handeChangeTheme} title={locale.MENU.THEME_SWITCH} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
                         <i className="fa-solid fa-palette mr-2" />
                         <div className='whitespace-nowrap'>{locale.MENU.THEME_SWITCH}</div>
                     </div>
+          )}
                 </div>
 
             </div>
diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index aaeed000..0d875fa7 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -1,5 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { saveDarkModeToCookies } from '@/themes/theme'
 import { Moon, Sun } from './HeroIcons'
 import { useImperativeHandle } from 'react'
 
@@ -8,7 +7,7 @@ import { useImperativeHandle } from 'react'
  */
 const DarkModeButton = (props) => {
   const { cRef, className } = props
-  const { isDarkMode, updateDarkMode } = useGlobal()
+  const { isDarkMode, toggleDarkMode } = useGlobal()
 
   /**
    * 对外暴露方法
@@ -16,22 +15,12 @@ const DarkModeButton = (props) => {
   useImperativeHandle(cRef, () => {
     return {
       handleChangeDarkMode: () => {
-        handleChangeDarkMode()
+        toggleDarkMode()
       }
     }
   })
 
-  // 用户手动设置主题
-  const handleChangeDarkMode = () => {
-    const newStatus = !isDarkMode
-    saveDarkModeToCookies(newStatus)
-    updateDarkMode(newStatus)
-    const htmlElement = document.getElementsByTagName('html')[0]
-    htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
-    htmlElement.classList?.add(newStatus ? 'dark' : 'light')
-  }
-
-  return <div onClick={handleChangeDarkMode} className={`${className || ''} flex justify-center dark:text-gray-200 text-gray-800`}>
+  return <div onClick={toggleDarkMode} className={`${className || ''} flex justify-center dark:text-gray-200 text-gray-800`}>
         <div id='darkModeButton' className=' hover:scale-110 cursor-pointer transform duration-200 w-5 h-5'> {isDarkMode ? <Sun /> : <Moon />}</div>
     </div>
 }
diff --git a/components/DebugPanel.js b/components/DebugPanel.js
index 026b5ee0..845da502 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,14 +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))
-    // updateThemeConfig(Object.assign({}, ThemeMap[BLOG.THEME].THEME_CONFIG))
+    updateSiteConfig(Object.assign({}, siteConfigMap()))
   }, [])
 
   function toggleShow() {
@@ -71,7 +72,7 @@ const DebugPanel = () => {
                     <div className='flex'>
                         <Select
                             label={locale.COMMON.THEME_SWITCH}
-                            value={theme}
+                            value={currentTheme}
                             options={themeOptions}
                             onChange={handleUpdateDebugTheme}
                         />
diff --git a/components/DifyChatbot.js b/components/DifyChatbot.js
new file mode 100644
index 00000000..c954a872
--- /dev/null
+++ b/components/DifyChatbot.js
@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { siteConfig } from '@/lib/config';
+
+export default function DifyChatbot() {
+  useEffect(() => {
+    // 这里使用 siteConfig() 函数调用来获取配置值
+    if (!siteConfig('DIFY_CHATBOT_ENABLED')) {
+      return;
+    }
+
+    // 配置 DifyChatbot，同样需要调用 siteConfig() 获取相应的配置值
+    window.difyChatbotConfig = {
+      token: siteConfig('DIFY_CHATBOT_TOKEN'),
+      baseUrl: siteConfig('DIFY_CHATBOT_BASE_URL')
+    };
+
+    // 加载 DifyChatbot 脚本
+    const script = document.createElement('script');
+    script.src = `${siteConfig('DIFY_CHATBOT_BASE_URL')}/embed.min.js`; // 注意调用 siteConfig()
+    script.id = siteConfig('DIFY_CHATBOT_TOKEN'); // 注意调用 siteConfig()
+    script.defer = true;
+    document.body.appendChild(script);
+
+    return () => {
+      // 在组件卸载时清理 script 标签
+      const existingScript = document.getElementById(siteConfig('DIFY_CHATBOT_TOKEN')); // 注意调用 siteConfig()
+      if (existingScript) document.body.removeChild(existingScript);
+    };
+  }, []); // 注意依赖数组为空，意味着脚本将仅在加载页面时执行一次
+
+  return null;
+}
diff --git a/components/DisableCopy.js b/components/DisableCopy.js
index 80860714..9bc2cb9e 100644
--- a/components/DisableCopy.js
+++ b/components/DisableCopy.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useEffect } from 'react'
 
 /**
@@ -6,7 +6,7 @@ import { useEffect } from 'react'
  */
 export default function DisableCopy() {
   useEffect(() => {
-    if (!JSON.parse(BLOG.CAN_COPY)) {
+    if (!JSON.parse(siteConfig('CAN_COPY'))) {
       // 全栈添加禁止复制的样式
       document.getElementsByTagName('html')[0].classList.add('forbid-copy')
       // 监听复制事件
diff --git a/components/Equation.js b/components/Equation.js
index 4872ad87..86685d62 100644
--- a/components/Equation.js
+++ b/components/Equation.js
@@ -8,8 +8,12 @@ const katexSettings = {
   strict: false
 }
 
+/**
+ * 数学公式
+ * @param {} param0
+ * @returns
+ */
 export const Equation = ({ block, math, inline = false, className, ...rest }) => {
-//   const { recordMap } = useNotionContext()
   math = math || getBlockTitle(block, null)
   if (!math) return null
 
diff --git a/components/ExternalPlugins.js b/components/ExternalPlugins.js
index 5b771fbb..768cc384 100644
--- a/components/ExternalPlugins.js
+++ b/components/ExternalPlugins.js
@@ -1,17 +1,12 @@
-import BLOG from 'blog.config'
+import { siteConfig } from '@/lib/config'
 import dynamic from 'next/dynamic'
+import LA51 from './LA51'
 import WebWhiz from './Webwhiz'
+import TianLiGPT from './TianliGPT'
+import { GlobalStyle } from './GlobalStyle'
 
-// import TwikooCommentCounter from '@/components/TwikooCommentCounter'
-// import { DebugPanel } from '@/components/DebugPanel'
-// import { ThemeSwitch } from '@/components/ThemeSwitch'
-// import { Fireworks } from '@/components/Fireworks'
-// import { Nest } from '@/components/Nest'
-// import { FlutteringRibbon } from '@/components/FlutteringRibbon'
-// import { Ribbon } from '@/components/Ribbon'
-// import { Sakura } from '@/components/Sakura'
-// import { StarrySky } from '@/components/StarrySky'
-// import { Analytics } from '@vercel/analytics/react'
+import { CUSTOM_EXTERNAL_CSS, CUSTOM_EXTERNAL_JS, IMG_SHADOW } from '@/blog.config'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
 
 const TwikooCommentCounter = dynamic(() => import('@/components/TwikooCommentCounter'), { ssr: false })
 const DebugPanel = dynamic(() => import('@/components/DebugPanel'), { ssr: false })
@@ -22,6 +17,7 @@ const FlutteringRibbon = dynamic(() => import('@/components/FlutteringRibbon'),
 const Ribbon = dynamic(() => import('@/components/Ribbon'), { ssr: false })
 const Sakura = dynamic(() => import('@/components/Sakura'), { ssr: false })
 const StarrySky = dynamic(() => import('@/components/StarrySky'), { ssr: false })
+const DifyChatbot = dynamic(() => import('@/components/DifyChatbot'), { ssr: false });
 const Analytics = dynamic(() => import('@vercel/analytics/react').then(async (m) => { return m.Analytics }), { ssr: false })
 const MusicPlayer = dynamic(() => import('@/components/Player'), { ssr: false })
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
@@ -33,35 +29,262 @@ const VConsole = dynamic(() => import('@/components/VConsole'), { ssr: false })
 const CustomContextMenu = dynamic(() => import('@/components/CustomContextMenu'), { ssr: false })
 const DisableCopy = dynamic(() => import('@/components/DisableCopy'), { ssr: false })
 const AdBlockDetect = dynamic(() => import('@/components/AdBlockDetect'), { ssr: false })
+const LoadingProgress = dynamic(() => import('@/components/LoadingProgress'), { ssr: false })
+const AosAnimation = dynamic(() => import('@/components/AOSAnimation'), { ssr: false })
+
 /**
- * 各种第三方组件
+ * 各种插件脚本
  * @param {*} props
  * @returns
  */
 const ExternalPlugin = (props) => {
+  const DISABLE_PLUGIN = siteConfig('DISABLE_PLUGIN')
+  const THEME_SWITCH = siteConfig('THEME_SWITCH')
+  const DEBUG = siteConfig('DEBUG')
+  const ANALYTICS_ACKEE_TRACKER = siteConfig('ANALYTICS_ACKEE_TRACKER')
+  const ANALYTICS_VERCEL = siteConfig('ANALYTICS_VERCEL')
+  const ANALYTICS_BUSUANZI_ENABLE = siteConfig('ANALYTICS_BUSUANZI_ENABLE')
+  const ADSENSE_GOOGLE_ID = siteConfig('ADSENSE_GOOGLE_ID')
+  const FACEBOOK_APP_ID = siteConfig('FACEBOOK_APP_ID')
+  const FACEBOOK_PAGE_ID = siteConfig('FACEBOOK_PAGE_ID')
+  const FIREWORKS = siteConfig('FIREWORKS')
+  const SAKURA = siteConfig('SAKURA')
+  const STARRY_SKY = siteConfig('STARRY_SKY')
+  const MUSIC_PLAYER = siteConfig('MUSIC_PLAYER')
+  const NEST = siteConfig('NEST')
+  const FLUTTERINGRIBBON = siteConfig('FLUTTERINGRIBBON')
+  const COMMENT_TWIKOO_COUNT_ENABLE = siteConfig('COMMENT_TWIKOO_COUNT_ENABLE')
+  const RIBBON = siteConfig('RIBBON')
+  const CUSTOM_RIGHT_CLICK_CONTEXT_MENU = siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU')
+  const CAN_COPY = siteConfig('CAN_COPY')
+  const WEB_WHIZ_ENABLED = siteConfig('WEB_WHIZ_ENABLED')
+  const AD_WWADS_BLOCK_DETECT = siteConfig('AD_WWADS_BLOCK_DETECT')
+  const CHATBASE_ID = siteConfig('CHATBASE_ID')
+  const COMMENT_DAO_VOICE_ID = siteConfig('COMMENT_DAO_VOICE_ID')
+  const AD_WWADS_ID = siteConfig('AD_WWADS_ID')
+  const COMMENT_TWIKOO_ENV_ID = siteConfig('COMMENT_TWIKOO_ENV_ID')
+  const COMMENT_TWIKOO_CDN_URL = siteConfig('COMMENT_TWIKOO_CDN_URL')
+  const COMMENT_ARTALK_SERVER = siteConfig('COMMENT_ARTALK_SERVER')
+  const COMMENT_ARTALK_JS = siteConfig('COMMENT_ARTALK_JS')
+  const COMMENT_TIDIO_ID = siteConfig('COMMENT_TIDIO_ID')
+  const COMMENT_GITTER_ROOM = siteConfig('COMMENT_GITTER_ROOM')
+  const ANALYTICS_BAIDU_ID = siteConfig('ANALYTICS_BAIDU_ID')
+  const ANALYTICS_CNZZ_ID = siteConfig('ANALYTICS_CNZZ_ID')
+  const ANALYTICS_GOOGLE_ID = siteConfig('ANALYTICS_GOOGLE_ID')
+  const MATOMO_HOST_URL = siteConfig('MATOMO_HOST_URL')
+  const MATOMO_SITE_ID = siteConfig('MATOMO_SITE_ID')
+  const ANALYTICS_51LA_ID = siteConfig('ANALYTICS_51LA_ID')
+  const ANALYTICS_51LA_CK = siteConfig('ANALYTICS_51LA_CK')
+  const DIFY_CHATBOT_ENABLED = siteConfig('DIFY_CHATBOT_ENABLED')
+  const TIANLI_KEY = siteConfig('TianliGPT_KEY')
+  const GLOBAL_JS = siteConfig('GLOBAL_JS')
+  const CLARITY_ID = siteConfig('CLARITY_ID')
+
+  // 自定义样式css和js引入
+  if (isBrowser) {
+    // 初始化AOS动画
+    // 静态导入本地自定义样式
+    loadExternalResource('/css/custom.css', 'css')
+    loadExternalResource('/js/custom.js', 'js')
+
+    // 自动添加图片阴影
+    if (IMG_SHADOW) {
+      loadExternalResource('/css/img-shadow.css', 'css')
+    }
+
+    // 导入外部自定义脚本
+    if (CUSTOM_EXTERNAL_JS && CUSTOM_EXTERNAL_JS.length > 0) {
+      for (const url of CUSTOM_EXTERNAL_JS) {
+        loadExternalResource(url, 'js')
+      }
+    }
+
+    // 导入外部自定义样式
+    if (CUSTOM_EXTERNAL_CSS && CUSTOM_EXTERNAL_CSS.length > 0) {
+      for (const url of CUSTOM_EXTERNAL_CSS) {
+        loadExternalResource(url, 'css')
+      }
+    }
+  }
+
+  if (DISABLE_PLUGIN) {
+    return null
+  }
+
   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/>}
-          <VConsole/>
-      </>
+
+        {/* 全局样式嵌入 */}
+        <GlobalStyle/>
+
+        {THEME_SWITCH && <ThemeSwitch />}
+        {DEBUG && <DebugPanel />}
+        {ANALYTICS_ACKEE_TRACKER && <Ackee />}
+        {ANALYTICS_GOOGLE_ID && <Gtag />}
+        {ANALYTICS_VERCEL && <Analytics />}
+        {ANALYTICS_BUSUANZI_ENABLE && <Busuanzi />}
+        {ADSENSE_GOOGLE_ID && <GoogleAdsense />}
+        {FACEBOOK_APP_ID && FACEBOOK_PAGE_ID && <Messenger />}
+        {FIREWORKS && <Fireworks />}
+        {SAKURA && <Sakura />}
+        {STARRY_SKY && <StarrySky />}
+        {MUSIC_PLAYER && <MusicPlayer />}
+        {NEST && <Nest />}
+        {FLUTTERINGRIBBON && <FlutteringRibbon />}
+        {COMMENT_TWIKOO_COUNT_ENABLE && <TwikooCommentCounter {...props} />}
+        {RIBBON && <Ribbon />}
+        {DIFY_CHATBOT_ENABLED && <DifyChatbot />}
+        {CUSTOM_RIGHT_CLICK_CONTEXT_MENU && <CustomContextMenu {...props} />}
+        {!CAN_COPY && <DisableCopy />}
+        {WEB_WHIZ_ENABLED && <WebWhiz />}
+        {AD_WWADS_BLOCK_DETECT && <AdBlockDetect />}
+        {TIANLI_KEY && <TianLiGPT/>}
+        <VConsole />
+        <LoadingProgress />
+        <AosAnimation />
+        {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && <LA51/>}
+
+        {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && (<>
+            <script id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js" defer/>
+            {/* <script async dangerouslySetInnerHTML={{
+              __html: `
+                    LA.init({id:"${ANALYTICS_51LA_ID}",ck:"${ANALYTICS_51LA_CK}",hashMode:true,autoTrack:true})
+                    `
+            }} /> */}
+        </>)}
+
+        {/* 注入JS脚本 */}
+        {GLOBAL_JS && <script async dangerouslySetInnerHTML={{
+          __html: GLOBAL_JS
+        }} />}
+
+        {CHATBASE_ID && (<>
+            <script id={CHATBASE_ID} src="https://www.chatbase.co/embed.min.js" defer />
+            <script async dangerouslySetInnerHTML={{
+              __html: `
+                    window.chatbaseConfig = {
+                        chatbotId: "${CHATBASE_ID}",
+                        }
+                    `
+            }} />
+        </>)}
+
+        {CLARITY_ID && (<>
+          <script async dangerouslySetInnerHTML={{
+            __html: `
+                (function(c,l,a,r,i,t,y){
+                    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+                })(window, document, "clarity", "script", "${CLARITY_ID}");
+                `
+          }} />
+        </>)}
+
+        {COMMENT_DAO_VOICE_ID && (<>
+            {/* DaoVoice 反馈 */}
+            <script async dangerouslySetInnerHTML={{
+              __html: `
+              (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/daf1a94b.js","daovoice")
+              `
+            }}
+            />
+            <script async dangerouslySetInnerHTML={{
+              __html: `
+             daovoice('init', {
+                app_id: "${COMMENT_DAO_VOICE_ID}"
+              });
+              daovoice('update');
+              `
+            }}
+            />
+        </>)}
+
+        {AD_WWADS_ID && <script type="text/javascript" src="https://cdn.wwads.cn/js/makemoney.js" async></script>}
+
+        {COMMENT_TWIKOO_ENV_ID && <script defer src={COMMENT_TWIKOO_CDN_URL} />}
+
+        {COMMENT_ARTALK_SERVER && <script defer src={COMMENT_ARTALK_JS} />}
+
+        {COMMENT_TIDIO_ID && <script async src={`//code.tidio.co/${COMMENT_TIDIO_ID}.js`} />}
+
+        {/* gitter聊天室 */}
+        {COMMENT_GITTER_ROOM && (<>
+            <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer />
+            <script async dangerouslySetInnerHTML={{
+              __html: `
+            ((window.gitter = {}).chat = {}).options = {
+              room: '${COMMENT_GITTER_ROOM}'
+            };
+            `
+            }} />
+        </>)}
+
+        {/* 百度统计 */}
+        {ANALYTICS_BAIDU_ID && (
+            <script async
+                dangerouslySetInnerHTML={{
+                  __html: `
+          var _hmt = _hmt || [];
+          (function() {
+            var hm = document.createElement("script");
+            hm.src = "https://hm.baidu.com/hm.js?${ANALYTICS_BAIDU_ID}";
+            var s = document.getElementsByTagName("script")[0]; 
+            s.parentNode.insertBefore(hm, s);
+          })();
+          `
+                }}
+            />
+        )}
+
+        {/* 站长统计 */}
+        {ANALYTICS_CNZZ_ID && (
+            <script async
+                dangerouslySetInnerHTML={{
+                  __html: `
+          document.write(unescape("%3Cspan style='display:none' id='cnzz_stat_icon_${ANALYTICS_CNZZ_ID}'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D${ANALYTICS_CNZZ_ID}' type='text/javascript'%3E%3C/script%3E"));
+          `
+                }}
+            />
+        )}
+
+        {/* 谷歌统计 */}
+        {ANALYTICS_GOOGLE_ID && (<>
+            <script async
+                src={`https://www.googletagmanager.com/gtag/js?id=${ANALYTICS_GOOGLE_ID}`}
+            />
+            <script async
+                dangerouslySetInnerHTML={{
+                  __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${ANALYTICS_GOOGLE_ID}', {
+                  page_path: window.location.pathname,
+                });
+              `
+                }}
+            />
+        </>)}
+
+        {/* Matomo 统计 */}
+        {MATOMO_HOST_URL && MATOMO_SITE_ID && (
+            <script async dangerouslySetInnerHTML={{
+              __html: `
+              var _paq = window._paq = window._paq || [];
+              _paq.push(['trackPageView']);
+              _paq.push(['enableLinkTracking']);
+              (function() {
+                var u="//${MATOMO_HOST_URL}/";
+                _paq.push(['setTrackerUrl', u+'matomo.php']);
+                _paq.push(['setSiteId', '${MATOMO_SITE_ID}']);
+                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+              })();
+            `
+            }} />
+        )}
+
+    </>
 }
 
 export default ExternalPlugin
diff --git a/components/FacebookMessenger.js b/components/FacebookMessenger.js
index af6bcead..ef8da0cb 100644
--- a/components/FacebookMessenger.js
+++ b/components/FacebookMessenger.js
@@ -1,14 +1,41 @@
-import BLOG from '@/blog.config'
-import { Component } from 'react'
+import { Component, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
+import { siteConfig } from '@/lib/config'
 
 export default function Messenger() {
-  return <MessengerCustomerChat
-    pageId={BLOG.FACEBOOK_PAGE_ID}
-    appId={BLOG.FACEBOOK_APP_ID}
-    language={BLOG.LANG.replace('-', '_')}
-    shouldShowDialog={true}
-  />
+  const pageId = siteConfig('FACEBOOK_PAGE_ID')
+  const appId = siteConfig('FACEBOOK_APP_ID')
+  const language = siteConfig('LANG').replace('-', '_')
+
+  // 新增一个状态变量用于追踪是否已经滚动过
+  const [showMessenger, setShowMessenger] = useState(false);
+
+  const showTheComponent = () => {
+    window.removeEventListener('scroll', showTheComponent);
+    if (!showMessenger) {
+      setShowMessenger(true);
+    }
+  };
+
+  // 延时7秒，或页面滚动时加载该组件
+  useEffect(() => {
+    window.addEventListener('scroll', showTheComponent);
+    setTimeout(() => {
+      showTheComponent()
+    }, 7000);
+    return () => {
+      window.removeEventListener('scroll', showTheComponent);
+    };
+  }, []);
+
+  return <>
+        {showMessenger && <MessengerCustomerChat
+            pageId={pageId}
+            appId={appId}
+            language={language}
+            shouldShowDialog={true}
+        />}
+    </>
 }
 
 /**
@@ -24,8 +51,8 @@ class MessengerCustomerChat extends Component {
   }
 
   /**
-   * 初始化
-   */
+     * 初始化
+     */
   componentDidMount() {
     this.setFbAsyncInit()
     this.reloadSDKAsynchronously()
@@ -34,19 +61,19 @@ class MessengerCustomerChat extends Component {
   componentDidUpdate(prevProps) {
     if (
       prevProps.pageId !== this.props.pageId ||
-      prevProps.appId !== this.props.appId ||
-      prevProps.shouldShowDialog !== this.props.shouldShowDialog ||
-      prevProps.htmlRef !== this.props.htmlRef ||
-      prevProps.minimized !== this.props.minimized ||
-      prevProps.themeColor !== this.props.themeColor ||
-      prevProps.loggedInGreeting !== this.props.loggedInGreeting ||
-      prevProps.loggedOutGreeting !== this.props.loggedOutGreeting ||
-      prevProps.greetingDialogDisplay !== this.props.greetingDialogDisplay ||
-      prevProps.greetingDialogDelay !== this.props.greetingDialogDelay ||
-      prevProps.autoLogAppEvents !== this.props.autoLogAppEvents ||
-      prevProps.xfbml !== this.props.xfbml ||
-      prevProps.version !== this.props.version ||
-      prevProps.language !== this.props.language
+            prevProps.appId !== this.props.appId ||
+            prevProps.shouldShowDialog !== this.props.shouldShowDialog ||
+            prevProps.htmlRef !== this.props.htmlRef ||
+            prevProps.minimized !== this.props.minimized ||
+            prevProps.themeColor !== this.props.themeColor ||
+            prevProps.loggedInGreeting !== this.props.loggedInGreeting ||
+            prevProps.loggedOutGreeting !== this.props.loggedOutGreeting ||
+            prevProps.greetingDialogDisplay !== this.props.greetingDialogDisplay ||
+            prevProps.greetingDialogDelay !== this.props.greetingDialogDelay ||
+            prevProps.autoLogAppEvents !== this.props.autoLogAppEvents ||
+            prevProps.xfbml !== this.props.xfbml ||
+            prevProps.version !== this.props.version ||
+            prevProps.language !== this.props.language
     ) {
       this.setFbAsyncInit()
       this.reloadSDKAsynchronously()
@@ -60,8 +87,8 @@ class MessengerCustomerChat extends Component {
   }
 
   /**
-   * 初始化
-   */
+     * 初始化
+     */
   setFbAsyncInit() {
     const { appId, autoLogAppEvents, xfbml, version } = this.props
 
@@ -80,18 +107,18 @@ class MessengerCustomerChat extends Component {
   loadSDKAsynchronously() {
     const { language } = this.props;
     /* eslint-disable */
-    (function (d, s, id) {
-      var js,
-        fjs = d.getElementsByTagName(s)[0];
-      if (d.getElementById(id)) {
-        return;
-      }
-      js = d.createElement(s);
-      js.id = id;
-      js.src = `https://connect.facebook.net/${language}/sdk/xfbml.customerchat.js`;
-      fjs.parentNode.insertBefore(js, fjs);
-    })(document, 'script', 'facebook-jssdk');
-    /* eslint-enable */
+        (function (d, s, id) {
+            var js,
+                fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) {
+                return;
+            }
+            js = d.createElement(s);
+            js.id = id;
+            js.src = `https://connect.facebook.net/${language}/sdk/xfbml.customerchat.js`;
+            fjs.parentNode.insertBefore(js, fjs);
+        })(document, 'script', 'facebook-jssdk');
+        /* eslint-enable */
   }
 
   removeFacebookSDK() {
@@ -147,25 +174,25 @@ class MessengerCustomerChat extends Component {
 
     const refAttribute = htmlRef !== undefined ? `ref="${htmlRef}"` : ''
     const minimizedAttribute =
-      minimized !== undefined ? `minimized="${minimized}"` : ''
+            minimized !== undefined ? `minimized="${minimized}"` : ''
     const themeColorAttribute =
-      themeColor !== undefined ? `theme_color="${themeColor}"` : ''
+            themeColor !== undefined ? `theme_color="${themeColor}"` : ''
     const loggedInGreetingAttribute =
-      loggedInGreeting !== undefined
-        ? `logged_in_greeting="${loggedInGreeting}"`
-        : ''
+            loggedInGreeting !== undefined
+              ? `logged_in_greeting="${loggedInGreeting}"`
+              : ''
     const loggedOutGreetingAttribute =
-      loggedOutGreeting !== undefined
-        ? `logged_out_greeting="${loggedOutGreeting}"`
-        : ''
+            loggedOutGreeting !== undefined
+              ? `logged_out_greeting="${loggedOutGreeting}"`
+              : ''
     const greetingDialogDisplayAttribute =
-      greetingDialogDisplay !== undefined
-        ? `greeting_dialog_display="${greetingDialogDisplay}"`
-        : ''
+            greetingDialogDisplay !== undefined
+              ? `greeting_dialog_display="${greetingDialogDisplay}"`
+              : ''
     const greetingDialogDelayAttribute =
-      greetingDialogDelay !== undefined
-        ? `greeting_dialog_delay="${greetingDialogDelay}"`
-        : ''
+            greetingDialogDelay !== undefined
+              ? `greeting_dialog_delay="${greetingDialogDelay}"`
+              : ''
 
     return {
       __html: `<div
@@ -192,8 +219,8 @@ class MessengerCustomerChat extends Component {
           const element = event.target
           if (
             element.className &&
-            typeof element.className === 'string' &&
-            element.className.includes('fb_dialog')
+                        typeof element.className === 'string' &&
+                        element.className.includes('fb_dialog')
           ) {
             this.controlPlugin()
           }
diff --git a/components/FacebookPage.js b/components/FacebookPage.js
index 95f77fc1..a869c1e5 100644
--- a/components/FacebookPage.js
+++ b/components/FacebookPage.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { FacebookProvider, Page } from 'react-facebook'
 import { FacebookIcon } from 'react-share'
 
@@ -7,27 +7,27 @@ import { FacebookIcon } from 'react-share'
  * @returns
  */
 const FacebookPage = () => {
-  if (!BLOG.FACEBOOK_APP_ID || !BLOG.FACEBOOK_PAGE) {
+  if (!siteConfig('FACEBOOK_APP_ID') || !siteConfig('FACEBOOK_PAGE')) {
     return <></>
   }
   return <div className="shadow-md hover:shadow-xl dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100 justify-center">
-    {BLOG.FACEBOOK_PAGE && (
+    {siteConfig('FACEBOOK_PAGE') && (
       <div className="flex items-center pb-2">
         <a
-          href={BLOG.FACEBOOK_PAGE}
+          href={siteConfig('FACEBOOK_PAGE')}
           target="_blank"
           rel="noopener noreferrer"
           className="p-1 pr-2 pt-0"
         >
           <FacebookIcon size={28} round />
         </a>
-        <a href={BLOG.FACEBOOK_PAGE} rel="noopener noreferrer" target="_blank">
-          {BLOG.FACEBOOK_PAGE_TITLE}
+        <a href={siteConfig('FACEBOOK_PAGE')} rel="noopener noreferrer" target="_blank">
+          {siteConfig('FACEBOOK_PAGE_TITLE')}
         </a>
       </div>
     )}
-    {BLOG.FACEBOOK_APP_ID && <FacebookProvider appId={BLOG.FACEBOOK_APP_ID}>
-      <Page href={BLOG.FACEBOOK_PAGE} tabs="timeline" />
+    {siteConfig('FACEBOOK_APP_ID') && <FacebookProvider appId={siteConfig('FACEBOOK_APP_ID')}>
+      <Page href={siteConfig('FACEBOOK_PAGE')} tabs="timeline" />
     </FacebookProvider>}
   </div>
 }
diff --git a/components/Fireworks.js b/components/Fireworks.js
index d6b9a650..8d0c8cd3 100644
--- a/components/Fireworks.js
+++ b/components/Fireworks.js
@@ -4,11 +4,17 @@
  */
 import { useEffect } from 'react'
 import anime from 'animejs'
-import BLOG from 'blog.config'
+import { siteConfig } from '@/lib/config'
 
+/**
+ * 鼠标点击烟花特效
+ * @returns
+ */
 const Fireworks = () => {
+  const fireworksColor = siteConfig('FIREWORKS_COLOR')
+
   useEffect(() => {
-    createFireworks({})
+    createFireworks({ colors: fireworksColor })
   }, [])
   return <canvas id='fireworks' className='fireworks'></canvas>
 }
@@ -20,7 +26,7 @@ export default Fireworks
    */
 function createFireworks(config) {
   const defaultConfig = {
-    colors: BLOG.FIREWORKS_COLOR,
+    colors: config?.colors,
     numberOfParticules: 20,
     orbitRadius: {
       min: 50,
diff --git a/components/Giscus.js b/components/Giscus.js
index 173117bc..ed1564eb 100644
--- a/components/Giscus.js
+++ b/components/Giscus.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import Giscus from '@giscus/react'
 
@@ -15,17 +15,17 @@ const GiscusComponent = () => {
 
   return (
     <Giscus
-      repo={BLOG.COMMENT_GISCUS_REPO}
-      repoId={BLOG.COMMENT_GISCUS_REPO_ID}
-      categoryId={BLOG.COMMENT_GISCUS_CATEGORY_ID}
-      mapping={BLOG.COMMENT_GISCUS_MAPPING}
-      reactionsEnabled={BLOG.COMMENT_GISCUS_REACTIONS_ENABLED}
-      emitMetadata={BLOG.COMMENT_GISCUS_EMIT_METADATA}
+      repo={siteConfig('COMMENT_GISCUS_REPO')}
+      repoId={siteConfig('COMMENT_GISCUS_REPO_ID')}
+      categoryId={siteConfig('COMMENT_GISCUS_CATEGORY_ID')}
+      mapping={siteConfig('COMMENT_GISCUS_MAPPING')}
+      reactionsEnabled={siteConfig('COMMENT_GISCUS_REACTIONS_ENABLED')}
+      emitMetadata={siteConfig('COMMENT_GISCUS_EMIT_METADATA')}
       theme={theme}
-      inputPosition={BLOG.COMMENT_GISCUS_INPUT_POSITION}
-      lang={BLOG.COMMENT_GISCUS_LANG}
-      loading={BLOG.COMMENT_GISCUS_LOADING}
-      crossorigin={BLOG.COMMENT_GISCUS_CROSSORIGIN}
+      inputPosition={siteConfig('COMMENT_GISCUS_INPUT_POSITION')}
+      lang={siteConfig('COMMENT_GISCUS_LANG')}
+      loading={siteConfig('COMMENT_GISCUS_LOADING')}
+      crossorigin={siteConfig('COMMENT_GISCUS_CROSSORIGIN')}
     />
   )
 }
diff --git a/components/Gitalk.js b/components/Gitalk.js
index 4df0c65d..23bda017 100644
--- a/components/Gitalk.js
+++ b/components/Gitalk.js
@@ -1,37 +1,39 @@
-// import 'gitalk/dist/gitalk.css'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
-// import GitalkComponent from 'gitalk/dist/gitalk-component'
 
+/**
+ * gitalk评论插件
+ * @param {*} param0
+ * @returns
+ */
 const Gitalk = ({ frontMatter }) => {
-  //   return <GitalkComponent options={{
-  //     id: frontMatter.id,
-  //     title: frontMatter.title,
-  //     clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
-  //     clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
-  //     repo: BLOG.COMMENT_GITALK_REPO,
-  //     owner: BLOG.COMMENT_GITALK_OWNER,
-  //     admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
-  //     distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
-  //   }} />
-  const loadGitalk = async() => {
-    await loadExternalResource(BLOG.COMMENT_GITALK_CSS_CDN_URL, 'css')
-    await loadExternalResource(BLOG.COMMENT_GITALK_JS_CDN_URL, 'js')
-    const Gitalk = window.Gitalk
+  const gitalkCSSCDN = siteConfig('COMMENT_GITALK_CSS_CDN_URL')
+  const gitalkJSCDN = siteConfig('COMMENT_GITALK_JS_CDN_URL')
+  const clientId = siteConfig('COMMENT_GITALK_CLIENT_ID')
+  const clientSecret = siteConfig('COMMENT_GITALK_CLIENT_SECRET')
+  const repo = siteConfig('COMMENT_GITALK_REPO')
+  const owner = siteConfig('COMMENT_GITALK_OWNER')
+  const admin = siteConfig('COMMENT_GITALK_ADMIN').split(',')
+  const distractionFreeMode = siteConfig('COMMENT_GITALK_DISTRACTION_FREE_MODE')
 
+  const loadGitalk = async() => {
+    await loadExternalResource(gitalkCSSCDN, 'css')
+    await loadExternalResource(gitalkJSCDN, 'js')
+    const Gitalk = window.Gitalk
     const gitalk = new Gitalk({
-      clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
-      clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
-      repo: BLOG.COMMENT_GITALK_REPO,
-      owner: BLOG.COMMENT_GITALK_OWNER,
-      admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+      clientID: clientId,
+      clientSecret: clientSecret,
+      repo: repo,
+      owner: owner,
+      admin: admin,
       id: frontMatter.id, // Ensure uniqueness and length less than 50
-      distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE) // Facebook-like distraction free mode
+      distractionFreeMode: distractionFreeMode // Facebook-like distraction free mode
     })
 
     gitalk.render('gitalk-container')
   }
+
   useEffect(() => {
     loadGitalk()
   }, [])
diff --git a/components/GlobalStyle.js b/components/GlobalStyle.js
new file mode 100644
index 00000000..2bb80746
--- /dev/null
+++ b/components/GlobalStyle.js
@@ -0,0 +1,20 @@
+/* eslint-disable react/no-unknown-property */
+
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 这里的css样式对全局生效
+ * 主题客制化css
+ * @returns
+ */
+const GlobalStyle = () => {
+  // 从NotionConfig中读取样式
+  const GLOBAL_CSS = siteConfig('GLOBAL_CSS')
+  return (<style jsx global>{`
+
+    ${GLOBAL_CSS}
+
+  `}</style>)
+}
+
+export { GlobalStyle }
diff --git a/components/GoogleAdsense.js b/components/GoogleAdsense.js
index 2163f791..61606150 100644
--- a/components/GoogleAdsense.js
+++ b/components/GoogleAdsense.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
@@ -9,7 +9,7 @@ import { useEffect } from 'react'
  */
 export default function GoogleAdsense() {
   const initGoogleAdsense = () => {
-    loadExternalResource(`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${BLOG.ADSENSE_GOOGLE_ID}`, 'js').then(url => {
+    loadExternalResource(`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${siteConfig('ADSENSE_GOOGLE_ID')}`, 'js').then(url => {
       setTimeout(() => {
         const ads = document.getElementsByClassName('adsbygoogle')
         const adsbygoogle = window.adsbygoogle
@@ -44,7 +44,7 @@ export default function GoogleAdsense() {
  * 添加 可以在本地调试
  */
 const AdSlot = ({ type = 'show' }) => {
-  if (!BLOG.ADSENSE_GOOGLE_ID) {
+  if (!siteConfig('ADSENSE_GOOGLE_ID')) {
     return null
   }
   // 文章内嵌广告
@@ -53,9 +53,9 @@ const AdSlot = ({ type = 'show' }) => {
             style={{ display: 'block', textAlign: 'center' }}
             data-ad-layout="in-article"
             data-ad-format="fluid"
-            data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
-            data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
-            data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_IN_ARTICLE}></ins>
+            data-adtest={siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off'}
+            data-ad-client={siteConfig('ADSENSE_GOOGLE_ID')}
+            data-ad-slot={siteConfig('ADSENSE_GOOGLE_SLOT_IN_ARTICLE')}></ins>
   }
 
   // 信息流广告
@@ -64,9 +64,9 @@ const AdSlot = ({ type = 'show' }) => {
             data-ad-format="fluid"
             data-ad-layout-key="-5j+cz+30-f7+bf"
             style={{ display: 'block' }}
-            data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
-            data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
-            data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_FLOW}></ins>
+            data-adtest={siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off'}
+            data-ad-client={siteConfig('ADSENSE_GOOGLE_ID')}
+            data-ad-slot={siteConfig('ADSENSE_GOOGLE_SLOT_FLOW')}></ins>
   }
 
   // 原生广告
@@ -74,17 +74,17 @@ const AdSlot = ({ type = 'show' }) => {
     return <ins className="adsbygoogle"
             style={{ display: 'block', textAlign: 'center' }}
             data-ad-format="autorelaxed"
-            data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
-            data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
-            data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_NATIVE}></ins>
+            data-adtest={siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off'}
+            data-ad-client={siteConfig('ADSENSE_GOOGLE_ID')}
+            data-ad-slot={siteConfig('ADSENSE_GOOGLE_SLOT_NATIVE')}></ins>
   }
 
   //  展示广告
   return <ins className="adsbygoogle"
         style={{ display: 'block' }}
-        data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
-        data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
-        data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_AUTO}
+        data-ad-client={siteConfig('ADSENSE_GOOGLE_ID')}
+        data-adtest={siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off'}
+        data-ad-slot={siteConfig('ADSENSE_GOOGLE_SLOT_AUTO')}
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
 }
diff --git a/components/KatexReact.js b/components/KatexReact.js
index 5a585e13..9adc8870 100644
--- a/components/KatexReact.js
+++ b/components/KatexReact.js
@@ -1,6 +1,11 @@
 import KaTeX from 'katex'
-import React from 'react'
+import { memo, useEffect, useState } from 'react'
 
+/**
+ * 数学公式
+ * @param {*} param0
+ * @returns
+ */
 const TeX = ({
   children,
   math,
@@ -13,9 +18,9 @@ const TeX = ({
 }) => {
   const Component = asComponent || (block ? 'div' : 'span')
   const content = (children ?? math)
-  const [state, setState] = React.useState({ innerHtml: '' })
+  const [state, setState] = useState({ innerHtml: '' })
 
-  React.useEffect(() => {
+  useEffect(() => {
     try {
       const innerHtml = KaTeX.renderToString(content, {
         displayMode: true,
@@ -50,4 +55,4 @@ const TeX = ({
   )
 }
 
-export default React.memo(TeX)
+export default memo(TeX)
diff --git a/components/LA51.js b/components/LA51.js
new file mode 100644
index 00000000..df506666
--- /dev/null
+++ b/components/LA51.js
@@ -0,0 +1,18 @@
+import { siteConfig } from '@/lib/config'
+import { useEffect } from 'react'
+
+/**
+ * 51LA统计
+ */
+export default function LA51() {
+  const ANALYTICS_51LA_ID = siteConfig('ANALYTICS_51LA_ID')
+  const ANALYTICS_51LA_CK = siteConfig('ANALYTICS_51LA_CK')
+  useEffect(() => {
+    const LA = window.LA
+    if (LA) {
+      LA.init({ id: `${ANALYTICS_51LA_ID}`, ck: `${ANALYTICS_51LA_CK}`, hashMode: true, autoTrack: true })
+    }
+  }, [])
+
+  return <></>
+}
diff --git a/components/LazyImage.js b/components/LazyImage.js
index 4556bd0d..3e44eb4c 100644
--- a/components/LazyImage.js
+++ b/components/LazyImage.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Head from 'next/head'
 import React, { useEffect, useRef, useState } from 'react'
 
@@ -12,7 +12,7 @@ export default function LazyImage({
   id,
   src,
   alt,
-  placeholderSrc = BLOG.IMG_LAZY_LOAD_PLACEHOLDER,
+  placeholderSrc,
   className,
   width,
   height,
@@ -22,6 +22,9 @@ export default function LazyImage({
 }) {
   const imageRef = useRef(null)
   const [imageLoaded, setImageLoaded] = useState(false)
+  if (!placeholderSrc) {
+    placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+  }
 
   const handleImageLoad = () => {
     setImageLoaded(true)
diff --git a/components/Live2D.js b/components/Live2D.js
index 6a2fc624..4dbbe31a 100644
--- a/components/Live2D.js
+++ b/components/Live2D.js
@@ -1,12 +1,17 @@
 /* eslint-disable no-undef */
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
 
+/**
+ * 网页动画
+ * @returns
+ */
 export default function Live2D() {
   const { theme, switchTheme } = useGlobal()
-  const showPet = JSON.parse(BLOG.WIDGET_PET)
+  const showPet = JSON.parse(siteConfig('WIDGET_PET'))
+  const petLink = siteConfig('WIDGET_PET_LINK')
 
   useEffect(() => {
     if (showPet) {
@@ -16,7 +21,7 @@ export default function Live2D() {
         if (typeof window?.loadlive2d !== 'undefined') {
           // https://github.com/xiazeyu/live2d-widget-models
           try {
-            loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
+            loadlive2d('live2d', petLink)
           } catch (error) {
             console.error('读取PET模型', error)
           }
@@ -26,7 +31,7 @@ export default function Live2D() {
   }, [theme])
 
   function handleClick() {
-    if (JSON.parse(BLOG.WIDGET_PET_SWITCH_THEME)) {
+    if (JSON.parse(siteConfig('WIDGET_PET_SWITCH_THEME'))) {
       switchTheme()
     }
   }
diff --git a/components/LoadingProgress.js b/components/LoadingProgress.js
new file mode 100644
index 00000000..d7f7b5f7
--- /dev/null
+++ b/components/LoadingProgress.js
@@ -0,0 +1,29 @@
+import { useRouter } from 'next/router'
+import NProgress from 'nprogress'
+import { useEffect } from 'react'
+
+/**
+ * 出现页面加载进度条
+ */
+export default function LoadingProgress() {
+  const router = useRouter()
+  // 加载进度条
+  useEffect(() => {
+    const handleStart = (url) => {
+      NProgress.start()
+    }
+
+    const handleStop = () => {
+      NProgress.done()
+    }
+
+    router.events.on('routeChangeStart', handleStart)
+    router.events.on('routeChangeError', handleStop)
+    router.events.on('routeChangeComplete', handleStop)
+    return () => {
+      router.events.off('routeChangeStart', handleStart)
+      router.events.off('routeChangeComplete', handleStop)
+      router.events.off('routeChangeError', handleStop)
+    }
+  }, [router])
+}
diff --git a/components/NotionPage.js b/components/NotionPage.js
index 16e8716e..fb68691a 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -1,14 +1,18 @@
-import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
 import mediumZoom from '@fisch0920/medium-zoom'
-import React, { useEffect, useRef } from 'react'
-// import { Code } from 'react-notion-x/build/third-party/code'
-import TweetEmbed from 'react-tweet-embed'
-
-import BLOG from '@/blog.config'
+import { useEffect, useRef } from 'react'
 import 'katex/dist/katex.min.css'
 import { mapImgUrl } from '@/lib/notion/mapImage'
 import { isBrowser } from '@/lib/utils'
+import { siteConfig } from '@/lib/config'
+import { NotionRenderer } from 'react-notion-x'
+
+// Notion渲染
+// const NotionRenderer = dynamic(() => import('react-notion-x').then(async (m) => {
+//   return m.NotionRenderer
+// }), {
+//   ssr: false
+// })
 
 const Code = dynamic(() =>
   import('react-notion-x/build/third-party/code').then(async (m) => {
@@ -16,6 +20,7 @@ const Code = dynamic(() =>
   }), { ssr: false }
 )
 
+// 公式
 const Equation = dynamic(() =>
   import('@/components/Equation').then(async (m) => {
     // 化学方程式
@@ -37,6 +42,13 @@ const PrismMac = dynamic(() => import('@/components/PrismMac'), {
   ssr: false
 })
 
+/**
+ * tweet嵌入
+ */
+const TweetEmbed = dynamic(() => import('react-tweet-embed'), {
+  ssr: false
+})
+
 const Collection = dynamic(() =>
   import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: true }
 )
@@ -63,7 +75,7 @@ const NotionPage = ({ post, className }) => {
 
   useEffect(() => {
     // 将相册gallery下的图片加入放大功能
-    if (JSON.parse(BLOG.POST_DISABLE_GALLERY_CLICK)) {
+    if (siteConfig('POST_DISABLE_GALLERY_CLICK')) {
       setTimeout(() => {
         if (isBrowser) {
           const imgList = document?.querySelectorAll('.notion-collection-card-cover img')
diff --git a/components/Player.js b/components/Player.js
index 82295e69..8c252615 100644
--- a/components/Player.js
+++ b/components/Player.js
@@ -1,27 +1,54 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
 import { useEffect, useRef, useState } from 'react'
 
+/**
+ * 音乐播放器
+ * @returns
+ */
 const Player = () => {
   const [player, setPlayer] = useState()
   const ref = useRef(null)
+  const lrcType = JSON.parse(siteConfig('MUSIC_PLAYER_LRC_TYPE'))
+  const playerVisible = JSON.parse(siteConfig('MUSIC_PLAYER_VISIBLE'))
+  const autoPlay = JSON.parse(siteConfig('MUSIC_PLAYER_AUTO_PLAY'))
+  const meting = JSON.parse(siteConfig('MUSIC_PLAYER_METING'))
+  const order = siteConfig('MUSIC_PLAYER_ORDER')
+  const audio = siteConfig('MUSIC_PLAYER_AUDIO_LIST')
 
-  const lrcType = JSON.parse(BLOG.MUSIC_PLAYER_LRC_TYPE)
-  const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE)
-  const autoPlay = JSON.parse(BLOG.MUSIC_PLAYER_AUTO_PLAY)
+  const musicPlayerEnable = siteConfig('MUSIC_PLAYER')
+  const musicPlayerCDN = siteConfig('MUSIC_PLAYER_CDN_URL')
+  const musicMetingEnable = siteConfig('MUSIC_PLAYER_METING')
+  const musicMetingCDNUrl = siteConfig('MUSIC_PLAYER_METING_CDN_URL', 'https://cdnjs.cloudflare.com/ajax/libs/meting/2.0.1/Meting.min.js')
 
-  const meting = JSON.parse(BLOG.MUSIC_PLAYER_METING)
+  const initMusicPlayer = async () => {
+    if (!musicPlayerEnable) {
+      return
+    }
+    try {
+      await loadExternalResource(musicPlayerCDN, 'js')
+    } catch (error) {
+      console.error('音乐组件异常', error)
+    }
+
+    if (musicMetingEnable) {
+      await loadExternalResource(musicMetingCDNUrl, 'js')
+    }
 
-  useEffect(() => {
     if (!meting && window.APlayer) {
       setPlayer(new window.APlayer({
         container: ref.current,
         fixed: true,
         lrcType: lrcType,
         autoplay: autoPlay,
-        order: BLOG.MUSIC_PLAYER_ORDER,
-        audio: BLOG.MUSIC_PLAYER_AUDIO_LIST
+        order: order,
+        audio: audio
       }))
     }
+  }
+
+  useEffect(() => {
+    initMusicPlayer()
     return () => {
       setPlayer(undefined)
     }
@@ -39,11 +66,11 @@ const Player = () => {
             fixed="true"
             type="playlist"
             preload="auto"
-            lrc-type={BLOG.MUSIC_PLAYER_METING_LRC_TYPE}
+            lrc-type={siteConfig('MUSIC_PLAYER_METING_LRC_TYPE')}
             autoplay={autoPlay}
-            order={BLOG.MUSIC_PLAYER_ORDER}
-            server={BLOG.MUSIC_PLAYER_METING_SERVER}
-            id={BLOG.MUSIC_PLAYER_METING_ID}
+            order={siteConfig('MUSIC_PLAYER_ORDER')}
+            server={siteConfig('MUSIC_PLAYER_METING_SERVER')}
+            id={siteConfig('MUSIC_PLAYER_METING_ID')}
           />
         : <div ref={ref} data-player={player} />
       }
diff --git a/components/PrismMac.js b/components/PrismMac.js
index 3e568e9f..c92d594d 100644
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -10,10 +10,10 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
 // mermaid图
-import BLOG from '@/blog.config'
 import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/navigation'
 import { useGlobal } from '@/lib/global'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 代码美化相关
@@ -23,22 +23,36 @@ import { useGlobal } from '@/lib/global'
 const PrismMac = () => {
   const router = useRouter()
   const { isDarkMode } = useGlobal()
+  const codeMacBar = siteConfig('CODE_MAC_BAR')
+  const prismjsAutoLoader = siteConfig('PRISM_JS_AUTO_LOADER')
+  const prismjsPath = siteConfig('PRISM_JS_PATH')
+
+  const prismThemeSwitch = siteConfig('PRISM_THEME_SWITCH')
+  const prismThemeDarkPath = siteConfig('PRISM_THEME_DARK_PATH')
+  const prismThemeLightPath = siteConfig('PRISM_THEME_LIGHT_PATH')
+  const prismThemePrefixPath = siteConfig('PRISM_THEME_PREFIX_PATH')
+
+  const mermaidCDN = siteConfig('MERMAID_CDN')
+  const codeLineNumbers = siteConfig('CODE_LINE_NUMBERS')
+
+  const codeCollapse = siteConfig('CODE_COLLAPSE')
+  const codeCollapseExpandDefault = siteConfig('CODE_COLLAPSE_EXPAND_DEFAULT')
 
   useEffect(() => {
-    if (JSON.parse(BLOG.CODE_MAC_BAR)) {
+    if (codeMacBar) {
       loadExternalResource('/css/prism-mac-style.css', 'css')
     }
     // 加载prism样式
-    loadPrismThemeCSS(isDarkMode)
+    loadPrismThemeCSS(isDarkMode, prismThemeSwitch, prismThemeDarkPath, prismThemeLightPath, prismThemePrefixPath)
     // 折叠代码
-    loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
+    loadExternalResource(prismjsAutoLoader, 'js').then((url) => {
       if (window?.Prism?.plugins?.autoloader) {
-        window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
+        window.Prism.plugins.autoloader.languages_path = prismjsPath
       }
 
-      renderPrismMac()
-      renderMermaid()
-      renderCollapseCode()
+      renderPrismMac(codeLineNumbers)
+      renderMermaid(mermaidCDN)
+      renderCollapseCode(codeCollapse, codeCollapseExpandDefault)
     })
   }, [router, isDarkMode])
 
@@ -46,18 +60,18 @@ const PrismMac = () => {
 }
 
 /**
- * 加载样式
+ * 加载Prism主题样式
  */
-const loadPrismThemeCSS = (isDarkMode) => {
+const loadPrismThemeCSS = (isDarkMode, prismThemeSwitch, prismThemeDarkPath, prismThemeLightPath, prismThemePrefixPath) => {
   let PRISM_THEME
   let PRISM_PREVIOUS
-  if (JSON.parse(BLOG.PRISM_THEME_SWITCH)) {
+  if (prismThemeSwitch) {
     if (isDarkMode) {
-      PRISM_THEME = BLOG.PRISM_THEME_DARK_PATH
-      PRISM_PREVIOUS = BLOG.PRISM_THEME_LIGHT_PATH
+      PRISM_THEME = prismThemeDarkPath
+      PRISM_PREVIOUS = prismThemeLightPath
     } else {
-      PRISM_THEME = BLOG.PRISM_THEME_LIGHT_PATH
-      PRISM_PREVIOUS = BLOG.PRISM_THEME_DARK_PATH
+      PRISM_THEME = prismThemeLightPath
+      PRISM_PREVIOUS = prismThemeDarkPath
     }
     const previousTheme = document.querySelector(`link[href="${PRISM_PREVIOUS}"]`)
     if (previousTheme) {
@@ -65,15 +79,15 @@ const loadPrismThemeCSS = (isDarkMode) => {
     }
     loadExternalResource(PRISM_THEME, 'css')
   } else {
-    loadExternalResource(BLOG.PRISM_THEME_PREFIX_PATH, 'css')
+    loadExternalResource(prismThemePrefixPath, 'css')
   }
 }
 
 /*
  * 将代码块转为可折叠对象
  */
-const renderCollapseCode = () => {
-  if (!JSON.parse(BLOG.CODE_COLLAPSE)) {
+const renderCollapseCode = (codeCollapse, codeCollapseExpandDefault) => {
+  if (!codeCollapse) {
     return
   }
   const codeBlocks = document.querySelectorAll('.code-toolbar')
@@ -116,7 +130,7 @@ const renderCollapseCode = () => {
     // 点击后折叠展开代码
     header.addEventListener('click', collapseCode)
     // 是否自动展开
-    if (JSON.parse(BLOG.CODE_COLLAPSE_EXPAND_DEFAULT)) {
+    if (codeCollapseExpandDefault) {
       header.click()
     }
   }
@@ -125,7 +139,7 @@ const renderCollapseCode = () => {
 /**
  * 将mermaid语言 渲染成图片
  */
-const renderMermaid = async() => {
+const renderMermaid = async(mermaidCDN) => {
   const observer = new MutationObserver(async mutationsList => {
     for (const m of mutationsList) {
       if (m.target.className === 'notion-code language-mermaid') {
@@ -146,7 +160,7 @@ const renderMermaid = async() => {
             }
           }
           if (needLoad) {
-            loadExternalResource(BLOG.MERMAID_CDN, 'js').then(url => {
+            loadExternalResource(mermaidCDN, 'js').then(url => {
               setTimeout(() => {
                 const mermaid = window.mermaid
                 mermaid?.contentLoaded()
@@ -162,11 +176,11 @@ const renderMermaid = async() => {
   }
 }
 
-function renderPrismMac() {
+function renderPrismMac(codeLineNumbers) {
   const container = document?.getElementById('notion-article')
 
   // Add line numbers
-  if (JSON.parse(BLOG.CODE_LINE_NUMBERS)) {
+  if (codeLineNumbers) {
     const codeBlocks = container?.getElementsByTagName('pre')
     if (codeBlocks) {
       Array.from(codeBlocks).forEach(item => {
@@ -200,7 +214,7 @@ function renderPrismMac() {
   }
 
   // 折叠代码行号bug
-  if (JSON.parse(BLOG.CODE_LINE_NUMBERS)) {
+  if (codeLineNumbers) {
     fixCodeLineStyle()
   }
 }
diff --git a/components/QrCode.js b/components/QrCode.js
index 081a695f..09a203a7 100644
--- a/components/QrCode.js
+++ b/components/QrCode.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
 
@@ -6,22 +6,26 @@ import { useEffect } from 'react'
  * 二维码生成
  */
 export default function QrCode({ value }) {
+  const qrCodeCDN = siteConfig('QR_CODE_CDN')
+
   useEffect(() => {
     let qrcode
     if (!value) {
       return
     }
-    loadExternalResource(BLOG.QR_CODE_CDN, 'js').then(url => {
-      const QRCode = window.QRCode
-      qrcode = new QRCode(document.getElementById('qrcode'), {
-        text: value,
-        width: 256,
-        height: 256,
-        colorDark: '#000000',
-        colorLight: '#ffffff',
-        correctLevel: QRCode.CorrectLevel.H
-      })
-    //   console.log('二维码', qrcode, value)
+    loadExternalResource(qrCodeCDN, 'js').then(url => {
+      const QRCode = window?.QRCode
+      if (typeof QRCode !== 'undefined') {
+        qrcode = new QRCode(document.getElementById('qrcode'), {
+          text: value,
+          width: 256,
+          height: 256,
+          colorDark: '#000000',
+          colorLight: '#ffffff',
+          correctLevel: QRCode.CorrectLevel.H
+        })
+        //   console.log('二维码', qrcode, value)
+      }
     })
     return () => {
       if (qrcode) {
diff --git a/components/ShareBar.js b/components/ShareBar.js
index caf03666..334a5f12 100644
--- a/components/ShareBar.js
+++ b/components/ShareBar.js
@@ -1,28 +1,21 @@
-import BLOG from '@/blog.config'
-import { useRouter } from 'next/router'
-import React from 'react'
-import ShareButtons from './ShareButtons'
+import { siteConfig } from '@/lib/config'
+import dynamic from 'next/dynamic'
 
+const ShareButtons = dynamic(() => import('@/components/ShareButtons'), { ssr: false })
+
+/**
+ * 分享栏
+ * @param {} param0
+ * @returns
+ */
 const ShareBar = ({ post }) => {
-  const router = useRouter()
-
-  if (!JSON.parse(BLOG.POST_SHARE_BAR_ENABLE) || !post || post?.type !== 'Post') {
+  if (!JSON.parse(siteConfig('POST_SHARE_BAR_ENABLE')) || !post || post?.type !== 'Post') {
     return <></>
   }
 
-  const shareUrl = BLOG.LINK + router.asPath
-
   return <div className='m-1 overflow-x-auto'>
         <div className='flex w-full md:justify-end'>
-            <ShareButtons shareUrl={shareUrl} title={post.title} image={post.pageCover} body={
-                post?.title +
-                ' | ' +
-                BLOG.TITLE +
-                ' ' +
-                shareUrl +
-                ' ' +
-                post?.summary
-            } />
+            <ShareButtons post={post} />
         </div>
     </div>
 }
diff --git a/components/ShareButtons.js b/components/ShareButtons.js
index efd3ab87..e3714b79 100644
--- a/components/ShareButtons.js
+++ b/components/ShareButtons.js
@@ -1,7 +1,8 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import copy from 'copy-to-clipboard'
 import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
 import { useState } from 'react'
 
 import {
@@ -56,9 +57,15 @@ const QrCode = dynamic(() => import('@/components/QrCode'), { ssr: false })
  * @param {*} param0
  * @returns
  */
-const ShareButtons = ({ shareUrl, title, body, image }) => {
-  const services = BLOG.POSTS_SHARE_SERVICES.split(',')
-  const titleWithSiteInfo = title + ' | ' + BLOG.TITLE
+const ShareButtons = ({ post }) => {
+  const router = useRouter()
+  const shareUrl = siteConfig('LINK') + router.asPath
+  const title = post.title || siteConfig('TITLE')
+  const image = post.pageCover
+  const body = post?.title + ' | ' + title + ' ' + shareUrl + ' ' + post?.summary
+
+  const services = siteConfig('POSTS_SHARE_SERVICES').split(',')
+  const titleWithSiteInfo = title + ' | ' + siteConfig('TITLE')
   const { locale } = useGlobal()
   const [qrCodeShow, setQrCodeShow] = useState(false)
 
@@ -93,7 +100,7 @@ const ShareButtons = ({ shareUrl, title, body, image }) => {
                         <FacebookMessengerShareButton
                             key={singleService}
                             url={shareUrl}
-                            appId={BLOG.FACEBOOK_APP_ID}
+                            appId={siteConfig('FACEBOOK_APP_ID')}
                             className="mx-1"
                         >
                             <FacebookMessengerIcon size={32} round />
@@ -336,7 +343,7 @@ const ShareButtons = ({ shareUrl, title, body, image }) => {
               }
               if (singleService === 'qq') {
                 return <button key={singleService} className='cursor-pointer bg-blue-600 text-white rounded-full mx-1'>
-                        <a target='_blank' rel='noreferrer' href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${title}&desc=${body}`} >
+                        <a target='_blank' rel='noreferrer' aria-label="Share by QQ" href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${title}&desc=${body}`} >
                             <i className='fab fa-qq w-8' />
                         </a>
                     </button>
@@ -349,7 +356,7 @@ const ShareButtons = ({ shareUrl, title, body, image }) => {
                         <div className='absolute'>
                         <div id='pop' className={(qrCodeShow ? 'opacity-100 ' : ' invisible opacity-0') + ' z-40 absolute bottom-10 -left-10 bg-white shadow-xl transition-all duration-200 text-center'}>
                                 <div className='p-2 mt-1 w-28 h-28'>
-                                    <QrCode value={shareUrl}/>
+                                    { qrCodeShow && <QrCode value={shareUrl}/> }
                                 </div>
                                 <span className='text-black font-semibold p-1 rounded-t-lg text-sm mx-auto mb-1'>
                                     {locale.COMMON.SCAN_QR_CODE}
diff --git a/components/Tabs.js b/components/Tabs.js
index b354e533..ef951228 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import { useState } from 'react';
+import { siteConfig } from '@/lib/config'
 
 /**
  * Tabs切换标签
@@ -6,59 +7,39 @@ import React, { useState } from 'react'
  * @returns
  */
 const Tabs = ({ className, children }) => {
-  const [currentTab, setCurrentTab] = useState(0)
+  const [currentTab, setCurrentTab] = useState(0);
 
-  if (!children) {
-    return <></>
+  const validChildren = children.filter(c => c);
+
+  if (validChildren.length === 0) {
+    return <></>;
   }
 
-  children = children.filter(c => c !== '')
-
-  let count = 0
-  children.forEach(e => {
-    if (e) {
-      count++
-    }
-  })
-
-  if (count === 0) {
-    return <></>
-  }
-
-  if (count === 1) {
-    return <section className={'duration-200 ' + className}>
-            {children}
-        </section>
-  }
-
-  function tabClickHandle(i) {
-    setCurrentTab(i)
-  }
-
-  return <div className={'mb-5 duration-200 ' + className}>
-        <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto'>
-            {children.map((item, index) => {
-              return <li key={index}
-                    className={(currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '}
-                    onClick={() => {
-                      tabClickHandle(index)
-                    }}>
-                    {item?.key}
-                </li>
-            })}
+  return (
+    <div className={`mb-5 duration-200 ${className}`}>
+      {!(validChildren.length === 1 && siteConfig('COMMENT_HIDE_SINGLE_TAB')) && (
+        <ul className="flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto">
+          {validChildren.map((item, index) => (
+            <li key={index}
+              className={`${currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello' : 'font-extralight cursor-pointer'} text-sm font-sans`}
+              onClick={() => setCurrentTab(index)}>
+              {item.key}
+            </li>
+          ))}
         </ul>
-        <div>
-            {children.map((item, index) => {
-              return <section key={index}
-                    data-aos="fade-up"
-                    data-aos-duration="300"
-                    data-aos-once="true"
-                    data-aos-anchor-placement="top-bottom">
-                    {currentTab === index && item}
-                </section>
-            })}
-        </div>
+      )}
+      {/* 标签切换的时候不销毁 DOM 元素，使用 CSS 样式进行隐藏 */}
+      <div>
+        {validChildren.map((item, index) => (
+          <section
+            key={index}
+            className={`${currentTab === index ? 'opacity-100 static h-auto' : 'opacity-0 absolute h-0 pointer-events-none overflow-hidden'}`}>
+            {item}
+          </section>
+        ))}
+      </div>
     </div>
-}
+  );
+};
 
-export default Tabs
+export default Tabs;
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 1e140d79..5ec52819 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -1,21 +1,25 @@
 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'
+import LANGS from '@/lib/lang'
 /**
  *
  * @returns 主题切换
  */
 const ThemeSwitch = () => {
-  const { theme } = useGlobal()
+  const { theme, lang, changeLang, locale, isDarkMode, toggleDarkMode } = useGlobal()
   const router = useRouter()
+  const currentTheme = getQueryParam(router.asPath, 'theme') || theme
+  //   const currentLang = getQueryParam(router.asPath, 'lang') || lang
   const [isLoading, setIsLoading] = useState(false)
 
   // 修改当前路径url中的 theme 参数
   // 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme
-  const onSelectChange = (e) => {
+  const onThemeSelectChange = (e) => {
     setIsLoading(true)
     const newTheme = e.target.value
     const query = router.query
@@ -25,27 +29,52 @@ const ThemeSwitch = () => {
     })
   }
 
+  const onLangSelectChange = (e) => {
+    const newLang = e.target.value
+    changeLang(newLang)
+  }
+
   return (<>
         <Draggable>
-            <div id="draggableBox" style={{ left: '10px', top: '80vh' }} className="fixed z-50 dark:text-white bg-gray-50 dark:bg-black rounded-2xl drop-shadow-lg">
-                <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'>
+            <div id="draggableBox" style={{ left: '0px', top: '80vh' }} className="fixed group space-y-2 overflow-hidden z-50 p-3 flex flex-col items-start dark:text-white bg-gray-50 dark:bg-black rounded-xl shadow-lg border dark:border-gray-800">
+                {/* 深色按钮 */}
+                <div className="text-sm flex items-center w-0 group-hover:w-32 transition-all duration-200">
+                    <DarkModeButton />
+                    <div onClick={toggleDarkMode} className='cursor-pointer w-0 group-hover:w-24 transition-all duration-200 overflow-hidden whitespace-nowrap pl-1 h-auto'>{isDarkMode ? locale.MENU.DARK_MODE : locale.MENU.LIGHT_MODE}</div>
+                </div>
+
+                {/* 翻译按钮 */}
+                <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
+                    <i className="fa-solid fa-language w-5" />
+                    <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
+                        <select value={lang} onChange={onLangSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
+                            {Object.keys(LANGS)?.map(t => {
+                              return <option key={t} value={t}>{LANGS[t].LOCALE}</option>
+                            })}
+                        </select>
+                    </div>
+                </div>
+
+                {/* 主题切换按钮 */}
+                <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
+                    <i className="fa-solid fa-palette w-5" />
+                    <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
+                        <select value={currentTheme} onChange={onThemeSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white 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>
                 </div>
             </div>
-            {/* 切换主题加载时的全屏遮罩 */}
-            <div className={`${isLoading ? 'opacity-50 ' : 'opacity-0'} w-screen h-screen bg-black text-white shadow-text flex justify-center items-center
-                              transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
-                <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
-            </div>
         </Draggable>
+
+        {/* 切换主题加载时的全屏遮罩 */}
+        <div className={`${isLoading ? 'opacity-50 ' : 'opacity-0'} 
+            w-screen h-screen bg-black text-white shadow-text flex justify-center items-center
+            transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
+            <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
+        </div>
     </>
   )
 }
diff --git a/components/TianliGPT.js b/components/TianliGPT.js
new file mode 100644
index 00000000..07aa2db6
--- /dev/null
+++ b/components/TianliGPT.js
@@ -0,0 +1,41 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable camelcase */
+import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+/**
+ * TianliGpt AI文章摘要生成工具 @see https://docs_s.tianli0.top/
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const TianLiGPT = () => {
+  const tianliKey = siteConfig('TianliGPT_KEY')
+  const tianliCss = siteConfig('TianliGPT_CSS')
+  const tianliJs = siteConfig('TianliGPT_JS')
+
+  useEffect(() => {
+    initArtalk()
+  }, [])
+
+  if (!tianliKey) {
+    return null
+  }
+
+  const initArtalk = async () => {
+    console.log('loading tianliGPT', tianliKey, tianliCss, tianliJs)
+
+    if (!tianliKey) {
+      return
+    }
+    await loadExternalResource(tianliCss, 'css')
+
+    window.tianliGPT_postSelector = '#notion-article';
+    window.tianliGPT_key = tianliKey;
+
+    await loadExternalResource(tianliJs, 'js')
+  }
+  return <></>
+}
+
+export default TianLiGPT
diff --git a/components/Twikoo.js b/components/Twikoo.js
index 309467f2..3d3a08ff 100644
--- a/components/Twikoo.js
+++ b/components/Twikoo.js
@@ -1,6 +1,6 @@
-import BLOG from '@/blog.config'
-// import { loadExternalResource } from '@/lib/utils'
-import { useEffect } from 'react'
+import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect, useRef, useState } from 'react'
 
 /**
  * Giscus评论 @see https://giscus.app/zh-CN
@@ -10,18 +10,48 @@ import { useEffect } from 'react'
  */
 
 const Twikoo = ({ isDarkMode }) => {
+  const envId = siteConfig('COMMENT_TWIKOO_ENV_ID')
+  const el = siteConfig('COMMENT_TWIKOO_ELEMENT_ID', '#twikoo')
+  const twikooCDNURL = siteConfig('COMMENT_TWIKOO_CDN_URL')
+  const lang = siteConfig('LANG')
+  const [isInit] = useState(useRef(false))
+
+  const loadTwikoo = async () => {
+    try {
+      await loadExternalResource(twikooCDNURL, 'js')
+      const twikoo = window?.twikoo
+      if (
+        typeof twikoo !== 'undefined' &&
+        twikoo &&
+        typeof twikoo.init === 'function'
+      ) {
+        twikoo.init({
+          envId: envId, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
+          el: el, // 容器元素
+          lang: lang // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+          // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
+          // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
+        })
+        console.log('twikoo init', twikoo)
+        isInit.current = true
+      }
+    } catch (error) {
+      console.error('twikoo 加载失败', error)
+    }
+  }
+
   useEffect(() => {
-    window?.twikoo?.init({
-      envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
-      el: '#twikoo', // 容器元素
-      lang: BLOG.LANG // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
-      // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
-      // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
-    })
+    const interval = setInterval(() => {
+      if (isInit.current) {
+        console.log('twioo init! clear interval')
+        clearInterval(interval)
+      } else {
+        loadTwikoo()
+      }
+    }, 1000)
+    return () => clearInterval(interval)
   }, [isDarkMode])
-  return (
-        <div id="twikoo"></div>
-  )
+  return <div id="twikoo"></div>
 }
 
 export default Twikoo
diff --git a/components/TwikooCommentCount.js b/components/TwikooCommentCount.js
index eb5cd605..29408d21 100644
--- a/components/TwikooCommentCount.js
+++ b/components/TwikooCommentCount.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 // import twikoo from 'twikoo'
 
 /**
@@ -8,7 +8,7 @@ import BLOG from '@/blog.config'
  */
 
 const TwikooCommentCount = ({ post, className }) => {
-  if (!JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE)) {
+  if (!JSON.parse(siteConfig('COMMENT_TWIKOO_COUNT_ENABLE'))) {
     return null
   }
   return <a href={`${post.slug}?target=comment`} className={`mx-1 hidden comment-count-wrapper-${post.id} ${className || ''}`}>
diff --git a/components/TwikooCommentCounter.js b/components/TwikooCommentCounter.js
index 87c16aaf..7e2a15df 100644
--- a/components/TwikooCommentCounter.js
+++ b/components/TwikooCommentCounter.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
@@ -13,16 +13,37 @@ import { useEffect } from 'react'
 const TwikooCommentCounter = (props) => {
   let commentsData = []
   const { theme } = useGlobal()
+  const router = useRouter()
 
+  useEffect(() => {
+    // console.log('路由触发评论计数')
+    if (props?.posts && props?.posts?.length > 0) {
+      fetchTwikooData(props.posts)
+    }
+  }, [router.events])
+
+  // 监控主题变化时的的评论数
+  useEffect(() => {
+    // console.log('主题触发评论计数', commentsData)
+    updateCommentCount()
+  }, [theme])
+
+  const twikooCDNURL = siteConfig('COMMENT_TWIKOO_CDN_URL')
+  const twikooENVID = siteConfig('COMMENT_TWIKOO_ENV_ID')
+
+  /**
+   * 加载外部twikoojs
+   * @param {*} posts
+   */
   const fetchTwikooData = async (posts) => {
     posts.forEach(post => {
       post.slug = post.slug.startsWith('/') ? post.slug : `/${post.slug}`
     })
     try {
-      await loadExternalResource(BLOG.COMMENT_TWIKOO_CDN_URL, 'js')
+      await loadExternalResource(twikooCDNURL, 'js')
       const twikoo = window.twikoo
       twikoo.getCommentsCount({
-        envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 环境 ID
+        envId: twikooENVID, // 环境 ID
         // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
         urls: posts?.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数
         includeReply: true // 评论数是否包括回复，默认：false
@@ -58,20 +79,7 @@ const TwikooCommentCounter = (props) => {
       }
     })
   }
-  const router = useRouter()
 
-  useEffect(() => {
-    // console.log('路由触发评论计数')
-    if (props?.posts && props?.posts?.length > 0) {
-      fetchTwikooData(props.posts)
-    }
-  }, [router.events])
-
-  // 监控主题变化时的的评论数
-  useEffect(() => {
-    // console.log('主题触发评论计数', commentsData)
-    updateCommentCount()
-  }, [theme])
   return null
 }
 
diff --git a/components/Utterances.js b/components/Utterances.js
index e0298daf..34c4f09c 100644
--- a/components/Utterances.js
+++ b/components/Utterances.js
@@ -1,5 +1,6 @@
-import BLOG from '@/blog.config'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 评论插件
@@ -9,28 +10,48 @@ import { useEffect } from 'react'
  * @constructor
  */
 const Utterances = ({ issueTerm, layout }) => {
+  const { isDarkMode } = useGlobal()
+
+  const [isLoading, setLoading] = useState(true);
+
   useEffect(() => {
-    const theme =
-      BLOG.APPEARANCE === 'auto'
-        ? 'preferred-color-scheme'
-        : BLOG.APPEARANCE === 'light'
-          ? 'github-light'
-          : 'github-dark'
-    const script = document.createElement('script')
-    const anchor = document.getElementById('comments')
-    script.setAttribute('src', 'https://utteranc.es/client.js')
-    script.setAttribute('crossorigin', 'anonymous')
-    script.setAttribute('async', true)
-    script.setAttribute('repo', BLOG.COMMENT_UTTERRANCES_REPO)
-    script.setAttribute('issue-term', 'title')
-    script.setAttribute('theme', theme)
-    anchor.appendChild(script)
+    const script = document.createElement('script');
+    const anchor = document.getElementById('comments');
+    script.onload = () => setLoading(false);
+    script.setAttribute('src', 'https://utteranc.es/client.js');
+    script.setAttribute('crossorigin', 'anonymous');
+    script.setAttribute('async', true);
+    script.setAttribute('repo', siteConfig('COMMENT_UTTERRANCES_REPO'));
+    script.setAttribute('issue-term', 'title');
+    // 初始主题
+    script.setAttribute('theme', isDarkMode ? 'github-dark' : 'github-light');
+    anchor.appendChild(script);
+
     return () => {
-      anchor.innerHTML = ''
+      // anchor.innerHTML = ''
+    };
+  }, []);
+
+  useEffect(() => {
+    // 直接设置 iframe 的类来改变主题，不重新加载脚本
+    const iframe = document.querySelector('iframe.utterances-frame');
+    if (iframe) {
+      iframe.contentWindow.postMessage({
+        type: 'set-theme',
+        theme: isDarkMode ? 'github-dark' : 'github-light'
+      }, 'https://utteranc.es');
     }
-  })
-  return <div id="comments" className='utterances' >
-  </div>
+  }, [isDarkMode]);
+
+  return (
+    <div id="comments" className='utterances'>
+      {isLoading && (
+        <div className="flex justify-center items-center m-8">
+          <div className="animate-spin rounded-full h-8 w-8 border-2 border-indigo-400 border-t-transparent"></div>
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default Utterances
diff --git a/components/ValineComponent.js b/components/ValineComponent.js
index 0a7ab6cb..b26fb34d 100644
--- a/components/ValineComponent.js
+++ b/components/ValineComponent.js
@@ -1,23 +1,23 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
 
 const ValineComponent = ({ path }) => {
   const loadValine = async () => {
     try {
-      await loadExternalResource(BLOG.COMMENT_VALINE_CDN, 'js')
+      await loadExternalResource(siteConfig('COMMENT_VALINE_CDN'), 'js')
       const Valine = window.Valine
       // eslint-disable-next-line no-unused-vars
       const valine = new Valine({
         el: '#valine', // 容器元素
-        lang: BLOG.LANG, // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
-        appId: BLOG.COMMENT_VALINE_APP_ID,
-        appKey: BLOG.COMMENT_VALINE_APP_KEY,
+        lang: siteConfig('LANG'), // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+        appId: siteConfig('COMMENT_VALINE_APP_ID'),
+        appKey: siteConfig('COMMENT_VALINE_APP_KEY'),
         avatar: '',
         path,
         recordIP: true,
-        placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER,
-        serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS,
+        placeholder: siteConfig('COMMENT_VALINE_PLACEHOLDER'),
+        serverURLs: siteConfig('COMMENT_VALINE_SERVER_URLS'),
         visitor: true
       })
     } catch (error) {
diff --git a/components/WWAds.js b/components/WWAds.js
index 87901f39..d1f786a4 100644
--- a/components/WWAds.js
+++ b/components/WWAds.js
@@ -1,5 +1,4 @@
-import React from 'react'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 万维广告插件
@@ -8,11 +7,13 @@ import BLOG from '@/blog.config'
  * @returns {JSX.Element | null} - 返回渲染的 JSX 元素或 null
  */
 export default function WWAds({ orientation = 'vertical', sticky = false, className }) {
-  if (!JSON.parse(BLOG.AD_WWADS_ID)) {
+  const adWWADSId = siteConfig('AD_WWADS_ID')
+
+  if (!adWWADSId) {
     return null
   }
 
-  return (
-    <div className={`wwads-cn ${orientation === 'vertical' ? 'wwads-vertical' : 'wwads-horizontal'} ${sticky ? 'wwads-sticky' : ''} z-10 ${className || ''}`} data-id={BLOG.AD_WWADS_ID}></div>
-  )
+  return <div data-id={adWWADSId} className={`wwads-cn 
+            ${orientation === 'vertical' ? 'wwads-vertical' : 'wwads-horizontal'}
+            ${sticky ? 'wwads-sticky' : ''} z-10 ${className || ''}`} />
 }
diff --git a/components/WalineComponent.js b/components/WalineComponent.js
index 0b033922..37247d48 100644
--- a/components/WalineComponent.js
+++ b/components/WalineComponent.js
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { createRef } from 'react'
 import { init } from '@waline/client'
-import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import '@waline/client/dist/waline.css'
+import { siteConfig } from '@/lib/config'
 
 const path = ''
 let waline = null
@@ -12,7 +12,7 @@ let waline = null
  * @returns
  */
 const WalineComponent = (props) => {
-  const containerRef = React.createRef()
+  const containerRef = createRef()
   const router = useRouter()
 
   const updateWaline = url => {
@@ -26,8 +26,8 @@ const WalineComponent = (props) => {
       waline = init({
         ...props,
         el: containerRef.current,
-        serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
-        lang: BLOG.lang,
+        serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
+        lang: siteConfig('LANG'),
         reaction: true,
         dark: 'html.dark',
         emoji: [
diff --git a/components/WebMention.js b/components/WebMention.js
index 375a0141..61e11c69 100644
--- a/components/WebMention.js
+++ b/components/WebMention.js
@@ -1,7 +1,7 @@
-import BLOG from '@/blog.config'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 评论插件
@@ -78,7 +78,7 @@ const WebmentionReplies = ({ target }) => {
   const [mentions, setMentions] = useState([])
   const fetchMentions = async (target) =>
     fetch(
-      `https://webmention.io/api/mentions.jf2?per-page=500&target=${encodeURIComponent(target)}&token=${BLOG.COMMENT_WEBMENTION.TOKEN}`
+      `https://webmention.io/api/mentions.jf2?per-page=500&target=${encodeURIComponent(target)}&token=${siteConfig('COMMENT_WEBMENTION_TOKEN')}`
     ).then((response) => (response.json ? response.json() : response))
   useEffect(() => {
     async function getMentions() {
@@ -137,8 +137,8 @@ const WebmentionReplies = ({ target }) => {
 
 const WebMentionBlock = ({ frontMatter }) => {
   const router = useRouter()
-  const url = `https://${BLOG.COMMENT_WEBMENTION.HOSTNAME}${router.asPath}`
-  const tweet = `${frontMatter.title} by @${BLOG.COMMENT_WEBMENTION.TWITTER_USERNAME} ${url}`
+  const url = `https://${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}${router.asPath}`
+  const tweet = `${frontMatter.title} by @${siteConfig('COMMENT_WEBMENTION_TWITTER_USERNAME')} ${url}`
 
   return (
     <div className='webmention-block'>
diff --git a/components/Webwhiz.js b/components/Webwhiz.js
index 690333cb..4a736647 100644
--- a/components/Webwhiz.js
+++ b/components/Webwhiz.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import ExternalScript from './ExternalScript'
 
 /**
@@ -10,8 +10,8 @@ export default function WebWhiz() {
   const props = {
     id: '__webwhizSdk__',
     src: 'https://www.unpkg.com/webwhiz@1.0.0/dist/sdk.js',
-    baseUrl: BLOG.WEB_WHIZ_BASE_URL,
-    chatbotId: BLOG.WEB_WHIZ_CHAT_BOT_ID
+    baseUrl: siteConfig('WEB_WHIZ_BASE_URL'),
+    chatbotId: siteConfig('WEB_WHIZ_CHAT_BOT_ID')
   }
   return <ExternalScript {...props}/>
 }
diff --git a/hooks/useAdjustStyle.js b/hooks/useAdjustStyle.js
new file mode 100644
index 00000000..4cd6f880
--- /dev/null
+++ b/hooks/useAdjustStyle.js
@@ -0,0 +1,33 @@
+import { isBrowser } from '@/lib/utils';
+import { useEffect } from 'react';
+
+const useAdjustStyle = () => {
+    /**
+     * 避免 callout 含有图片时溢出撑开父容器
+     */
+    const adjustCalloutImg = () => {
+        const callOuts = document.querySelectorAll('.notion-callout-text');
+        callOuts.forEach((callout) => {
+            const images = callout.querySelectorAll('figure.notion-asset-wrapper.notion-asset-wrapper-image > div');
+            const calloutWidth = callout.offsetWidth;
+            images.forEach((container) => {
+                const imageWidth = container.offsetWidth;
+                if (imageWidth + 50 > calloutWidth) {
+                    container.style.setProperty('width', '100%');
+                }
+            });
+        });
+    };
+
+    useEffect(() => {
+        if (isBrowser) {
+            adjustCalloutImg();
+            window.addEventListener('resize', adjustCalloutImg);
+            return () => {
+                window.removeEventListener('resize', adjustCalloutImg);
+            };
+        }
+    }, []);
+};
+
+export default useAdjustStyle;
diff --git a/lib/algolia.js b/lib/algolia.js
index d2d9cb37..fe2f9a83 100644
--- a/lib/algolia.js
+++ b/lib/algolia.js
@@ -42,7 +42,7 @@ const uploadDataToAlgolia = async(post) => {
   if (!existed || !existed?.lastEditedDate || !existed?.lastIndexDate) {
     needUpdateIndex = true
   } else {
-    const lastEditedDate = new Date(existed.lastEditedDate)
+    const lastEditedDate = new Date(post.lastEditedDate)
     const lastIndexDate = new Date(existed.lastIndexDate)
     if (lastEditedDate.getTime() > lastIndexDate.getTime()) {
       needUpdateIndex = true
diff --git a/lib/cache/cache_manager.js b/lib/cache/cache_manager.js
index 8796d3f4..9103b4b1 100644
--- a/lib/cache/cache_manager.js
+++ b/lib/cache/cache_manager.js
@@ -3,27 +3,18 @@ import FileCache from './local_file_cache'
 import MongoCache from './mongo_db_cache'
 import BLOG from '@/blog.config'
 
-let api
-if (process.env.MONGO_DB_URL && process.env.MONGO_DB_NAME) {
-  api = MongoCache
-} else if (process.env.ENABLE_FILE_CACHE) {
-  api = FileCache
-} else {
-  api = MemoryCache
-}
-
 /**
  * 为减少频繁接口请求，notion数据将被缓存
  * @param {*} key
  * @returns
  */
 export async function getDataFromCache(key, force) {
-  if (BLOG.ENABLE_CACHE || force) {
-    const dataFromCache = await api.getCache(key)
+  if (JSON.parse(BLOG.ENABLE_CACHE) || force) {
+    const dataFromCache = await getApi().getCache(key)
     if (JSON.stringify(dataFromCache) === '[]') {
       return null
     }
-    return api.getCache(key)
+    return getApi().getCache(key)
   } else {
     return null
   }
@@ -33,12 +24,26 @@ export async function setDataToCache(key, data) {
   if (!data) {
     return
   }
-  await api.setCache(key, data)
+  await getApi().setCache(key, data)
 }
 
 export async function delCacheData(key) {
-  if (!BLOG.ENABLE_CACHE) {
+  if (!JSON.parse(BLOG.ENABLE_CACHE)) {
     return
   }
-  await api.delCache(key)
+  await getApi().delCache(key)
+}
+
+/**
+ * 缓存实现类
+ * @returns
+ */
+function getApi() {
+  if (process.env.MONGO_DB_URL && process.env.MONGO_DB_NAME) {
+    return MongoCache
+  } else if (process.env.ENABLE_FILE_CACHE) {
+    return FileCache
+  } else {
+    return MemoryCache
+  }
 }
diff --git a/lib/cache/local_file_cache.js b/lib/cache/local_file_cache.js
index cda7f35a..c411d6e5 100644
--- a/lib/cache/local_file_cache.js
+++ b/lib/cache/local_file_cache.js
@@ -41,7 +41,7 @@ export async function setCache (key, data) {
   fs.writeFileSync(jsonFile, JSON.stringify(json))
 }
 
-export async function delCache (key, data) {
+export async function delCache (key) {
   const exist = await fs.existsSync(jsonFile)
   const json = exist ? JSON.parse(await fs.readFileSync(jsonFile)) : {}
   delete json.key
@@ -49,4 +49,12 @@ export async function delCache (key, data) {
   fs.writeFileSync(jsonFile, JSON.stringify(json))
 }
 
+/**
+ * 清理缓存
+ */
+export async function cleanCache() {
+  const json = {}
+  fs.writeFileSync(jsonFile, JSON.stringify(json))
+}
+
 export default { getCache, setCache, delCache }
diff --git a/lib/config.js b/lib/config.js
new file mode 100644
index 00000000..46575239
--- /dev/null
+++ b/lib/config.js
@@ -0,0 +1,96 @@
+'use client'
+
+import BLOG from '@/blog.config'
+import { useGlobal } from './global'
+import { deepClone } from './utils'
+
+/**
+ * 读取配置顺序
+ * 1. 优先读取NotionConfig表
+ * 2. 其次读取环境变量
+ * 3. 再读取blog.config.js / 或各个主题的CONFIG文件
+ * @param {*} key ； 参数名
+ * @param {*} defaultVal ; 参数不存在默认返回值
+ * @param {*} extendConfig ; 参考配置对象{key:val}，如果notion中找不到优先尝试在这里面查找
+ * @returns
+ */
+export const siteConfig = (key, defaultVal = null, extendConfig = null) => {
+  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 = siteInfo?.title // 标题取Notion中的标题
+        break
+      case 'DESCRIPTION':
+        val = siteInfo?.description // 标题取Notion中的标题
+        break
+    }
+  }
+
+  // 其次 有传入的配置参考，则尝试读取
+  if (!val && extendConfig) {
+    val = extendConfig[key]
+  }
+
+  // 其次 NOTION没有找到配置，则会读取blog.config.js文件
+  if (!val) {
+    val = BLOG[key]
+  }
+
+  if (!val) {
+    return defaultVal
+  } else {
+    if (typeof val === 'string') {
+      if (val === 'true' || val === 'false') {
+        return JSON.parse(val);
+      }
+      return val;
+    } else {
+      try {
+        return JSON.parse(val);
+      } catch (error) {
+        // 如果值是一个字符串但不是有效的 JSON 格式，直接返回字符串
+        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 c290a9e0..f6ffc1e8 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -1,59 +1,27 @@
-import { generateLocaleDict, initLocale } from './lang'
+import { generateLocaleDict, initLocale, saveLangToCookies } 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 { THEMES, initDarkMode, saveDarkModeToCookies } from '@/themes/theme'
+import { APPEARANCE, LANG, THEME } from 'blog.config'
 const GlobalContext = createContext()
 
 /**
- * 全局变量Provider，包括语言本地化、样式主题、搜索词
+ * 定义全局变量，包括语言、主题、深色模式、加载状态
  * @param children
  * @returns {JSX.Element}
  * @constructor
  */
 export function GlobalContextProvider(props) {
-  const { children, siteInfo, categoryOptions, tagOptions } = props
+  const { post, children, siteInfo, categoryOptions, tagOptions, NOTION_CONFIG } = props
   const router = useRouter()
-  const [lang, updateLang] = useState(BLOG.LANG) // 默认语言
-  const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG)) // 默认语言
-  const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
-  const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
+  const [lang, updateLang] = useState(NOTION_CONFIG?.LANG || LANG) // 默认语言
+  const [locale, updateLocale] = useState(generateLocaleDict(NOTION_CONFIG?.LANG || LANG)) // 默认语言
+  const [theme, setTheme] = useState(NOTION_CONFIG?.THEME || THEME) // 默认博客主题
+  const [isDarkMode, updateDarkMode] = useState(NOTION_CONFIG?.APPEARANCE || APPEARANCE === 'dark') // 默认深色模式
   const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
 
-  useEffect(() => {
-    initLocale(lang, locale, updateLang, updateLocale)
-    initDarkMode(updateDarkMode)
-    initTheme()
-  }, [])
-
-  useEffect(() => {
-    const handleStart = (url) => {
-      NProgress.start()
-      const { theme } = router.query
-      if (theme && !url.includes(`theme=${theme}`)) {
-        const newUrl = `${url}${url.includes('?') ? '&' : '?'}theme=${theme}`
-        router.push(newUrl)
-      }
-      setOnLoading(true)
-    }
-    const handleStop = () => {
-      NProgress.done()
-      setOnLoading(false)
-    }
-    const queryTheme = getQueryVariable('theme') || BLOG.THEME
-    setTheme(queryTheme)
-    router.events.on('routeChangeStart', handleStart)
-    router.events.on('routeChangeError', handleStop)
-    router.events.on('routeChangeComplete', handleStop)
-    return () => {
-      router.events.off('routeChangeStart', handleStart)
-      router.events.off('routeChangeComplete', handleStop)
-      router.events.off('routeChangeError', handleStop)
-    }
-  }, [router])
+  // 是否全屏
+  const fullWidth = post?.fullWidth ?? false
 
   // 切换主题
   function switchTheme() {
@@ -66,10 +34,65 @@ export function GlobalContextProvider(props) {
     return newTheme
   }
 
+  // 切换深色模式
+  const toggleDarkMode = () => {
+    const newStatus = !isDarkMode
+    saveDarkModeToCookies(newStatus)
+    updateDarkMode(newStatus)
+    const htmlElement = document.getElementsByTagName('html')[0]
+    htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
+    htmlElement.classList?.add(newStatus ? 'dark' : 'light')
+  }
+
+  /**
+   * 更新语言
+   */
+  function changeLang(lang) {
+    if (lang) {
+      saveLangToCookies(lang)
+      updateLang(lang)
+      updateLocale(generateLocaleDict(lang))
+    }
+  }
+
+  useEffect(() => {
+    initDarkMode(updateDarkMode)
+    initLocale(lang, locale, updateLang, updateLocale)
+  }, [])
+
+  // 加载进度条
+  useEffect(() => {
+    const handleStart = (url) => {
+      const { theme } = router.query
+      if (theme && !url.includes(`theme=${theme}`)) {
+        const newUrl = `${url}${url.includes('?') ? '&' : '?'}theme=${theme}`
+        router.push(newUrl)
+      }
+      setOnLoading(true)
+    }
+    const handleStop = () => {
+      setOnLoading(false)
+    }
+
+    router.events.on('routeChangeStart', handleStart)
+    router.events.on('routeChangeError', handleStop)
+    router.events.on('routeChangeComplete', handleStop)
+    return () => {
+      router.events.off('routeChangeStart', handleStart)
+      router.events.off('routeChangeComplete', handleStop)
+      router.events.off('routeChangeError', handleStop)
+    }
+  }, [router])
+
   return (
         <GlobalContext.Provider value={{
+          fullWidth,
+          NOTION_CONFIG,
+          toggleDarkMode,
           onLoading,
           setOnLoading,
+          lang,
+          changeLang,
           locale,
           updateLocale,
           isDarkMode,
@@ -86,23 +109,4 @@ export function GlobalContextProvider(props) {
   )
 }
 
-/**
- * 切换主题时的特殊处理
- * @param {*} setTheme
- */
-const initTheme = () => {
-  if (isBrowser) {
-    setTimeout(() => {
-      const elements = document.querySelectorAll('[id^="theme-"]')
-      if (elements?.length > 1) {
-        elements[elements.length - 1].scrollIntoView()
-        // 删除前面的元素，只保留最后一个元素
-        for (let i = 0; i < elements.length - 1; i++) {
-          elements[i].parentNode.removeChild(elements[i])
-        }
-      }
-    }, 500)
-  }
-}
-
 export const useGlobal = () => useContext(GlobalContext)
diff --git a/lib/lang.js b/lib/lang.js
index abc51354..5f81af18 100644
--- a/lib/lang.js
+++ b/lib/lang.js
@@ -12,7 +12,7 @@ import { getQueryVariable, isBrowser, mergeDeep } from './utils'
  * 在这里配置所有支持的语言
  * 国家-地区
  */
-const lang = {
+const LANGS = {
   'en-US': enUS,
   'zh-CN': zhCN,
   'zh-HK': zhHK,
@@ -22,7 +22,7 @@ const lang = {
   'ja-JP': jaJP
 }
 
-export default lang
+export default LANGS
 
 /**
  * 获取当前语言字典
@@ -30,33 +30,33 @@ export default lang
  * @returns 不同语言对应字典
  */
 export function generateLocaleDict(langString) {
-  const supportedLocales = Object.keys(lang)
+  const supportedLocales = Object.keys(LANGS)
   let userLocale
 
   // 将语言字符串拆分为语言和地区代码，例如将 "zh-CN" 拆分为 "zh" 和 "CN"
-  const [language, region] = langString.split(/[-_]/)
+  const [language, region] = langString?.split(/[-_]/)
 
   // 优先匹配语言和地区都匹配的情况
   const specificLocale = `${language}-${region}`
   if (supportedLocales.includes(specificLocale)) {
-    userLocale = lang[specificLocale]
+    userLocale = LANGS[specificLocale]
   }
 
   // 然后尝试匹配只有语言匹配的情况
   if (!userLocale) {
     const languageOnlyLocales = supportedLocales.filter(locale => locale.startsWith(language))
     if (languageOnlyLocales.length > 0) {
-      userLocale = lang[languageOnlyLocales[0]]
+      userLocale = LANGS[languageOnlyLocales[0]]
     }
   }
 
   // 如果还没匹配到，则返回最接近的语言包
   if (!userLocale) {
     const fallbackLocale = supportedLocales.find(locale => locale.startsWith('en'))
-    userLocale = lang[fallbackLocale]
+    userLocale = LANGS[fallbackLocale]
   }
 
-  return mergeDeep({}, lang['en-US'], userLocale)
+  return mergeDeep({}, LANGS['en-US'], userLocale)
 }
 
 /**
@@ -65,11 +65,12 @@ export function generateLocaleDict(langString) {
  */
 export function initLocale(lang, locale, changeLang, changeLocale) {
   if (isBrowser) {
-    const queryLang = getQueryVariable('lang') || loadLangFromCookies() || window.navigator.language
+    const queryLang = getQueryVariable('lang') || loadLangFromCookies()
     let currentLang = lang
-    if (queryLang !== lang) {
+    if (queryLang && queryLang !== 'undefined' && queryLang !== lang) {
       currentLang = queryLang
     }
+
     changeLang(currentLang)
     saveLangToCookies(currentLang)
 
@@ -88,9 +89,9 @@ export const loadLangFromCookies = () => {
 }
 
 /**
-     * 保存语言
-     * @param newTheme
-     */
+ * 保存语言
+ * @param newTheme
+ */
 export const saveLangToCookies = (lang) => {
   cookie.save('lang', lang, { path: '/' })
 }
diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
index 51e38115..063da7f8 100644
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -1,5 +1,5 @@
 export default {
-  LOCALE: 'en-US',
+  LOCALE: 'English',
   MENU: {
     WALK_AROUND: 'Walk Around',
     CATEGORY: 'Category',
@@ -41,6 +41,7 @@ export default {
     ARTICLE_DETAIL: 'Article Details',
     PASSWORD_ERROR: 'Password Error!',
     ARTICLE_LOCK_TIPS: 'Please Enter the password:',
+    NO_RESULTS_FOUND: 'No results found.',
     SUBMIT: 'Submit',
     POST_TIME: 'Post on',
     LAST_EDITED_TIME: 'Last edited',
@@ -52,8 +53,8 @@ export default {
     ANNOUNCEMENT: 'Announcement',
     START_READING: 'Start Reading',
     MINUTE: 'min',
-    WORD_COUNT: 'W.C.'
-
+    WORD_COUNT: 'Words',
+    READ_TIME: 'Read Time'
   },
   PAGINATION: {
     PREV: 'Prev',
@@ -66,5 +67,10 @@ export default {
   POST: {
     BACK: 'Back',
     TOP: 'Top'
+  },
+  MAILCHIMP: {
+    SUBSCRIBE: 'Subscribe',
+    MSG: 'Get the latest news and articles to your inbox every month.',
+    EMAIL: 'Email'
   }
 }
diff --git a/lib/lang/fr-FR.js b/lib/lang/fr-FR.js
index 30089a70..2bc40057 100644
--- a/lib/lang/fr-FR.js
+++ b/lib/lang/fr-FR.js
@@ -1,5 +1,5 @@
 export default {
-  LOCALE: 'fr-FR',
+  LOCALE: 'français',
   NAV: {
     INDEX: 'Accueil',
     RSS: 'RSS',
diff --git a/lib/lang/ja-JP.js b/lib/lang/ja-JP.js
index ab0e81f8..c27eef0b 100644
--- a/lib/lang/ja-JP.js
+++ b/lib/lang/ja-JP.js
@@ -1,5 +1,5 @@
 export default {
-  LOCALE: 'ja-JP',
+  LOCALE: '日本語',
   NAV: {
     INDEX: 'ホーム',
     RSS: '購読',
diff --git a/lib/lang/tr-TR.js b/lib/lang/tr-TR.js
index 227b3fba..5be7a520 100644
--- a/lib/lang/tr-TR.js
+++ b/lib/lang/tr-TR.js
@@ -1,5 +1,5 @@
 export default {
-  LOCALE: 'tr-TR',
+  LOCALE: 'Türkçe',
   NAV: {
     INDEX: 'Blog',
     RSS: 'RSS',
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
index 91a4600a..2f4af10f 100644
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -1,5 +1,5 @@
 export default {
-  LOCALE: 'zh-CN',
+  LOCALE: '中文(简体)',
   MENU: {
     WALK_AROUND: '随便逛逛',
     CATEGORY: '博客分类',
@@ -40,6 +40,7 @@ export default {
     VIEWS: '次查看',
     COPYRIGHT_NOTICE: '本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。',
     RESULT_OF_SEARCH: '篇搜索到的结果',
+    NO_RESULTS_FOUND: '没有找到文章',
     ARTICLE_DETAIL: '文章详情',
     PASSWORD_ERROR: '密码错误！',
     ARTICLE_LOCK_TIPS: '文章已上锁，请输入访问密码',
@@ -54,7 +55,8 @@ export default {
     ANNOUNCEMENT: '公告',
     START_READING: '开始阅读',
     MINUTE: '分钟',
-    WORD_COUNT: '字数'
+    WORD_COUNT: '字数',
+    READ_TIME: '阅读时长'
   },
   PAGINATION: {
     PREV: '上页',
@@ -67,5 +69,10 @@ export default {
   POST: {
     BACK: '返回上页',
     TOP: '回到顶部'
+  },
+  MAILCHIMP: {
+    SUBSCRIBE: '邮件订阅',
+    MSG: '订阅以获取每月更新的新闻和文章，直接发送至您的邮箱。',
+    EMAIL: '邮箱'
   }
 }
diff --git a/lib/lang/zh-HK.js b/lib/lang/zh-HK.js
index 6a05df55..f434fe6e 100644
--- a/lib/lang/zh-HK.js
+++ b/lib/lang/zh-HK.js
@@ -1,4 +1,5 @@
 export default {
+  LOCALE: '中文(繁体香港)',
   NAV: {
     INDEX: '網誌',
     RSS: '訂閱',
diff --git a/lib/lang/zh-TW.js b/lib/lang/zh-TW.js
index 673fe109..de746c08 100644
--- a/lib/lang/zh-TW.js
+++ b/lib/lang/zh-TW.js
@@ -1,5 +1,5 @@
 export default {
-  LOCALE: 'zh-TW',
+  LOCALE: '中文(繁体台湾)',
   NAV: {
     INDEX: '部落格',
     RSS: '訂閱',
diff --git a/lib/notion/getNotion.js b/lib/notion/getNotion.js
index 3da84ee8..aad65379 100644
--- a/lib/notion/getNotion.js
+++ b/lib/notion/getNotion.js
@@ -16,7 +16,6 @@ export async function getNotion(pageId) {
   }
 
   const postInfo = blockMap?.block?.[idToUuid(pageId)].value
-
   return {
     id: pageId,
     type: postInfo,
@@ -26,7 +25,7 @@ export async function getNotion(pageId) {
     status: 'Published',
     createdTime: formatDate(new Date(postInfo.created_time).toString(), BLOG.LANG),
     lastEditedDay: formatDate(new Date(postInfo?.last_edited_time).toString(), BLOG.LANG),
-    fullWidth: false,
+    fullWidth: postInfo?.fullWidth,
     page_cover: getPageCover(postInfo),
     date: { start_date: formatDate(new Date(postInfo?.last_edited_time).toString(), BLOG.LANG) },
     blockMap
diff --git a/lib/notion/getNotionConfig.js b/lib/notion/getNotionConfig.js
new file mode 100644
index 00000000..984b6eb7
--- /dev/null
+++ b/lib/notion/getNotionConfig.js
@@ -0,0 +1,140 @@
+/**
+ * 从Notion中读取站点配置;
+ * 在Notion模板中创建一个类型为CONFIG的页面，再添加一个数据库表格，即可用于填写配置
+ * Notion数据库配置优先级最高，将覆盖vercel环境变量以及blog.config.js中的配置
+ * --注意--
+ * 数据库请从模板复制 https://www.notion.so/tanghh/287869a92e3d4d598cf366bd6994755e
+ *
+ */
+import { getDateValue, getTextContent } from 'notion-utils'
+import { getPostBlocks } from './getPostBlocks'
+import getAllPageIds from './getAllPageIds'
+
+/**
+ * 从Notion中读取Config配置表
+ * @param {*} allPages
+ * @returns
+ */
+export async function getConfigMapFromConfigPage(allPages) {
+  // 默认返回配置文件
+  const notionConfig = {}
+
+  if (!allPages || !Array.isArray(allPages) || allPages.length === 0) {
+    console.warn('[Notion配置] 忽略的配置')
+    return null
+  }
+  const configPage = allPages?.find(post => {
+    return post && post?.type && (post?.type === 'CONFIG' || post?.type === 'config' || post?.type === 'Config')
+  })
+
+  if (!configPage) {
+    console.warn('[Notion配置] 未找到配置页面')
+    return null
+  }
+  const configPageId = configPage.id
+  //   console.log('[Notion配置]请求配置数据 ', configPage.id)
+  let pageRecordMap = await getPostBlocks(configPageId, 'config-table')
+  //   console.log('配置中心Page', configPageId, pageRecordMap)
+  let content = pageRecordMap.block[configPageId].value.content
+  for (const table of ['Config-Table', 'CONFIG-TABLE']) {
+    if (content) break
+    pageRecordMap = await getPostBlocks(configPageId, table)
+    content = pageRecordMap.block[configPageId].value.content
+  }
+
+  if (!content) {
+    console.warn('[Notion配置] 未找到配置表格', pageRecordMap.block[configPageId], pageRecordMap.block[configPageId].value)
+    return null
+  }
+
+  // 找到配置文件中的database
+  //   for (const contentId of content) {
+  //     console.log('内容', contentId, configPageRecordMap.block[contentId].value.type === 'collection_view')
+  //   }
+  const configTableId = content?.find(contentId => {
+    return pageRecordMap.block[contentId].value.type === 'collection_view'
+  })
+
+  // eslint-disable-next-line no-constant-condition, no-self-compare
+  if (!configTableId) {
+    console.warn('[Notion配置]未找到配置表格数据', pageRecordMap.block[configPageId], pageRecordMap.block[configPageId].value)
+    return null
+  }
+
+  // 页面查找
+  const databaseRecordMap = pageRecordMap.block[configTableId]
+  const block = pageRecordMap.block || {}
+  const rawMetadata = databaseRecordMap.value
+  // Check Type Page-Database和Inline-Database
+  if (
+    rawMetadata?.type !== 'collection_view_page' && rawMetadata?.type !== 'collection_view'
+  ) {
+    console.error(`pageId "${configTableId}" is not a database`)
+    return null
+  }
+  //   console.log('表格', databaseRecordMap, block, rawMetadata)
+  const collectionId = rawMetadata?.collection_id
+  const collection = pageRecordMap.collection[collectionId].value
+  const collectionQuery = pageRecordMap.collection_query
+  const collectionView = pageRecordMap.collection_view
+  const schema = collection?.schema
+  const viewIds = rawMetadata?.view_ids
+  const pageIds = getAllPageIds(collectionQuery, collectionId, collectionView, viewIds)
+  if (pageIds?.length === 0) {
+    console.error('[Notion配置]获取到的文章列表为空，请检查notion模板', collectionQuery, collection, collectionView, viewIds, databaseRecordMap)
+  }
+  // 遍历用户的表格
+  for (let i = 0; i < pageIds.length; i++) {
+    const id = pageIds[i]
+    const value = block[id]?.value
+    if (!value) {
+      continue
+    }
+    const rawProperties = Object.entries(block?.[id]?.value?.properties || [])
+    const excludeProperties = ['date', 'select', 'multi_select', 'person']
+    const properties = {}
+    for (let i = 0; i < rawProperties.length; i++) {
+      const [key, val] = rawProperties[i]
+      properties.id = id
+      if (schema[key]?.type && !excludeProperties.includes(schema[key].type)) {
+        properties[schema[key].name] = getTextContent(val)
+      } else {
+        switch (schema[key]?.type) {
+          case 'date': {
+            const dateProperty = getDateValue(val)
+            delete dateProperty.type
+            properties[schema[key].name] = dateProperty
+            break
+          }
+          case 'select':
+          case 'multi_select': {
+            const selects = getTextContent(val)
+            if (selects[0]?.length) {
+              properties[schema[key].name] = selects.split(',')
+            }
+            break
+          }
+          default:
+            break
+        }
+      }
+    }
+
+    if (properties) {
+      // 将表格中的字段映射成 英文
+      const config = {
+        enable: (properties['启用'] || properties.Enable) === 'Yes',
+        key: properties['配置名'] || properties.Name,
+        value: properties['配置值'] || properties.Value
+      }
+
+      // 只导入生效的配置
+      if (config.enable) {
+        // console.log('[Notion配置]', config.key, config.value)
+        notionConfig[config.key] = config.value
+      }
+    }
+  }
+
+  return notionConfig
+}
diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js
index f885f22b..5b77e716 100755
--- a/lib/notion/getNotionData.js
+++ b/lib/notion/getNotionData.js
@@ -8,6 +8,7 @@ import getAllPageIds from './getAllPageIds'
 import { getAllTags } from './getAllTags'
 import getPageProperties from './getPageProperties'
 import { mapImgUrl, compressImage } from './mapImage'
+import { getConfigMapFromConfigPage } from './getNotionConfig'
 
 /**
  * 获取博客数据
@@ -272,6 +273,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
 
   // 文章计数
   let postCount = 0
+
   // 查找所有的Post和Page
   const allPages = collectionData.filter(post => {
     if (post?.type === 'Post' && post.status === 'Published') {
@@ -282,6 +284,9 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
      (post?.status === 'Invisible' || post?.status === 'Published')
   })
 
+  // 站点配置优先读取配置表格，否则读取blog.config.js 文件
+  const NOTION_CONFIG = await getConfigMapFromConfigPage(collectionData) || {}
+
   // Sort by date
   if (BLOG.POSTS_SORT_BY === 'date') {
     allPages.sort((a, b) => {
@@ -300,6 +305,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
   const allNavPages = getNavPages({ allPages })
 
   return {
+    NOTION_CONFIG,
     notice,
     siteInfo,
     allPages,
diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js
index ddf47f3e..aca92b25 100644
--- a/lib/notion/getPageProperties.js
+++ b/lib/notion/getPageProperties.js
@@ -6,6 +6,15 @@ import formatDate from '../formatDate'
 import md5 from 'js-md5'
 import { mapImgUrl } from './mapImage'
 
+/**
+ * 获取页面元素成员属性
+ * @param {*} id
+ * @param {*} block
+ * @param {*} schema
+ * @param {*} authToken
+ * @param {*} tagOptions
+ * @returns
+ */
 export default async function getPageProperties(id, block, schema, authToken, tagOptions) {
   const rawProperties = Object.entries(block?.[id]?.value?.properties || [])
   const excludeProperties = ['date', 'select', 'multi_select', 'person']
@@ -92,11 +101,11 @@ export default async function getPageProperties(id, block, schema, authToken, ta
   delete properties.content
 
   // 处理URL
-  if (properties.type === BLOG.NOTION_PROPERTY_NAME.type_post) {
+  if (properties.type === 'Post') {
     properties.slug = (BLOG.POST_URL_PREFIX) ? generateCustomizeUrl(properties) : (properties.slug ?? properties.id)
-  } else if (properties.type === BLOG.NOTION_PROPERTY_NAME.type_page) {
+  } else if (properties.type === 'Page') {
     properties.slug = properties.slug ?? properties.id
-  } else if (properties.type === BLOG.NOTION_PROPERTY_NAME.type_menu || properties.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) {
+  } else if (properties.type === 'Menu' || properties.type === 'SubMenu') {
     // 菜单路径为空、作为可展开菜单使用
     properties.to = properties.slug ?? '#'
     properties.name = properties.title ?? ''
@@ -108,6 +117,7 @@ export default async function getPageProperties(id, block, schema, authToken, ta
       properties.slug += '.html'
     }
   }
+  // 密码字段md5
   properties.password = properties.password ? md5(properties.slug + properties.password) : ''
   return properties
 }
diff --git a/lib/notion/getPostBlocks.js b/lib/notion/getPostBlocks.js
index 809dfe7a..167f0b0e 100644
--- a/lib/notion/getPostBlocks.js
+++ b/lib/notion/getPostBlocks.js
@@ -62,8 +62,10 @@ export async function getPageWithRetry(id, from, retryAttempts = 3) {
 }
 
 /**
- * 获取到的blockMap删除不需要的字段
- * 并且对于页面内容进行特殊处理，比如文件url格式化
+ * 获取到的页面BLOCK特殊处理
+ * 1.删除冗余字段
+ * 2.比如文件、视频、音频、url格式化
+ * 3.代码块等元素兼容
  * @param {*} id 页面ID
  * @param {*} pageBlock 页面元素
  * @param {*} slice 截取数量
@@ -102,7 +104,10 @@ function filterPostBlocks(id, pageBlock, slice) {
     }
 
     // 如果是文件，或嵌入式PDF，需要重新加密签名
-    if ((b?.value?.type === 'file' || b?.value?.type === 'pdf' || b?.value?.type === 'video') && b?.value?.properties?.source?.[0][0]) {
+    if ((b?.value?.type === 'file' || b?.value?.type === 'pdf' || b?.value?.type === 'video' || b?.value?.type === 'audio') &&
+         b?.value?.properties?.source?.[0][0] &&
+         b?.value?.properties?.source?.[0][0].indexOf('amazonaws.com') > 0
+    ) {
       const oldUrl = b?.value?.properties?.source?.[0][0]
       const newUrl = `https://notion.so/signed/${encodeURIComponent(oldUrl)}?table=block&id=${b?.value?.id}`
       b.value.properties.source[0][0] = newUrl
diff --git a/lib/notion/mapImage.js b/lib/notion/mapImage.js
index b6da8d87..dbb785e1 100644
--- a/lib/notion/mapImage.js
+++ b/lib/notion/mapImage.js
@@ -1,5 +1,81 @@
 import BLOG from '@/blog.config'
 
+/**
+ * 图片映射
+ * 1. 如果是 /xx.xx 相对路径格式，则转化为 完整notion域名图片
+ * 2. 如果是 bookmark类型的block 图片封面无需处理
+ * @param {*} img
+ * @param {*} value
+ * @returns
+ */
+const mapImgUrl = (img, block, type = 'block', from) => {
+  if (!img) {
+    return null
+  }
+  let ret = null
+  // 相对目录，则视为notion的自带图片
+  if (img.startsWith('/')) {
+    ret = BLOG.NOTION_HOST + img
+  } else {
+    ret = img
+  }
+
+  // Notion 图床转换为永久地址
+  const isNotionSignImg = ret.indexOf('https://www.notion.so/image') !== 0 && (ret.indexOf('secure.notion-static.com') > 0 || ret.indexOf('prod-files-secure') > 0)
+  const isImgBlock = BLOG.IMG_URL_TYPE === 'Notion' || type !== 'block'
+  if (isNotionSignImg && isImgBlock) {
+    ret = BLOG.NOTION_HOST + '/image/' + encodeURIComponent(ret) + '?table=' + type + '&id=' + block.id
+  }
+
+  if (!isEmoji(ret) && ret.indexOf('notion.so/images/page-cover') < 0) {
+    if (BLOG.RANDOM_IMAGE_URL) {
+      // 只有配置了随机图片接口，才会替换图片
+      const texts = BLOG.RANDOM_IMAGE_REPLACE_TEXT
+      let isReplace = false;
+      if (texts) {
+        const textArr = texts.split(',')
+        // 判断是否包含替换的文本
+        textArr.forEach(text => {
+          if (ret.indexOf(text) > -1) {
+            isReplace = true
+          }
+        })
+      } else {
+        isReplace = true
+      }
+      if (isReplace) {
+        ret = BLOG.RANDOM_IMAGE_URL
+      }
+    }
+
+    // 图片url优化，确保每一篇文章的图片url唯一
+    if (ret && ret.length > 4) {
+      // 图片接口拼接唯一识别参数，防止请求的图片被缓，而导致随机结果相同
+      const separator = ret.includes('?') ? '&' : '?'
+      ret = `${ret.trim()}${separator}t=${block.id}`
+    }
+  }
+
+  // 文章封面压缩
+  if (from === 'pageCoverThumbnail' || block.type === 'image') {
+  // 统一压缩图片
+    const width = block?.format?.block_width
+    ret = compressImage(ret, width)
+  }
+
+  return ret
+}
+
+/**
+ * 是否是emoji图标
+ * @param {*} str
+ * @returns
+ */
+function isEmoji(str) {
+  const emojiRegex = /[\u{1F300}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{1F018}-\u{1F270}\u{238C}\u{2B06}\u{2B07}\u{2B05}\u{27A1}\u{2194}-\u{2199}\u{2194}\u{21A9}\u{21AA}\u{2934}\u{2935}\u{25AA}\u{25AB}\u{25FE}\u{25FD}\u{25FB}\u{25FC}\u{25B6}\u{25C0}\u{1F200}-\u{1F251}]/u;
+  return emojiRegex.test(str);
+}
+
 /**
  * 压缩图片
  * 1. Notion图床可以通过指定url-query参数来压缩裁剪图片 例如 ?xx=xx&width=400
@@ -11,7 +87,7 @@ const compressImage = (image, width = 800, quality = 50, fmt = 'webp') => {
     return null
   }
   if (image.indexOf(BLOG.NOTION_HOST) === 0 && image.indexOf('amazonaws.com') > 0) {
-    return `${image}&width=${width}`
+    return `${image}&width=${width}&cache=v2`
   }
   // 压缩unsplash图片
   if (image.indexOf('https://images.unsplash.com/') === 0) {
@@ -40,51 +116,4 @@ const compressImage = (image, width = 800, quality = 50, fmt = 'webp') => {
   return image
 }
 
-/**
- * 图片映射
- * 1. 如果是 /xx.xx 相对路径格式，则转化为 完整notion域名图片
- * 2. 如果是 bookmark类型的block 图片封面无需处理
- * @param {*} img
- * @param {*} value
- * @returns
- */
-const mapImgUrl = (img, block, type = 'block', from) => {
-  if (!img) {
-    return null
-  }
-  let ret = null
-  // 相对目录，则视为notion的自带图片
-  if (img.startsWith('/')) {
-    ret = BLOG.NOTION_HOST + img
-  } else {
-    ret = img
-  }
-
-  // Notion 图床转换为永久地址
-  const isNotionImg = ret.indexOf('secure.notion-static.com') > 0 || ret.indexOf('prod-files-secure') > 0
-  const isImgBlock = BLOG.IMG_URL_TYPE === 'Notion' || type !== 'block'
-  if (isNotionImg && isImgBlock) {
-    ret = BLOG.NOTION_HOST + '/image/' + encodeURIComponent(ret) + '?table=' + type + '&id=' + block.id
-  }
-
-  if (!isEmoji(ret) && ret.indexOf('notion.so/images/page-cover') < 0) {
-    // 随机图片接口优化 防止因url一致而随机结果相同
-    const separator = ret.includes('?') ? '&' : '?'
-    // 拼接唯一识别参数，防止请求的图片被缓存
-    ret = `${ret.trim()}${separator}t=${block.id}`
-  }
-
-  // 文章封面
-  if (from === 'pageCoverThumbnail') {
-    ret = compressImage(ret)
-  }
-
-  return ret
-}
-
-function isEmoji(str) {
-  const emojiRegex = /[\u{1F300}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{1F018}-\u{1F270}]/u;
-  return emojiRegex.test(str);
-}
-
 export { mapImgUrl, compressImage }
diff --git a/lib/utils.js b/lib/utils.js
index 75278521..3f0d858e 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -7,6 +7,20 @@ import { memo } from 'react'
  */
 export const isBrowser = typeof window !== 'undefined'
 
+/**
+ * google机器人
+ * @returns
+ */
+export const isSearchEngineBot = () => {
+  if (typeof navigator === 'undefined') {
+    return false
+  }
+  // 获取用户代理字符串
+  const userAgent = navigator.userAgent;
+  // 使用正则表达式检测是否包含搜索引擎爬虫关键字
+  return /Googlebot|bingbot|Baidu/.test(userAgent)
+}
+
 /**
  * 组件持久化
  */
@@ -75,7 +89,6 @@ export function getQueryVariable(key) {
   }
   return (false)
 }
-
 /**
  * 获取 URL 中指定参数的值
  * @param {string} url
@@ -83,8 +96,10 @@ export function getQueryVariable(key) {
  * @returns {string|null}
  */
 export function getQueryParam(url, param) {
-  const searchParams = new URLSearchParams(url.split('?')[1])
-  return searchParams.get(param)
+  // 移除哈希部分
+  const urlWithoutHash = url.split('#')[0];
+  const searchParams = new URLSearchParams(urlWithoutHash.split('?')[1]);
+  return searchParams.get(param);
 }
 
 /**
@@ -202,3 +217,46 @@ export const isMobile = () => {
 
   return isMobile
 }
+
+/**
+ * 扫描页面上的所有文本节点，将url格式的文本转为可点击链接
+ * @param {*} node
+ */
+export const scanAndConvertToLinks = (node) => {
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = node.textContent;
+    const urlRegex = /https?:\/\/[^\s]+/g;
+    let lastIndex = 0;
+    let match;
+
+    const newNode = document.createElement('span');
+
+    while ((match = urlRegex.exec(text)) !== null) {
+      const beforeText = text.substring(lastIndex, match.index);
+      const url = match[0];
+
+      if (beforeText) {
+        newNode.appendChild(document.createTextNode(beforeText));
+      }
+
+      const link = document.createElement('a');
+      link.href = url;
+      link.target = '_blank'
+      link.textContent = url;
+
+      newNode.appendChild(link);
+
+      lastIndex = urlRegex.lastIndex;
+    }
+
+    if (lastIndex < text.length) {
+      newNode.appendChild(document.createTextNode(text.substring(lastIndex)));
+    }
+
+    node.parentNode.replaceChild(newNode, node);
+  } else if (node.nodeType === Node.ELEMENT_NODE) {
+    for (const childNode of node.childNodes) {
+      scanAndConvertToLinks(childNode);
+    }
+  }
+}
diff --git a/next-sitemap.config.js b/next-sitemap.config.js
index a094e809..29e1ca67 100644
--- a/next-sitemap.config.js
+++ b/next-sitemap.config.js
@@ -1,5 +1,8 @@
 const BLOG = require('./blog.config')
 
+/**
+ * 通常没啥用，sitemap交给 /pages/sitemap.xml.js 动态生成
+ */
 module.exports = {
   siteUrl: BLOG.LINK,
   changefreq: 'daily',
diff --git a/next.config.js b/next.config.js
index 0a8bd36d..6266fb48 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,10 +1,11 @@
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true'
-})
-
 const { THEME } = require('./blog.config')
 const fs = require('fs')
 const path = require('path')
+const BLOG = require('./blog.config')
+
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: BLOG.BUNDLE_ANALYZER
+})
 
 /**
  * 扫描指定目录下的文件夹名，用于获取当前有几个主题
@@ -91,6 +92,7 @@ module.exports = withBundleAnalyzer({
     //   })
     // }
     // 动态主题：添加 resolve.alias 配置，将动态路径映射到实际路径
+    console.log('加载默认主题', path.resolve(__dirname, 'themes', THEME))
     config.resolve.alias['@theme-components'] = path.resolve(__dirname, 'themes', THEME)
     return config
   },
diff --git a/package.json b/package.json
index 6164cbb4..776d6932 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "4.0.18",
+  "version": "4.2.0",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {
diff --git a/pages/404.js b/pages/404.js
index c770385f..ae8eea37 100644
--- 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,13 +9,12 @@ 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 }
 
   // 根据页面路径加载不同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 6fa5d47b..dfc90fcc 100644
--- 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')}` : `${siteConfig('TITLE')} | loading`,
     description: post?.summary,
     type: post?.type,
     slug: post?.slug,
@@ -76,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/_app.js b/pages/_app.js
index a16513b9..82b4ca72 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -6,52 +6,44 @@ import '@/styles/utility-patterns.css'
 // core styles shared by all of react-notion-x (required)
 import 'react-notion-x/src/styles.css'
 import '@/styles/notion.css' //  重写部分样式
+import 'aos/dist/aos.css' // You can also use <link> for styles
 
 import { GlobalContextProvider } from '@/lib/global'
+import { getGlobalLayoutByTheme } from '@/themes/theme'
+import { useRouter } from 'next/router'
+import { useCallback, useMemo } from 'react'
+import { getQueryParam } from '../lib/utils'
+import useAdjustStyle from '@/hooks/useAdjustStyle'
 
-import AOS from 'aos'
-import 'aos/dist/aos.css' // You can also use <link> for styles
-import dynamic from 'next/dynamic'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
-import BLOG from '@/blog.config'
-
-// 各种扩展插件 动画等
-const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))
+// 各种扩展插件 这个要阻塞引入
+import ExternalPlugins from '@/components/ExternalPlugins'
+import { THEME } from '@/blog.config'
 
 const MyApp = ({ Component, pageProps }) => {
-  // 自定义样式css和js引入
-  if (isBrowser) {
-    // 初始化AOS动画
-    AOS.init()
-    // 静态导入本地自定义样式
-    loadExternalResource('/css/custom.css', 'css')
-    loadExternalResource('/js/custom.js', 'js')
+  // 一些可能出现 bug 的样式，可以统一放入该钩子进行调整
+  useAdjustStyle();
 
-    // 自动添加图片阴影
-    if (BLOG.IMG_SHADOW) {
-      loadExternalResource('/css/img-shadow.css', 'css')
-    }
+  const route = useRouter()
+  const queryParam = useMemo(() => {
+    return getQueryParam(route.asPath, 'theme') || THEME
+  }, [route])
 
-    // 导入外部自定义脚本
-    if (BLOG.CUSTOM_EXTERNAL_JS && BLOG.CUSTOM_EXTERNAL_JS.length > 0) {
-      for (const url of BLOG.CUSTOM_EXTERNAL_JS) {
-        loadExternalResource(url, 'js')
-      }
-    }
-
-    // 导入外部自定义样式
-    if (BLOG.CUSTOM_EXTERNAL_CSS && BLOG.CUSTOM_EXTERNAL_CSS.length > 0) {
-      for (const url of BLOG.CUSTOM_EXTERNAL_CSS) {
-        loadExternalResource(url, 'css')
-      }
-    }
-  }
+  const GLayout = useCallback(
+    props => {
+      // 根据页面路径加载不同Layout文件
+      const Layout = getGlobalLayoutByTheme(queryParam)
+      return <Layout {...props} />
+    },
+    [queryParam]
+  )
 
   return (
-        <GlobalContextProvider {...pageProps}>
-            <Component {...pageProps} />
-            <ExternalPlugins {...pageProps} />
-        </GlobalContextProvider>
+    <GlobalContextProvider {...pageProps}>
+      <GLayout {...pageProps}>
+        <Component {...pageProps} />
+      </GLayout>
+      <ExternalPlugins {...pageProps} />
+    </GlobalContextProvider>
   )
 }
 
diff --git a/pages/_document.js b/pages/_document.js
index 9c7bd4c8..96c999c3 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,7 +1,6 @@
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import BLOG from '@/blog.config'
-import CommonScript from '@/components/CommonScript'
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -14,7 +13,6 @@ class MyDocument extends Document {
             <Html lang={BLOG.LANG}>
                 <Head>
                 <link rel='icon' href= {`${BLOG.BLOG_FAVICON}`} />
-                  <CommonScript />
                   {/* 预加载字体 */}
                   {BLOG.FONT_AWESOME && <>
                       <link rel='preload' href={BLOG.FONT_AWESOME} as="style" crossOrigin="anonymous" />
@@ -22,6 +20,7 @@ class MyDocument extends Document {
                   </>}
 
                   {BLOG.FONT_URL?.map((fontUrl, index) => {
+                    console.log(fontUrl)
                     if (fontUrl.endsWith('.css')) {
                       return <link key={index} rel="stylesheet" href={fontUrl} />
                     } else {
diff --git a/pages/api/cache.js b/pages/api/cache.js
new file mode 100644
index 00000000..97738651
--- /dev/null
+++ b/pages/api/cache.js
@@ -0,0 +1,15 @@
+import { cleanCache } from '@/lib/cache/local_file_cache'
+
+/**
+ * 清理缓存
+ * @param {*} req
+ * @param {*} res
+ */
+export default async function handler(req, res) {
+  try {
+    await cleanCache()
+    res.status(200).json({ status: 'success', message: 'Clean cache successful!' })
+  } catch (error) {
+    res.status(400).json({ status: 'error', message: 'Clean cache failed!', error })
+  }
+}
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 106ad7d2..a0a57f28 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -6,13 +6,14 @@ 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
   const { locale } = useGlobal()
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   useEffect(() => {
     if (isBrowser) {
@@ -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('DESCRIPTION'),
     image: siteInfo?.pageCover,
     slug: 'archive',
     type: 'website'
diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js
index 03cd4fbd..a623cc6b 100644
--- 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'
 
 /**
  * 分类页
@@ -15,13 +16,13 @@ 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} | ${
-      siteInfo?.title || ''
+      siteConfig('TITLE') || ''
     }`,
-    description: siteInfo?.description,
+    description: siteConfig('DESCRIPTION'),
     slug: 'category/' + props.category,
     image: siteInfo?.pageCover,
     type: 'website'
diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js
index 9174e117..ae5124b1 100644
--- 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'
 
 /**
  * 分类页
@@ -15,13 +16,13 @@ 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} | ${
-      siteInfo?.title || ''
+      siteConfig('TITLE') || ''
     }`,
-    description: siteInfo?.description,
+    description: siteConfig('DESCRIPTION'),
     slug: 'category/' + props.category,
     image: siteInfo?.pageCover,
     type: 'website'
diff --git a/pages/category/index.js b/pages/category/index.js
index b4872000..85121910 100644
--- 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'
 
 /**
  * 分类首页
@@ -15,11 +16,11 @@ 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} | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${locale.COMMON.CATEGORY} | ${siteConfig('TITLE')}`,
+    description: siteConfig('DESCRIPTION'),
     image: siteInfo?.pageCover,
     slug: 'category',
     type: 'website'
diff --git a/pages/index.js b/pages/index.js
index 328ece1e..18f7ec47 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,8 +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'
 
 /**
  * 首页布局
@@ -13,8 +14,16 @@ import { getLayoutByTheme } from '@/themes/theme'
  */
 const Index = props => {
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
-  return <Layout {...props} />
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
+
+  const meta = {
+    title: `${siteConfig('TITLE')} | ${siteConfig('DESCRIPTION')}`,
+    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)
   }
 }
diff --git a/pages/page/[page].js b/pages/page/[page].js
index 02b847a8..c34aef1d 100644
--- 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'
 
 /**
  * 文章列表分页
@@ -13,11 +14,11 @@ 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 | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${props?.page} | Page | ${siteConfig('TITLE')}`,
+    description: siteConfig('DESCRIPTION'),
     image: siteInfo?.pageCover,
     slug: 'page/' + props.page,
     type: 'website'
diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js
index 042bbf85..89bec089 100644
--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -4,17 +4,18 @@ 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
   const { locale } = useGlobal()
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: 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'
@@ -112,7 +113,7 @@ const isIterable = obj =>
 async function filterByMemCache(allPosts, keyword) {
   const filterPosts = []
   if (keyword) {
-    keyword = keyword.trim()
+    keyword = keyword.trim().toLowerCase()
   }
   for (const post of allPosts) {
     const cacheKey = 'page_block_' + post.id
@@ -130,7 +131,7 @@ async function filterByMemCache(allPosts, keyword) {
       if (!c) {
         continue
       }
-      const index = c.toLowerCase().indexOf(keyword.toLowerCase())
+      const index = c.toLowerCase().indexOf(keyword)
       if (index > -1) {
         hit = true
         hitCount += 1
diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js
index 20240f19..9de43cc1 100644
--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -4,17 +4,18 @@ 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
   const { locale } = useGlobal()
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: 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'
diff --git a/pages/search/index.js b/pages/search/index.js
index 22061cbd..fa45d2d5 100644
--- 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'
 
 /**
  * 搜索路由
@@ -14,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)
@@ -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('DESCRIPTION'),
     image: siteInfo?.pageCover,
     slug: 'search',
     type: 'website'
diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js
index bd9f7529..1d6c94d2 100644
--- 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'
 
 /**
  * 标签下的文章列表
@@ -14,11 +15,11 @@ 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} | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${tag} | ${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
+    description: siteConfig('DESCRIPTION'),
     image: siteInfo?.pageCover,
     slug: 'tag/' + tag,
     type: 'website'
diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js
index 2eaef518..ab28fdbc 100644
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -3,17 +3,18 @@ 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()
   const { tag, siteInfo } = props
 
   // 根据页面路径加载不同Layout文件
-  const Layout = getLayoutByTheme(useRouter())
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
 
   const meta = {
-    title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${tag} | ${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
+    description: siteConfig('DESCRIPTION'),
     image: siteInfo?.pageCover,
     slug: 'tag/' + tag,
     type: 'website'
diff --git a/pages/tag/index.js b/pages/tag/index.js
index 54dab9a4..bb618414 100644
--- 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'
 
 /**
  * 标签首页
@@ -14,11 +15,11 @@ 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} | ${siteInfo?.title}`,
-    description: siteInfo?.description,
+    title: `${locale.COMMON.TAGS} | ${siteConfig('TITLE')}`,
+    description: siteConfig('DESCRIPTION'),
     image: siteInfo?.pageCover,
     slug: 'tag',
     type: 'website'
diff --git a/styles/globals.css b/styles/globals.css
index 67644891..65057e3e 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -160,6 +160,11 @@ nav {
    @apply text-blue-700
 }
 
+/* twikoo 内置的 element-ui 加载样式 */
+.el-loading-spinner {
+  @apply flex justify-center items-center;
+}
+
 /* Webmention style */
 .webmention-block {
   background: rgba(0, 116, 222, .2);
diff --git a/styles/notion.css b/styles/notion.css
index c7d939be..cd461c33 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -724,7 +724,6 @@ svg.notion-page-icon {
 .notion-text {
   width: 100%;
   white-space: pre-wrap;
-  line-height: 1.5rem !important;
   word-break: break-word;
   padding: 3px 2px !important;
   margin: 1px 0 !important;
@@ -1131,9 +1130,10 @@ code[class*='language-'] {
   transition: background 20ms ease-in 0s;
   cursor: pointer;
   width: 100%;
+  opacity: 0.9;
 
   padding: 6px 2px;
-  font-size: 14px;
+  font-size: 15px;
   line-height: 1.2;
   display: flex;
   align-items: center;
diff --git a/themes/example/components/BlogListGroupByDate.js b/themes/example/components/BlogListGroupByDate.js
index ac5f9cbd..29598f0b 100644
--- a/themes/example/components/BlogListGroupByDate.js
+++ b/themes/example/components/BlogListGroupByDate.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 
 /**
@@ -24,7 +24,7 @@ export default function BlogListGroupByDate({ archiveTitle, archivePosts }) {
                         {post?.publishDay}
                     </span>{' '}
                     &nbsp;
-                    <Link href={`${BLOG.SUB_PATH}/${post.slug}`} className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+                    <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
                         {post.title}
                     </Link>
                 </div>
diff --git a/themes/example/components/BlogListPage.js b/themes/example/components/BlogListPage.js
index 429ee30e..5ae2cf5c 100644
--- a/themes/example/components/BlogListPage.js
+++ b/themes/example/components/BlogListPage.js
@@ -1,5 +1,5 @@
 
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
@@ -10,14 +10,14 @@ export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
   const { locale } = useGlobal()
   const router = useRouter()
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
   const currentPage = +page
 
   const showPrev = currentPage > 1
   const showNext = page < totalPage
   const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
 
-  const showPageCover = CONFIG.POST_LIST_COVER
+  const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG)
 
   return (
         <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'} mb-12`}>
diff --git a/themes/example/components/BlogListScroll.js b/themes/example/components/BlogListScroll.js
index ad6df10e..e876f312 100644
--- a/themes/example/components/BlogListScroll.js
+++ b/themes/example/components/BlogListScroll.js
@@ -1,6 +1,6 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import React, { useEffect } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import BlogPostCard from './BlogPostCard'
 import CONFIG from '../config'
@@ -9,33 +9,33 @@ export const BlogListScroll = props => {
   const { posts } = props
   const { locale } = useGlobal()
 
-  const [page, updatePage] = React.useState(1)
+  const [page, updatePage] = useState(1)
 
   let hasMore = false
   const postsToShow = posts
-    ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+    ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page)
     : []
 
   if (posts) {
     const totalCount = posts.length
-    hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+    hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount
   }
   const handleGetMore = () => {
     if (!hasMore) return
     updatePage(page + 1)
   }
 
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   // 监听滚动自动分页加载
-  const scrollTrigger = React.useCallback(throttle(() => {
+  const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY + window.outerHeight
     const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
     if (scrollS > clientHeight + 100) {
       handleGetMore()
     }
   }, 500))
-  const showPageCover = CONFIG.POST_LIST_COVER
+  const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG)
 
   useEffect(() => {
     window.addEventListener('scroll', scrollTrigger)
diff --git a/themes/example/components/BlogPostCard.js b/themes/example/components/BlogPostCard.js
index faf1753d..cd330a83 100644
--- a/themes/example/components/BlogPostCard.js
+++ b/themes/example/components/BlogPostCard.js
@@ -1,11 +1,11 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import CONFIG from '../config'
 import Link from 'next/link'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
 import LazyImage from '@/components/LazyImage'
 
 const BlogPostCard = ({ post }) => {
-  const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail
+  const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail
 
   return <article className={`${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''} replace mb-12 `}>
         <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
@@ -18,10 +18,10 @@ 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>
+                <Link href={`/category/${post.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{post.category}</Link>
                 {/* <span className="font-bold mx-1"> | </span> */}
                 {/* <a href="#" className="text-gray-700">2 Comments</a> */}
             </div>
@@ -40,9 +40,9 @@ const BlogPostCard = ({ post }) => {
         </div>
         {/* 图片封面 */}
         {showPageCover && (
-            <div className="md:w-5/12 w-full 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' />
+            <div className="md:w-5/12 w-full h-44 overflow-hidden p-1">
+                <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
+                    <LazyImage src={post?.pageCoverThumbnail} className='w-full bg-cover hover:scale-110 duration-200' />
                 </Link>
             </div>
         )}
diff --git a/themes/example/components/ExampleRecentComments.js b/themes/example/components/ExampleRecentComments.js
index b1555c1d..e5097740 100644
--- a/themes/example/components/ExampleRecentComments.js
+++ b/themes/example/components/ExampleRecentComments.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import BLOG from '@/blog.config'
+import { useEffect, useState } from 'react'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import { RecentComments } from '@waline/client'
 
@@ -9,11 +9,11 @@ import { RecentComments } from '@waline/client'
  * @returns
  */
 const ExampleRecentComments = (props) => {
-  const [comments, updateComments] = React.useState([])
-  const [onLoading, changeLoading] = React.useState(true)
-  React.useEffect(() => {
+  const [comments, updateComments] = useState([])
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
     RecentComments({
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
       count: 5
     }).then(({ comments }) => {
       changeLoading(false)
diff --git a/themes/example/components/Footer.js b/themes/example/components/Footer.js
index 09af18fe..77c8bad6 100644
--- a/themes/example/components/Footer.js
+++ b/themes/example/components/Footer.js
@@ -1,28 +1,24 @@
-import BLOG from '@/blog.config'
 import DarkModeButton from '@/components/DarkModeButton'
+import { siteConfig } from '@/lib/config'
 
 export const Footer = (props) => {
   const d = new Date()
   const currentYear = d.getFullYear()
-  const copyrightDate = (function() {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return <footer className="z-10 relative w-full bg-white px-6 border-t dark:border-hexo-black-gray dark:bg-hexo-black-gray ">
         <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> */}
-                {BLOG.BEI_AN && (<a href="https://beian.miit.gov.cn/" className="text-black dark:text-gray-200 no-underline hover:underline ml-4">{BLOG.BEI_AN} </a>)}
+                {siteConfig('BEI_AN') && (<a href="https://beian.miit.gov.cn/" className="text-black dark:text-gray-200 no-underline hover:underline ml-4">{siteConfig('BEI_AN')} </a>)}
                 <span className='dark:text-gray-200 no-underline ml-4'>
                     Powered by
-                    <a href="https://github.com/tangly1024/NotionNext" className=' hover:underline'> NotionNext {BLOG.VERSION}  </a>
+                    <a href="https://github.com/tangly1024/NotionNext" className=' hover:underline'> NotionNext {siteConfig('VERSION')}  </a>
                 </span>
             </div>
         </div>
diff --git a/themes/example/components/Header.js b/themes/example/components/Header.js
index 0cd85268..2ec1e27b 100644
--- 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">
                     {/* 右侧文字 */}
diff --git a/themes/example/components/JumpToTopButton.js b/themes/example/components/JumpToTopButton.js
index 30e684a8..f5e22b61 100644
--- a/themes/example/components/JumpToTopButton.js
+++ b/themes/example/components/JumpToTopButton.js
@@ -1,5 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 
 /**
  * 跳转到网页顶部
diff --git a/themes/example/components/Nav.js b/themes/example/components/Nav.js
index c00dc8aa..01fbe03f 100644
--- a/themes/example/components/Nav.js
+++ b/themes/example/components/Nav.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { MenuItemDrop } from './MenuItemDrop'
@@ -13,10 +13,10 @@ export const Nav = (props) => {
   const { locale } = useGlobal()
 
   let links = [
-    { id: 1, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { id: 2, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { id: 3, icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { id: 4, icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    { id: 1, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('EXAMPLE_MENU_SEARCH', null, CONFIG) },
+    { id: 2, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('EXAMPLE_MENU_ARCHIVE', null, CONFIG) },
+    { id: 3, icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('EXAMPLE_MENU_CATEGORY', null, CONFIG) },
+    { id: 4, icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('EXAMPLE_MENU_TAG', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -24,7 +24,7 @@ export const Nav = (props) => {
   }
 
   // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -36,8 +36,7 @@ export const Nav = (props) => {
         <nav className="w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black">
             <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
                 <ul className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
-                    {/* {links.map(link => <NormalMenuItem key={link?.id} link={link}/>)} */}
-                    {links.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+                    {links.map((link, index) => <MenuItemDrop key={index} link={link} />)}
                 </ul>
                 {/* <div className="w-full md:w-1/3 text-center md:text-right"> */}
                     {/* <!-- extra links --> */}
diff --git a/themes/example/components/SideBar.js b/themes/example/components/SideBar.js
index 39ffead7..ea0531b7 100644
--- a/themes/example/components/SideBar.js
+++ b/themes/example/components/SideBar.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
@@ -51,7 +51,7 @@ export const SideBar = (props) => {
 
             <Announcement post={notice}/>
 
-            {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <aside className="rounded shadow overflow-hidden mb-6">
+            {siteConfig('COMMENT_WALINE_SERVER_URL') && siteConfig('COMMENT_WALINE_RECENT') && <aside className="rounded shadow overflow-hidden mb-6">
                 <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
 
                 <div className="p-4">
diff --git a/themes/example/components/Title.js b/themes/example/components/Title.js
index e57e2347..5c251b0d 100644
--- 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('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">
         <h1 className=" text-xl md:text-4xl pb-4">{title}</h1>
diff --git a/themes/example/config.js b/themes/example/config.js
index 27b8a34d..181d3a93 100644
--- a/themes/example/config.js
+++ b/themes/example/config.js
@@ -3,12 +3,12 @@
  */
 const CONFIG = {
   // 菜单配置
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
+  EXAMPLE_MENU_CATEGORY: true, // 显示分类
+  EXAMPLE_MENU_TAG: true, // 显示标签
+  EXAMPLE_MENU_ARCHIVE: true, // 显示归档
+  EXAMPLE_MENU_SEARCH: true, // 显示搜索
 
-  POST_LIST_COVER: true // 列表显示文章封面
+  EXAMPLE_POST_LIST_COVER: true // 列表显示文章封面
 
 }
 export default CONFIG
diff --git a/themes/example/index.js b/themes/example/index.js
index 0e106434..fde016f7 100644
--- a/themes/example/index.js
+++ b/themes/example/index.js
@@ -1,6 +1,5 @@
 'use client'
 
-import BLOG from '@/blog.config'
 import CONFIG from './config'
 import { useEffect } from 'react'
 import { Header } from './components/Header'
@@ -27,6 +26,7 @@ import { useRouter } from 'next/router'
 import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import CommonHead from '@/components/CommonHead'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 基础布局框架
@@ -36,8 +36,23 @@ import CommonHead from '@/components/CommonHead'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, slotTop, meta } = props
-  const { onLoading } = useGlobal()
+  const { children, meta } = props
+  const { onLoading, fullWidth } = useGlobal()
+  const router = useRouter()
+  const { category, tag } = props
+  // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
+  // 如果是搜索，则列表顶部嵌入 搜索框
+  let slotTop = null
+  if (category) {
+    slotTop = <div className='pb-12'><i className="mr-1 fas fa-folder-open" />{category}</div>
+  } else if (tag) {
+    slotTop = <div className='pb-12'>#{tag}</div>
+  } else if (props.slotTop) {
+    slotTop = props.slotTop
+  } else if (router.route==='/search'){
+   // 嵌入一个搜索框在顶部 
+   slotTop = <div className='pb-12'><SearchInput {...props} /></div>
+  }
 
   // 增加一个状态以触发 Transition 组件的动画
   //   const [showTransition, setShowTransition] = useState(true)
@@ -65,12 +80,12 @@ const LayoutBase = props => {
             <div id='container-inner' className="w-full relative z-10">
 
                 {/* 标题栏 */}
-                <Title {...props} />
+                {fullWidth ? null : <Title {...props} />}
 
-                <div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>
+                <div id='container-wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>
 
                     {/* 内容 */}
-                    <div className='w-full max-w-3xl xl:px-14 lg:px-4 '>
+                    <div className={`w-full ${fullWidth ? '' : 'max-w-3xl'} xl:px-14 lg:px-4`}>
                         <Transition
                             show={!onLoading}
                             appear={true}
@@ -89,7 +104,7 @@ const LayoutBase = props => {
                     </div>
 
                     {/* 侧边栏 */}
-                    <SideBar {...props} />
+                    {!fullWidth && <SideBar {...props} />}
 
                 </div>
 
@@ -121,21 +136,11 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
-  const { category, tag } = props
-  // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
-  // 如果是搜索，则列表顶部嵌入 搜索框
-  let slotTop = null
-  if (category) {
-    slotTop = <div className='pb-12'><i className="mr-1 fas fa-folder-open" />{category}</div>
-  } else if (tag) {
-    slotTop = <div className='pb-12'>#{tag}</div>
-  } else if (props.slotTop) {
-    slotTop = props.slotTop
-  }
+
   return (
-        <LayoutBase {...props} slotTop={slotTop}>
-            {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-        </LayoutBase>
+        <>
+            {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
+        </>
   )
 }
 
@@ -147,7 +152,7 @@ const LayoutPostList = props => {
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   return (
-        <LayoutBase {...props}>
+        <>
             {lock
               ? <ArticleLock validPassword={validPassword} />
               : <div id="article-wrapper" className="px-2">
@@ -156,7 +161,7 @@ const LayoutSlug = props => {
                     <ShareBar post={post} />
                     <Comment frontMatter={post} />
                 </div>}
-        </LayoutBase>
+        </>
   )
 }
 
@@ -166,7 +171,7 @@ const LayoutSlug = props => {
  * @returns
  */
 const Layout404 = (props) => {
-  return <LayoutBase {...props}>404 Not found.</LayoutBase>
+  return <>404 Not found.</>
 }
 
 /**
@@ -176,8 +181,6 @@ const Layout404 = (props) => {
  */
 const LayoutSearch = props => {
   const { keyword } = props
-  // 嵌入一个搜索框在顶部
-  const slotTop = <div className='pb-12'><SearchInput {...props} /></div>
   const router = useRouter()
   useEffect(() => {
     if (isBrowser) {
@@ -196,7 +199,7 @@ const LayoutSearch = props => {
     }
   }, [router])
 
-  return <LayoutPostList slotTop={slotTop} {...props} />
+  return <LayoutPostList {...props} />
 }
 
 /**
@@ -206,15 +209,13 @@ const LayoutSearch = props => {
  */
 const LayoutArchive = props => {
   const { archivePosts } = props
-  return (
-        <LayoutBase {...props}>
+  return (<>
             <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
                 {Object.keys(archivePosts).map(archiveTitle => (
                     <BlogListGroupByDate key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
                 ))}
             </div>
-        </LayoutBase>
-  )
+        </>)
 }
 
 /**
@@ -225,11 +226,11 @@ const LayoutArchive = props => {
 const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div id='category-list' className='duration-200 flex flex-wrap'>
                 {categoryOptions?.map(category => <CategoryItem key={category.name} category={category} />)}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -241,16 +242,17 @@ const LayoutCategoryIndex = props => {
 const LayoutTagIndex = (props) => {
   const { tagOptions } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div id='tags-list' className='duration-200 flex flex-wrap'>
                 {tagOptions.map(tag => <TagItem key={tag.name} tag={tag} />)}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutPostList,
   LayoutSearch,
diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js
index 9e47a925..1b9076a4 100644
--- a/themes/fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -8,6 +8,7 @@ import ArticleAround from './ArticleAround'
 import { AdSlot } from '@/components/GoogleAdsense'
 import LazyImage from '@/components/LazyImage'
 import { formatDateFmt } from '@/lib/formatDate'
+import WWAds from '@/components/WWAds'
 
 /**
  *
@@ -16,13 +17,13 @@ import { formatDateFmt } from '@/lib/formatDate'
  */
 export default function ArticleDetail(props) {
   const { post, prev, next } = props
-  const { locale } = useGlobal()
+  const { locale, fullWidth } = useGlobal()
 
   if (!post) {
     return <></>
   }
   return (
-    <div id="container" className="max-w-5xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
+    <div id="container" className={`${fullWidth ? 'px-10' : 'max-w-5xl '} overflow-x-auto flex-grow mx-auto w-screen md:w-full`}>
       {post?.type && !post?.type !== 'Page' && post?.pageCover && (
         <div className="w-full relative md:flex-shrink-0 overflow-hidden">
           <LazyImage alt={post.title} src={post?.pageCover} className='object-center w-full' />
@@ -81,8 +82,7 @@ export default function ArticleDetail(props) {
 
           </section>
 
-          <AdSlot type='in-article'/>
-
+          <WWAds className='w-full' orientation='horizontal'/>
         </header>
 
         {/* Notion文章主体 */}
@@ -91,6 +91,7 @@ export default function ArticleDetail(props) {
         </section>
 
         <section>
+          <AdSlot type='in-article'/>
            {/* 分享 */}
            <ShareBar post={post} />
         </section>
diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js
index bf6edb45..955cc628 100644
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -12,9 +12,8 @@ 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'
+import MailChimpForm from './MailChimpForm'
 
 /**
  * 侧边栏
@@ -22,7 +21,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()
   // 折叠侧边栏
@@ -56,7 +55,7 @@ function AsideLeft(props) {
 
   return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-150 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
         {/* 折叠按钮 */}
-        {CONFIG.SIDEBAR_COLLAPSE_BUTTON && <div className={`${isCollapsed ? '' : 'ml-80'} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-150 px-3 py-2`} onClick={toggleOpen}>
+        {siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_BUTTON', null, CONFIG) && <div className={`${isCollapsed ? '' : 'ml-80'} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-150 px-3 py-2`} onClick={toggleOpen}>
             {isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
         </div>}
 
@@ -65,7 +64,7 @@ function AsideLeft(props) {
             <Logo {...props} />
 
             <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
-                {siteInfo?.description}
+                {siteConfig('DESCRIPTION')}
             </section>
 
             <section className='flex flex-col text-gray-600'>
@@ -84,7 +83,11 @@ function AsideLeft(props) {
             </section>
 
             <section>
-                 <AdSlot type='in-article'/>
+                <MailChimpForm />
+            </section>
+
+            <section>
+                <AdSlot type='in-article' />
             </section>
 
             {router.asPath !== '/tag' && <section className='flex flex-col'>
diff --git a/themes/fukasawa/components/BlogCard.js b/themes/fukasawa/components/BlogCard.js
index ec9070f4..e0cd66a9 100644
--- a/themes/fukasawa/components/BlogCard.js
+++ b/themes/fukasawa/components/BlogCard.js
@@ -1,17 +1,17 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import TagItemMini from './TagItemMini'
-import React from 'react'
-import CONFIG_FUKA from '../config'
+import CONFIG from '../config'
 import LazyImage from '@/components/LazyImage'
 
 const BlogCard = ({ index, post, showSummary, siteInfo }) => {
-  const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap
+  const showPreview = siteConfig('FUKASAWA_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
   // fukasawa 强制显示图片
-  if (CONFIG_FUKA.POST_LIST_COVER_FORCE && post && !post.pageCover) {
+  if (siteConfig('FUKASAWA_POST_LIST_COVER_FORCE', null, CONFIG) && post && !post.pageCover) {
     post.pageCoverThumbnail = siteInfo?.pageCover
   }
-  const showPageCover = CONFIG_FUKA.POST_LIST_COVER && post?.pageCoverThumbnail
+  const showPageCover = siteConfig('FUKASAWA_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail
+  const SUB_PATH = siteConfig('SUB_PATH', '')
 
   return (
         <div
@@ -26,10 +26,10 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
                 {/* 封面图 */}
                 {showPageCover && (
                     <div className="flex-grow mb-3 w-full duration-200 cursor-pointer transform overflow-hidden">
-                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                        <Link href={`${SUB_PATH}/${post.slug}`} passHref legacyBehavior>
                             <LazyImage
                                 src={post?.pageCoverThumbnail}
-                                alt={post?.title || BLOG.TITLE}
+                                alt={post?.title || siteConfig('TITLE')}
                                 className="object-cover w-full h-full hover:scale-125 transform duration-500"
                             />
                         </Link>
@@ -38,7 +38,7 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
 
                 {/* 文字部分 */}
                 <div className="flex flex-col w-full">
-                    <Link passHref href={`${BLOG.SUB_PATH}/${post.slug}`}
+                    <Link passHref href={`${SUB_PATH}/${post.slug}`}
                          className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
                     >
                         {post.title}
@@ -62,8 +62,7 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
                         </Link>}
                         <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
                             <div>
-
-                                {post.tagItems.map((tag) => (
+                                {post.tagItems?.map((tag) => (
                                     <TagItemMini key={tag.name} tag={tag} />
                                 ))}
                             </div>
diff --git a/themes/fukasawa/components/BlogListEmpty.js b/themes/fukasawa/components/BlogListEmpty.js
index 41b42e73..59c5c892 100644
--- a/themes/fukasawa/components/BlogListEmpty.js
+++ b/themes/fukasawa/components/BlogListEmpty.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 
 /**
  * 空白博客 列表
@@ -5,8 +6,9 @@
  * @constructor
  */
 const BlogListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
   return <div className='flex items-center justify-center min-h-screen mx-auto md:-mt-20'>
-        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+        <p className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_RESULTS_FOUND} {(currentSearch && <div>{currentSearch}</div>)}</p>
   </div>
 }
 export default BlogListEmpty
diff --git a/themes/fukasawa/components/BlogListPage.js b/themes/fukasawa/components/BlogListPage.js
index 30f0c38b..68d4a6c5 100644
--- a/themes/fukasawa/components/BlogListPage.js
+++ b/themes/fukasawa/components/BlogListPage.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { deepClone, isBrowser } from '@/lib/utils'
 import BlogCard from './BlogCard'
 import BlogPostListEmpty from './BlogListEmpty'
@@ -15,7 +15,7 @@ import { AdSlot } from '@/components/GoogleAdsense'
  * @constructor
  */
 const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
   const showNext = page < totalPage
 
   const [columns, setColumns] = useState(calculateColumns())
@@ -59,7 +59,7 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
               <BlogCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo} />
             </div>
           ))}
-          {BLOG.ADSENSE_GOOGLE_ID && (
+          {siteConfig('ADSENSE_GOOGLE_ID') && (
             <div className='p-3'>
                 <AdSlot type='flow'/>
             </div>
diff --git a/themes/fukasawa/components/BlogListScroll.js b/themes/fukasawa/components/BlogListScroll.js
index b1752000..b3fdef35 100644
--- a/themes/fukasawa/components/BlogListScroll.js
+++ b/themes/fukasawa/components/BlogListScroll.js
@@ -1,5 +1,5 @@
-import BLOG from '@/blog.config'
-import React from 'react'
+import { siteConfig } from '@/lib/config'
+import { useEffect, useRef, useState } from 'react'
 import BlogCard from './BlogCard'
 import BlogPostListEmpty from './BlogListEmpty'
 import { useGlobal } from '@/lib/global'
@@ -15,18 +15,18 @@ import { useGlobal } from '@/lib/global'
 const BlogListScroll = props => {
   const { posts = [], siteInfo } = props
   const { locale } = useGlobal()
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
-  const [page, updatePage] = React.useState(1)
+  const [page, updatePage] = useState(1)
 
   let hasMore = false
   const postsToShow = posts
-    ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+    ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page)
     : []
 
   if (posts) {
     const totalCount = posts.length
-    hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+    hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount
   }
   const handleGetMore = () => {
     if (!hasMore) return
@@ -44,7 +44,7 @@ const BlogListScroll = props => {
     })
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', scrollTrigger)
     return () => {
       window.removeEventListener('scroll', scrollTrigger)
diff --git a/themes/fukasawa/components/BlogPostArchive.js b/themes/fukasawa/components/BlogPostArchive.js
index 08557ae3..c1a77718 100644
--- a/themes/fukasawa/components/BlogPostArchive.js
+++ b/themes/fukasawa/components/BlogPostArchive.js
@@ -1,6 +1,6 @@
-import React from 'react'
 import Link from 'next/link'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
+
 /**
  * 博客归档
  * @param posts 所有文章
@@ -30,7 +30,7 @@ const BlogArchiveItem = ({ posts = [], archiveTitle }) => {
                 <span className="text-gray-400">{post.date?.start_date}</span>{' '}
                 &nbsp;
                 <Link
-                  href={`${BLOG.SUB_PATH}/${post.slug}`}
+                  href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                   passHref
                   className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
 
diff --git a/themes/fukasawa/components/Catalog.js b/themes/fukasawa/components/Catalog.js
index 4a5414d2..9f0a054c 100644
--- a/themes/fukasawa/components/Catalog.js
+++ b/themes/fukasawa/components/Catalog.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import { useGlobal } from '@/lib/global'
diff --git a/themes/fukasawa/components/GroupCategory.js b/themes/fukasawa/components/GroupCategory.js
index f9cd00cc..1753afd2 100644
--- a/themes/fukasawa/components/GroupCategory.js
+++ b/themes/fukasawa/components/GroupCategory.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 
 function GroupCategory ({ currentCategory, categories }) {
   if (!categories) {
diff --git a/themes/fukasawa/components/Logo.js b/themes/fukasawa/components/Logo.js
index 3b6720fb..1b28e1ec 100644
--- 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>
   );
diff --git a/themes/fukasawa/components/MailChimpForm.js b/themes/fukasawa/components/MailChimpForm.js
new file mode 100644
index 00000000..f2e990e5
--- /dev/null
+++ b/themes/fukasawa/components/MailChimpForm.js
@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from 'react'
+import { subscribeToNewsletter } from '@/lib/mailchimp'
+import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 邮件订阅表单
+ * @returns
+ */
+export default function MailChimpForm() {
+  const formRef = useRef()
+  const [success, setSuccess] = useState(false)
+  const { locale } = useGlobal()
+
+  useEffect(() => {
+    const form = formRef.current
+    const handleSubmit = (e) => {
+      e.preventDefault()
+      const email = document.querySelector('#newsletter').value
+      subscribeToNewsletter(email).then(response => {
+        console.log('Subscription succeeded:', response)
+        // 在此处添加成功订阅后的操作
+        setSuccess(true)
+      })
+        .catch(error => {
+          console.error('Subscription failed:', error)
+          // 在此处添加订阅失败后的操作
+        })
+    }
+    form?.addEventListener('submit', handleSubmit)
+    return () => {
+      form?.removeEventListener('submit', handleSubmit)
+    }
+  }, [subscribeToNewsletter])
+
+  return <>
+        {siteConfig('FUKASAWA_MAILCHIMP_FORM', null, CONFIG) && <div className="sm:col-span-6 md:col-span-3 lg:col-span-3">
+            <h6 className="text-gray-800 font-medium mb-2">{locale.MAILCHIMP.SUBSCRIBE}</h6>
+            <p className="text-sm text-gray-600 mb-4">{locale.MAILCHIMP.MSG}</p>
+            <form ref={formRef}>
+                <div className="flex flex-wrap mb-4">
+                    <div className="w-full">
+                        <label className="block text-sm sr-only" htmlFor="newsletter">{locale.MAILCHIMP.EMAIL}</label>
+                        <div className="relative flex items-center max-w-xs">
+                            <input disabled={success} id="newsletter" type="email" className="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm" placeholder={locale.MAILCHIMP.EMAIL} required />
+                            <button disabled={success} type="submit" className="absolute inset-0 left-auto" aria-label="Subscribe">
+                                <span className="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300" aria-hidden="true"></span>
+                                <svg className="w-3 h-3 fill-current text-blue-600 mx-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z" fillRule="nonzero" />
+                                </svg>
+                            </button>
+                        </div>
+                        {/* Success message */}
+                        {success && <p className="mt-2 text-green-600 text-sm">Thanks for subscribing!</p>}
+                    </div>
+                </div>
+            </form>
+        </div>
+        }
+    </>
+}
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/fukasawa/components/MenuList.js b/themes/fukasawa/components/MenuList.js
index 52bae336..0445f338 100644
--- a/themes/fukasawa/components/MenuList.js
+++ b/themes/fukasawa/components/MenuList.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
-import CONFIG_FUKA from '../config'
-import BLOG from '@/blog.config'
+import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
@@ -10,10 +10,10 @@ export const MenuList = (props) => {
 
   let links = [
     { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE },
-    { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_FUKA.MENU_SEARCH }
+    { name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('FUKASAWA_MENU_CATEGORY', null, CONFIG) },
+    { name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('FUKASAWA_MENU_TAG', null, CONFIG) },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('FUKASAWA_MENU_ARCHIVE', null, CONFIG) },
+    { name: locale.NAV.SEARCH, to: '/search', show: siteConfig('FUKASAWA_MENU_SEARCH', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -21,7 +21,7 @@ export const MenuList = (props) => {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
diff --git a/themes/fukasawa/components/SiteInfo.js b/themes/fukasawa/components/SiteInfo.js
index 3a18bcd1..95472442 100644
--- a/themes/fukasawa/components/SiteInfo.js
+++ b/themes/fukasawa/components/SiteInfo.js
@@ -1,27 +1,23 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 
 function SiteInfo ({ title }) {
   const d = new Date()
   const currentYear = d.getFullYear()
-  const copyrightDate = (function() {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
         <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={siteConfig('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/></>}
+            {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br/></>}
 
             <span className='hidden busuanzi_container_site_pv'> <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>
             <br />
-            <span className='text-xs font-serif'> Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline'>NotionNext {BLOG.VERSION}</a></span><br /></span>
+            <span className='text-xs font-serif'> Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline'>NotionNext {siteConfig('VERSION')}</a></span><br /></span>
             <h1>{title}</h1>
         </footer>
   )
diff --git a/themes/fukasawa/components/SocialButton.js b/themes/fukasawa/components/SocialButton.js
index 234182cf..796d5c5f 100644
--- a/themes/fukasawa/components/SocialButton.js
+++ b/themes/fukasawa/components/SocialButton.js
@@ -1,5 +1,4 @@
-import BLOG from '@/blog.config'
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 社交联系方式按钮组
@@ -9,34 +8,34 @@ import React from 'react'
 const SocialButton = () => {
   return <div className='w-52 flex-wrap flex'>
     <div className='space-x-3 text-lg text-gray-500 dark:text-gray-400'>
-      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
         <i className='fab fa-github transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
         <i className='fab fa-twitter transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
         <i className='fab fa-telegram transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
+      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
         <i className='fab fa-linkedin transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
         <i className='fab fa-weibo transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
         <i className='fab fa-instagram transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
         <i className='fas fa-envelope transform hover:scale-125 duration-150'/>
       </a>}
-      {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
         <i className='fas fa-rss transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
+      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
         <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_YOUTUBE && <a target='_blank' rel='noreferrer' title={'youtube'} href={BLOG.CONTACT_YOUTUBE} >
+      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
         <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
       </a>}
     </div>
diff --git a/themes/fukasawa/components/TagItem.js b/themes/fukasawa/components/TagItem.js
index 18511426..179da9db 100644
--- a/themes/fukasawa/components/TagItem.js
+++ b/themes/fukasawa/components/TagItem.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 
 const TagItem = ({ tag, selected }) => {
diff --git a/themes/fukasawa/config.js b/themes/fukasawa/config.js
index f9265e8c..462c54ca 100644
--- a/themes/fukasawa/config.js
+++ b/themes/fukasawa/config.js
@@ -1,17 +1,18 @@
 const CONFIG = {
+  FUKASAWA_MAILCHIMP_FORM: false, // 邮件订阅表单
 
-  POST_LIST_COVER: true, // 文章列表显示图片封面
-  POST_LIST_COVER_FORCE: false, // 即使没有封面也将站点背景图设置为封面
-  POST_LIST_PREVIEW: false, // 显示文章预览
+  FUKASAWA_POST_LIST_COVER: true, // 文章列表显示图片封面
+  FUKASAWA_POST_LIST_COVER_FORCE: false, // 即使没有封面也将站点背景图设置为封面
+  FUKASAWA_POST_LIST_PREVIEW: false, // 显示文章预览
 
   // 菜单
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: false, // 显示搜索
+  FUKASAWA_MENU_CATEGORY: true, // 显示分类
+  FUKASAWA_MENU_TAG: true, // 显示标签
+  FUKASAWA_MENU_ARCHIVE: true, // 显示归档
+  FUKASAWA_MENU_SEARCH: false, // 显示搜索
 
-  SIDEBAR_COLLAPSE_BUTTON: true, // 侧边栏折叠按钮
-  SIDEBAR_COLLAPSE_SATUS_DEFAULT: false // 侧边栏默认折叠收起
+  FUKASAWA_SIDEBAR_COLLAPSE_BUTTON: true, // 侧边栏折叠按钮
+  FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT: false // 侧边栏默认折叠收起
 
 }
 export default CONFIG
diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js
index 0782b4e5..8587daad 100644
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -3,7 +3,6 @@
 import CONFIG from './config'
 import TopNav from './components/TopNav'
 import AsideLeft from './components/AsideLeft'
-import BLOG from '@/blog.config'
 import { isBrowser } from '@/lib/utils'
 import { useGlobal } from '@/lib/global'
 import BlogListPage from './components/BlogListPage'
@@ -21,6 +20,8 @@ import { AdSlot } from '@/components/GoogleAdsense'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import CommonHead from '@/components/CommonHead'
+import { siteConfig } from '@/lib/config'
+import WWAds from '@/components/WWAds'
 
 const Live2D = dynamic(() => import('@/components/Live2D'))
 
@@ -45,14 +46,16 @@ export const useFukasawaGlobal = () => useContext(ThemeGlobalFukasawa)
 const LayoutBase = (props) => {
   const { children, headerSlot, meta } = props
   const leftAreaSlot = <Live2D />
-  const { onLoading } = useGlobal()
+  const { onLoading, fullWidth } = useGlobal()
+
+  const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT = fullWidth || siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)
 
   // 侧边栏折叠从 本地存储中获取 open 状态的初始值
   const [isCollapsed, setIsCollapse] = useState(() => {
     if (typeof window !== 'undefined') {
-      return localStorage.getItem('fukasawa-sidebar-collapse') === 'true' || CONFIG.SIDEBAR_COLLAPSE_SATUS_DEFAULT
+      return localStorage.getItem('fukasawa-sidebar-collapse') === 'true' || FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
     }
-    return CONFIG.SIDEBAR_COLLAPSE_SATUS_DEFAULT
+    return FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
   })
 
   // 在组件卸载时保存 open 状态到本地存储中
@@ -72,12 +75,12 @@ const LayoutBase = (props) => {
 
                 <TopNav {...props} />
 
-                <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
+                <div className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' flex'}>
                     {/* 侧边抽屉 */}
                     <AsideLeft {...props} slot={leftAreaSlot} />
 
                     <main id='wrapper' className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
-                        <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
+                        <div id='container-inner' className={`${fullWidth ? '' : '2xl:max-w-6xl md:max-w-4xl'} w-full relative z-10`}>
                             <Transition
                                 show={!onLoading}
                                 appear={true}
@@ -123,9 +126,10 @@ const LayoutIndex = (props) => {
  * @param {*} props
             */
 const LayoutPostList = (props) => {
-  return <LayoutBase {...props}>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-    </LayoutBase>
+  return <>
+        <div className='w-full p-2'><WWAds className='w-full' orientation='horizontal'/></div>
+         {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
+    </>
 }
 
 /**
@@ -136,9 +140,9 @@ const LayoutPostList = (props) => {
 const LayoutSlug = (props) => {
   const { lock, validPassword } = props
   return (
-        <LayoutBase {...props} >
+        <>
             {lock ? <ArticleLock validPassword={validPassword} /> : <ArticleDetail {...props} />}
-        </LayoutBase>
+        </>
   )
 }
 
@@ -168,7 +172,7 @@ const LayoutSearch = props => {
  */
 const LayoutArchive = (props) => {
   const { archivePosts } = props
-  return <LayoutBase {...props}>
+  return <>
         <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full">
             {Object.keys(archivePosts).map(archiveTitle => (
                 <BlogArchiveItem
@@ -178,7 +182,7 @@ const LayoutArchive = (props) => {
                 />
             ))}
         </div>
-    </LayoutBase>
+    </>
 }
 
 /**
@@ -187,7 +191,7 @@ const LayoutArchive = (props) => {
             * @returns
             */
 const Layout404 = props => {
-  return <LayoutBase {...props}>404</LayoutBase>
+  return <>404</>
 }
 
 /**
@@ -199,7 +203,7 @@ const LayoutCategoryIndex = (props) => {
   const { locale } = useGlobal()
   const { categoryOptions } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
                 <div className='dark:text-gray-200 mb-5'>
                     <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
@@ -221,7 +225,7 @@ const LayoutCategoryIndex = (props) => {
                     })}
                 </div>
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -233,7 +237,7 @@ const LayoutCategoryIndex = (props) => {
 const LayoutTagIndex = (props) => {
   const { locale } = useGlobal()
   const { tagOptions } = props
-  return <LayoutBase {...props} >
+  return <>
         <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
             <div className='dark:text-gray-200 mb-5'><i className='mr-4 fas fa-tag' />{locale.COMMON.TAGS}:</div>
             <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
@@ -246,11 +250,12 @@ const LayoutTagIndex = (props) => {
                 })}
             </div>
         </div>
-    </LayoutBase>
+    </>
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutSearch,
   LayoutArchive,
diff --git a/themes/gitbook/components/BlogArchiveItem.js b/themes/gitbook/components/BlogArchiveItem.js
index 8e9693dc..efd67565 100644
--- a/themes/gitbook/components/BlogArchiveItem.js
+++ b/themes/gitbook/components/BlogArchiveItem.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 
 /**
@@ -23,7 +23,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
                             </span>{' '}
                             &nbsp;
 
-                            <Link passHref href={`${BLOG.SUB_PATH}/${post.slug}`}
+                            <Link passHref href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                                 className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
                                 {post.title}
                             </Link>
diff --git a/themes/gitbook/components/BlogPostCard.js b/themes/gitbook/components/BlogPostCard.js
index 15ff21ef..4dcd9686 100644
--- a/themes/gitbook/components/BlogPostCard.js
+++ b/themes/gitbook/components/BlogPostCard.js
@@ -1,7 +1,6 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import React from 'react'
 
 const BlogPostCard = ({ post, className }) => {
   const router = useRouter()
@@ -9,7 +8,7 @@ const BlogPostCard = ({ post, className }) => {
   return (
         <div key={post.id} className={`${className} py-1 cursor-pointer px-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600  ${currentSelected ? 'bg-green-50 text-green-500' : ''}`}>
             <div className="flex flex-col w-full select-none">
-                <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref>
+                <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref>
                     {post.title}
                 </Link>
             </div>
diff --git a/themes/gitbook/components/BlogPostListPage.js b/themes/gitbook/components/BlogPostListPage.js
index d9228b51..3d68f154 100644
--- a/themes/gitbook/components/BlogPostListPage.js
+++ b/themes/gitbook/components/BlogPostListPage.js
@@ -1,5 +1,5 @@
 import BlogPostCard from './BlogPostCard'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import NavPostListEmpty from './NavPostListEmpty'
 import PaginationSimple from './PaginationSimple'
 
@@ -12,7 +12,7 @@ import PaginationSimple from './PaginationSimple'
  * @constructor
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
 
   if (!posts || posts.length === 0) {
     return <NavPostListEmpty />
diff --git a/themes/gitbook/components/BottomMenuBar.js b/themes/gitbook/components/BottomMenuBar.js
index 101fd572..234221b5 100644
--- a/themes/gitbook/components/BottomMenuBar.js
+++ b/themes/gitbook/components/BottomMenuBar.js
@@ -1,5 +1,4 @@
 import { useGitBookGlobal } from '@/themes/gitbook'
-import React from 'react'
 import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar({ post, className }) {
diff --git a/themes/gitbook/components/CategoryGroup.js b/themes/gitbook/components/CategoryGroup.js
index 1516c038..71f40a0d 100644
--- a/themes/gitbook/components/CategoryGroup.js
+++ b/themes/gitbook/components/CategoryGroup.js
@@ -1,4 +1,4 @@
-import React from 'react'
+
 import CategoryItem from './CategoryItem'
 
 const CategoryGroup = ({ currentCategory, categoryOptions }) => {
diff --git a/themes/gitbook/components/Footer.js b/themes/gitbook/components/Footer.js
index fb1d339c..78a91cd5 100644
--- a/themes/gitbook/components/Footer.js
+++ b/themes/gitbook/components/Footer.js
@@ -1,15 +1,10 @@
-import React from 'react'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 
 const Footer = ({ siteInfo }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
-  const copyrightDate = (function () {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
         <footer
@@ -18,19 +13,19 @@ 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={siteConfig('LINK')} className='underline font-bold text-gray-500 dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br /></div>
                 © {`${copyrightDate}`}
             </div>
 
-            <div className='text-xs font-serif'>Powered By <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext</a></div>
+            <div className='text-xs font-serif'>Powered By <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a></div>
 
-            {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br /></>}
+            {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br /></>}
 
             <span className='hidden busuanzi_container_site_pv'>
                 <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>
   )
diff --git a/themes/gitbook/components/InfoCard.js b/themes/gitbook/components/InfoCard.js
index 13fe31c8..4b6e5cfe 100644
--- a/themes/gitbook/components/InfoCard.js
+++ b/themes/gitbook/components/InfoCard.js
@@ -1,18 +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='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</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'>{siteConfig('BIO')}</div>
         <SocialButton/>
     </div>
   </div>
diff --git a/themes/gitbook/components/LeftMenuBar.js b/themes/gitbook/components/LeftMenuBar.js
index e6636e19..6bde6c51 100644
--- a/themes/gitbook/components/LeftMenuBar.js
+++ b/themes/gitbook/components/LeftMenuBar.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 
 export default function LeftMenuBar () {
   return (
diff --git a/themes/gitbook/components/LogoBar.js b/themes/gitbook/components/LogoBar.js
index 70c96b46..e0f7b4cb 100644
--- 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>
   )
diff --git a/themes/gitbook/components/MenuBarMobile.js b/themes/gitbook/components/MenuBarMobile.js
index 2db19133..5b0f6ce5 100644
--- a/themes/gitbook/components/MenuBarMobile.js
+++ b/themes/gitbook/components/MenuBarMobile.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
 export const MenuBarMobile = (props) => {
@@ -10,10 +9,10 @@ export const MenuBarMobile = (props) => {
 
   let links = [
     // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
-    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
+    { name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('GITBOOK_MENU_CATEGORY', null, CONFIG) },
+    { name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('GITBOOK_BOOK_MENU_TAG', null, CONFIG) },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('GITBOOK_MENU_ARCHIVE', null, CONFIG) }
+    // { name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MENU_SEARCH', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -21,7 +20,7 @@ export const MenuBarMobile = (props) => {
   }
 
   // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -31,9 +30,7 @@ export const MenuBarMobile = (props) => {
 
   return (
     <nav id='nav' className=' text-md'>
-        {/* {links.map(link => <NormalMenu key={link?.id} link={link}/>)} */}
         {links?.map((link, index) => <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link}/>)}
-
     </nav>
   )
 }
diff --git a/themes/gitbook/components/NavPostItem.js b/themes/gitbook/components/NavPostItem.js
index 66ffa6dd..e83046ce 100644
--- a/themes/gitbook/components/NavPostItem.js
+++ b/themes/gitbook/components/NavPostItem.js
@@ -1,5 +1,5 @@
 import BlogPostCard from './BlogPostCard'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import Collapse from '@/components/Collapse'
 
 /**
diff --git a/themes/gitbook/components/NavPostList.js b/themes/gitbook/components/NavPostList.js
index ceef2105..58b894d8 100644
--- a/themes/gitbook/components/NavPostList.js
+++ b/themes/gitbook/components/NavPostList.js
@@ -2,6 +2,7 @@ import NavPostListEmpty from './NavPostListEmpty'
 import { useRouter } from 'next/router'
 import NavPostItem from './NavPostItem'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 博客列表滚动分页
@@ -19,7 +20,7 @@ const NavPostList = (props) => {
 
     let existingGroup = null
     // 开启自动分组排序
-    if (JSON.parse(CONFIG.AUTO_SORT)) {
+    if (JSON.parse(siteConfig('GITBOOK_AUTO_SORT', true, CONFIG))) {
       existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
     } else {
       existingGroup = groups[groups.length - 1] // 获取最后一个分组
diff --git a/themes/gitbook/components/NavPostListEmpty.js b/themes/gitbook/components/NavPostListEmpty.js
index 207599db..54f2f179 100644
--- a/themes/gitbook/components/NavPostListEmpty.js
+++ b/themes/gitbook/components/NavPostListEmpty.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 
 /**
  * 空白博客 列表
@@ -5,8 +6,9 @@
  * @constructor
  */
 const NavPostListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
   return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
-        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+        <p className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_RESULTS_FOUND}  {(currentSearch && <div>{currentSearch}</div>)}</p>
   </div>
 }
 export default NavPostListEmpty
diff --git a/themes/gitbook/components/Progress.js b/themes/gitbook/components/Progress.js
index 669d09a8..29feef49 100644
--- a/themes/gitbook/components/Progress.js
+++ b/themes/gitbook/components/Progress.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
 
 /**
diff --git a/themes/gitbook/components/SocialButton.js b/themes/gitbook/components/SocialButton.js
index 164a71fc..b1bd85f9 100644
--- a/themes/gitbook/components/SocialButton.js
+++ b/themes/gitbook/components/SocialButton.js
@@ -1,5 +1,4 @@
-import BLOG from '@/blog.config'
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 社交联系方式按钮组
@@ -8,28 +7,28 @@ import React from 'react'
  */
 const SocialButton = () => {
   return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
-      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
         <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
         <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
         <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
+      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
         <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
         <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
         <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
         <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
         <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
     </div>
diff --git a/themes/gitbook/components/TopNavBar.js b/themes/gitbook/components/TopNavBar.js
index 24837feb..c2257fb5 100644
--- a/themes/gitbook/components/TopNavBar.js
+++ b/themes/gitbook/components/TopNavBar.js
@@ -4,7 +4,7 @@ import Collapse from '@/components/Collapse'
 import { MenuBarMobile } from './MenuBarMobile'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 import DarkModeButton from '@/components/DarkModeButton'
 
@@ -21,10 +21,10 @@ export default function TopNavBar(props) {
   const { locale } = useGlobal()
 
   const defaultLinks = [
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('GITBOOK_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('GITBOOK_BOOK_MENU_TAG', null, CONFIG) },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('GITBOOK_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('GITBOOK_MENU_SEARCH', null, CONFIG) }
   ]
 
   let links = defaultLinks.concat(customNav)
@@ -34,7 +34,7 @@ export default function TopNavBar(props) {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
diff --git a/themes/gitbook/config.js b/themes/gitbook/config.js
index 25feb4b8..9a7778ff 100644
--- a/themes/gitbook/config.js
+++ b/themes/gitbook/config.js
@@ -1,17 +1,17 @@
 const CONFIG = {
 
-  INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中
+  GITBOOK_INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中
 
-  AUTO_SORT: process.env.NEXT_PUBLIC_GITBOOK_AUTO_SORT || true, // 是否自动按分类名 归组排序文章；自动归组可能会打乱您Notion中的文章顺序
+  GITBOOK_AUTO_SORT: process.env.NEXT_PUBLIC_GITBOOK_AUTO_SORT || true, // 是否自动按分类名 归组排序文章；自动归组可能会打乱您Notion中的文章顺序
 
   // 菜单
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
+  GITBOOK_MENU_CATEGORY: true, // 显示分类
+  GITBOOK_BOOK_MENU_TAG: true, // 显示标签
+  GITBOOK_MENU_ARCHIVE: true, // 显示归档
+  GITBOOK_MENU_SEARCH: true, // 显示搜索
 
   // Widget
-  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
-  WIDGET_TO_TOP: true // 跳回顶部
+  GITBOOK_WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
+  GITBOOK_WIDGET_TO_TOP: true // 跳回顶部
 }
 export default CONFIG
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index cb0b728a..ccef346b 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -11,7 +11,6 @@ import TopNavBar from './components/TopNavBar'
 import SearchInput from './components/SearchInput'
 import { useGlobal } from '@/lib/global'
 import Live2D from '@/components/Live2D'
-import BLOG from '@/blog.config'
 import NavPostList from './components/NavPostList'
 import ArticleInfo from './components/ArticleInfo'
 import Catalog from './components/Catalog'
@@ -35,6 +34,7 @@ import BlogArchiveItem from './components/BlogArchiveItem'
 import BlogPostListPage from './components/BlogPostListPage'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
+import { siteConfig } from '@/lib/config'
 const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
 
 // 主题全局变量
@@ -49,7 +49,7 @@ export const useGitBookGlobal = () => useContext(ThemeGlobalGitbook)
  */
 const LayoutBase = (props) => {
   const { children, post, allNavPages, slotLeft, slotRight, slotTop, meta } = props
-  const { onLoading } = useGlobal()
+  const { onLoading, fullWidth } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
   const [pageNavVisible, changePageNavVisible] = useState(false)
@@ -70,10 +70,12 @@ const LayoutBase = (props) => {
                 {/* 顶部导航栏 */}
                 <TopNavBar {...props} />
 
-                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
+                <main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
 
                     {/* 左侧推拉抽屉 */}
-                    <div className={'font-sans hidden md:block border-r dark:border-transparent relative z-10 '}>
+                    {fullWidth
+                      ? null
+                      : (<div className={'font-sans hidden md:block border-r dark:border-transparent relative z-10 '}>
                         <div className='w-72 py-14 px-6 sticky top-0 overflow-y-scroll h-screen scroll-hidden'>
                             {slotLeft}
                             <SearchInput className='my-3 rounded-md' />
@@ -87,11 +89,11 @@ const LayoutBase = (props) => {
                         <div className='w-72 fixed left-0 bottom-0 z-20 bg-white'>
                             <Footer {...props} />
                         </div>
-                    </div>
+                    </div>) }
 
                     <div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen'>
 
-                        <div id='container-inner' className='w-full px-7 max-w-3xl justify-center mx-auto'>
+                        <div id='container-inner' className={`w-full px-7 ${fullWidth ? 'px-10' : 'max-w-3xl'} justify-center mx-auto`}>
                             {slotTop}
                             <WWAds className='w-full' orientation='horizontal'/>
 
@@ -124,27 +126,29 @@ const LayoutBase = (props) => {
                     </div>
 
                     {/*  右侧侧推拉抽屉 */}
-                    <div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}>
-                        <div className='py-14 px-6 sticky top-0'>
-                            <ArticleInfo post={props?.post ? props?.post : props.notice} />
+                    {fullWidth
+                      ? null
+                      : <div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}>
+                      <div className='py-14 px-6 sticky top-0'>
+                          <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
-                            <div className='py-4'>
-                                <Catalog {...props} />
-                                {slotRight}
-                                {router.route === '/' && <>
-                                    <InfoCard {...props} />
-                                    {CONFIG.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
-                                    <Live2D />
-                                </>}
-                                {/* gitbook主题首页只显示公告 */}
-                                <Announcement {...props} />
-                            </div>
+                          <div className='py-4'>
+                              <Catalog {...props} />
+                              {slotRight}
+                              {router.route === '/' && <>
+                                  <InfoCard {...props} />
+                                  {siteConfig('GITBOOK_WIDGET_REVOLVER_MAPS', null, CONFIG) === 'true' && <RevolverMaps />}
+                                  <Live2D />
+                              </>}
+                              {/* gitbook主题首页只显示公告 */}
+                              <Announcement {...props} />
+                          </div>
 
-                            <AdSlot type='in-article' />
-                            <Live2D />
+                          <AdSlot type='in-article' />
+                          <Live2D />
 
-                        </div>
-                    </div>
+                      </div>
+                  </div>}
 
                 </main>
 
@@ -173,15 +177,15 @@ const LayoutBase = (props) => {
 const LayoutIndex = (props) => {
   const router = useRouter()
   useEffect(() => {
-    router.push(CONFIG.INDEX_PAGE).then(() => {
-      // console.log('跳转到指定首页', CONFIG.INDEX_PAGE)
+    router.push(siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)).then(() => {
+      // console.log('跳转到指定首页', siteConfig('INDEX_PAGE', null, CONFIG))
       setTimeout(() => {
         if (isBrowser) {
           const article = document.getElementById('notion-article')
           if (!article) {
-            console.log('请检查您的Notion数据库中是否包含此slug页面： ', CONFIG.INDEX_PAGE)
+            console.log('请检查您的Notion数据库中是否包含此slug页面： ', siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG))
             const containerInner = document.querySelector('#theme-gitbook #container-inner')
-            const newHTML = `<h1 class="text-3xl pt-12  dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${CONFIG.INDEX_PAGE}的文章</div></blockquote>`
+            const newHTML = `<h1 class="text-3xl pt-12  dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)}的文章</div></blockquote>`
             containerInner?.insertAdjacentHTML('afterbegin', newHTML)
           }
         }
@@ -189,7 +193,7 @@ const LayoutIndex = (props) => {
     })
   }, [])
 
-  return <LayoutBase {...props} />
+  return <></>
 }
 
 /**
@@ -199,9 +203,7 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutPostList = (props) => {
-  return <LayoutBase {...props} >
-            <div className='mt-10'><BlogPostListPage {...props} /></div>
-    </LayoutBase>
+  return <></>
 }
 
 /**
@@ -213,7 +215,7 @@ const LayoutSlug = (props) => {
   const { post, prev, next, lock, validPassword } = props
 
   return (
-        <LayoutBase {...props} >
+        <>
             {/* 文章锁 */}
             {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -230,9 +232,9 @@ const LayoutSlug = (props) => {
                     <ShareBar post={post} />
                     {/* 文章分类和标签信息 */}
                     <div className='flex justify-between'>
-                        {CONFIG.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
+                        {siteConfig('POST_DETAIL_CATEGORY', null, CONFIG) && post?.category && <CategoryItem category={post.category} />}
                         <div>
-                            {CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                            {siteConfig('POST_DETAIL_TAG', null, CONFIG) && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
                         </div>
                     </div>
 
@@ -246,7 +248,7 @@ const LayoutSlug = (props) => {
 
                 <TocDrawer {...props} />
             </div>}
-        </LayoutBase>
+        </>
   )
 }
 
@@ -257,7 +259,7 @@ const LayoutSlug = (props) => {
  * @returns
  */
 const LayoutSearch = (props) => {
-  return <LayoutBase {...props}></LayoutBase>
+  return <></>
 }
 
 /**
@@ -269,20 +271,20 @@ const LayoutSearch = (props) => {
 const LayoutArchive = (props) => {
   const { archivePosts } = props
 
-  return <LayoutBase {...props}>
+  return <>
         <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
             {Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
         </div>
-  </LayoutBase>
+  </>
 }
 
 /**
  * 404
  */
 const Layout404 = props => {
-  return <LayoutBase {...props}>
+  return <>
         <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
-    </LayoutBase>
+    </>
 }
 
 /**
@@ -291,7 +293,7 @@ const Layout404 = props => {
 const LayoutCategoryIndex = (props) => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
-  return <LayoutBase {...props}>
+  return <>
      <div className='bg-white dark:bg-gray-700 py-10'>
                 <div className='dark:text-gray-200 mb-5'>
                     <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
@@ -313,7 +315,7 @@ const LayoutCategoryIndex = (props) => {
                     })}
                 </div>
             </div>
-  </LayoutBase>
+  </>
 }
 
 /**
@@ -323,7 +325,7 @@ const LayoutTagIndex = (props) => {
   const { tagOptions } = props
   const { locale } = useGlobal()
 
-  return <LayoutBase {...props}>
+  return <>
      <div className="bg-white dark:bg-gray-700 py-10">
                 <div className="dark:text-gray-200 mb-5">
                     <i className="mr-4 fas fa-tag" />
@@ -339,11 +341,12 @@ const LayoutTagIndex = (props) => {
                     })}
                 </div>
             </div>
-  </LayoutBase>
+  </>
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutSearch,
   LayoutArchive,
diff --git a/themes/heo/components/AnalyticsCard.js b/themes/heo/components/AnalyticsCard.js
index a9d30477..835f4900 100644
--- a/themes/heo/components/AnalyticsCard.js
+++ b/themes/heo/components/AnalyticsCard.js
@@ -1,4 +1,5 @@
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 博客统计卡牌
@@ -6,7 +7,7 @@ import CONFIG from '../config'
  * @returns
  */
 export function AnalyticsCard(props) {
-  const targetDate = new Date(CONFIG.SITE_CREATE_TIME)
+  const targetDate = new Date(siteConfig('HEO_SITE_CREATE_TIME', null, CONFIG))
   const today = new Date()
   const diffTime = today.getTime() - targetDate.getTime() // 获取两个日期之间的毫秒数差值
   const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) // 将毫秒数差值转换为天数差值
diff --git a/themes/heo/components/ArticleAdjacent.js b/themes/heo/components/ArticleAdjacent.js
index 9fb34a5e..d905be08 100644
--- a/themes/heo/components/ArticleAdjacent.js
+++ b/themes/heo/components/ArticleAdjacent.js
@@ -2,6 +2,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'
 
 /**
  * 上一篇，下一篇文章
@@ -42,7 +43,7 @@ export default function ArticleAdjacent({ prev, next }) {
     }
   }, [])
 
-  if (!prev || !next || !CONFIG.ARTICLE_ADJACENT) {
+  if (!prev || !next || !siteConfig('HEO_ARTICLE_ADJACENT', null, CONFIG)) {
     return <></>
   }
 
diff --git a/themes/heo/components/ArticleCopyright.js b/themes/heo/components/ArticleCopyright.js
index 78500ddf..285eb2d4 100644
--- a/themes/heo/components/ArticleCopyright.js
+++ b/themes/heo/components/ArticleCopyright.js
@@ -1,20 +1,20 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 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()
-  const [path, setPath] = useState(BLOG.LINK + router.asPath)
+  const [path, setPath] = useState(siteConfig('LINK') + router.asPath)
   useEffect(() => {
     setPath(window.location.href)
   })
 
   const { locale } = useGlobal()
 
-  if (!CONFIG.ARTICLE_COPYRIGHT) {
+  if (!siteConfig('HEO_ARTICLE_COPYRIGHT', null, CONFIG)) {
     return <></>
   }
 
@@ -24,7 +24,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>
diff --git a/themes/heo/components/ArticleRecommend.js b/themes/heo/components/ArticleRecommend.js
index f7f6c738..02fa0b7f 100644
--- a/themes/heo/components/ArticleRecommend.js
+++ b/themes/heo/components/ArticleRecommend.js
@@ -1,8 +1,8 @@
 import Link from 'next/link'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 关联推荐文章
@@ -13,7 +13,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
   const { locale } = useGlobal()
 
   if (
-    !CONFIG.ARTICLE_RECOMMEND ||
+    !siteConfig('HEO_ARTICLE_RECOMMEND', null, CONFIG) ||
         !recommendPosts ||
         recommendPosts.length === 0
   ) {
@@ -43,7 +43,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
                     (<Link
                             key={post.id}
                             title={post.title}
-                            href={`${BLOG.SUB_PATH}/${post.slug}`}
+                            href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                             passHref
                             className="flex h-40 cursor-pointer overflow-hidden rounded-2xl">
 
diff --git a/themes/heo/components/BlogPostArchive.js b/themes/heo/components/BlogPostArchive.js
index 4f471444..7a285d6d 100644
--- a/themes/heo/components/BlogPostArchive.js
+++ b/themes/heo/components/BlogPostArchive.js
@@ -1,9 +1,8 @@
-import React from 'react'
 import Link from 'next/link'
-import BLOG from '@/blog.config'
 import CONFIG from '../config'
 import TagItemMini from './TagItemMini'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 /**
  * 博客归档列表
  * @param posts 所有文章
@@ -25,17 +24,17 @@ const BlogPostArchive = ({ posts = [], archiveTitle, siteInfo }) => {
                 </div>
                 <ul>
                     {posts?.map(post => {
-                      const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
-                      if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
+                      const showPreview = siteConfig('HEO_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
+                      if (post && !post.pageCoverThumbnail && siteConfig('HEO_POST_LIST_COVER_DEFAULT', null, CONFIG)) {
                         post.pageCoverThumbnail = siteInfo?.pageCover
                       }
-                      const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
+                      const showPageCover = siteConfig('HEO_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail && !showPreview
                       return <div key={post.id} className={'cursor-pointer flex flex-row mb-4 h-24 md:flex-row group w-full  dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden'}>
 
                             {/* 图片封面 */}
                             {showPageCover && (
                                 <div>
-                                    <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                                    <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
                                         <LazyImage className={'rounded-xl bg-center bg-cover w-40 h-24'} src={post?.pageCoverThumbnail}/>
                                     </Link>
                                 </div>
@@ -54,7 +53,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle, siteInfo }) => {
 
                                     {/* 标题 */}
                                     <Link
-                                        href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                        href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                                         passHref
                                         className={' group-hover:text-indigo-700 group-hover:dark:text-indigo-400 text-black dark:text-gray-100 dark:group-hover:text-yellow-600 line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
                                         <span className='menu-link '>{post.title}</span>
diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
index 7c6079f9..f88aabbe 100644
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -1,17 +1,17 @@
 import Link from 'next/link'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
 import TagItemMini from './TagItemMini'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
-  const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
-  if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
+  const showPreview = siteConfig('HEO_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
+  if (post && !post.pageCoverThumbnail && siteConfig('HEO_POST_LIST_COVER_DEFAULT', null, CONFIG)) {
     post.pageCoverThumbnail = siteInfo?.pageCover
   }
-  const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
+  const showPageCover = siteConfig('HEO_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail && !showPreview
   return (
-        <div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
+        <div className={` ${siteConfig('HEO_POST_LIST_COVER_HOVER_ENLARGE', null, CONFIG) ? ' hover:scale-110 transition-all duration-150' : ''}`} >
 
             <div
                 data-aos="fade-up"
@@ -22,7 +22,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
                 {/* 图片封面 */}
                 {showPageCover && (
-                    <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                    <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
                         <div className="w-full md:w-5/12 2xl:w-full overflow-hidden">
                             <LazyImage priority={index === 0} src={post?.pageCoverThumbnail} alt={post?.title} className='h-60 w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300' />
                         </div>
@@ -42,7 +42,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
                         {/* 标题 */}
                         <Link
-                            href={`${BLOG.SUB_PATH}/${post.slug}`}
+                            href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                             passHref
                             className={' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100  line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
                             <span className='menu-link '>{post.title}</span>
diff --git a/themes/heo/components/BlogPostListPage.js b/themes/heo/components/BlogPostListPage.js
index 52683984..dcb6afa3 100644
--- a/themes/heo/components/BlogPostListPage.js
+++ b/themes/heo/components/BlogPostListPage.js
@@ -1,7 +1,7 @@
 import BlogPostCard from './BlogPostCard'
 import PaginationNumber from './PaginationNumber'
-import BLOG from '@/blog.config'
 import BlogPostListEmpty from './BlogPostListEmpty'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 文章列表分页表格
@@ -12,8 +12,8 @@ import BlogPostListEmpty from './BlogPostListEmpty'
  * @constructor
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
-  const showPagination = postCount >= BLOG.POSTS_PER_PAGE
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
+  const showPagination = postCount >= parseInt(siteConfig('POSTS_PER_PAGE'))
   if (!posts || posts.length === 0 || page > totalPage) {
     return <BlogPostListEmpty />
   } else {
diff --git a/themes/heo/components/BlogPostListScroll.js b/themes/heo/components/BlogPostListScroll.js
index 20202a9f..95063b16 100644
--- a/themes/heo/components/BlogPostListScroll.js
+++ b/themes/heo/components/BlogPostListScroll.js
@@ -1,10 +1,10 @@
-import BLOG from '@/blog.config'
 import BlogPostCard from './BlogPostCard'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import { useGlobal } from '@/lib/global'
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import CONFIG from '../config'
 import { getListByPage } from '@/lib/utils'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 博客列表滚动分页
@@ -13,8 +13,8 @@ import { getListByPage } from '@/lib/utils'
  * @returns {JSX.Element}
  * @constructor
  */
-const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => {
-  const postsPerPage = BLOG.POSTS_PER_PAGE
+const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfig('HEO_POST_LIST_SUMMARY', null, CONFIG), siteInfo }) => {
+  const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE'))
   const [page, updatePage] = useState(1)
   const postsToShow = getListByPage(posts, page, postsPerPage)
 
diff --git a/themes/heo/components/CategoryGroup.js b/themes/heo/components/CategoryGroup.js
index 811ad9ff..21915d72 100644
--- a/themes/heo/components/CategoryGroup.js
+++ b/themes/heo/components/CategoryGroup.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
   if (!categories) {
diff --git a/themes/heo/components/FloatDarkModeButton.js b/themes/heo/components/FloatDarkModeButton.js
index f693d1f0..ec480ee4 100644
--- a/themes/heo/components/FloatDarkModeButton.js
+++ b/themes/heo/components/FloatDarkModeButton.js
@@ -1,11 +1,12 @@
 import { useGlobal } from '@/lib/global'
 import { saveDarkModeToCookies } from '@/themes/theme'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 export default function FloatDarkModeButton () {
   const { isDarkMode, updateDarkMode } = useGlobal()
 
-  if (!CONFIG.WIDGET_DARK_MODE) {
+  if (!siteConfig('HEO_WIDGET_DARK_MODE', null, CONFIG)) {
     return <></>
   }
 
diff --git a/themes/heo/components/Footer.js b/themes/heo/components/Footer.js
index 772ade19..bc366cb2 100644
--- a/themes/heo/components/Footer.js
+++ b/themes/heo/components/Footer.js
@@ -1,17 +1,11 @@
-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()
   const currentYear = d.getFullYear()
-  const copyrightDate = (function () {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
         <footer
@@ -34,18 +28,18 @@ 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 {siteConfig('VERSION')} <i className='fas fa-copyright' /> {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' /> <a href={siteConfig('LINK')} className='underline font-bold  dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.
                 </div>
 
             <div id='footer-bottom-right'>
-                {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a></>}
+                {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a></>}
 
                 <span className='hidden busuanzi_container_site_pv'>
                     <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='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {BLOG.BIO && <>|</>} {BLOG.BIO}</h1> */}
+                {/* <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
 
             </div>
         </div>
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
index a0ff3f73..23edfc8b 100644
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -1,8 +1,7 @@
 // import Image from 'next/image'
-
-import BLOG from '@/blog.config'
 import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
@@ -16,6 +15,7 @@ import CONFIG from '../config'
  * @returns
  */
 const Hero = props => {
+  const HEO_HERO_REVERSE = siteConfig('HEO_HERO_REVERSE', false, CONFIG)
   return (
     <div
       id="hero-wrapper"
@@ -25,12 +25,17 @@ const Hero = props => {
         id="hero"
         style={{ zIndex: 1 }}
         className={
-          'animate__animated animate__fadeIn animate__fast recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex xl:space-x-3 relative'
+           `animate__animated animate__fadeIn animate__fast 
+           ${HEO_HERO_REVERSE ? 'xl:flex-row-reverse' : ''}
+           recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative`
         }
       >
         {/* 左侧banner组 */}
         <BannerGroup {...props} />
 
+        {/* 中间留白 */}
+        <div className='px-1.5 h-full'></div>
+
         {/* 右侧置顶文章组 */}
         <TopGroup {...props} />
       </div>
@@ -70,7 +75,7 @@ function Banner(props) {
   function handleClickBanner() {
     const randomIndex = Math.floor(Math.random() * latestPosts.length)
     const randomPost = latestPosts[randomIndex]
-    router.push(`${BLOG.SUB_PATH}/${randomPost?.slug}`)
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
   }
 
   return (
@@ -81,12 +86,12 @@ function Banner(props) {
     >
       <div id="banner-title" className="flex flex-col absolute top-10 left-10">
         <div className="text-4xl font-bold mb-3  dark:text-white">
-          {CONFIG.HERO_TITLE_1}
+          {siteConfig('HEO_HERO_TITLE_1', null, CONFIG)}
           <br />
-          {CONFIG.HERO_TITLE_2}
+          {siteConfig('HEO_HERO_TITLE_2', null, CONFIG)}
         </div>
         <div className="text-xs text-gray-600  dark:text-gray-200">
-          {CONFIG.HERO_TITLE_3}
+          {siteConfig('HEO_HERO_TITLE_3', null, CONFIG)}
         </div>
       </div>
 
@@ -117,7 +122,7 @@ function Banner(props) {
  * 英雄区左上角banner条中斜向滚动的图标
  */
 function TagsGroupBar() {
-  const groupIcons = CONFIG.GROUP_ICONS.concat(CONFIG.GROUP_ICONS)
+  const groupIcons = siteConfig('HEO_GROUP_ICONS', null, CONFIG).concat(siteConfig('HEO_GROUP_ICONS', null, CONFIG))
 
   return (
     <div className="tags-group-all flex -rotate-[30deg] h-full">
@@ -167,11 +172,11 @@ function GroupMenu() {
   return (
     <div className="h-[165px] select-none xl:h-20 flex flex-col justify-between xl:space-y-0 xl:flex-row w-28 lg:w-48 xl:w-full xl:flex-nowrap xl:space-x-3">
       <Link
-        href={CONFIG.HERO_CATEGORY_1?.url}
+        href={siteConfig('HEO_HERO_CATEGORY_1', null, CONFIG)?.url}
         className="group relative overflow-hidden bg-gradient-to-r from-blue-500 to-blue-400 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in"
       >
         <div className="font-bold lg:text-lg  pl-5 relative -mt-2">
-          {CONFIG.HERO_CATEGORY_1?.title}
+          {siteConfig('HEO_HERO_CATEGORY_1', null, CONFIG)?.title}
           <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
         </div>
         <div className="hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0">
@@ -179,11 +184,11 @@ function GroupMenu() {
         </div>
       </Link>
       <Link
-        href={CONFIG.HERO_CATEGORY_2?.url}
+        href={siteConfig('HEO_HERO_CATEGORY_2', null, CONFIG)?.url}
         className="group relative overflow-hidden bg-gradient-to-r from-red-500 to-yellow-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in"
       >
         <div className="font-bold lg:text-lg pl-5 relative -mt-2">
-          {CONFIG.HERO_CATEGORY_2?.title}
+          {siteConfig('HEO_HERO_CATEGORY_2', null, CONFIG)?.title}
           <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
         </div>
         <div className="hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0">
@@ -192,11 +197,11 @@ function GroupMenu() {
       </Link>
       {/* 第三个标签在小屏上不显示 */}
       <Link
-        href={CONFIG.HERO_CATEGORY_3?.url}
+        href={siteConfig('HEO_HERO_CATEGORY_3', null, CONFIG)?.url}
         className="group relative overflow-hidden bg-gradient-to-r from-teal-300 to-cyan-300 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in"
       >
         <div className="font-bold text-lg pl-5 relative -mt-2">
-          {CONFIG.HERO_CATEGORY_3?.title}
+          {siteConfig('HEO_HERO_CATEGORY_3', null, CONFIG)?.title}
           <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
         </div>
         <div className="absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0">
@@ -233,7 +238,7 @@ function TopGroup(props) {
       >
         {topPosts?.map((p, index) => {
           return (
-            <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={index}>
+            <Link href={`${siteConfig('SUB_PATH', '')}/${p?.slug}`} key={index}>
               <div className="cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white dark:bg-black dark:text-white rounded-xl">
                 <LazyImage
                   priority={index === 0}
@@ -264,8 +269,8 @@ function TopGroup(props) {
 function getTopPosts({ latestPosts, allNavPages }) {
   // 默认展示最近更新
   if (
-    !CONFIG.HERO_RECOMMEND_POST_TAG ||
-    CONFIG.HERO_RECOMMEND_POST_TAG === ''
+    !siteConfig('HEO_HERO_RECOMMEND_POST_TAG', null, CONFIG) ||
+    siteConfig('HEO_HERO_RECOMMEND_POST_TAG', null, CONFIG) === ''
   ) {
     return latestPosts
   }
@@ -274,7 +279,7 @@ function getTopPosts({ latestPosts, allNavPages }) {
   let sortPosts = []
 
   // 排序方式
-  if (JSON.parse(CONFIG.HERO_RECOMMEND_POST_SORT_BY_UPDATE_TIME)) {
+  if (JSON.parse(siteConfig('HEO_HERO_RECOMMEND_POST_SORT_BY_UPDATE_TIME', null, CONFIG))) {
     sortPosts = Object.create(allNavPages).sort((a, b) => {
       const dateA = new Date(a?.lastEditedDate)
       const dateB = new Date(b?.lastEditedDate)
@@ -290,7 +295,7 @@ function getTopPosts({ latestPosts, allNavPages }) {
       break
     }
     // 查找标签
-    if (post?.tags?.indexOf(CONFIG.HERO_RECOMMEND_POST_TAG) >= 0) {
+    if (post?.tags?.indexOf(siteConfig('HEO_HERO_RECOMMEND_POST_TAG', null, CONFIG)) >= 0) {
       topPosts.push(post)
     }
   }
@@ -331,7 +336,7 @@ function TodayCard({ cRef, siteInfo }) {
    * @param {*} e
    */
   function handleCardClick(e) {
-    router.push(CONFIG.HERO_TITLE_LINK)
+    router.push(siteConfig('HEO_HERO_TITLE_LINK', null, CONFIG))
   }
 
   return (
@@ -355,8 +360,8 @@ function TodayCard({ cRef, siteInfo }) {
           className="z-10 flex justify-between w-full relative text-white p-10 items-end"
         >
           <div className="flex flex-col">
-            <div className="text-xs font-light">{CONFIG.HERO_TITLE_4}</div>
-            <div className="text-3xl font-bold">{CONFIG.HERO_TITLE_5}</div>
+            <div className="text-xs font-light">{siteConfig('HEO_HERO_TITLE_4', null, CONFIG)}</div>
+            <div className="text-3xl font-bold">{siteConfig('HEO_HERO_TITLE_5', null, CONFIG)}</div>
           </div>
           <div
             onClick={handleClickMore}
diff --git a/themes/heo/components/HexoRecentComments.js b/themes/heo/components/HexoRecentComments.js
index 2ebf00c8..dbeee596 100644
--- a/themes/heo/components/HexoRecentComments.js
+++ b/themes/heo/components/HexoRecentComments.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import BLOG from '@/blog.config'
 import Card from '@/themes/hexo/components/Card'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { RecentComments } from '@waline/client'
+import { useEffect, useState } from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * @see https://waline.js.org/guide/get-started.html
@@ -11,12 +11,12 @@ import { RecentComments } from '@waline/client'
  * @returns
  */
 const HexoRecentComments = (props) => {
-  const [comments, updateComments] = React.useState([])
+  const [comments, updateComments] = useState([])
   const { locale } = useGlobal()
-  const [onLoading, changeLoading] = React.useState(true)
-  React.useEffect(() => {
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
     RecentComments({
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
       count: 5
     }).then(({ comments }) => {
       changeLoading(false)
diff --git a/themes/heo/components/InfoCard.js b/themes/heo/components/InfoCard.js
index ad4727c8..4fad98ac 100644
--- 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'
@@ -17,21 +17,20 @@ export function InfoCard(props) {
   const { siteInfo, notice } = props
   const router = useRouter()
   // 在文章详情页特殊处理
-  const isSlugPage = router.pathname === '/[...slug]'
-
+  const isSlugPage = router.pathname.indexOf('/[prefix]') === 0
   return (
         <Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
             {/* 信息卡牌第一行 */}
             <div className='flex justify-between'>
                 {/* 问候语 */}
                 <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} />
+                <div className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-6 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={siteConfig('AUTHOR')} />
                 </div>
             </div>
 
             <h2 className='text-3xl font-extrabold mt-3'>
-                {BLOG.AUTHOR}
+                {siteConfig('AUTHOR')}
             </h2>
 
             {/* 公告栏 */}
@@ -46,7 +45,7 @@ export function InfoCard(props) {
                         <Link href='/about'><GlobeAlt className={'w-6 h-6'} /></Link>
                     </div>
                     <div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
-                        <Link href={CONFIG.INFO_CARD_URL}><i className='fab fa-github text-xl' />
+                        <Link href={siteConfig('HEO_INFO_CARD_URL', null, CONFIG)}><i className='fab fa-github text-xl' />
                         </Link>
                     </div>
                 </div>
@@ -60,7 +59,7 @@ export function InfoCard(props) {
  * 欢迎语
  */
 function GreetingsWords() {
-  const greetings = CONFIG.INFOCARD_GREETINGS
+  const greetings = siteConfig('HEO_INFOCARD_GREETINGS', null, CONFIG)
   const [greeting, setGreeting] = useState(greetings[0])
   // 每次点击，随机获取greetings中的一个
   const handleChangeGreeting = () => {
diff --git a/themes/heo/components/JumpToCommentButton.js b/themes/heo/components/JumpToCommentButton.js
index fb007712..3fa53a36 100644
--- a/themes/heo/components/JumpToCommentButton.js
+++ b/themes/heo/components/JumpToCommentButton.js
@@ -1,5 +1,5 @@
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到评论区
@@ -7,7 +7,7 @@ import CONFIG from '../config'
  * @constructor
  */
 const JumpToCommentButton = () => {
-  if (!CONFIG.WIDGET_TO_COMMENT) {
+  if (!siteConfig('HEO_WIDGET_TO_COMMENT', null, CONFIG)) {
     return <></>
   }
 
diff --git a/themes/heo/components/JumpToTopButton.js b/themes/heo/components/JumpToTopButton.js
index 77313f46..0c775dac 100644
--- a/themes/heo/components/JumpToTopButton.js
+++ b/themes/heo/components/JumpToTopButton.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到网页顶部
@@ -13,7 +13,7 @@ import CONFIG from '../config'
 const JumpToTopButton = ({ showPercent = true, percent }) => {
   const { locale } = useGlobal()
 
-  if (!CONFIG.WIDGET_TO_TOP) {
+  if (!siteConfig('HEO_WIDGET_TO_TOP', null, CONFIG)) {
     return <></>
   }
   return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
diff --git a/themes/heo/components/LatestPostsGroup.js b/themes/heo/components/LatestPostsGroup.js
index 2a6077aa..7dc0ae01 100644
--- a/themes/heo/components/LatestPostsGroup.js
+++ b/themes/heo/components/LatestPostsGroup.js
@@ -1,5 +1,5 @@
-import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 
 /**
@@ -22,7 +22,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
           return (
             (<Link key={post.id} passHref
                     title={post.title}
-                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                    href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
 
                     className={'my-3 flex flex-col w-full'}>
 
diff --git a/themes/heo/components/LatestPostsGroupMini.js b/themes/heo/components/LatestPostsGroupMini.js
index 1f0575f6..ea45d3cb 100644
--- a/themes/heo/components/LatestPostsGroupMini.js
+++ b/themes/heo/components/LatestPostsGroupMini.js
@@ -1,5 +1,5 @@
-import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 // import Image from 'next/image'
 import Link from 'next/link'
@@ -28,7 +28,7 @@ export default function LatestPostsGroupMini ({ latestPosts, siteInfo }) {
             </div>
         </div>
         {latestPosts.map(post => {
-          const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
+          const selected = currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
 
           const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
 
@@ -36,7 +36,7 @@ export default function LatestPostsGroupMini ({ latestPosts, siteInfo }) {
             (<Link
                     key={post.id}
                     title={post.title}
-                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                    href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                     passHref
                     className={'my-3 flex'}>
 
diff --git a/themes/heo/components/Logo.js b/themes/heo/components/Logo.js
index b6321836..1de9ae3d 100644
--- a/themes/heo/components/Logo.js
+++ b/themes/heo/components/Logo.js
@@ -1,18 +1,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') }
                     </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 '}/>
diff --git a/themes/heo/components/MenuGroupCard.js b/themes/heo/components/MenuGroupCard.js
index 39d509e4..53157875 100644
--- a/themes/heo/components/MenuGroupCard.js
+++ b/themes/heo/components/MenuGroupCard.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
@@ -11,9 +10,9 @@ const MenuGroupCard = (props) => {
   const tagSlot = <div className='text-center'>{tagOptions?.length}</div>
 
   const links = [
-    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE },
-    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG }
+    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) },
+    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG) },
+    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: siteConfig('HEO_MENU_TAG', null, CONFIG) }
   ]
 
   return (
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/heo/components/MenuListSide.js b/themes/heo/components/MenuListSide.js
index 19f70863..fa6d42a1 100644
--- a/themes/heo/components/MenuListSide.js
+++ b/themes/heo/components/MenuListSide.js
@@ -1,6 +1,5 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 import CONFIG from '../config'
 
@@ -9,10 +8,10 @@ export const MenuListSide = (props) => {
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEO_MENU_SEARCH', null, CONFIG) },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEO_MENU_TAG', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -20,7 +19,7 @@ export const MenuListSide = (props) => {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -30,8 +29,7 @@ export const MenuListSide = (props) => {
 
   return (
         <nav className='flex-col space-y-2'>
-            {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
-            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
+            {links?.map((link, index) => <MenuItemCollapse key={index} link={link} />)}
         </nav>
   )
 }
diff --git a/themes/heo/components/MenuListTop.js b/themes/heo/components/MenuListTop.js
index de6194cd..74d116a5 100644
--- a/themes/heo/components/MenuListTop.js
+++ b/themes/heo/components/MenuListTop.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 
 export const MenuListTop = (props) => {
@@ -9,9 +8,9 @@ export const MenuListTop = (props) => {
   const { locale } = useGlobal()
 
   let links = [
-    { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG.MENU_INDEX },
-    { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
+    { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: siteConfig('HEO_MENU_INDEX', null, CONFIG) },
+    { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEO_MENU_SEARCH', null, CONFIG) },
+    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -19,7 +18,7 @@ export const MenuListTop = (props) => {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
diff --git a/themes/heo/components/NavBar.js b/themes/heo/components/NavBar.js
index eff61f68..dba98b4b 100644
--- a/themes/heo/components/NavBar.js
+++ b/themes/heo/components/NavBar.js
@@ -8,7 +8,8 @@ import SlideOver from './SlideOver'
 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,14 +140,14 @@ 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') && <>|</>} {siteConfig('BIO')}</h1>}
                 </div>
 
                 {/* 右侧固定 */}
                 <div className='flex flex-shrink-0 justify-center items-center'>
                     <RandomPostButton {...props} />
                     <SearchButton {...props}/>
-                    {!JSON.parse(BLOG.THEME_SWITCH) && <div className='hidden md:block'><DarkModeButton {...props} /></div>}
+                    {!JSON.parse(siteConfig('THEME_SWITCH')) && <div className='hidden md:block'><DarkModeButton {...props} /></div>}
                     <ReadingProgress />
 
                     {/* 移动端菜单按钮 */}
diff --git a/themes/heo/components/NavButtonGroup.js b/themes/heo/components/NavButtonGroup.js
index 2a3fc898..82331852 100644
--- a/themes/heo/components/NavButtonGroup.js
+++ b/themes/heo/components/NavButtonGroup.js
@@ -1,5 +1,3 @@
-
-import React from 'react'
 import Link from 'next/link'
 
 /**
@@ -15,7 +13,7 @@ const NavButtonGroup = (props) => {
 
   return (
     <nav id='home-nav-button' className={'w-full z-10 md:h-72 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-1 md:flex justify-center max-h-80 overflow-auto'}>
-      {categoryOptions.map(category => {
+      {categoryOptions?.map(category => {
         return (
           <Link
             key={`${category.name}`}
diff --git a/themes/heo/components/NoticeBar.js b/themes/heo/components/NoticeBar.js
index b4af5086..1ef5aa1e 100644
--- a/themes/heo/components/NoticeBar.js
+++ b/themes/heo/components/NoticeBar.js
@@ -2,13 +2,16 @@
 import { ArrowRightCircle } from '@/components/HeroIcons'
 import CONFIG from '../config'
 import Swipe from './Swipe'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 通知横幅
  */
 export function NoticeBar() {
-  const notices = CONFIG.NOTICE_BAR
-
+  let notices = siteConfig('HEO_NOTICE_BAR', null, CONFIG)
+  if (typeof notices === 'string') {
+    notices = JSON.parse(notices)
+  }
   if (!notices || notices?.length === 0) {
     return <></>
   }
diff --git a/themes/heo/components/PostHeader.js b/themes/heo/components/PostHeader.js
index c7f47b5c..d0a20578 100644
--- a/themes/heo/components/PostHeader.js
+++ b/themes/heo/components/PostHeader.js
@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import NotionIcon from '@/components/NotionIcon'
 import WavesArea from './WavesArea'
 import { HashTag } from '@/components/HeroIcons'
@@ -90,7 +90,7 @@ export default function PostHeader({ post, siteInfo }) {
 
                         </div>
 
-                        {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <div className="busuanzi_container_page_pv font-light mr-2">
+                        {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && <div className="busuanzi_container_page_pv font-light mr-2">
                             <i className="fa-solid fa-fire-flame-curved"></i> <span className="mr-2 busuanzi_value_page_pv" />
                         </div>}
                     </section>
diff --git a/themes/heo/components/RandomPostButton.js b/themes/heo/components/RandomPostButton.js
index a8a0597f..a791f0f8 100644
--- a/themes/heo/components/RandomPostButton.js
+++ b/themes/heo/components/RandomPostButton.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 
@@ -15,7 +15,7 @@ export default function RandomPostButton(props) {
   function handleClick() {
     const randomIndex = Math.floor(Math.random() * latestPosts.length)
     const randomPost = latestPosts[randomIndex]
-    router.push(`${BLOG.SUB_PATH}/${randomPost?.slug}`)
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
   }
 
   return (
diff --git a/themes/heo/components/SearchButton.js b/themes/heo/components/SearchButton.js
index e9e253db..d0dfe64d 100644
--- a/themes/heo/components/SearchButton.js
+++ b/themes/heo/components/SearchButton.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
@@ -14,7 +14,7 @@ export default function SearchButton(props) {
   const searchModal = useRef(null)
 
   function handleSearch() {
-    if (BLOG.ALGOLIA_APP_ID) {
+    if (siteConfig('ALGOLIA_APP_ID')) {
       searchModal.current.openSearch()
     } else {
       router.push('/search')
diff --git a/themes/heo/components/SideBar.js b/themes/heo/components/SideBar.js
index cb7427ac..b6f89413 100644
--- 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>
diff --git a/themes/heo/components/SocialButton.js b/themes/heo/components/SocialButton.js
index e684d325..c13cab43 100644
--- a/themes/heo/components/SocialButton.js
+++ b/themes/heo/components/SocialButton.js
@@ -1,5 +1,4 @@
-import BLOG from '@/blog.config'
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 社交联系方式按钮组
@@ -9,34 +8,34 @@ import React from 'react'
 const SocialButton = () => {
   return <div className='w-full justify-center flex-wrap flex'>
     <div className='space-x-12 text-3xl text-gray-600 dark:text-gray-300 '>
-      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
         <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
         <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
         <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkIn'} >
+      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
         <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
         <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
         <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
         <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
         <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
+      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
         <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_YOUTUBE && <a target='_blank' rel='noreferrer' title={'youtube'} href={BLOG.CONTACT_YOUTUBE} >
+      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
         <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
     </div>
diff --git a/themes/heo/components/TocDrawerButton.js b/themes/heo/components/TocDrawerButton.js
index 8e5053b6..179c257b 100644
--- a/themes/heo/components/TocDrawerButton.js
+++ b/themes/heo/components/TocDrawerButton.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 点击召唤目录抽屉
@@ -11,7 +11,7 @@ import CONFIG from '../config'
  */
 const TocDrawerButton = (props) => {
   const { locale } = useGlobal()
-  if (!CONFIG.WIDGET_TOC) {
+  if (!siteConfig('HEO_WIDGET_TOC', null, CONFIG)) {
     return <></>
   }
   return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center' title={locale.POST.TOP} >
diff --git a/themes/heo/components/TouchMeCard.js b/themes/heo/components/TouchMeCard.js
index f51bcb92..2388a9a5 100644
--- a/themes/heo/components/TouchMeCard.js
+++ b/themes/heo/components/TouchMeCard.js
@@ -2,13 +2,14 @@
 import FlipCard from '@/components/FlipCard'
 import Link from 'next/link'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 交流频道
  * @returns
  */
 export default function TouchMeCard() {
-  if (!JSON.parse(CONFIG.SOCIAL_CARD)) {
+  if (!JSON.parse(siteConfig('HEO_SOCIAL_CARD', null, CONFIG))) {
     return <></>
   }
   return (
@@ -18,13 +19,13 @@ export default function TouchMeCard() {
                 className='cursor-pointer lg:p-6 p-4 border rounded-xl bg-[#4f65f0] dark:bg-yellow-600 dark:border-gray-600'
                 frontContent={
                     <div className='h-full'>
-                        <h2 className='font-[1000] text-3xl'>{CONFIG.SOCIAL_CARD_TITLE_1}</h2>
-                        <h3 className='pt-2'>{CONFIG.SOCIAL_CARD_TITLE_2}</h3>
+                        <h2 className='font-[1000] text-3xl'>{siteConfig('HEO_SOCIAL_CARD_TITLE_1', null, CONFIG)}</h2>
+                        <h3 className='pt-2'>{siteConfig('HEO_SOCIAL_CARD_TITLE_2', null, CONFIG)}</h3>
                         <div className='absolute left-0 top-0 w-full h-full' style={{ background: 'url(https://bu.dusays.com/2023/05/16/64633c4cd36a9.png) center center no-repeat' }}></div>
                     </div>}
-                backContent={<Link href={CONFIG.SOCIAL_CARD_URL}>
+                backContent={<Link href={siteConfig('HEO_SOCIAL_CARD_URL', null, CONFIG)}>
                     <div className='font-[1000] text-xl h-full'>
-                        {CONFIG.SOCIAL_CARD_TITLE_3}
+                        {siteConfig('HEO_SOCIAL_CARD_TITLE_3', null, CONFIG)}
                     </div>
                 </Link>}
             />
diff --git a/themes/heo/config.js b/themes/heo/config.js
index a979621c..c8e730ea 100644
--- a/themes/heo/config.js
+++ b/themes/heo/config.js
@@ -1,34 +1,39 @@
 const CONFIG = {
-  HOME_BANNER_ENABLE: true,
+  HEO_HOME_BANNER_ENABLE: true,
 
-  SITE_CREATE_TIME: '2021-09-21', // 建站日期，用于计算网站运行的第几天
+  HEO_SITE_CREATE_TIME: '2021-09-21', // 建站日期，用于计算网站运行的第几天
 
   // 首页顶部通知条滚动内容，如不需要可以留空 []
-  NOTICE_BAR: [
+  HEO_NOTICE_BAR: [
     { title: '欢迎来到我的博客', url: 'https://blog.tangly1024.com' },
     { title: '访问文档中心获取更多帮助', url: 'https://docs.tangly1024.com' }
   ],
 
+  // 英雄区左右侧组件颠倒位置
+  HEO_HERO_REVERSE: false,
+  // 博客主体区左右侧组件颠倒位置
+  HEO_HERO_BODY_REVERSE: false,
+
   // 英雄区(首页顶部大卡)
-  HERO_TITLE_1: '分享编程',
-  HERO_TITLE_2: '与思维认知',
-  HERO_TITLE_3: 'TANGLY1024.COM',
-  HERO_TITLE_4: '新版上线',
-  HERO_TITLE_5: 'NotionNext4.0 轻松定制主题',
-  HERO_TITLE_LINK: 'https://tangly1024.com',
+  HEO_HERO_TITLE_1: '分享编程',
+  HEO_HERO_TITLE_2: '与思维认知',
+  HEO_HERO_TITLE_3: 'TANGLY1024.COM',
+  HEO_HERO_TITLE_4: '新版上线',
+  HEO_HERO_TITLE_5: 'NotionNext4.0 轻松定制主题',
+  HEO_HERO_TITLE_LINK: 'https://tangly1024.com',
 
   // 英雄区显示三个置顶分类
-  HERO_CATEGORY_1: { title: '必看精选', url: '/tag/必看精选' },
-  HERO_CATEGORY_2: { title: '热门文章', url: '/tag/热门文章' },
-  HERO_CATEGORY_3: { title: '实用教程', url: '/tag/实用教程' },
+  HEO_HERO_CATEGORY_1: { title: '必看精选', url: '/tag/必看精选' },
+  HEO_HERO_CATEGORY_2: { title: '热门文章', url: '/tag/热门文章' },
+  HEO_HERO_CATEGORY_3: { title: '实用教程', url: '/tag/实用教程' },
 
   // 英雄区右侧推荐文章标签, 例如 [推荐] , 最多六篇文章; 若留空白''，则推荐最近更新文章
-  HERO_RECOMMEND_POST_TAG: '推荐',
-  HERO_RECOMMEND_POST_SORT_BY_UPDATE_TIME: false, // 推荐文章排序，为`true`时将强制按最后修改时间倒序
+  HEO_HERO_RECOMMEND_POST_TAG: '推荐',
+  HEO_HERO_RECOMMEND_POST_SORT_BY_UPDATE_TIME: false, // 推荐文章排序，为`true`时将强制按最后修改时间倒序
   //   HERO_RECOMMEND_COVER: 'https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712_1280.jpg', // 英雄区右侧图片
 
   // 右侧个人资料卡牌欢迎语，点击可自动切换
-  INFOCARD_GREETINGS: [
+  HEO_INFOCARD_GREETINGS: [
     '你好！我是',
     '🔍 分享与热心帮助',
     '🤝 专修交互与设计',
@@ -37,10 +42,10 @@ const CONFIG = {
     '🤖️ 数码科技爱好者',
     '🧱 团队小组发动机'
   ],
-  INFO_CARD_URL: 'https://github.com/tangly1024/NotionNext', // 个人资料底部按钮链接
+  HEO_INFO_CARD_URL: 'https://github.com/tangly1024/NotionNext', // 个人资料底部按钮链接
 
   // 用户技能图标
-  GROUP_ICONS: [
+  HEO_GROUP_ICONS: [
     {
       title_1: 'AfterEffect',
       img_1: '/images/heo/20239df3f66615b532ce571eac6d14ff21cf072602.webp',
@@ -99,37 +104,37 @@ const CONFIG = {
     }
   ],
 
-  SOCIAL_CARD: true, // 是否显示右侧，点击加入社群按钮
-  SOCIAL_CARD_TITLE_1: '交流频道',
-  SOCIAL_CARD_TITLE_2: '加入我们的社群讨论分享',
-  SOCIAL_CARD_TITLE_3: '点击加入社群',
-  SOCIAL_CARD_URL: 'https://docs.tangly1024.com/article/how-to-question',
+  HEO_SOCIAL_CARD: true, // 是否显示右侧，点击加入社群按钮
+  HEO_SOCIAL_CARD_TITLE_1: '交流频道',
+  HEO_SOCIAL_CARD_TITLE_2: '加入我们的社群讨论分享',
+  HEO_SOCIAL_CARD_TITLE_3: '点击加入社群',
+  HEO_SOCIAL_CARD_URL: 'https://docs.tangly1024.com/article/how-to-question',
 
   // *****  以下配置无效，只是预留开发 ****
   // 菜单配置
-  MENU_INDEX: true, // 显示首页
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
+  HEO_MENU_INDEX: true, // 显示首页
+  HEO_MENU_CATEGORY: true, // 显示分类
+  HEO_MENU_TAG: true, // 显示标签
+  HEO_MENU_ARCHIVE: true, // 显示归档
+  HEO_MENU_SEARCH: true, // 显示搜索
 
-  POST_LIST_COVER: true, // 列表显示文章封面
-  POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
+  HEO_POST_LIST_COVER: true, // 列表显示文章封面
+  HEO_POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
 
-  POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
-  POST_LIST_SUMMARY: true, // 文章摘要
-  POST_LIST_PREVIEW: false, // 读取文章预览
-  POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错
+  HEO_POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
+  HEO_POST_LIST_SUMMARY: true, // 文章摘要
+  HEO_POST_LIST_PREVIEW: false, // 读取文章预览
+  HEO_POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错
 
-  ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
-  ARTICLE_COPYRIGHT: true, // 显示文章版权声明
-  ARTICLE_RECOMMEND: true, // 文章关联推荐
+  HEO_ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
+  HEO_ARTICLE_COPYRIGHT: true, // 显示文章版权声明
+  HEO_ARTICLE_RECOMMEND: true, // 文章关联推荐
 
-  WIDGET_LATEST_POSTS: true, // 显示最新文章卡
-  WIDGET_ANALYTICS: false, // 显示统计卡
-  WIDGET_TO_TOP: true,
-  WIDGET_TO_COMMENT: true, // 跳到评论区
-  WIDGET_DARK_MODE: true, // 夜间模式
-  WIDGET_TOC: true // 移动端悬浮目录
+  HEO_WIDGET_LATEST_POSTS: true, // 显示最新文章卡
+  HEO_WIDGET_ANALYTICS: false, // 显示统计卡
+  HEO_WIDGET_TO_TOP: true,
+  HEO_WIDGET_TO_COMMENT: true, // 跳到评论区
+  HEO_WIDGET_DARK_MODE: true, // 夜间模式
+  HEO_WIDGET_TOC: true // 移动端悬浮目录
 }
 export default CONFIG
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 5ffce600..f81fb21d 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -13,7 +13,6 @@ import Footer from './components/Footer'
 import SideRight from './components/SideRight'
 import NavBar from './components/NavBar'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
 import BlogPostListPage from './components/BlogPostListPage'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import Hero from './components/Hero'
@@ -22,7 +21,7 @@ import SearchNav from './components/SearchNav'
 import BlogPostArchive from './components/BlogPostArchive'
 import { ArticleLock } from './components/ArticleLock'
 import PostHeader from './components/PostHeader'
-import Comment, { commentEnable } from '@/components/Comment'
+import Comment from '@/components/Comment'
 import NotionPage from '@/components/NotionPage'
 import ArticleAdjacent from './components/ArticleAdjacent'
 import ArticleCopyright from './components/ArticleCopyright'
@@ -40,6 +39,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'
 
 /**
  * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -50,14 +50,42 @@ import { AdSlot } from '@/components/GoogleAdsense'
 const LayoutBase = props => {
   const {
     children,
-    headerSlot,
     slotTop,
-    slotRight,
-    siteInfo,
     className,
     meta
   } = props
 
+  // 全屏模式下的最大宽度
+  const { fullWidth } = useGlobal()
+  const router = useRouter()
+  console.log(router)
+  
+  const headerSlot = (
+    <header>
+      {/* 顶部导航 */}
+      <div id="nav-bar-wrapper" className="h-16">
+        <NavBar {...props} />
+      </div>
+      {/* 通知横幅 */}
+      {router.route==='/' ? <>
+        <NoticeBar />
+        <Hero {...props} />
+      </>
+      : null}
+      <div className="max-w-[86rem] mx-auto px-3">
+        <WWAds className="w-full" orientation="horizontal" />
+      </div>
+      {fullWidth ? null : <PostHeader {...props} />}
+    </header>
+  )
+
+  // 右侧栏 用户信息+标签列表
+  const slotRight = fullWidth ? null : <SideRight {...props} />
+
+  const maxWidth = fullWidth ? 'max-w-[96rem] mx-auto' : 'max-w-[86rem]' // 普通最大宽度是86rem和顶部菜单栏对齐，留空则与窗口对齐
+
+  const HEO_HERO_BODY_REVERSE = siteConfig('HEO_HERO_BODY_REVERSE', false, CONFIG)
+
   return (
     <div
       id="theme-heo"
@@ -73,12 +101,12 @@ const LayoutBase = props => {
       {/* 主区块 */}
       <main
         id="wrapper-outer"
-        className={'flex-grow w-full max-w-[86rem] mx-auto relative md:px-5'}
+        className={`flex-grow w-full ${maxWidth} mx-auto relative md:px-5`}
       >
         <div
           id="container-inner"
           className={
-            'w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'
+            `${HEO_HERO_BODY_REVERSE ? 'flex-row-reverse' : ''} w-full mx-auto lg:flex justify-center relative z-10`
           }
         >
           <div className={`w-full h-auto ${className || ''}`}>
@@ -87,15 +115,18 @@ const LayoutBase = props => {
             {children}
           </div>
 
+          <div className='lg:px-2'></div>
+
           <div className="hidden xl:block">
             {/* 主区快右侧 */}
             {slotRight}
           </div>
         </div>
+
       </main>
 
       {/* 页脚 */}
-      <Footer title={siteInfo?.title || BLOG.TITLE} />
+      <Footer title={siteConfig('TITLE')} />
     </div>
   )
 }
@@ -107,38 +138,18 @@ const LayoutBase = props => {
  * @returns
  */
 const LayoutIndex = props => {
-  const headerSlot = (
-    <header>
-      {/* 顶部导航 */}
-      <div id="nav-bar-wrapper" className="h-16">
-        <NavBar {...props} />
-      </div>
-      {/* 通知横幅 */}
-      <NoticeBar />
-      <Hero {...props} />
-      <div className="max-w-[86rem] mx-auto px-3">
-        <WWAds className="w-full" orientation="horizontal" />
-      </div>
-    </header>
-  )
-
-  // 右侧栏 用户信息+标签列表
-  const slotRight = <SideRight {...props} />
-
   return (
-    <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
       <div id="post-outer-wrapper" className="px-5 md:px-0">
         {/* 文章分类条 */}
         <CategoryBar {...props} />
-        {BLOG.POST_LIST_STYLE === 'page'
+        {siteConfig('POST_LIST_STYLE') === 'page'
           ? (
-          <BlogPostListPage {...props} />
+            <BlogPostListPage {...props} />
             )
           : (
-          <BlogPostListScroll {...props} />
+            <BlogPostListScroll {...props} />
             )}
       </div>
-    </LayoutBase>
   )
 }
 
@@ -148,31 +159,19 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
-  // 右侧栏
-  const slotRight = <SideRight {...props} />
-  const headerSlot = (
-    <header>
-      {/* 顶部导航 */}
-      <div id="nav-bar-wrapper" className="h-16">
-        <NavBar {...props} />
-      </div>
-    </header>
-  )
 
   return (
-    <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
       <div id="post-outer-wrapper" className="px-5  md:px-0">
         {/* 文章分类条 */}
         <CategoryBar {...props} />
-        {BLOG.POST_LIST_STYLE === 'page'
+        {siteConfig('POST_LIST_STYLE') === 'page'
           ? (
-          <BlogPostListPage {...props} />
+            <BlogPostListPage {...props} />
             )
           : (
-          <BlogPostListScroll {...props} />
+            <BlogPostListScroll {...props} />
             )}
       </div>
-    </LayoutBase>
   )
 }
 
@@ -185,16 +184,7 @@ const LayoutSearch = props => {
   const { keyword } = props
   const router = useRouter()
   const currentSearch = keyword || router?.query?.s
-  const headerSlot = (
-    <header className="post-bg">
-      {/* 顶部导航 */}
-      <div id="nav-bar-wrapper">
-        <NavBar {...props} />
-      </div>
-      <PostHeader {...props} />
-    </header>
-  )
-
+  
   useEffect(() => {
     // 高亮搜索结果
     if (currentSearch) {
@@ -211,29 +201,28 @@ const LayoutSearch = props => {
     }
   }, [])
   return (
-    <LayoutBase
+    <div
       {...props}
       currentSearch={currentSearch}
-      headerSlot={headerSlot}
     >
       <div id="post-outer-wrapper" className="px-5  md:px-0">
         {!currentSearch
           ? (
-          <SearchNav {...props} />
+            <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>
             )}
       </div>
-    </LayoutBase>
+    </div>
   )
 }
 
@@ -245,21 +234,9 @@ const LayoutSearch = props => {
 const LayoutArchive = props => {
   const { archivePosts } = props
 
-  // 右侧栏
-  const slotRight = <SideRight {...props} />
-  const headerSlot = (
-    <header>
-      {/* 顶部导航 */}
-      <div id="nav-bar-wrapper" className="h-16">
-        <NavBar {...props} />
-      </div>
-    </header>
-  )
-
   // 归档页顶部显示条，如果是默认归档则不显示。分类详情页显示分类列表，标签详情页显示当前标签
 
   return (
-    <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
       <div className="p-5 rounded-xl border dark:border-gray-600 max-w-6xl w-full bg-white dark:bg-[#1e1e1e]">
         {/* 文章分类条 */}
         <CategoryBar {...props} border={false} />
@@ -274,7 +251,6 @@ const LayoutArchive = props => {
           ))}
         </div>
       </div>
-    </LayoutBase>
   )
 }
 
@@ -285,7 +261,7 @@ const LayoutArchive = props => {
  */
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
-  const { locale } = useGlobal()
+  const { locale, fullWidth } = useGlobal()
 
   const [hasCode, setHasCode] = useState(false)
 
@@ -294,33 +270,18 @@ const LayoutSlug = props => {
     setHasCode(hasCode)
   }, [])
 
-  // 右侧栏
-  const slotRight = <SideRight {...props} />
-  const headerSlot = (
-    <header
-      data-aos="fade-up"
-      data-aos-duration="300"
-      data-aos-once="false"
-      data-aos-anchor-placement="top-bottom"
-      className="post-bg"
-    >
-      {/* 顶部导航 */}
-      <div id="nav-bar-wrapper">
-        <NavBar {...props} />
-      </div>
-      <PostHeader {...props} />
-    </header>
-  )
+
+  const commentEnable = siteConfig('COMMENT_TWIKOO_ENV_ID') || siteConfig('COMMENT_WALINE_SERVER_URL') || siteConfig('COMMENT_VALINE_APP_ID') ||
+    siteConfig('COMMENT_GISCUS_REPO') || siteConfig('COMMENT_CUSDIS_APP_ID') || siteConfig('COMMENT_UTTERRANCES_REPO') ||
+    siteConfig('COMMENT_GITALK_CLIENT_ID') || siteConfig('COMMENT_WEBMENTION_ENABLE')
 
   return (
-    <LayoutBase
+    <div
       {...props}
-      headerSlot={headerSlot}
       showCategory={false}
       showTag={false}
-      slotRight={slotRight}
     >
-      <div className={`w-full xl:max-w-5xl ${hasCode ? 'xl:w-[73.15vw]' : ''} lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article`}>
+      <div className={`w-full ${fullWidth ? '' : 'xl:max-w-5xl'} ${hasCode ? 'xl:w-[73.15vw]' : ''} lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article`}>
         {lock && <ArticleLock validPassword={validPassword} />}
 
         {!lock && (
@@ -358,26 +319,28 @@ const LayoutSlug = props => {
               )}
             </article>
 
-            <div className={`${commentEnable && post ? '' : 'hidden'}`}>
-              <hr className="my-4 border-dashed" />
+            {fullWidth
+              ? null
+              : <div className={`${commentEnable && post ? '' : 'hidden'}`}>
+                <hr className="my-4 border-dashed" />
 
-              {/* 评论互动 */}
-              <div className="duration-200 overflow-x-auto px-5">
-                <div className="text-2xl dark:text-white">
-                  <i className="fas fa-comment mr-1" />
-                  {locale.COMMON.COMMENTS}
+                {/* 评论互动 */}
+                <div className="duration-200 overflow-x-auto px-5">
+                  <div className="text-2xl dark:text-white">
+                    <i className="fas fa-comment mr-1" />
+                    {locale.COMMON.COMMENTS}
+                  </div>
+                  <Comment frontMatter={post} className="" />
+                  <div className="py-2">
+                    <AdSlot />
+                  </div>
                 </div>
-                <Comment frontMatter={post} className="" />
-                <div className="py-2">
-                  <AdSlot />
-                </div>
-              </div>
-            </div>
+              </div>}
           </div>
         )}
       </div>
       <FloatTocButton {...props} />
-    </LayoutBase>
+    </div>
   )
 }
 
@@ -388,7 +351,7 @@ const LayoutSlug = props => {
  */
 const Layout404 = props => {
   const { meta, siteInfo } = props
-  const { onLoading } = useGlobal()
+  const { onLoading, fullWidth } = useGlobal()
   return (
     <div
       id="theme-heo"
@@ -409,7 +372,7 @@ const Layout404 = props => {
       {/* 主区块 */}
       <main
         id="wrapper-outer"
-        className={'flex-grow max-w-4xl w-screen mx-auto px-5'}
+        className={`flex-grow ${fullWidth ? '' : 'max-w-4xl'} w-screen mx-auto px-5`}
       >
         <div id="error-wrapper" className={'w-full mx-auto justify-center'}>
           <Transition
@@ -464,18 +427,10 @@ const Layout404 = props => {
 const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
-  const headerSlot = (
-    <header>
-      {/* 顶部导航 */}
-      <div id="nav-bar-wrapper" className="h-16">
-        <NavBar {...props} />
-      </div>
-    </header>
-  )
+
 
   return (
-    <LayoutBase {...props} className="mt-8" headerSlot={headerSlot}>
-      <div id="category-outer-wrapper" className="px-5 md:px-0">
+      <div id="category-outer-wrapper" className="mt-8 px-5 md:px-0">
         <div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
           {locale.COMMON.CATEGORY}
         </div>
@@ -483,7 +438,7 @@ const LayoutCategoryIndex = props => {
           id="category-list"
           className="duration-200 flex flex-wrap m-10 justify-center"
         >
-          {categoryOptions.map(category => {
+          {categoryOptions?.map(category => {
             return (
               <Link
                 key={category.name}
@@ -507,7 +462,6 @@ const LayoutCategoryIndex = props => {
           })}
         </div>
       </div>
-    </LayoutBase>
   )
 }
 
@@ -519,17 +473,9 @@ const LayoutCategoryIndex = props => {
 const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
-  const headerSlot = (
-    <header>
-      {/* 顶部导航 */}
-      <div id="nav-bar-wrapper" className="h-16">
-        <NavBar {...props} />
-      </div>
-    </header>
-  )
+
   return (
-    <LayoutBase {...props} className="mt-8" headerSlot={headerSlot}>
-      <div id="tag-outer-wrapper" className="px-5  md:px-0">
+      <div id="tag-outer-wrapper" className="px-5 mt-8 md:px-0">
         <div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
           {locale.COMMON.TAGS}
         </div>
@@ -561,12 +507,12 @@ const LayoutTagIndex = props => {
           })}
         </div>
       </div>
-    </LayoutBase>
   )
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutSearch,
   LayoutArchive,
diff --git a/themes/hexo/components/ArticleAdjacent.js b/themes/hexo/components/ArticleAdjacent.js
index 21ca9e32..dc6a5b99 100644
--- a/themes/hexo/components/ArticleAdjacent.js
+++ b/themes/hexo/components/ArticleAdjacent.js
@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 上一篇，下一篇文章
@@ -7,7 +8,7 @@ import CONFIG from '../config'
  * @returns
  */
 export default function ArticleAdjacent ({ prev, next }) {
-  if (!prev || !next || !CONFIG.ARTICLE_ADJACENT) {
+  if (!prev || !next || !siteConfig('HEXO_ARTICLE_ADJACENT', null, CONFIG)) {
     return <></>
   }
   return (
diff --git a/themes/hexo/components/ArticleCopyright.js b/themes/hexo/components/ArticleCopyright.js
index 4664573c..af3808a2 100644
--- a/themes/hexo/components/ArticleCopyright.js
+++ b/themes/hexo/components/ArticleCopyright.js
@@ -1,28 +1,30 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 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)
+  const [path, setPath] = useState(siteConfig('LINK') + router.asPath)
   useEffect(() => {
     setPath(window.location.href)
   })
 
   const { locale } = useGlobal()
+
+  if (!siteConfig('HEXO_ARTICLE_COPYRIGHT', null, CONFIG)) {
+    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>
diff --git a/themes/hexo/components/ArticleRecommend.js b/themes/hexo/components/ArticleRecommend.js
index dc5ef58e..e773db4e 100644
--- a/themes/hexo/components/ArticleRecommend.js
+++ b/themes/hexo/components/ArticleRecommend.js
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import LazyImage from '@/components/LazyImage'
 
@@ -13,7 +13,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
   const { locale } = useGlobal()
 
   if (
-    !CONFIG.ARTICLE_RECOMMEND ||
+    !siteConfig('HEXO_ARTICLE_RECOMMEND', null, CONFIG) ||
         !recommendPosts ||
         recommendPosts.length === 0
   ) {
@@ -38,7 +38,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
                     (<Link
                             key={post.id}
                             title={post.title}
-                            href={`${BLOG.SUB_PATH}/${post.slug}`}
+                            href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                             passHref
                             className="flex h-40 cursor-pointer overflow-hidden">
 
diff --git a/themes/hexo/components/BlogPostArchive.js b/themes/hexo/components/BlogPostArchive.js
index ea3c6cd2..0eec29f5 100644
--- a/themes/hexo/components/BlogPostArchive.js
+++ b/themes/hexo/components/BlogPostArchive.js
@@ -1,6 +1,6 @@
-import React from 'react'
 import Link from 'next/link'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
+
 /**
  * 博客归档列表
  * @param posts 所有文章
@@ -30,7 +30,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
                 <span className="text-gray-400">{post.date?.start_date}</span>{' '}
                 &nbsp;
                 <Link
-                  href={`${BLOG.SUB_PATH}/${post.slug}`}
+                  href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                   passHref
                   className="dark:text-gray-400  dark:hover:text-indigo-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
 
diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index f1febbdd..ee21c056 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -1,22 +1,21 @@
 import Link from 'next/link'
-import React from 'react'
 import CONFIG from '../config'
 import { BlogPostCardInfo } from './BlogPostCardInfo'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
 // import Image from 'next/image'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
-  const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
-  if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
+  const showPreview = siteConfig('HEXO_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
+  if (post && !post.pageCoverThumbnail && siteConfig('HEXO_POST_LIST_COVER_DEFAULT', null, CONFIG)) {
     post.pageCoverThumbnail = siteInfo?.pageCover
   }
-  const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
+  const showPageCover = siteConfig('HEXO_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail && !showPreview
   //   const delay = (index % 2) * 200
 
   return (
 
-        <div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
+        <div className={`${siteConfig('HEXO_POST_LIST_COVER_HOVER_ENLARGE', null, CONFIG) ? ' hover:scale-110 transition-all duration-150' : ''}`} >
             <div key={post.id}
                 data-aos="fade-up"
                 data-aos-easing="ease-in-out"
@@ -24,7 +23,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 data-aos-once="false"
                 data-aos-anchor-placement="top-bottom"
                 id='blog-post-card'
-                className={`group md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
+                className={`group md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${siteConfig('HEXO_POST_LIST_IMG_CROSSOVER', null, CONFIG) && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
                     overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
 
                 {/* 文字内容 */}
@@ -33,7 +32,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 {/* 图片封面 */}
                 {showPageCover && (
                     <div className="md:w-5/12 overflow-hidden">
-                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                        <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
                         <LazyImage priority={index === 1} src={post?.pageCoverThumbnail} className='h-56 w-full object-cover object-center group-hover:scale-110 duration-500' />
                         </Link>
                     </div>
diff --git a/themes/hexo/components/BlogPostCardInfo.js b/themes/hexo/components/BlogPostCardInfo.js
index e09ee96e..e7636de9 100644
--- a/themes/hexo/components/BlogPostCardInfo.js
+++ b/themes/hexo/components/BlogPostCardInfo.js
@@ -2,7 +2,7 @@ import NotionPage from '@/components/NotionPage'
 import Link from 'next/link'
 import TagItemMini from './TagItemMini'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { formatDateFmt } from '@/lib/formatDate'
 
 /**
@@ -15,7 +15,7 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
        <div>
          {/* 标题 */}
          <Link
-            href={`${BLOG.SUB_PATH}/${post.slug}`}
+            href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
             passHref
             className={`line-clamp-2 replace cursor-pointer text-2xl ${showPreview ? 'text-center' : ''
                 } leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
diff --git a/themes/hexo/components/BlogPostListPage.js b/themes/hexo/components/BlogPostListPage.js
index 92008f83..d5c3d84c 100644
--- a/themes/hexo/components/BlogPostListPage.js
+++ b/themes/hexo/components/BlogPostListPage.js
@@ -1,6 +1,6 @@
 import BlogPostCard from './BlogPostCard'
 import PaginationNumber from './PaginationNumber'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import BlogPostListEmpty from './BlogPostListEmpty'
 
 /**
@@ -12,8 +12,8 @@ import BlogPostListEmpty from './BlogPostListEmpty'
  * @constructor
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
-  const showPagination = postCount >= BLOG.POSTS_PER_PAGE
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
+  const showPagination = postCount >= parseInt(siteConfig('POSTS_PER_PAGE'))
   if (!posts || posts.length === 0 || page > totalPage) {
     return <BlogPostListEmpty />
   } else {
diff --git a/themes/hexo/components/BlogPostListScroll.js b/themes/hexo/components/BlogPostListScroll.js
index 7646b056..c92c0b55 100644
--- a/themes/hexo/components/BlogPostListScroll.js
+++ b/themes/hexo/components/BlogPostListScroll.js
@@ -1,8 +1,8 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import BlogPostCard from './BlogPostCard'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import { useGlobal } from '@/lib/global'
-import React from 'react'
+import { useEffect, useRef, useState } from 'react'
 import CONFIG from '../config'
 import { getListByPage } from '@/lib/utils'
 
@@ -13,9 +13,9 @@ import { getListByPage } from '@/lib/utils'
  * @returns {JSX.Element}
  * @constructor
  */
-const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => {
-  const postsPerPage = BLOG.POSTS_PER_PAGE
-  const [page, updatePage] = React.useState(1)
+const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfig('HEXO_POST_LIST_SUMMARY', null, CONFIG), siteInfo }) => {
+  const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE'))
+  const [page, updatePage] = useState(1)
   const postsToShow = getListByPage(posts, page, postsPerPage)
 
   let hasMore = false
@@ -41,14 +41,14 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.PO
   }
 
   // 监听滚动
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', scrollTrigger)
     return () => {
       window.removeEventListener('scroll', scrollTrigger)
     }
   })
 
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
   const { locale } = useGlobal()
 
   if (!postsToShow || postsToShow.length === 0) {
diff --git a/themes/hexo/components/CategoryGroup.js b/themes/hexo/components/CategoryGroup.js
index c88df60a..69aa4c1c 100644
--- a/themes/hexo/components/CategoryGroup.js
+++ b/themes/hexo/components/CategoryGroup.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
   if (!categories) {
diff --git a/themes/hexo/components/FloatDarkModeButton.js b/themes/hexo/components/FloatDarkModeButton.js
index f693d1f0..d5848b06 100644
--- a/themes/hexo/components/FloatDarkModeButton.js
+++ b/themes/hexo/components/FloatDarkModeButton.js
@@ -1,11 +1,12 @@
 import { useGlobal } from '@/lib/global'
 import { saveDarkModeToCookies } from '@/themes/theme'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 export default function FloatDarkModeButton () {
   const { isDarkMode, updateDarkMode } = useGlobal()
 
-  if (!CONFIG.WIDGET_DARK_MODE) {
+  if (!siteConfig('HEXO_WIDGET_DARK_MODE', null, CONFIG)) {
     return <></>
   }
 
diff --git a/themes/hexo/components/Footer.js b/themes/hexo/components/Footer.js
index 8025e7b9..053faac3 100644
--- a/themes/hexo/components/Footer.js
+++ b/themes/hexo/components/Footer.js
@@ -1,16 +1,10 @@
-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()
   const currentYear = d.getFullYear()
-  const copyrightDate = (function() {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
     <footer
@@ -18,16 +12,16 @@ 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={siteConfig('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/></>}
+      {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br/></>}
 
       <span className='hidden busuanzi_container_site_pv'>
             <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='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {BLOG.BIO && <>|</>} {BLOG.BIO}</h1>
-        <p className='text-xs pt-2 text-light-500 dark:text-gray-500'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</p></span><br/>
+        <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1>
+        <p className='text-xs pt-2 text-light-500 dark:text-gray-500'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a>.</p></span><br/>
 
     </footer>
   )
diff --git a/themes/hexo/components/Hero.js b/themes/hexo/components/Hero.js
index ad28362f..6c7bb17a 100644
--- a/themes/hexo/components/Hero.js
+++ b/themes/hexo/components/Hero.js
@@ -4,8 +4,8 @@ import Typed from 'typed.js'
 import CONFIG from '../config'
 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
 
@@ -20,13 +20,14 @@ const Hero = props => {
   const scrollToWrapper = () => {
     window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
   }
+  const GREETING_WORDS = siteConfig('GREETING_WORDS').split(',')
   useEffect(() => {
     updateHeaderHeight()
 
     if (!typed && window && document.getElementById('typed')) {
       changeType(
         new Typed('#typed', {
-          strings: BLOG.GREETING_WORDS.split(','),
+          strings: GREETING_WORDS,
           typeSpeed: 200,
           backSpeed: 100,
           backDelay: 400,
@@ -57,24 +58,24 @@ 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' />
                 </div>
 
                 {/* 首页导航大按钮 */}
-                {CONFIG.HOME_NAV_BUTTONS && <NavButtonGroup {...props} />}
+                {siteConfig('HEXO_HOME_NAV_BUTTONS', null, CONFIG) && <NavButtonGroup {...props} />}
 
                 {/* 滚动按钮 */}
                 <div onClick={scrollToWrapper} className="z-10 cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white">
-                    <div className="opacity-70 animate-bounce text-xs">{CONFIG.SHOW_START_READING && locale.COMMON.START_READING}</div>
+                    <div className="opacity-70 animate-bounce text-xs">{siteConfig('HEXO_SHOW_START_READING', null, CONFIG) && locale.COMMON.START_READING}</div>
                     <i className='opacity-70 animate-bounce fas fa-angle-down' />
                 </div>
             </div>
 
             <LazyImage id='header-cover' src={siteInfo?.pageCover}
-                className={`header-cover w-full h-screen object-cover object-center ${CONFIG.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`} />
+                className={`header-cover w-full h-screen object-cover object-center ${siteConfig('HEXO_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`} />
 
         </header>
   )
diff --git a/themes/hexo/components/HexoRecentComments.js b/themes/hexo/components/HexoRecentComments.js
index 2ebf00c8..db712bea 100644
--- a/themes/hexo/components/HexoRecentComments.js
+++ b/themes/hexo/components/HexoRecentComments.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import BLOG from '@/blog.config'
+import { useEffect, useState } from 'react'
+import { siteConfig } from '@/lib/config'
 import Card from '@/themes/hexo/components/Card'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
@@ -11,12 +11,12 @@ import { RecentComments } from '@waline/client'
  * @returns
  */
 const HexoRecentComments = (props) => {
-  const [comments, updateComments] = React.useState([])
+  const [comments, updateComments] = useState([])
   const { locale } = useGlobal()
-  const [onLoading, changeLoading] = React.useState(true)
-  React.useEffect(() => {
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
     RecentComments({
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
       count: 5
     }).then(({ comments }) => {
       changeLoading(false)
diff --git a/themes/hexo/components/InfoCard.js b/themes/hexo/components/InfoCard.js
index 5f1116e8..6b33034e 100644
--- a/themes/hexo/components/InfoCard.js
+++ b/themes/hexo/components/InfoCard.js
@@ -1,9 +1,9 @@
-import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import Card from './Card'
 import SocialButton from './SocialButton'
 import MenuGroupCard from './MenuGroupCard'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 社交信息卡
@@ -22,10 +22,10 @@ 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='text-sm text-center'>{BLOG.BIO}</div>
+            <div className='font-medium text-center text-xl pb-4'>{siteConfig('AUTHOR')}</div>
+            <div className='text-sm text-center'>{siteConfig('BIO')}</div>
             <MenuGroupCard {...props} />
             <SocialButton />
         </Card>
diff --git a/themes/hexo/components/JumpToCommentButton.js b/themes/hexo/components/JumpToCommentButton.js
index fb007712..60f1d1e9 100644
--- a/themes/hexo/components/JumpToCommentButton.js
+++ b/themes/hexo/components/JumpToCommentButton.js
@@ -1,5 +1,5 @@
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到评论区
@@ -7,7 +7,7 @@ import CONFIG from '../config'
  * @constructor
  */
 const JumpToCommentButton = () => {
-  if (!CONFIG.WIDGET_TO_COMMENT) {
+  if (!siteConfig('HEXO_WIDGET_TO_COMMENT', null, CONFIG)) {
     return <></>
   }
 
diff --git a/themes/hexo/components/JumpToTopButton.js b/themes/hexo/components/JumpToTopButton.js
index 77313f46..9a2b9712 100644
--- a/themes/hexo/components/JumpToTopButton.js
+++ b/themes/hexo/components/JumpToTopButton.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到网页顶部
@@ -13,7 +13,7 @@ import CONFIG from '../config'
 const JumpToTopButton = ({ showPercent = true, percent }) => {
   const { locale } = useGlobal()
 
-  if (!CONFIG.WIDGET_TO_TOP) {
+  if (!siteConfig('HEXO_WIDGET_TO_TOP', null, CONFIG)) {
     return <></>
   }
   return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
diff --git a/themes/hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js
index bc3002dd..f9ac9026 100644
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
 import { useGlobal } from '@/lib/global'
 // import Image from 'next/image'
@@ -28,7 +28,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
             </div>
         </div>
         {latestPosts.map(post => {
-          const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
+          const selected = currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
 
           const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
 
@@ -36,7 +36,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
             (<Link
                     key={post.id}
                     title={post.title}
-                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                    href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                     passHref
                     className={'my-3 flex'}>
 
diff --git a/themes/hexo/components/Logo.js b/themes/hexo/components/Logo.js
index 2dd392b7..f753cd83 100644
--- a/themes/hexo/components/Logo.js
+++ b/themes/hexo/components/Logo.js
@@ -1,13 +1,11 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-import React from 'react'
 
 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') }</div>
       </div>
     </Link>
   )
diff --git a/themes/hexo/components/MenuGroupCard.js b/themes/hexo/components/MenuGroupCard.js
index 5be22e2b..2e7a44d1 100644
--- a/themes/hexo/components/MenuGroupCard.js
+++ b/themes/hexo/components/MenuGroupCard.js
@@ -1,7 +1,7 @@
-import React from 'react'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 const MenuGroupCard = (props) => {
   const { postCount, categoryOptions, tagOptions } = props
@@ -11,9 +11,9 @@ const MenuGroupCard = (props) => {
   const tagSlot = <div className='text-center'>{tagOptions?.length}</div>
 
   const links = [
-    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE },
-    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG }
+    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG) },
+    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG) },
+    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: siteConfig('HEXO_MENU_TAG', null, CONFIG) }
   ]
 
   for (let i = 0; i < links.length; i++) {
diff --git a/themes/hexo/components/MenuItemCollapse.js b/themes/hexo/components/MenuItemCollapse.js
index ccd9d6bc..e8a030c2 100644
--- a/themes/hexo/components/MenuItemCollapse.js
+++ b/themes/hexo/components/MenuItemCollapse.js
@@ -7,7 +7,8 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = ({ link }) => {
+export const MenuItemCollapse = (props) => {
+  const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
@@ -41,7 +42,7 @@ export const MenuItemCollapse = ({ link }) => {
         </div>
 
         {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen}>
+        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
             {link.subMenus.map((sLink, index) => {
               return <div key={index} className='dark:bg-black dark:text-gray-200 text-left px-10 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'}>
diff --git a/themes/hexo/components/MenuListSide.js b/themes/hexo/components/MenuListSide.js
index 789d07d2..3a146d43 100644
--- a/themes/hexo/components/MenuListSide.js
+++ b/themes/hexo/components/MenuListSide.js
@@ -1,6 +1,5 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 import CONFIG from '../config'
 
@@ -9,16 +8,16 @@ export const MenuListSide = (props) => {
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG) },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEXO_MENU_TAG', null, CONFIG) }
   ]
 
   if (customNav) {
     links = customNav.concat(links)
   }
-  
+
   for (let i = 0; i < links.length; i++) {
     if (links[i].id !== i) {
       links[i].id = i
@@ -26,7 +25,7 @@ export const MenuListSide = (props) => {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -36,8 +35,7 @@ export const MenuListSide = (props) => {
 
   return (
         <nav>
-            {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
-            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
+            {links?.map((link, index) => <MenuItemCollapse key={index} link={link} />)}
         </nav>
   )
 }
diff --git a/themes/hexo/components/MenuListTop.js b/themes/hexo/components/MenuListTop.js
index 4f2da0d1..f5d2c9cd 100644
--- a/themes/hexo/components/MenuListTop.js
+++ b/themes/hexo/components/MenuListTop.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 
 export const MenuListTop = (props) => {
@@ -9,11 +8,11 @@ export const MenuListTop = (props) => {
   const { locale } = useGlobal()
 
   let links = [
-    { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG.MENU_INDEX },
-    { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
-    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: siteConfig('HEXO_MENU_INDEX', null, CONFIG) },
+    { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG) },
+    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG) }
+    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MENU_CATEGORY', null, CONFIG) },
+    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MENU_TAG', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -27,7 +26,7 @@ export const MenuListTop = (props) => {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -37,7 +36,7 @@ export const MenuListTop = (props) => {
 
   return (<>
         <nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
-            {links?.map(link => link && link.show && <MenuItemDrop key={link?.id} link={link} />)}
+            {links?.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
         </nav>
     </>)
 }
diff --git a/themes/hexo/components/NavButtonGroup.js b/themes/hexo/components/NavButtonGroup.js
index 38709213..8539eb49 100644
--- a/themes/hexo/components/NavButtonGroup.js
+++ b/themes/hexo/components/NavButtonGroup.js
@@ -1,5 +1,3 @@
-
-import React from 'react'
 import Link from 'next/link'
 
 /**
@@ -15,7 +13,7 @@ const NavButtonGroup = (props) => {
 
   return (
     <nav id='home-nav-button' className={'w-full z-10 md:h-72 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-6xl space-y-2 md:space-y-0 md:flex justify-center max-h-80 overflow-auto'}>
-      {categoryOptions.map(category => {
+      {categoryOptions?.map(category => {
         return (
           <Link
             key={`${category.name}`}
diff --git a/themes/hexo/components/PostHeader.js b/themes/hexo/components/PostHeader.js
index acafaf0f..9266f181 100644
--- a/themes/hexo/components/PostHeader.js
+++ b/themes/hexo/components/PostHeader.js
@@ -1,17 +1,23 @@
 import Link from 'next/link'
 import TagItemMini from './TagItemMini'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
 import NotionIcon from '@/components/NotionIcon'
 import LazyImage from '@/components/LazyImage'
 import { formatDateFmt } from '@/lib/formatDate'
+import { siteConfig } from '@/lib/config'
 
 export default function PostHeader({ post, siteInfo }) {
-  const { locale } = useGlobal()
+  const { locale, fullWidth } = useGlobal()
 
   if (!post) {
     return <></>
   }
+
+  // 文章全屏隐藏标头
+  if (fullWidth) {
+    return <div className='my-8'/>
+  }
+
   const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover
 
   return (
@@ -57,7 +63,7 @@ export default function PostHeader({ post, siteInfo }) {
               </div>
             </div>
 
-            {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <div className="busuanzi_container_page_pv font-light mr-2">
+            {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && <div className="busuanzi_container_page_pv font-light mr-2">
               <span className="mr-2 busuanzi_value_page_pv" />
               {locale.COMMON.VIEWS}
             </div>}
diff --git a/themes/hexo/components/Progress.js b/themes/hexo/components/Progress.js
index 59ee1697..8c233c54 100644
--- a/themes/hexo/components/Progress.js
+++ b/themes/hexo/components/Progress.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
 
 /**
diff --git a/themes/hexo/components/SearchButton.js b/themes/hexo/components/SearchButton.js
new file mode 100644
index 00000000..47d1da6f
--- /dev/null
+++ b/themes/hexo/components/SearchButton.js
@@ -0,0 +1,30 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import { useRef } from 'react'
+import { useHexoGlobal } from '..'
+
+/**
+ * 搜索按钮
+ * @returns
+ */
+export default function SearchButton(props) {
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const { searchModal} = useHexoGlobal()
+
+  function handleSearch() {
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal.current.openSearch()
+    } else {
+      router.push('/search')
+    }
+  }
+
+  return <>
+        <div onClick={handleSearch} title={locale.NAV.SEARCH} alt={locale.NAV.SEARCH} className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'>
+            <i title={locale.NAV.SEARCH} className="fa-solid fa-magnifying-glass" />
+        </div>
+    </>
+}
diff --git a/themes/hexo/components/SideBar.js b/themes/hexo/components/SideBar.js
index c6a1340f..913ce0a9 100644
--- 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>
diff --git a/themes/hexo/components/SideRight.js b/themes/hexo/components/SideRight.js
index 570bf32f..497a7b2f 100644
--- a/themes/hexo/components/SideRight.js
+++ b/themes/hexo/components/SideRight.js
@@ -6,11 +6,11 @@ import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
 import { AnalyticsCard } from './AnalyticsCard'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import Announcement from './Announcement'
 import { useGlobal } from '@/lib/global'
 import Live2D from '@/components/Live2D'
+import { siteConfig } from '@/lib/config'
 
 const HexoRecentComments = dynamic(() => import('./HexoRecentComments'))
 const FaceBookPage = dynamic(
@@ -38,10 +38,16 @@ export default function SideRight(props) {
   } = props
 
   const { locale } = useGlobal()
+
+  // 文章全屏处理
+  if (post && post?.fullWidth) {
+    return null
+  }
+
   return (
     <div id='sideRight' className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
       <InfoCard {...props} />
-      {CONFIG.WIDGET_ANALYTICS && <AnalyticsCard {...props} />}
+      {siteConfig('HEXO_WIDGET_ANALYTICS', null, CONFIG) && <AnalyticsCard {...props} />}
 
       {showCategory && (
         <Card>
@@ -59,13 +65,13 @@ export default function SideRight(props) {
           <TagGroups tags={tags} currentTag={currentTag} />
         </Card>
       )}
-      {CONFIG.WIDGET_LATEST_POSTS && latestPosts && latestPosts.length > 0 && <Card>
+      {siteConfig('HEXO_WIDGET_LATEST_POSTS', null, CONFIG) && latestPosts && latestPosts.length > 0 && <Card>
         <LatestPostsGroup {...props} />
       </Card>}
 
       <Announcement post={notice}/>
 
-      {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <HexoRecentComments/>}
+      {siteConfig('COMMENT_WALINE_SERVER_URL') && siteConfig('COMMENT_WALINE_RECENT') && <HexoRecentComments/>}
 
       <div className='sticky top-20'>
         {post && post.toc && post.toc.length > 1 && <Card>
diff --git a/themes/hexo/components/SocialButton.js b/themes/hexo/components/SocialButton.js
index 1a0b9466..38f3cc7f 100644
--- a/themes/hexo/components/SocialButton.js
+++ b/themes/hexo/components/SocialButton.js
@@ -1,5 +1,4 @@
-import BLOG from '@/blog.config'
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 社交联系方式按钮组
@@ -9,34 +8,34 @@ import React from 'react'
 const SocialButton = () => {
   return <div className='w-full justify-center flex-wrap flex'>
     <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
-      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
         <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
         <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
         <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkIn'} >
+      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
         <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
         <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
         <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
         <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
         <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
+      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
         <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_YOUTUBE && <a target='_blank' rel='noreferrer' title={'youtube'} href={BLOG.CONTACT_YOUTUBE} >
+      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
         <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
     </div>
diff --git a/themes/hexo/components/TocDrawer.js b/themes/hexo/components/TocDrawer.js
index 13fad1a9..20c1941b 100644
--- a/themes/hexo/components/TocDrawer.js
+++ b/themes/hexo/components/TocDrawer.js
@@ -1,5 +1,5 @@
 import Catalog from './Catalog'
-import React, { useImperativeHandle, useState } from 'react'
+import { useImperativeHandle, useState } from 'react'
 
 /**
  * 目录抽屉栏
diff --git a/themes/hexo/components/TocDrawerButton.js b/themes/hexo/components/TocDrawerButton.js
index 8e5053b6..318a521d 100644
--- a/themes/hexo/components/TocDrawerButton.js
+++ b/themes/hexo/components/TocDrawerButton.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 点击召唤目录抽屉
@@ -11,7 +11,7 @@ import CONFIG from '../config'
  */
 const TocDrawerButton = (props) => {
   const { locale } = useGlobal()
-  if (!CONFIG.WIDGET_TOC) {
+  if (!siteConfig('HEXO_WIDGET_TOC', null, CONFIG)) {
     return <></>
   }
   return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center' title={locale.POST.TOP} >
diff --git a/themes/hexo/components/TopNav.js b/themes/hexo/components/TopNav.js
index 252ce8a0..8966aa51 100644
--- a/themes/hexo/components/TopNav.js
+++ b/themes/hexo/components/TopNav.js
@@ -10,6 +10,9 @@ import { useRouter } from 'next/router'
 import throttle from 'lodash.throttle'
 import SideBar from './SideBar'
 import SideBarDrawer from './SideBarDrawer'
+import { siteConfig } from '@/lib/config'
+import SearchButton from './SearchButton'
+import CONFIG from '../config'
 
 let windowTop = 0
 
@@ -26,6 +29,7 @@ const TopNav = props => {
   const router = useRouter()
 
   const [isOpen, changeShow] = useState(false)
+  const showSearchButton = siteConfig('HEXO_MENU_SEARCH',false,CONFIG)
 
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
@@ -140,11 +144,12 @@ const TopNav = props => {
                 </div>
 
                 {/* 右侧功能 */}
-                <div className='mr-1 justify-end items-center '>
+                <div className='mr-1 flex justify-end items-center '>
                     <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
                     <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
                         {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
                     </div>
+                    {showSearchButton && <SearchButton />}
                 </div>
             </div>
         </div>
diff --git a/themes/hexo/config.js b/themes/hexo/config.js
index 262e7bfe..dddfbe83 100644
--- a/themes/hexo/config.js
+++ b/themes/hexo/config.js
@@ -1,38 +1,38 @@
 const CONFIG = {
-  HOME_BANNER_ENABLE: true,
+  HEXO_HOME_BANNER_ENABLE: true,
   // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。
-  HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
+  HEXO_HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
 
-  HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
+  HEXO_HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
   // 已知未修复bug, 在移动端开启true后会加载不出图片； 暂时建议设置为false。
-  HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂动； false则随鼠标滚动 ;
+  HEXO_HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂动； false则随鼠标滚动 ;
   // 是否显示开始阅读按钮
-  SHOW_START_READING: true,
+  HEXO_SHOW_START_READING: true,
 
   // 菜单配置
-  MENU_INDEX: true, // 显示首页
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
+  HEXO_MENU_INDEX: true, // 显示首页
+  HEXO_MENU_CATEGORY: true, // 显示分类
+  HEXO_MENU_TAG: true, // 显示标签
+  HEXO_MENU_ARCHIVE: true, // 显示归档
+  HEXO_MENU_SEARCH: true, // 显示搜索
 
-  POST_LIST_COVER: true, // 列表显示文章封面
-  POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
+  HEXO_POST_LIST_COVER: true, // 列表显示文章封面
+  HEXO_POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
 
-  POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
-  POST_LIST_SUMMARY: true, // 文章摘要
-  POST_LIST_PREVIEW: false, // 读取文章预览
-  POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错
+  HEXO_POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
+  HEXO_POST_LIST_SUMMARY: true, // 文章摘要
+  HEXO_POST_LIST_PREVIEW: false, // 读取文章预览
+  HEXO_POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错
 
-  ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
-  ARTICLE_COPYRIGHT: true, // 显示文章版权声明
-  ARTICLE_RECOMMEND: true, // 文章关联推荐
+  HEXO_ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
+  HEXO_ARTICLE_COPYRIGHT: true, // 显示文章版权声明
+  HEXO_ARTICLE_RECOMMEND: true, // 文章关联推荐
 
-  WIDGET_LATEST_POSTS: true, // 显示最新文章卡
-  WIDGET_ANALYTICS: false, // 显示统计卡
-  WIDGET_TO_TOP: true,
-  WIDGET_TO_COMMENT: true, // 跳到评论区
-  WIDGET_DARK_MODE: true, // 夜间模式
-  WIDGET_TOC: true // 移动端悬浮目录
+  HEXO_WIDGET_LATEST_POSTS: true, // 显示最新文章卡
+  HEXO_WIDGET_ANALYTICS: false, // 显示统计卡
+  HEXO_WIDGET_TO_TOP: true,
+  HEXO_WIDGET_TO_COMMENT: true, // 跳到评论区
+  HEXO_WIDGET_DARK_MODE: true, // 夜间模式
+  HEXO_WIDGET_TOC: true // 移动端悬浮目录
 }
 export default CONFIG
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
index 960556e0..18a7daf2 100644
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -1,12 +1,10 @@
 import CONFIG from './config'
-
 import CommonHead from '@/components/CommonHead'
-import { useEffect, useRef } from 'react'
+import { createContext, useContext, useEffect, useRef } from 'react'
 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 +31,13 @@ import SlotBar from './components/SlotBar'
 import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
+import { siteConfig } from '@/lib/config'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+
+
+// 主题全局状态
+const ThemeGlobalHexo = createContext()
+export const useHexoGlobal = () => useContext(ThemeGlobalHexo)
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -41,10 +46,30 @@ import replaceSearchResult from '@/components/Mark'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, headerSlot, floatSlot, slotTop, meta, siteInfo, className } = props
-  const { onLoading } = useGlobal()
+  const { post , children, slotTop, meta, className } = props
+  const { onLoading, fullWidth } = useGlobal()
+
+  const router = useRouter()
+  const headerSlot = post
+    ?  <PostHeader {...props} /> : (router.route==='/'  &&  siteConfig('HEXO_HOME_BANNER_ENABLE', null, CONFIG)
+    ? <Hero {...props} /> : null)
+  
+  const floatSlot = <>
+        {post?.toc?.length > 1 && <div className="block lg:hidden">
+            <TocDrawerButton
+                onClick={() => {
+                  drawerRight?.current?.handleSwitchVisible()
+                }}
+            />
+        </div>}
+        <JumpToCommentButton />
+    </>
+
+  // Algolia搜索框
+  const searchModal = useRef(null)
 
   return (
+    <ThemeGlobalHexo.Provider value={{ searchModal }}>
         <div id='theme-hexo'>
             {/* 网页SEO */}
             <CommonHead meta={meta}/>
@@ -69,9 +94,9 @@ const LayoutBase = props => {
             </Transition>
 
             {/* 主区块 */}
-            <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 className={`${className || ''} w-full max-w-4xl h-full overflow-hidden`}>
+            <main id="wrapper" className={`${siteConfig('HEXO_HOME_BANNER_ENABLE', null, CONFIG) ? '' : '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={(JSON.parse(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 ${fullWidth ? '' : 'max-w-4xl'} h-full overflow-hidden`}>
 
                         <Transition
                             show={!onLoading}
@@ -99,9 +124,13 @@ const LayoutBase = props => {
             {/* 悬浮菜单 */}
             <RightFloatArea floatSlot={floatSlot} />
 
+            {/* 全文搜索 */}
+            <AlgoliaSearchModal cRef={searchModal} {...props}/>
+
             {/* 页脚 */}
-            <Footer title={siteInfo?.title || BLOG.TITLE} />
+            <Footer title={siteConfig('TITLE') } />
         </div>
+    </ThemeGlobalHexo.Provider>
   )
 }
 
@@ -112,8 +141,7 @@ const LayoutBase = props => {
  * @returns
  */
 const LayoutIndex = (props) => {
-  const headerSlot = CONFIG.HOME_BANNER_ENABLE && <Hero {...props} />
-  return <LayoutPostList {...props} headerSlot={headerSlot} className='pt-8' />
+  return <LayoutPostList {...props}  className='pt-8' />
 }
 
 /**
@@ -122,10 +150,10 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutPostList = (props) => {
-  return <LayoutBase {...props} className='pt-8'>
+  return <div className='pt-8'>
         <SlotBar {...props} />
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-    </LayoutBase>
+        {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+    </div>
 }
 
 /**
@@ -152,11 +180,11 @@ const LayoutSearch = props => {
   })
 
   return (
-        <LayoutBase {...props} currentSearch={currentSearch} className='pt-8'>
+        <div className='pt-8'>
             {!currentSearch
               ? <SearchNav {...props} />
-              : <div id="posts-wrapper"> {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}  </div>}
-        </LayoutBase>
+              : <div id="posts-wrapper"> {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}  </div>}
+        </div>
   )
 }
 
@@ -167,7 +195,7 @@ const LayoutSearch = props => {
  */
 const LayoutArchive = (props) => {
   const { archivePosts } = props
-  return <LayoutBase {...props} className='pt-8'>
+  return <div className='pt-8'>
         <Card className='w-full'>
             <div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
                 {Object.keys(archivePosts).map(archiveTitle => (
@@ -179,7 +207,7 @@ const LayoutArchive = (props) => {
                 ))}
             </div>
         </Card>
-    </LayoutBase>
+    </div>
 }
 
 /**
@@ -190,22 +218,10 @@ const LayoutArchive = (props) => {
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const drawerRight = useRef(null)
-
-  const targetRef = isBrowser ? document.getElementById('article-wrapper') : null
-
-  const floatSlot = <>
-        {post?.toc?.length > 1 && <div className="block lg:hidden">
-            <TocDrawerButton
-                onClick={() => {
-                  drawerRight?.current?.handleSwitchVisible()
-                }}
-            />
-        </div>}
-        <JumpToCommentButton />
-    </>
+  const tocRef = isBrowser ? document.getElementById('article-wrapper') : null
 
   return (
-        <LayoutBase {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} floatSlot={floatSlot} >
+        <>
             <div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
                 {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -237,10 +253,10 @@ const LayoutSlug = props => {
             </div>
 
             <div className='block lg:hidden'>
-                <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
+                <TocDrawer post={post} cRef={drawerRight} targetRef={tocRef} />
             </div>
 
-        </LayoutBase>
+        </>
   )
 }
 
@@ -265,7 +281,7 @@ const Layout404 = props => {
     }, 3000)
   })
   return (
-        <LayoutBase {...props}>
+        <>
             <div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
                 <div className="dark:text-gray-200">
                     <h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
@@ -276,7 +292,7 @@ const Layout404 = props => {
                     </div>
                 </div>
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -289,13 +305,13 @@ const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
   return (
-        <LayoutBase {...props} className='mt-8'>
+        <div className='mt-8'>
             <Card className="w-full min-h-screen">
                 <div className="dark:text-gray-200 mb-5 mx-3">
                     <i className="mr-4 fas fa-th" />  {locale.COMMON.CATEGORY}:
                 </div>
                 <div id="category-list" className="duration-200 flex flex-wrap mx-8">
-                    {categoryOptions.map(category => {
+                    {categoryOptions?.map(category => {
                       return (
                             <Link key={category.name} href={`/category/${category.name}`} passHref legacyBehavior>
                                 <div className={' duration-300 dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400'}>
@@ -306,7 +322,7 @@ const LayoutCategoryIndex = props => {
                     })}
                 </div>
             </Card>
-        </LayoutBase>
+        </div>
   )
 }
 
@@ -319,7 +335,7 @@ const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
   return (
-        <LayoutBase {...props} className='mt-8'>
+        <div className='mt-8'>
             <Card className='w-full'>
                 <div className="dark:text-gray-200 mb-5 ml-4">
                     <i className="mr-4 fas fa-tag" /> {locale.COMMON.TAGS}:
@@ -330,12 +346,13 @@ const LayoutTagIndex = props => {
                     </div>)}
                 </div>
             </Card>
-        </LayoutBase>
+        </div>
   )
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutSearch,
   LayoutArchive,
diff --git a/themes/landing/components/Features.js b/themes/landing/components/Features.js
index ac7f095c..c0e403b5 100644
--- a/themes/landing/components/Features.js
+++ b/themes/landing/components/Features.js
@@ -5,6 +5,7 @@ import { useState, useRef, useEffect } from 'react'
 import { Transition } from '@headlessui/react'
 import CONFIG from '../config'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 // import FeaturesElement from '@/public/images/features-element.png'
 
 export default function Features() {
@@ -32,8 +33,8 @@ export default function Features() {
 
           {/* Section header */}
           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-16">
-            <h1 className="h2 mb-4">{CONFIG.FEATURES_HEADER_1}</h1>
-            <p className="text-xl text-gray-600 leading-relaxed" dangerouslySetInnerHTML={{ __html: CONFIG.FEATURES_HEADER_1_P }}></p>
+            <h1 className="h2 mb-4">{siteConfig('LANDING_FEATURES_HEADER_1', null, CONFIG)}</h1>
+            <p className="text-xl text-gray-600 leading-relaxed" dangerouslySetInnerHTML={{ __html: siteConfig('LANDING_FEATURES_HEADER_1_P', null, CONFIG) }}></p>
           </div>
 
           {/* Section content */}
@@ -42,8 +43,8 @@ export default function Features() {
             {/* Content */}
             <div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6 md:mt-6" data-aos="fade-right">
               <div className="md:pr-4 lg:pr-12 xl:pr-16 mb-8">
-                <h3 className="h3 mb-3">{CONFIG.FEATURES_HEADER_2}</h3>
-                <p className="text-xl text-gray-600">{CONFIG.FEATURES_HEADER_2_P}</p>
+                <h3 className="h3 mb-3">{siteConfig('LANDING_FEATURES_HEADER_2', null, CONFIG)}</h3>
+                <p className="text-xl text-gray-600">{siteConfig('LANDING_FEATURES_HEADER_2_P', null, CONFIG)}</p>
               </div>
               {/* Tabs buttons */}
               <div className="mb-8 md:mb-0">
@@ -53,8 +54,8 @@ export default function Features() {
                   onClick={(e) => { e.preventDefault(); setTab(1) }}
                 >
                   <div>
-                    <div className="font-bold leading-snug tracking-tight mb-1">{CONFIG.FEATURES_CARD_1_TITLE}</div>
-                    <div className="text-gray-600">{CONFIG.FEATURES_CARD_1_P}</div>
+                    <div className="font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_CARD_1_TITLE', null, CONFIG)}</div>
+                    <div className="text-gray-600">{siteConfig('LANDING_FEATURES_CARD_1_P', null, CONFIG)}</div>
                   </div>
                   <div className="flex justify-center items-center w-8 h-8 bg-white rounded-full shadow flex-shrink-0 ml-3">
                     <svg className="w-3 h-3 fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
@@ -68,8 +69,8 @@ export default function Features() {
                   onClick={(e) => { e.preventDefault(); setTab(2) }}
                 >
                   <div>
-                    <div className="font-bold leading-snug tracking-tight mb-1">{CONFIG.FEATURES_CARD_2_TITLE}</div>
-                    <div className="text-gray-600">{CONFIG.FEATURES_CARD_2_P}</div>
+                    <div className="font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_CARD_2_TITLE', null, CONFIG)}</div>
+                    <div className="text-gray-600">{siteConfig('LANDING_FEATURES_CARD_2_P', null, CONFIG)}</div>
                   </div>
                   <div className="flex justify-center items-center w-8 h-8 bg-white rounded-full shadow flex-shrink-0 ml-3">
                     <svg className="w-3 h-3 fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
@@ -83,8 +84,8 @@ export default function Features() {
                   onClick={(e) => { e.preventDefault(); setTab(3) }}
                 >
                   <div>
-                    <div className="font-bold leading-snug tracking-tight mb-1">{CONFIG.FEATURES_CARD_3_TITLE}</div>
-                    <div className="text-gray-600">{CONFIG.FEATURES_CARD_3_P}</div>
+                    <div className="font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_CARD_3_TITLE', null, CONFIG)}</div>
+                    <div className="text-gray-600">{siteConfig('LANDING_FEATURES_CARD_3_P', null, CONFIG)}</div>
                   </div>
                   <div className="flex justify-center items-center w-8 h-8 bg-white rounded-full shadow flex-shrink-0 ml-3">
                     <svg className="w-3 h-3 fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
diff --git a/themes/landing/components/FeaturesBlocks.js b/themes/landing/components/FeaturesBlocks.js
index 1c0a3e2f..07e63e50 100644
--- a/themes/landing/components/FeaturesBlocks.js
+++ b/themes/landing/components/FeaturesBlocks.js
@@ -1,4 +1,5 @@
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 export default function FeaturesBlocks() {
   return (
@@ -13,8 +14,8 @@ export default function FeaturesBlocks() {
 
             {/* Section header */}
             <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
-              <h2 className="h2 mb-4">{CONFIG.FEATURES_BLOCK_HEADER}</h2>
-              <p className="text-xl text-gray-600" dangerouslySetInnerHTML={{ __html: CONFIG.FEATURES_BLOCK_P }}></p>
+              <h2 className="h2 mb-4">{siteConfig('LANDING_FEATURES_BLOCK_HEADER', null, CONFIG)}</h2>
+              <p className="text-xl text-gray-600" dangerouslySetInnerHTML={{ __html: siteConfig('LANDING_FEATURES_BLOCK_P', null, CONFIG) }}></p>
             </div>
 
             {/* Items */}
@@ -33,8 +34,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{CONFIG.FEATURES_BLOCK_1_TITLE}</h4>
-                <p className="text-gray-600 text-center">{CONFIG.FEATURES_BLOCK_1_P}</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_BLOCK_1_TITLE', null, CONFIG)}</h4>
+                <p className="text-gray-600 text-center">{siteConfig('LANDING_FEATURES_BLOCK_1_P', null, CONFIG)}</p>
               </div>
 
               {/* 2nd item */}
@@ -49,8 +50,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{CONFIG.FEATURES_BLOCK_2_TITLE}</h4>
-                <p className="text-gray-600 text-center">{CONFIG.FEATURES_BLOCK_2_P}</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_BLOCK_2_TITLE', null, CONFIG)}</h4>
+                <p className="text-gray-600 text-center">{siteConfig('LANDING_FEATURES_BLOCK_2_P', null, CONFIG)}</p>
               </div>
 
               {/* 3rd item */}
@@ -66,8 +67,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{CONFIG.FEATURES_BLOCK_3_TITLE}</h4>
-                <p className="text-gray-600 text-center">{CONFIG.FEATURES_BLOCK_3_P}</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_BLOCK_3_TITLE', null, CONFIG)}</h4>
+                <p className="text-gray-600 text-center">{siteConfig('LANDING_FEATURES_BLOCK_3_P', null, CONFIG)}</p>
               </div>
 
               {/* 4th item */}
@@ -83,8 +84,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{CONFIG.FEATURES_BLOCK_4_TITLE}</h4>
-                <p className="text-gray-600 text-center">{CONFIG.FEATURES_BLOCK_4_P}</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_BLOCK_4_TITLE', null, CONFIG)}</h4>
+                <p className="text-gray-600 text-center">{siteConfig('LANDING_FEATURES_BLOCK_4_P', null, CONFIG)}</p>
               </div>
 
               {/* 5th item */}
@@ -99,8 +100,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{CONFIG.FEATURES_BLOCK_5_TITLE}</h4>
-                <p className="text-gray-600 text-center">{CONFIG.FEATURES_BLOCK_5_P}</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_BLOCK_5_TITLE', null, CONFIG)}</h4>
+                <p className="text-gray-600 text-center">{siteConfig('LANDING_FEATURES_BLOCK_5_P', null, CONFIG)}</p>
               </div>
 
               {/* 6th item */}
@@ -114,8 +115,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{CONFIG.FEATURES_BLOCK_6_TITLE}</h4>
-                <p className="text-gray-600 text-center">{CONFIG.FEATURES_BLOCK_6_P}</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">{siteConfig('LANDING_FEATURES_BLOCK_6_TITLE', null, CONFIG)}</h4>
+                <p className="text-gray-600 text-center">{siteConfig('LANDING_FEATURES_BLOCK_6_P', null, CONFIG)}</p>
               </div>
 
             </div>
diff --git a/themes/landing/components/Footer.js b/themes/landing/components/Footer.js
index 9a4f8527..63c3a8a7 100644
--- a/themes/landing/components/Footer.js
+++ b/themes/landing/components/Footer.js
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
 import CONFIG from '../config'
 import Logo from './Logo'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 页脚
@@ -115,7 +116,7 @@ export default function Footer() {
                     </div>
 
                     {/* 开启邮件收集 */}
-                    {JSON.parse(CONFIG.NEWSLETTER) && <>
+                    {JSON.parse(siteConfig('LANDING_NEWSLETTER', null, CONFIG)) && <>
                         {/* 5th block */}
                         <div className="sm:col-span-6 md:col-span-3 lg:col-span-3">
                             <h6 className="text-gray-800 font-medium mb-2">Subscribe</h6>
diff --git a/themes/landing/components/Header.js b/themes/landing/components/Header.js
index ee6fe3ff..2b0540ff 100644
--- a/themes/landing/components/Header.js
+++ b/themes/landing/components/Header.js
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import Logo from './Logo'
 import MobileMenu from './MobileMenu'
@@ -36,13 +36,13 @@ export default function Header() {
             {/* Desktop sign in links */}
             <ul className="flex grow justify-end flex-wrap items-center">
               <li>
-                <Link href={CONFIG.HEDEAR_BUTTON_1_URL} target='_blank' className="font-medium hover:font-bold text-gray-600 hover:text-gray-900 px-5 py-3 flex items-center transition duration-150 ease-in-out">
-                   <div>{CONFIG.HEADER_BUTTON_1_TITLE}</div>
+                <Link href={siteConfig('LANDING_HEADER_BUTTON_1_URL', null, CONFIG)} target='_blank' className="font-medium hover:font-bold text-gray-600 hover:text-gray-900 px-5 py-3 flex items-center transition duration-150 ease-in-out">
+                   <div>{siteConfig('LANDING_HEADER_BUTTON_1_TITLE', null, CONFIG)}</div>
                 </Link>
               </li>
               <li>
-                <Link href={CONFIG.HEDEAR_BUTTON_2_URL} target='_blank' className="btn-sm text-gray-200 bg-gray-900 hover:bg-gray-800 ml-3">
-                  <span>{CONFIG.HEADER_BUTTON_2_TITLE}</span>
+                <Link href={siteConfig('LANDING_HEADER_BUTTON_2_URL', null, CONFIG)} target='_blank' className="btn-sm text-gray-200 bg-gray-900 hover:bg-gray-800 ml-3">
+                  <span>{siteConfig('LANDING_HEADER_BUTTON_2_TITLE', null, CONFIG)}</span>
                   <svg className="w-3 h-3 fill-current text-gray-400 shrink-0 ml-2 -mr-1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                     <path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z" fillRule="nonzero" />
                   </svg>
diff --git a/themes/landing/components/Hero.js b/themes/landing/components/Hero.js
index ff7527f6..2982761f 100644
--- a/themes/landing/components/Hero.js
+++ b/themes/landing/components/Hero.js
@@ -1,5 +1,6 @@
 import CONFIG from '../config'
 import ModalVideo from './ModalVideo'
+import { siteConfig } from '@/lib/config'
 
 export default function Hero() {
   return (
@@ -30,21 +31,21 @@ export default function Hero() {
                     {/* Section header */}
                     <div className="text-center pb-12 md:pb-16">
                         <h1 className="text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4" data-aos="zoom-y-out">
-                            <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">{CONFIG.HERO_TITLE_1}</span>
+                            <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">{siteConfig('LANDING_HERO_TITLE_1', null, CONFIG)}</span>
                         </h1>
                         <div className="max-w-3xl mx-auto">
-                            <p className="text-xl text-gray-600 mb-8" data-aos="zoom-y-out" data-aos-delay="150">{CONFIG.HERO_P_1}</p>
+                            <p className="text-xl text-gray-600 mb-8" data-aos="zoom-y-out" data-aos-delay="150">{siteConfig('LANDING_HERO_P_1', null, CONFIG)}</p>
                             <div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center" data-aos="zoom-y-out" data-aos-delay="300">
                                 <div>
                                     <a target='_blank' className="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0"
-                                        href={CONFIG.HERO_BUTTON_1_LINK} rel="noreferrer">
-                                        {CONFIG.HERO_BUTTON_1_TEXT}
+                                        href={siteConfig('LANDING_HERO_BUTTON_1_LINK', null, CONFIG)} rel="noreferrer">
+                                        {siteConfig('LANDING_HERO_BUTTON_1_TEXT', null, CONFIG)}
                                     </a>
                                 </div>
                                 <div>
                                     <a target='_blank' className="btn text-white bg-gray-900 hover:bg-gray-800 w-full sm:w-auto sm:ml-4"
-                                        href={CONFIG.HERO_BUTTON_2_LINK} rel="noreferrer">
-                                        {CONFIG.HERO_BUTTON_2_TEXT}
+                                        href={siteConfig('LANDING_HERO_BUTTON_2_LINK', null, CONFIG)} rel="noreferrer">
+                                        {siteConfig('LANDING_HERO_BUTTON_2_TEXT', null, CONFIG)}
                                     </a>
                                 </div>
                             </div>
@@ -53,11 +54,11 @@ export default function Hero() {
 
                     {/* Hero image */}
                     <ModalVideo
-                        thumb={CONFIG.HERO_VIDEO_IMAGE}
+                        thumb={siteConfig('LANDING_HERO_VIDEO_IMAGE', null, CONFIG)}
                         thumbWidth={768}
                         thumbHeight={432}
-                        thumbAlt={CONFIG.HERO_HEADER_1}
-                        video={CONFIG.HERO_VIDEO_URL}
+                        thumbAlt={siteConfig('HERO_HEADER_1', null, CONFIG)}
+                        video={siteConfig('HERO_VIDEO_URL', null, CONFIG)}
                         videoWidth={1920}
                         videoHeight={1080} />
 
diff --git a/themes/landing/components/MobileMenu.js b/themes/landing/components/MobileMenu.js
index 7bf556e9..c61e325b 100644
--- a/themes/landing/components/MobileMenu.js
+++ b/themes/landing/components/MobileMenu.js
@@ -4,6 +4,7 @@ import { useState, useRef, useEffect } from 'react'
 import { Transition } from '@headlessui/react'
 import Link from 'next/link'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 export default function MobileMenu() {
   const [mobileNavOpen, setMobileNavOpen] = useState(false)
@@ -66,13 +67,13 @@ export default function MobileMenu() {
         >
           <ul className="px-5 py-2">
             <li>
-              <Link href={CONFIG.HEDEAR_BUTTON_1_URL} className="flex font-medium w-full text-gray-600 hover:text-gray-900 py-2 justify-center" onClick={() => setMobileNavOpen(false)}>
-                <div>{CONFIG.HEADER_BUTTON_1_TITLE}</div>
+              <Link href={siteConfig('LANDING_HEADER_BUTTON_1_URL', null, CONFIG)} className="flex font-medium w-full text-gray-600 hover:text-gray-900 py-2 justify-center" onClick={() => setMobileNavOpen(false)}>
+                <div>{siteConfig('LANDING_HEADER_BUTTON_1_TITLE', null, CONFIG)}</div>
               </Link>
             </li>
             <li>
-              <Link href={CONFIG.HEDEAR_BUTTON_2_URL} className="btn-sm text-gray-200 bg-gray-900 hover:bg-gray-800 w-full my-2" onClick={() => setMobileNavOpen(false)}>
-                <span>{CONFIG.HEADER_BUTTON_2_TITLE}</span>
+              <Link href={siteConfig('LANDING_HEADER_BUTTON_2_URL', null, CONFIG)} className="btn-sm text-gray-200 bg-gray-900 hover:bg-gray-800 w-full my-2" onClick={() => setMobileNavOpen(false)}>
+                <span>{siteConfig('LANDING_HEADER_BUTTON_2_TITLE', null, CONFIG)}</span>
                 <svg className="w-3 h-3 fill-current text-gray-400 shrink-0 ml-2 -mr-1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                   <path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z" fill="#999" fillRule="nonzero" />
                 </svg>
diff --git a/themes/landing/components/ModalVideo.js b/themes/landing/components/ModalVideo.js
index 82cb7352..edebdb8d 100644
--- a/themes/landing/components/ModalVideo.js
+++ b/themes/landing/components/ModalVideo.js
@@ -4,6 +4,7 @@ import { useState, useRef, Fragment } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import CONFIG from '../config'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 
 export default function ModalVideo({
   thumb,
@@ -59,7 +60,7 @@ export default function ModalVideo({
                             <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0 2C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12z" />
                             <path d="M10 17l6-5-6-5z" />
                         </svg>
-                        <span className="ml-3">{CONFIG.HERO_VIDEO_TIPS}</span>
+                        <span className="ml-3">{siteConfig('LANDING_HERO_VIDEO_TIPS', null, CONFIG)}</span>
                     </button>
                 </div>
             </div>
@@ -100,7 +101,7 @@ export default function ModalVideo({
                                 <div>
                                     <iframe
                                         className="video-iframe aspect-video w-screen md:w-[800px] mx-auto"
-                                        src={CONFIG.HERO_VIDEO_IFRAME}
+                                        src={siteConfig('LANDING_HERO_VIDEO_IFRAME', null, CONFIG)}
                                         scrolling="no"
                                         border="0"
                                         frameBorder="no"
diff --git a/themes/landing/components/Newsletter.js b/themes/landing/components/Newsletter.js
index 18ad893a..3288905f 100644
--- a/themes/landing/components/Newsletter.js
+++ b/themes/landing/components/Newsletter.js
@@ -1,6 +1,7 @@
 import { subscribeToNewsletter } from '@/lib/mailchimp'
 import { useEffect, useRef, useState } from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 export default function Newsletter() {
   const formRef = useRef()
@@ -26,7 +27,7 @@ export default function Newsletter() {
     }
   }, [subscribeToNewsletter])
 
-  if (!JSON.parse(CONFIG.NEWSLETTER)) {
+  if (!JSON.parse(siteConfig('LANDING_NEWSLETTER', null, CONFIG))) {
     return <></>
   }
 
diff --git a/themes/landing/components/Testimonials.js b/themes/landing/components/Testimonials.js
index 377040e3..5be5f58d 100644
--- a/themes/landing/components/Testimonials.js
+++ b/themes/landing/components/Testimonials.js
@@ -3,6 +3,7 @@
 
 import LazyImage from '@/components/LazyImage'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 export default function Testimonials() {
   return (
@@ -30,8 +31,8 @@ export default function Testimonials() {
 
                     {/* Section header */}
                     <div className="max-w-3xl mx-auto text-center pb-12 md:pb-16">
-                        <h2 className="h2 mb-4">{CONFIG.TESTIMONIALS_HEADER}</h2>
-                        <p className="text-xl text-gray-600" data-aos="zoom-y-out">{CONFIG.TESTIMONIALS_P}</p>
+                        <h2 className="h2 mb-4">{siteConfig('LANDING_TESTIMONIALS_HEADER', null, CONFIG)}</h2>
+                        <p className="text-xl text-gray-600" data-aos="zoom-y-out">{siteConfig('LANDING_TESTIMONIALS_P', null, CONFIG)}</p>
                     </div>
 
                     {/* Testimonials */}
@@ -44,14 +45,14 @@ export default function Testimonials() {
                                     <svg className="absolute top-0 right-0 -mt-3 -mr-8 w-16 h-16 fill-current text-blue-500" viewBox="0 0 64 64" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                         <path d="M37.89 58.338c-2.648-5.63-3.572-10.045-2.774-13.249.8-3.203 8.711-13.383 23.737-30.538l2.135.532c-6.552 10.033-10.532 17.87-11.939 23.515-.583 2.34.22 6.158 2.41 11.457l-13.57 8.283zm-26.963-6.56c-2.648-5.63-3.572-10.046-2.773-13.25.799-3.203 8.71-13.382 23.736-30.538l2.136.533c-6.552 10.032-10.532 17.87-11.94 23.515-.583 2.339.22 6.158 2.41 11.456l-13.57 8.283z" />
                                     </svg>
-                                    <LazyImage className="relative rounded-full w-20 h-20 object-cover" src={CONFIG.TESTIMONIALS_AVATAR} alt="Testimonial 01" />
+                                    <LazyImage className="relative rounded-full w-20 h-20 object-cover" src={siteConfig('LANDING_TESTIMONIALS_AVATAR', null, CONFIG)} alt="Testimonial 01" />
                                 </div>
                                 <blockquote className="text-xl font-medium mb-4">
-                                    {CONFIG.TESTIMONIALS_WORD}
+                                    {siteConfig('LANDING_TESTIMONIALS_WORD', null, CONFIG)}
                                 </blockquote>
-                                <cite className="block font-bold text-lg not-italic mb-1">{CONFIG.TESTIMONIALS_NICKNAME}</cite>
+                                <cite className="block font-bold text-lg not-italic mb-1">{siteConfig('LANDING_TESTIMONIALS_NICKNAME', null, CONFIG)}</cite>
                                 <div className="text-gray-600">
-                                    <span>{CONFIG.TESTIMONIALS_ID}</span> <a className="text-blue-600 hover:underline" href={CONFIG.TESTIMONIALS_SOCIAL_URL}>{CONFIG.TESTIMONIALS_SOCIAL_NAME}</a>
+                                    <span>{siteConfig('LANDING_TESTIMONIALS_ID', null, CONFIG)}</span> <a className="text-blue-600 hover:underline" href={siteConfig('LANDING_TESTIMONIALS_SOCIAL_URL', null, CONFIG)}>{siteConfig('LANDING_TESTIMONIALS_SOCIAL_NAME', null, CONFIG)}</a>
                                 </div>
                             </div>
 
diff --git a/themes/landing/config.js b/themes/landing/config.js
index 1d16a857..09a20b26 100644
--- a/themes/landing/config.js
+++ b/themes/landing/config.js
@@ -1,65 +1,65 @@
 const CONFIG = {
 
-  HEADER_BUTTON_1_TITLE: 'Github开源',
-  HEDEAR_BUTTON_1_URL: 'https://github.com/tangly1024/NotionNext',
+  LANDING_HEADER_BUTTON_1_TITLE: 'Github开源',
+  LANDING_HEADER_BUTTON_1_URL: 'https://github.com/tangly1024/NotionNext',
 
-  HEADER_BUTTON_2_TITLE: '作者博客',
-  HEDEAR_BUTTON_2_URL: 'https://blog.tangly1024.com/',
+  LANDING_HEADER_BUTTON_2_TITLE: '作者博客',
+  LANDING_HEADER_BUTTON_2_URL: 'https://blog.tangly1024.com/',
 
   // 首页大图英雄板块
-  HERO_TITLE_1: 'NotionNext',
-  HERO_P_1: '快速搭建独立站、轻松放大品牌价值！',
-  HERO_BUTTON_1_TEXT: '开始体验',
-  HERO_BUTTON_1_LINK: 'https://docs.tangly1024.com/article/vercel-deploy-notion-next',
-  HERO_BUTTON_2_TEXT: '了解更多',
-  HERO_BUTTON_2_LINK: 'https://docs.tangly1024.com/about',
-  HERO_VIDEO_IMAGE: '/images/home.png',
+  LANDING_HERO_TITLE_1: 'NotionNext',
+  LANDING_HERO_P_1: '快速搭建独立站、轻松放大品牌价值！',
+  LANDING_HERO_BUTTON_1_TEXT: '开始体验',
+  LANDING_HERO_BUTTON_1_LINK: 'https://docs.tangly1024.com/article/vercel-deploy-notion-next',
+  LANDING_HERO_BUTTON_2_TEXT: '了解更多',
+  LANDING_HERO_BUTTON_2_LINK: 'https://docs.tangly1024.com/about',
+  LANDING_HERO_VIDEO_IMAGE: '/images/home.png',
   //   HERO_VIDEO_URL: '/videos/video.mp4',
-  HERO_VIDEO_IFRAME: '//player.bilibili.com/player.html?aid=913088616&bvid=BV1fM4y1L7Qi&cid=1187218697&page=1&&high_quality=1',
-  HERO_VIDEO_TIPS: 'Watch the full video (2 min)',
+  LANDING_HERO_VIDEO_IFRAME: '//player.bilibili.com/player.html?aid=913088616&bvid=BV1fM4y1L7Qi&cid=1187218697&page=1&&high_quality=1',
+  LANDING_HERO_VIDEO_TIPS: 'Watch the full video (2 min)',
 
   // 特性介绍
-  FEATURES_HEADER_1: '探索的过程',
-  FEATURES_HEADER_1_P: "如何搭建自己的门户网站，塑造一个品牌展示中心？<br/>曾经，它是系统<strong class='font-bold text-red-500'>繁重</strong>的Wordpress、是操作<strong class='font-bold  text-red-500'>复杂</strong>的Hexo、是<strong class='font-bold text-red-500'>昂贵</strong>且<strong class='font-bold text-red-500'>不稳定</strong>的技术团队;<br/>现在，只要一个Notion笔记就够了",
-  FEATURES_HEADER_2: 'Notion+NextJs组合方案',
-  FEATURES_HEADER_2_P: '在Notion笔记中管理文章数据，NextJs将其渲染成网页排版，通过Vercel等第三方平台将您的网站发布到全球。',
-  FEATURES_CARD_1_TITLE: '简单快速的系统',
-  FEATURES_CARD_1_P: '在Notion中写下一篇文章，内容立刻在您的网站首页中呈现给互联网',
-  FEATURES_CARD_2_TITLE: '高效传播的媒介',
-  FEATURES_CARD_2_P: '优秀的SEO、快速的响应速度，让您的产品和宣传触达到更多的受众',
-  FEATURES_CARD_3_TITLE: '人性化的定制工具',
-  FEATURES_CARD_3_P: '多款主题供您挑选，可以搭建各种不同风格和作用的网站，更多的主题正在陆续加入中。',
+  LANDING_FEATURES_HEADER_1: '探索的过程',
+  LANDING_FEATURES_HEADER_1_P: "如何搭建自己的门户网站，塑造一个品牌展示中心？<br/>曾经，它是系统<strong class='font-bold text-red-500'>繁重</strong>的Wordpress、是操作<strong class='font-bold  text-red-500'>复杂</strong>的Hexo、是<strong class='font-bold text-red-500'>昂贵</strong>且<strong class='font-bold text-red-500'>不稳定</strong>的技术团队;<br/>现在，只要一个Notion笔记就够了",
+  LANDING_FEATURES_HEADER_2: 'Notion+NextJs组合方案',
+  LANDING_FEATURES_HEADER_2_P: '在Notion笔记中管理文章数据，NextJs将其渲染成网页排版，通过Vercel等第三方平台将您的网站发布到全球。',
+  LANDING_FEATURES_CARD_1_TITLE: '简单快速的系统',
+  LANDING_FEATURES_CARD_1_P: '在Notion中写下一篇文章，内容立刻在您的网站首页中呈现给互联网',
+  LANDING_FEATURES_CARD_2_TITLE: '高效传播的媒介',
+  LANDING_FEATURES_CARD_2_P: '优秀的SEO、快速的响应速度，让您的产品和宣传触达到更多的受众',
+  LANDING_FEATURES_CARD_3_TITLE: '人性化的定制工具',
+  LANDING_FEATURES_CARD_3_P: '多款主题供您挑选，可以搭建各种不同风格和作用的网站，更多的主题正在陆续加入中。',
 
   // 特性介绍2
-  FEATURES_BLOCK_HEADER: '解决方案',
-  FEATURES_BLOCK_P: '人人自媒体的时代，一个网站将帮您链接更多的人，带给你无限的机会和客户。<br/>您还在等什么呢？',
-  FEATURES_BLOCK_1_TITLE: '用网站来展示品牌',
-  FEATURES_BLOCK_1_P: '比起线下渠道、一个公开域名和网站更有说服力',
-  FEATURES_BLOCK_2_TITLE: 'SEO带来更多流量',
-  FEATURES_BLOCK_2_P: '借助搜索引擎，精准定位您的受众',
-  FEATURES_BLOCK_3_TITLE: '网站的性能很重要',
-  FEATURES_BLOCK_3_P: '更快的响应，更好的用户体验',
-  FEATURES_BLOCK_4_TITLE: '打造您的个人品牌',
-  FEATURES_BLOCK_4_P: '继马斯克、乔布斯之后，您将是下一个传奇',
-  FEATURES_BLOCK_5_TITLE: '写作表达是核心技能',
-  FEATURES_BLOCK_5_P: '比起只阅读输入，更重要的是反思和输出',
-  FEATURES_BLOCK_6_TITLE: '开始写博客吧',
-  FEATURES_BLOCK_6_P: 'NotionNext，助您轻松开始写作',
+  LANDING_FEATURES_BLOCK_HEADER: '解决方案',
+  LANDING_FEATURES_BLOCK_P: '人人自媒体的时代，一个网站将帮您链接更多的人，带给你无限的机会和客户。<br/>您还在等什么呢？',
+  LANDING_FEATURES_BLOCK_1_TITLE: '用网站来展示品牌',
+  LANDING_FEATURES_BLOCK_1_P: '比起线下渠道、一个公开域名和网站更有说服力',
+  LANDING_FEATURES_BLOCK_2_TITLE: 'SEO带来更多流量',
+  LANDING_FEATURES_BLOCK_2_P: '借助搜索引擎，精准定位您的受众',
+  LANDING_FEATURES_BLOCK_3_TITLE: '网站的性能很重要',
+  LANDING_FEATURES_BLOCK_3_P: '更快的响应，更好的用户体验',
+  LANDING_FEATURES_BLOCK_4_TITLE: '打造您的个人品牌',
+  LANDING_FEATURES_BLOCK_4_P: '继马斯克、乔布斯之后，您将是下一个传奇',
+  LANDING_FEATURES_BLOCK_5_TITLE: '写作表达是核心技能',
+  LANDING_FEATURES_BLOCK_5_P: '比起只阅读输入，更重要的是反思和输出',
+  LANDING_FEATURES_BLOCK_6_TITLE: '开始写博客吧',
+  LANDING_FEATURES_BLOCK_6_P: 'NotionNext，助您轻松开始写作',
 
   // 感言
-  TESTIMONIALS_HEADER: '已搭建超5300个网站、总浏览量突破100,000,000+',
-  TESTIMONIALS_P: '网站内容涵盖地产、教育、建筑、医学、机械、IT、电子、软件、自媒体、数位游民、短视频、电商、学生、摄影爱好者、旅行爱好者等等各行各业',
+  LANDING_TESTIMONIALS_HEADER: '已搭建超5300个网站、总浏览量突破100,000,000+',
+  LANDING_TESTIMONIALS_P: '网站内容涵盖地产、教育、建筑、医学、机械、IT、电子、软件、自媒体、数位游民、短视频、电商、学生、摄影爱好者、旅行爱好者等等各行各业',
 
-  TESTIMONIALS_AVATAR: 'https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F22de3fcb-d90d-4271-bc01-f815f476122b%2F4FE0A0C0-E487-4C74-BF8E-6F01A27461B8-14186-000008094BC289A6.jpg?table=collection&id=a320a2cc-6ebe-4a8d-95cc-ea94e63bced9&width=200',
-  TESTIMONIALS_NICKNAME: 'Ryan_G',
-  TESTIMONIALS_ID: 'Ryan`Log 站长',
-  TESTIMONIALS_SOCIAL_NAME: '@Gaoran',
-  TESTIMONIALS_SOCIAL_URL: 'https://blog.gaoran.xyz/',
-  TESTIMONIALS_WORD: '“ 感谢大佬的方法。之前尝试过Super、Potion等国外的第三方平台，实现效果一般，个性化程度远不如这个方法，已经用起来了！ “',
+  LANDING_TESTIMONIALS_AVATAR: 'https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F22de3fcb-d90d-4271-bc01-f815f476122b%2F4FE0A0C0-E487-4C74-BF8E-6F01A27461B8-14186-000008094BC289A6.jpg?table=collection&id=a320a2cc-6ebe-4a8d-95cc-ea94e63bced9&width=200',
+  LANDING_TESTIMONIALS_NICKNAME: 'Ryan_G',
+  LANDING_TESTIMONIALS_ID: 'Ryan`Log 站长',
+  LANDING_TESTIMONIALS_SOCIAL_NAME: '@Gaoran',
+  LANDING_TESTIMONIALS_SOCIAL_URL: 'https://blog.gaoran.xyz/',
+  LANDING_TESTIMONIALS_WORD: '“ 感谢大佬的方法。之前尝试过Super、Potion等国外的第三方平台，实现效果一般，个性化程度远不如这个方法，已经用起来了！ “',
 
-  POST_REDIRECT_ENABLE: process.env.NEXT_PUBLIC_POST_REDIRECT_ENABLE || false, // 是否开启文章地址重定向 ； 用于迁移旧网站域名
-  POST_REDIRECT_URL: process.env.NEXT_PUBLIC_POST_REDIRECT_URL || 'https://blog.tangly1024.com', // 重定向网站地址
+  LANDING_POST_REDIRECT_ENABLE: process.env.NEXT_PUBLIC_POST_REDIRECT_ENABLE || false, // 是否开启文章地址重定向 ； 用于迁移旧网站域名
+  LANDING_POST_REDIRECT_URL: process.env.NEXT_PUBLIC_POST_REDIRECT_URL || 'https://blog.tangly1024.com', // 重定向网站地址
 
-  NEWSLETTER: process.env.NEXT_PUBLIC_THEME_LANDING_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp
+  LANDING_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_LANDING_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp
 }
 export default CONFIG
diff --git a/themes/landing/index.js b/themes/landing/index.js
index d5a4f194..51bf84ff 100644
--- a/themes/landing/index.js
+++ b/themes/landing/index.js
@@ -7,7 +7,6 @@
  * 2. 内容大部分是在此文件中写死，notion数据从props参数中传进来
  * 3. 您可在此网站找到更多喜欢的组件 https://www.tailwind-kit.com/
  */
-/* eslint-disable*/
 import NotionPage from '@/components/NotionPage'
 import Header from './components/Header'
 import Footer from './components/Footer'
@@ -21,11 +20,7 @@ import { useRouter } from 'next/router'
 import CONFIG from './config'
 import Loading from '@/components/Loading'
 import { isBrowser } from '@/lib/utils'
-
-/**
- * 这是个配置文件，可以方便在此统一配置信息
- */
-const THEME_CONFIG = { THEME: 'landing' }
+import { siteConfig } from '@/lib/config'
 
 /**
  * 布局框架
@@ -35,9 +30,9 @@ const THEME_CONFIG = { THEME: 'landing' }
  * @returns
  */
 const LayoutBase = (props) => {
-    const { meta, siteInfo, children } = props
+  const { meta, siteInfo, children } = props
 
-    return <div id='theme-landing' className="overflow-hidden flex flex-col justify-between bg-white">
+  return <div id='theme-landing' className="overflow-hidden flex flex-col justify-between bg-white">
 
         {/* 网页SEO */}
         <CommonHead meta={meta} siteInfo={siteInfo} />
@@ -55,22 +50,21 @@ const LayoutBase = (props) => {
     </div>
 }
 
-
 /**
  * 首页布局
  * @param {*} props
  * @returns
  */
 const LayoutIndex = (props) => {
-    return (
-        <LayoutBase {...props}>
+  return (
+        <>
             <Hero />
             <Features />
             <FeaturesBlocks />
             <Testimonials />
             <Newsletter />
-        </LayoutBase>
-    )
+        </>
+  )
 }
 
 /**
@@ -79,40 +73,38 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutSlug = (props) => {
-    // 如果 是 /article/[slug] 的文章路径则进行重定向到另一个域名
-    const router = useRouter()
-    if (JSON.parse(CONFIG.POST_REDIRECT_ENABLE) && isBrowser && router.route == '/[prefix]/[slug]') {
-        const redirectUrl = CONFIG.POST_REDIRECT_URL + router.asPath.replace('?theme=landing', '')
-        router.push(redirectUrl)
-        return  <div id='theme-landing'><Loading /></div>
-    }
-
-    return <LayoutBase {...props}>
+  // 如果 是 /article/[slug] 的文章路径则进行重定向到另一个域名
+  const router = useRouter()
+  if (JSON.parse(siteConfig('LANDING_POST_REDIRECT_ENABLE', null, CONFIG)) && isBrowser && router.route === '/[prefix]/[slug]') {
+    const redirectUrl = siteConfig('LANDING_POST_REDIRECT_URL', null, CONFIG) + router.asPath.replace('?theme=landing', '')
+    router.push(redirectUrl)
+    return <div id='theme-landing'><Loading /></div>
+  }
 
+  return <>
         <div id='container-inner' className='mx-auto max-w-screen-lg p-12'>
             <NotionPage {...props} />
         </div>
-    </LayoutBase>
-
-
+    </>
 }
 
 // 其他布局暂时留空
-const LayoutSearch = (props) => <LayoutBase {...props}><Hero /></LayoutBase>
-const LayoutArchive = (props) => <LayoutBase {...props}><Hero /></LayoutBase>
-const Layout404 = (props) => <LayoutBase {...props}><Hero /></LayoutBase>
-const LayoutCategoryIndex = (props) => <LayoutBase {...props}><Hero /></LayoutBase>
-const LayoutPostList = (props) => <LayoutBase {...props}><Hero /></LayoutBase>
-const LayoutTagIndex = (props) => <LayoutBase {...props}><Hero /></LayoutBase>
+const LayoutSearch = (props) => <><Hero /></>
+const LayoutArchive = (props) => <><Hero /></>
+const Layout404 = (props) => <><Hero /></>
+const LayoutCategoryIndex = (props) => <><Hero /></>
+const LayoutPostList = (props) => <><Hero /></>
+const LayoutTagIndex = (props) => <><Hero /></>
 
 export {
-    THEME_CONFIG,
-    LayoutIndex,
-    LayoutSearch,
-    LayoutArchive,
-    LayoutSlug,
-    Layout404,
-    LayoutPostList,
-    LayoutCategoryIndex,
-    LayoutTagIndex
+  CONFIG as THEME_CONFIG,
+  LayoutBase,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutPostList,
+  LayoutCategoryIndex,
+  LayoutTagIndex
 }
diff --git a/themes/matery/components/ArticleAdjacent.js b/themes/matery/components/ArticleAdjacent.js
index c9991c8c..f87f2136 100644
--- a/themes/matery/components/ArticleAdjacent.js
+++ b/themes/matery/components/ArticleAdjacent.js
@@ -1,5 +1,6 @@
 import CONFIG from '../config'
 import BlogPostCard from './BlogPostCard'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 上一篇，下一篇文章
@@ -7,7 +8,7 @@ import BlogPostCard from './BlogPostCard'
  * @returns
  */
 export default function ArticleAdjacent ({ prev, next, siteInfo }) {
-  if (!prev || !next || !CONFIG.ARTICLE_ADJACENT) {
+  if (!prev || !next || !siteConfig('MATERY_ARTICLE_ADJACENT', null, CONFIG)) {
     return <></>
   }
   return <section className='flex flex-col justify-between  p-3 text-gray-800 items-center text-xs md:text-sm md:flex-row md:gap-2 '>
diff --git a/themes/matery/components/ArticleCopyright.js b/themes/matery/components/ArticleCopyright.js
index d8d9beb9..61a9aa16 100644
--- a/themes/matery/components/ArticleCopyright.js
+++ b/themes/matery/components/ArticleCopyright.js
@@ -1,20 +1,20 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 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()
-  const [path, setPath] = useState(BLOG.LINK + router.asPath)
+  const [path, setPath] = useState(siteConfig('LINK') + router.asPath)
   useEffect(() => {
     setPath(window.location.href)
   })
 
   const { locale } = useGlobal()
 
-  if (!CONFIG.ARTICLE_COPYRIGHT) {
+  if (!siteConfig('MATERY_ARTICLE_COPYRIGHT', null, CONFIG)) {
     return <></>
   }
 
@@ -24,7 +24,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>
diff --git a/themes/matery/components/ArticleRecommend.js b/themes/matery/components/ArticleRecommend.js
index 8fc53a84..0751fbaf 100644
--- a/themes/matery/components/ArticleRecommend.js
+++ b/themes/matery/components/ArticleRecommend.js
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import LazyImage from '@/components/LazyImage'
 
@@ -13,7 +13,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
   const { locale } = useGlobal()
 
   if (
-    !CONFIG.ARTICLE_RECOMMEND ||
+    !siteConfig('MATERY_ARTICLE_RECOMMEND', null, CONFIG) ||
         !recommendPosts ||
         recommendPosts.length === 0
   ) {
@@ -38,7 +38,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
                     (<Link
                             key={post.id}
                             title={post.title}
-                            href={`${BLOG.SUB_PATH}/${post.slug}`}
+                            href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                             passHref
                             className="flex h-40 cursor-pointer overflow-hidden">
 
diff --git a/themes/matery/components/BlogPostArchive.js b/themes/matery/components/BlogPostArchive.js
index ea3c6cd2..0eec29f5 100644
--- a/themes/matery/components/BlogPostArchive.js
+++ b/themes/matery/components/BlogPostArchive.js
@@ -1,6 +1,6 @@
-import React from 'react'
 import Link from 'next/link'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
+
 /**
  * 博客归档列表
  * @param posts 所有文章
@@ -30,7 +30,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
                 <span className="text-gray-400">{post.date?.start_date}</span>{' '}
                 &nbsp;
                 <Link
-                  href={`${BLOG.SUB_PATH}/${post.slug}`}
+                  href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                   passHref
                   className="dark:text-gray-400  dark:hover:text-indigo-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
 
diff --git a/themes/matery/components/BlogPostCard.js b/themes/matery/components/BlogPostCard.js
index 5fa034cc..13aef2e0 100644
--- a/themes/matery/components/BlogPostCard.js
+++ b/themes/matery/components/BlogPostCard.js
@@ -1,6 +1,5 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-import React from 'react'
 import TagItemMini from './TagItemMini'
 import CONFIG from '../config'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
@@ -9,12 +8,12 @@ import { formatDateFmt } from '@/lib/formatDate'
 // import Image from 'next/image'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
-  const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
+  const showPreview = siteConfig('MATERY_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
   // matery 主题默认强制显示图片
   if (post && !post.pageCoverThumbnail) {
     post.pageCoverThumbnail = siteInfo?.pageCover
   }
-  const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail
+  const showPageCover = siteConfig('MATERY_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail
   const delay = (index % 3) * 300
   return (
         <div
@@ -30,7 +29,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
                 {/* 头部图片 填充卡片 */}
                 {showPageCover && (
-                    <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                    <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
                         <div className="flex flex-grow w-full relative duration-200 = rounded-t-md cursor-pointer transform overflow-hidden">
                             <LazyImage
                                 src={post?.pageCoverThumbnail}
diff --git a/themes/matery/components/BlogPostListPage.js b/themes/matery/components/BlogPostListPage.js
index 7d5226dc..7f7c4b6f 100644
--- a/themes/matery/components/BlogPostListPage.js
+++ b/themes/matery/components/BlogPostListPage.js
@@ -1,5 +1,5 @@
 import BlogPostCard from './BlogPostCard'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import PaginationSimple from './PaginationSimple'
 
@@ -12,8 +12,8 @@ import PaginationSimple from './PaginationSimple'
  * @constructor
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
-  const showPagination = postCount >= BLOG.POSTS_PER_PAGE
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
+  const showPagination = postCount >= parseInt(siteConfig('POSTS_PER_PAGE'))
   if (!posts || posts.length === 0 || page > totalPage) {
     return <BlogPostListEmpty />
   } else {
diff --git a/themes/matery/components/BlogPostListScroll.js b/themes/matery/components/BlogPostListScroll.js
index 6d0f4743..d7ce5ae4 100644
--- a/themes/matery/components/BlogPostListScroll.js
+++ b/themes/matery/components/BlogPostListScroll.js
@@ -1,8 +1,8 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import BlogPostCard from './BlogPostCard'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import { useGlobal } from '@/lib/global'
-import React, { useCallback } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import CONFIG from '../config'
 import { getListByPage } from '@/lib/utils'
 import throttle from 'lodash.throttle'
@@ -14,11 +14,20 @@ import throttle from 'lodash.throttle'
  * @returns {JSX.Element}
  * @constructor
  */
-const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => {
-  const postsPerPage = BLOG.POSTS_PER_PAGE
-  const [page, updatePage] = React.useState(1)
+const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfig('MATERY_POST_LIST_SUMMARY', null, CONFIG), siteInfo }) => {
+  const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE'))
+  const [page, updatePage] = useState(1)
   const postsToShow = getListByPage(posts, page, postsPerPage)
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
 
+  const targetRef = useRef(null)
+  const { locale } = useGlobal()
   let hasMore = false
   if (posts) {
     const totalCount = posts.length
@@ -40,16 +49,6 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.PO
       }
     })
   }, throttleMs))
-  // 监听滚动
-  React.useEffect(() => {
-    window.addEventListener('scroll', scrollTrigger)
-    return () => {
-      window.removeEventListener('scroll', scrollTrigger)
-    }
-  })
-
-  const targetRef = React.useRef(null)
-  const { locale } = useGlobal()
 
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty currentSearch={currentSearch} />
diff --git a/themes/matery/components/CategoryGroup.js b/themes/matery/components/CategoryGroup.js
index ad4e7b2a..62046784 100644
--- a/themes/matery/components/CategoryGroup.js
+++ b/themes/matery/components/CategoryGroup.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
   if (!categories) {
diff --git a/themes/matery/components/FloatDarkModeButton.js b/themes/matery/components/FloatDarkModeButton.js
index f912c57b..e42dac8d 100644
--- a/themes/matery/components/FloatDarkModeButton.js
+++ b/themes/matery/components/FloatDarkModeButton.js
@@ -1,11 +1,12 @@
 import { useGlobal } from '@/lib/global'
 import { saveDarkModeToCookies } from '@/themes/theme'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 export default function FloatDarkModeButton() {
   const { isDarkMode, updateDarkMode } = useGlobal()
 
-  if (!CONFIG.WIDGET_DARK_MODE) {
+  if (!siteConfig('WIDGET_DARK_MODE', null, CONFIG)) {
     return <></>
   }
 
diff --git a/themes/matery/components/Footer.js b/themes/matery/components/Footer.js
index 5f1f65b7..b75368b4 100644
--- a/themes/matery/components/Footer.js
+++ b/themes/matery/components/Footer.js
@@ -1,13 +1,11 @@
-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()
   const currentYear = d.getFullYear()
   const copyrightDate = (function() {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
+    if (Number.isInteger(siteConfig('SINCE')) && siteConfig('SINCE') < currentYear) {
+      return siteConfig('SINCE') + '-' + currentYear
     }
     return currentYear
   })()
@@ -18,9 +16,9 @@ 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={siteConfig('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/></>}
+      {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br/></>}
 
       <span className='hidden busuanzi_container_site_pv'>
             <i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
@@ -28,7 +26,7 @@ const Footer = ({ title }) => {
         <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
         <br/>
         <h1>{title}</h1>
-        <span className='text-xs '>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span><br/>
+        <span className='text-xs '>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a>.</span></span><br/>
 
     </footer>
   )
diff --git a/themes/matery/components/Hero.js b/themes/matery/components/Hero.js
index a7157b68..cd2f19ab 100644
--- a/themes/matery/components/Hero.js
+++ b/themes/matery/components/Hero.js
@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 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
 
@@ -16,13 +16,14 @@ const Hero = props => {
   const [typed, changeType] = useState()
   const { siteInfo } = props
   const { locale } = useGlobal()
+  const GREETING_WORDS = siteConfig('GREETING_WORDS').split(',')
 
   useEffect(() => {
     updateHeaderHeight()
     if (!typed && window && document.getElementById('typed')) {
       changeType(
         new Typed('#typed', {
-          strings: BLOG.GREETING_WORDS.split(','),
+          strings: GREETING_WORDS,
           typeSpeed: 200,
           backSpeed: 100,
           backDelay: 400,
@@ -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' />
@@ -61,12 +62,12 @@ const Hero = props => {
                 {/* 滚动按钮 */}
                 <div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
                     className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40">
-                    <i className='animate-bounce fas fa-angle-double-down' /> <span>{CONFIG.SHOW_START_READING && locale.COMMON.START_READING}</span>
+                    <i className='animate-bounce fas fa-angle-double-down' /> <span>{siteConfig('MATERY_SHOW_START_READING', null, CONFIG) && locale.COMMON.START_READING}</span>
                 </div>
             </div>
 
             <LazyImage priority={true} id='header-cover'src={siteInfo?.pageCover}
-                className={`header-cover object-center w-full h-screen object-cover ${CONFIG.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`} />
+                className={`header-cover object-center w-full h-screen object-cover ${siteConfig('MATERY_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`} />
 
         </header>
   )
diff --git a/themes/matery/components/HexoRecentComments.js b/themes/matery/components/HexoRecentComments.js
index 4bdbb82f..29dedb38 100644
--- a/themes/matery/components/HexoRecentComments.js
+++ b/themes/matery/components/HexoRecentComments.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import BLOG from '@/blog.config'
+import { useEffect, useState } from 'react'
+import { siteConfig } from '@/lib/config'
 import Card from '@/themes/hexo/components/Card'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
@@ -11,12 +11,12 @@ import { RecentComments } from '@waline/client'
  * @returns
  */
 const HexoRecentComments = (props) => {
-  const [comments, updateComments] = React.useState([])
+  const [comments, updateComments] = useState([])
   const { locale } = useGlobal()
-  const [onLoading, changeLoading] = React.useState(true)
-  React.useEffect(() => {
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
     RecentComments({
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
       count: 5
     }).then(({ comments }) => {
       changeLoading(false)
diff --git a/themes/matery/components/InfoCard.js b/themes/matery/components/InfoCard.js
index 0591d3a2..93133d64 100644
--- a/themes/matery/components/InfoCard.js
+++ b/themes/matery/components/InfoCard.js
@@ -1,9 +1,10 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useRouter } from 'next/router'
 import Card from './Card'
 import SocialButton from './SocialButton'
 import MenuGroupCard from './MenuGroupCard'
 import LazyImage from '@/components/LazyImage'
+
 export function InfoCard (props) {
   const { className, siteInfo } = props
   const router = useRouter()
@@ -14,10 +15,10 @@ 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-sm text-center'>{BLOG.BIO}</div>
+    <div className='text-center text-xl pb-4'>{siteConfig('AUTHOR')}</div>
+    <div className='text-sm text-center'>{siteConfig('BIO')}</div>
     <MenuGroupCard {...props}/>
     <SocialButton />
   </Card>
diff --git a/themes/matery/components/JumpToCommentButton.js b/themes/matery/components/JumpToCommentButton.js
index 98abb03f..0ebc73a6 100644
--- a/themes/matery/components/JumpToCommentButton.js
+++ b/themes/matery/components/JumpToCommentButton.js
@@ -1,5 +1,5 @@
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到评论区
@@ -7,7 +7,7 @@ import CONFIG from '../config'
  * @constructor
  */
 const JumpToCommentButton = () => {
-  if (!CONFIG.WIDGET_TO_COMMENT) {
+  if (!siteConfig('MATERY_WIDGET_TO_COMMENT', null, CONFIG)) {
     return <></>
   }
 
diff --git a/themes/matery/components/JumpToTopButton.js b/themes/matery/components/JumpToTopButton.js
index 2b1e3018..b052bd00 100644
--- a/themes/matery/components/JumpToTopButton.js
+++ b/themes/matery/components/JumpToTopButton.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到网页顶部
@@ -13,7 +13,7 @@ import CONFIG from '../config'
 const JumpToTopButton = ({ showPercent = true, percent }) => {
   const { locale } = useGlobal()
 
-  if (!CONFIG.WIDGET_TO_TOP) {
+  if (!siteConfig('MATERY_WIDGET_TO_TOP', null, CONFIG)) {
     return <></>
   }
 
diff --git a/themes/matery/components/Logo.js b/themes/matery/components/Logo.js
index 3b615c5e..3e6542f4 100644
--- a/themes/matery/components/Logo.js
+++ b/themes/matery/components/Logo.js
@@ -1,13 +1,11 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-import React from 'react'
 
 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') }</div>
       </div>
     </Link>
   )
diff --git a/themes/matery/components/MenuGroupCard.js b/themes/matery/components/MenuGroupCard.js
index 1c04f4e7..acd0c3b2 100644
--- a/themes/matery/components/MenuGroupCard.js
+++ b/themes/matery/components/MenuGroupCard.js
@@ -1,7 +1,7 @@
-import React from 'react'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 const MenuGroupCard = (props) => {
   const { postCount, categories, tags } = props
@@ -11,9 +11,9 @@ const MenuGroupCard = (props) => {
   const tagSlot = <div className='text-center'>{tags?.length}</div>
 
   const links = [
-    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE },
-    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG }
+    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
+    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
+    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: siteConfig('MATERY_MENU_TAG', null, CONFIG) }
   ]
 
   return (
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/matery/components/MenuList.js b/themes/matery/components/MenuList.js
index 6ea230f2..fb16873f 100644
--- a/themes/matery/components/MenuList.js
+++ b/themes/matery/components/MenuList.js
@@ -1,8 +1,8 @@
-import React from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 const MenuList = (props) => {
   const { postCount, customNav } = props
@@ -12,10 +12,10 @@ const MenuList = (props) => {
 
   let links = [
     { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MATERY_MENU_TAG', null, CONFIG) },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG) }
   ]
   if (customNav) {
     links = links.concat(customNav)
diff --git a/themes/matery/components/MenuListSide.js b/themes/matery/components/MenuListSide.js
index 1dc44c93..8d97afca 100644
--- a/themes/matery/components/MenuListSide.js
+++ b/themes/matery/components/MenuListSide.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
 export const MenuListSide = (props) => {
@@ -9,10 +8,10 @@ export const MenuListSide = (props) => {
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG) },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MATERY_MENU_TAG', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -20,7 +19,7 @@ export const MenuListSide = (props) => {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -30,8 +29,7 @@ export const MenuListSide = (props) => {
 
   return (
         <nav>
-            {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
-            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
+            {links?.map((link, index) => <MenuItemCollapse key={index} link={link} />)}
         </nav>
   )
 }
diff --git a/themes/matery/components/MenuListTop.js b/themes/matery/components/MenuListTop.js
index 58f06cba..506f9c59 100644
--- a/themes/matery/components/MenuListTop.js
+++ b/themes/matery/components/MenuListTop.js
@@ -1,18 +1,17 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { MenuItemDrop } from './MenuItemDrop'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 
 export const MenuListTop = (props) => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG) },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MATERY_MENU_TAG', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -20,7 +19,7 @@ export const MenuListTop = (props) => {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -30,7 +29,7 @@ export const MenuListTop = (props) => {
 
   return (
     <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
-      {links?.map(link => <MenuItemDrop key={link?.id} link={link}/>)}
+      {links?.map((link, index) => <MenuItemDrop key={index} link={link}/>)}
     </nav>
   )
 }
diff --git a/themes/matery/components/NavButtonGroup.js b/themes/matery/components/NavButtonGroup.js
index 37d448a7..1b0d471e 100644
--- a/themes/matery/components/NavButtonGroup.js
+++ b/themes/matery/components/NavButtonGroup.js
@@ -1,5 +1,3 @@
-
-import React from 'react'
 import Link from 'next/link'
 
 /**
diff --git a/themes/matery/components/Progress.js b/themes/matery/components/Progress.js
index dcdea5ba..2ac2ca81 100644
--- a/themes/matery/components/Progress.js
+++ b/themes/matery/components/Progress.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
 
 /**
diff --git a/themes/matery/components/SideBar.js b/themes/matery/components/SideBar.js
index 71757bc5..06437d13 100644
--- 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('DESCRIPTION')}</div>
               </div>
           </div>
           <MenuListSide {...props} />
diff --git a/themes/matery/components/SocialButton.js b/themes/matery/components/SocialButton.js
index 9fc88a5c..ae15d1f0 100644
--- a/themes/matery/components/SocialButton.js
+++ b/themes/matery/components/SocialButton.js
@@ -1,5 +1,5 @@
-import BLOG from '@/blog.config'
-import React, { useState } from 'react'
+import { siteConfig } from '@/lib/config'
+import { useState } from 'react'
 
 /**
  * 社交联系方式按钮组 可折叠的组件
@@ -15,34 +15,34 @@ const SocialButton = () => {
   return <div className='flex flex-col transform hover:scale-105 duration-200 text-white text-center bg-indigo-700 rounded-full dark:bg-black cursor-pointer py-2.5'>
         {!show && <i onClick={toggleShow} className='transform hover:scale-125 duration-150 fas fa-user py-0.5' />}
         {show && <>
-            {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+            {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
                 <i className='transform hover:scale-125 duration-150 fab fa-github ' />
             </a>}
-            {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+            {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
                 <i className='transform hover:scale-125 duration-150 fab fa-twitter ' />
             </a>}
-            {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+            {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
                 <i className='transform hover:scale-125 duration-150 fab fa-telegram ' />
             </a>}
-            {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkIn'} >
+            {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
                 <i className='transform hover:scale-125 duration-150 fab fa-linkedin ' />
             </a>}
-            {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+            {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
                 <i className='transform hover:scale-125 duration-150 fab fa-weibo ' />
             </a>}
-            {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+            {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
                 <i className='transform hover:scale-125 duration-150 fab fa-instagram ' />
             </a>}
-            {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+            {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
                 <i className='transform hover:scale-125 duration-150 fas fa-envelope ' />
             </a>}
-            {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+            {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
                 <i className='transform hover:scale-125 duration-150 fas fa-rss ' />
             </a>}
-            {BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
+            {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
                 <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
             </a>}
-            {BLOG.CONTACT_YOUTUBE && <a target='_blank' rel='noreferrer' title={'youtube'} href={BLOG.CONTACT_YOUTUBE} >
+            {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
                 <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
             </a>}
             <i onClick={toggleShow} className='transform hover:scale-125 duration-150 fas fa-close ' />
diff --git a/themes/matery/components/TocDrawer.js b/themes/matery/components/TocDrawer.js
index 7df6d309..051e69a9 100644
--- a/themes/matery/components/TocDrawer.js
+++ b/themes/matery/components/TocDrawer.js
@@ -1,5 +1,5 @@
 import Catalog from './Catalog'
-import React, { useImperativeHandle, useState } from 'react'
+import { useImperativeHandle, useState } from 'react'
 
 /**
  * 目录抽屉栏
diff --git a/themes/matery/components/TocDrawerButton.js b/themes/matery/components/TocDrawerButton.js
index 8e5053b6..ad35ba42 100644
--- a/themes/matery/components/TocDrawerButton.js
+++ b/themes/matery/components/TocDrawerButton.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 点击召唤目录抽屉
@@ -11,7 +11,7 @@ import CONFIG from '../config'
  */
 const TocDrawerButton = (props) => {
   const { locale } = useGlobal()
-  if (!CONFIG.WIDGET_TOC) {
+  if (!siteConfig('MATERY_WIDGET_TOC', null, CONFIG)) {
     return <></>
   }
   return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center' title={locale.POST.TOP} >
diff --git a/themes/matery/config.js b/themes/matery/config.js
index 2878e51b..705d3765 100644
--- a/themes/matery/config.js
+++ b/themes/matery/config.js
@@ -1,33 +1,33 @@
 const CONFIG = {
-  HOME_BANNER_ENABLE: true,
+  MATERY_HOME_BANNER_ENABLE: true,
   // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。
-  HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
+  MATERY_HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
 
-  HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
-  HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂； false则随鼠标滚动
+  MATERY_HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
+  MATERY_HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂； false则随鼠标滚动
 
   // 是否显示开始阅读按钮
-  SHOW_START_READING: true,
+  MATERY_SHOW_START_READING: true,
 
   // 菜单配置
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
+  MATERY_MENU_CATEGORY: true, // 显示分类
+  MATERY_MENU_TAG: true, // 显示标签
+  MATERY_MENU_ARCHIVE: true, // 显示归档
+  MATERY_MENU_SEARCH: true, // 显示搜索
 
-  POST_LIST_COVER: true, // 文章封面
-  POST_LIST_SUMMARY: true, // 文章摘要
-  POST_LIST_PREVIEW: true, // 读取文章预览
+  MATERY_POST_LIST_COVER: true, // 文章封面
+  MATERY_POST_LIST_SUMMARY: true, // 文章摘要
+  MATERY_POST_LIST_PREVIEW: true, // 读取文章预览
 
-  ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
-  ARTICLE_COPYRIGHT: true, // 显示文章版权声明
-  ARTICLE_RECOMMEND: true, // 文章关联推荐
+  MATERY_ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
+  MATERY_ARTICLE_COPYRIGHT: true, // 显示文章版权声明
+  MATERY_ARTICLE_RECOMMEND: true, // 文章关联推荐
 
-  WIDGET_LATEST_POSTS: true, // 显示最新文章卡
-  WIDGET_ANALYTICS: false, // 显示统计卡
-  WIDGET_TO_TOP: true,
-  WIDGET_TO_COMMENT: true, // 跳到评论区
+  MATERY_WIDGET_LATEST_POSTS: true, // 显示最新文章卡
+  MATERY_WIDGET_ANALYTICS: false, // 显示统计卡
+  MATERY_WIDGET_TO_TOP: true,
+  MATERY_WIDGET_TO_COMMENT: true, // 跳到评论区
   WIDGET_DARK_MODE: true, // 夜间模式
-  WIDGET_TOC: true // 移动端悬浮目录
+  MATERY_WIDGET_TOC: true // 移动端悬浮目录
 }
 export default CONFIG
diff --git a/themes/matery/index.js b/themes/matery/index.js
index d837b92e..ce099cd7 100644
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -3,7 +3,6 @@ import CommonHead from '@/components/CommonHead'
 import TopNav from './components/TopNav'
 import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
 import Footer from './components/Footer'
 import { useEffect } from 'react'
 import RightFloatButtons from './components/RightFloatButtons'
@@ -31,6 +30,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'
 
 /**
  * 基础布局
@@ -40,8 +40,14 @@ import replaceSearchResult from '@/components/Mark'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, headerSlot, meta, siteInfo, containerSlot, post } = props
-  const { onLoading } = useGlobal()
+  const { children, meta, siteInfo, post } = props
+  const { onLoading, fullWidth } = useGlobal()
+  const router = useRouter()
+  const containerSlot= router.route==='/' ? <Announcement {...props} /> : <BlogListBar {...props} />
+  const headerSlot= siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) && router.route==='/' 
+  ? <Hero {...props} /> : (post && !fullWidth ? <PostHeader {...props} /> : null)
+
+  const floatRightBottom = post ? <JumpToCommentButton /> : null
 
   return (
         <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
@@ -58,7 +64,7 @@ const LayoutBase = props => {
                 appear={true}
                 enter="transition ease-in-out duration-700 transform order-first"
                 enterFrom="opacity-0 -translate-y-16"
-                enterTo="opacity-100"
+                enterTo="opacity-100 w-full"
                 leave="transition ease-in-out duration-300 transform"
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-16"
@@ -67,19 +73,19 @@ const LayoutBase = props => {
                 {headerSlot}
             </Transition>
 
-            <main id="wrapper" className={`${CONFIG.HOME_BANNER_ENABLE ? '' : 'pt-16'} flex-1 w-full py-8 md:px-8 lg:px-24 relative`}>
+            <main id="wrapper" className={`${siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) ? '' : 'pt-16'} flex-1 w-full py-8 md:px-8 lg:px-24 relative`}>
                 {/* 嵌入区域 */}
-                <div id="container-slot" className={`w-full max-w-6xl ${post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
+                <div id="container-slot" className={`w-full ${fullWidth ? '' : 'max-w-6xl'} ${post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
                     {containerSlot}
                 </div>
 
-                <div id="container-inner" className="w-full min-h-fit max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center relative z-10">
+                <div id="container-inner" className={`w-full min-h-fit ${fullWidth ? '' : 'max-w-6xl'} mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
                     <Transition
                         show={!onLoading}
                         appear={true}
                         enter="transition ease-in-out duration-700 transform order-first"
                         enterFrom="opacity-0 translate-y-16"
-                        enterTo="opacity-100"
+                        enterTo="opacity-100 w-full"
                         leave="transition ease-in-out duration-300 transform"
                         leaveFrom="opacity-100 translate-y-0"
                         leaveTo="opacity-0 -translate-y-16"
@@ -98,10 +104,10 @@ const LayoutBase = props => {
             </div>
 
             {/* 右下角悬浮 */}
-            <RightFloatButtons {...props} />
+            <RightFloatButtons {...props} floatRightBottom={floatRightBottom}/>
 
             {/* 页脚 */}
-            <Footer title={siteInfo?.title || BLOG.TITLE} />
+            <Footer title={siteConfig('TITLE')} />
         </div>
   )
 }
@@ -113,7 +119,7 @@ const LayoutBase = props => {
  * @returns
  */
 const LayoutIndex = (props) => {
-  return <LayoutPostList {...props} containerSlot={<Announcement {...props} />} headerSlot={CONFIG.HOME_BANNER_ENABLE && <Hero {...props} />} />
+  return <LayoutPostList {...props}/>
 }
 
 /**
@@ -123,9 +129,9 @@ const LayoutIndex = (props) => {
  */
 const LayoutPostList = (props) => {
   return (
-        <LayoutBase {...props} containerSlot={<BlogListBar {...props} />}>
-            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-        </LayoutBase>
+        <>
+            {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        </>
   )
 }
 
@@ -152,13 +158,13 @@ const LayoutSearch = props => {
     }
   })
   return (
-        <LayoutBase {...props} currentSearch={currentSearch}>
+        <>
             {!currentSearch
               ? <SearchNave {...props} />
               : <div id="posts-wrapper">
-                    {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+                    {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
                 </div>}
-        </LayoutBase>
+        </>
   )
 }
 
@@ -169,7 +175,7 @@ const LayoutSearch = props => {
  */
 const LayoutArchive = (props) => {
   const { archivePosts } = props
-  return <LayoutBase {...props} headerSlot={<PostHeader {...props} />} >
+  return <>
         <Card className='w-full -mt-32'>
             <div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
                 {Object.keys(archivePosts).map(archiveTitle => (
@@ -181,7 +187,7 @@ const LayoutArchive = (props) => {
                 ))}
             </div>
         </Card>
-    </LayoutBase>
+    </>
 }
 
 /**
@@ -191,13 +197,14 @@ const LayoutArchive = (props) => {
  */
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
+  const { fullWidth } = useGlobal()
+ 
+  return (<>
 
-  return (<LayoutBase {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} floatRightBottom={<JumpToCommentButton />}>
-
-        <div id='inner-wrapper' className={'w-full lg:max-w-3xl 2xl:max-w-4xl'} >
+        <div id='inner-wrapper' className={`w-full ${fullWidth ? '' : 'lg:max-w-3xl 2xl:max-w-4xl'}`} >
 
             {/* 文章主体卡片 */}
-            <div className="-mt-32 transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
+            <div className={`${fullWidth ? '' : '-mt-32'} transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black`}>
 
                 {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -221,7 +228,7 @@ const LayoutSlug = props => {
                         <article itemScope >
 
                             {/* Notion文章主体 */}
-                            <section className='justify-center mx-auto max-w-2xl lg:max-w-full'>
+                            <section className={`justify-center mx-auto ${fullWidth ? '' : 'max-w-2xl lg:max-w-full'}`}>
                                 {post && <NotionPage post={post} />}
                             </section>
 
@@ -255,7 +262,7 @@ const LayoutSlug = props => {
 
         </div>
 
-    </LayoutBase>
+    </>
   )
 }
 
@@ -278,7 +285,7 @@ const Layout404 = props => {
     }, 3000)
   })
   return (
-        <LayoutBase {...props}>
+        <>
             <div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
                 <div className="dark:text-gray-200">
                     <h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
@@ -289,7 +296,7 @@ const Layout404 = props => {
                     </div>
                 </div>
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -302,12 +309,12 @@ const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
 
   return (
-        <LayoutBase {...props} headerSlot={<PostHeader {...props} />} >
+        <>
 
             <div id='inner-wrapper' className='w-full'>
                 <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black dark:text-gray-300">
                     <div className='flex justify-center flex-wrap'>
-                        {categoryOptions.map(e => {
+                        {categoryOptions?.map(e => {
                           return (
                                 <Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
                                     <div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
@@ -319,7 +326,7 @@ const LayoutCategoryIndex = props => {
                     </div>
                 </div>
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -332,7 +339,7 @@ const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
   return (
-        <LayoutBase {...props} headerSlot={<PostHeader {...props} />} >
+        <>
             <div id='inner-wrapper' className='w-full drop-shadow-xl'>
 
                 <div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
@@ -352,12 +359,13 @@ const LayoutTagIndex = props => {
                     </div>
                 </div>
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutPostList,
   LayoutSearch,
diff --git a/themes/medium/components/ArticleInfo.js b/themes/medium/components/ArticleInfo.js
index 0ecff45e..12c189db 100644
--- 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>
diff --git a/themes/medium/components/BlogArchiveItem.js b/themes/medium/components/BlogArchiveItem.js
index 8e9693dc..efd67565 100644
--- a/themes/medium/components/BlogArchiveItem.js
+++ b/themes/medium/components/BlogArchiveItem.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 
 /**
@@ -23,7 +23,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
                             </span>{' '}
                             &nbsp;
 
-                            <Link passHref href={`${BLOG.SUB_PATH}/${post.slug}`}
+                            <Link passHref href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                                 className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
                                 {post.title}
                             </Link>
diff --git a/themes/medium/components/BlogPostCard.js b/themes/medium/components/BlogPostCard.js
index 16a963e6..5473a04c 100644
--- a/themes/medium/components/BlogPostCard.js
+++ b/themes/medium/components/BlogPostCard.js
@@ -1,8 +1,7 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import NotionPage from '@/components/NotionPage'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
-import React from 'react'
 import CONFIG from '../config'
 import CategoryItem from './CategoryItem'
 import TagItemMini from './TagItemMini'
@@ -10,7 +9,7 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
 import LazyImage from '@/components/LazyImage'
 
 const BlogPostCard = ({ post, showSummary }) => {
-  const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
+  const showPreview = siteConfig('MEDIUM_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
   const { locale } = useGlobal()
   return (
         <div
@@ -24,13 +23,13 @@ const BlogPostCard = ({ post, showSummary }) => {
 
             <div className="lg:py-8 py-4 flex flex-col w-full">
                 <Link
-                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                    href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                     passHref
                     className={
                         'cursor-pointer font-bold  hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
                     }>
                     <div>
-                        {CONFIG.POST_LIST_COVER && <div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
+                        {siteConfig('MEDIUM_POST_LIST_COVER', null, CONFIG) && <div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
                             <LazyImage src={post.pageCoverThumbnail} style={post.pageCoverThumbnail ? {} : { height: '0px' }} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
                         </div>}
                         {post.title}
@@ -44,8 +43,8 @@ const BlogPostCard = ({ post, showSummary }) => {
                     }
                 >
                     <div className="text-sm py-1">{post.date?.start_date}</div>
-                    {CONFIG.POST_LIST_CATEGORY && <CategoryItem category={post.category} />}
-                    {CONFIG.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                    {siteConfig('MEDIUM_POST_LIST_CATEGORY', null, CONFIG) && <CategoryItem category={post.category} />}
+                    {siteConfig('MEDIUM_POST_LIST_TAG', null, CONFIG) && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
                     <TwikooCommentCount post={post} className='hover:underline'/>
                 </div>
 
@@ -63,7 +62,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                         <div className="pointer-events-none border-t pt-8 border-dashed">
                             <div className="w-full justify-start flex">
                                 <Link
-                                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                    href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                                     passHref
                                     className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
 
diff --git a/themes/medium/components/BlogPostListEmpty.js b/themes/medium/components/BlogPostListEmpty.js
index 86977fd0..a26cf292 100644
--- a/themes/medium/components/BlogPostListEmpty.js
+++ b/themes/medium/components/BlogPostListEmpty.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 
 /**
  * 空白博客 列表
@@ -5,8 +6,9 @@
  * @constructor
  */
 const BlogPostListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
   return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
-        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+        <p className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_RESULTS_FOUND}  {(currentSearch && <div>{currentSearch}</div>)}</p>
   </div>
 }
 export default BlogPostListEmpty
diff --git a/themes/medium/components/BlogPostListPage.js b/themes/medium/components/BlogPostListPage.js
index 0d20123c..9b47bfb7 100644
--- a/themes/medium/components/BlogPostListPage.js
+++ b/themes/medium/components/BlogPostListPage.js
@@ -1,5 +1,5 @@
 import BlogPostCard from './BlogPostCard'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import PaginationSimple from './PaginationSimple'
 
@@ -12,7 +12,7 @@ import PaginationSimple from './PaginationSimple'
  * @constructor
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
diff --git a/themes/medium/components/BlogPostListScroll.js b/themes/medium/components/BlogPostListScroll.js
index 0ed06ae3..5f554a0c 100644
--- a/themes/medium/components/BlogPostListScroll.js
+++ b/themes/medium/components/BlogPostListScroll.js
@@ -1,9 +1,9 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import BlogPostCard from './BlogPostCard'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
 
 /**
@@ -14,10 +14,11 @@ import { useRouter } from 'next/router'
  * @constructor
  */
 const BlogPostListScroll = ({ posts = [], currentSearch }) => {
-  const postsPerPage = BLOG.POSTS_PER_PAGE
+  const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE'))
   const [page, updatePage] = useState(1)
+  const router = useRouter()
   let filteredPosts = Object.assign(posts)
-  const searchKey = getSearchKey()
+  const searchKey = router?.query?.s || null
   if (searchKey) {
     filteredPosts = posts.filter(post => {
       const tagContent = post?.tags ? post?.tags.join(' ') : ''
@@ -95,12 +96,4 @@ const getPostByPage = function (page, totalPosts, postsPerPage) {
   )
 }
 
-function getSearchKey() {
-  const router = useRouter()
-  if (router.query && router.query.s) {
-    return router.query.s
-  }
-  return null
-}
-
 export default BlogPostListScroll
diff --git a/themes/medium/components/BottomMenuBar.js b/themes/medium/components/BottomMenuBar.js
index 808b74eb..fee36eb2 100644
--- a/themes/medium/components/BottomMenuBar.js
+++ b/themes/medium/components/BottomMenuBar.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 import { useMediumGlobal } from '@/themes/medium'
 import JumpToTopButton from './JumpToTopButton'
 
diff --git a/themes/medium/components/CategoryGroup.js b/themes/medium/components/CategoryGroup.js
index 1516c038..d562cd1f 100644
--- a/themes/medium/components/CategoryGroup.js
+++ b/themes/medium/components/CategoryGroup.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import CategoryItem from './CategoryItem'
 
 const CategoryGroup = ({ currentCategory, categoryOptions }) => {
diff --git a/themes/medium/components/Footer.js b/themes/medium/components/Footer.js
index b9d4f49c..0c5a9211 100644
--- a/themes/medium/components/Footer.js
+++ b/themes/medium/components/Footer.js
@@ -1,25 +1,20 @@
-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()
   const currentYear = d.getFullYear()
-  const copyrightDate = (function() {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
     <footer
       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={siteConfig('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/></>}
+      {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt'/> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br/></>}
 
       <span className='hidden busuanzi_container_site_pv'>
             <i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
@@ -27,7 +22,7 @@ const Footer = ({ title }) => {
         <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
         <br/>
         <h1>{title}</h1>
-        <span className='text-xs font-serif'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span>
+        <span className='text-xs font-serif'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a>.</span></span>
     </footer>
   )
 }
diff --git a/themes/medium/components/InfoCard.js b/themes/medium/components/InfoCard.js
index 13fe31c8..4b6e5cfe 100644
--- a/themes/medium/components/InfoCard.js
+++ b/themes/medium/components/InfoCard.js
@@ -1,18 +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='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</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'>{siteConfig('BIO')}</div>
         <SocialButton/>
     </div>
   </div>
diff --git a/themes/medium/components/JumpToTopButton.js b/themes/medium/components/JumpToTopButton.js
index 8b2e1314..6342bf78 100644
--- a/themes/medium/components/JumpToTopButton.js
+++ b/themes/medium/components/JumpToTopButton.js
@@ -1,4 +1,5 @@
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到网页顶部
@@ -9,7 +10,7 @@ import CONFIG from '../config'
  * @constructor
  */
 const JumpToTopButton = ({ showPercent = false, percent, className }) => {
-  if (!CONFIG.WIDGET_TO_TOP) {
+  if (!siteConfig('MEDIUM_WIDGET_TO_TOP', null, CONFIG)) {
     return <></>
   }
   return (
diff --git a/themes/medium/components/LeftMenuBar.js b/themes/medium/components/LeftMenuBar.js
index e6636e19..6bde6c51 100644
--- a/themes/medium/components/LeftMenuBar.js
+++ b/themes/medium/components/LeftMenuBar.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 
 export default function LeftMenuBar () {
   return (
diff --git a/themes/medium/components/LogoBar.js b/themes/medium/components/LogoBar.js
index cbe59474..ff1d533d 100644
--- 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>
   );
diff --git a/themes/medium/components/MenuBarMobile.js b/themes/medium/components/MenuBarMobile.js
index d21fbfe5..b5736e28 100644
--- a/themes/medium/components/MenuBarMobile.js
+++ b/themes/medium/components/MenuBarMobile.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
 export const MenuBarMobile = (props) => {
@@ -10,10 +9,10 @@ export const MenuBarMobile = (props) => {
 
   let links = [
     // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
-    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
+    { name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MEDIUM_MENU_CATEGORY', null, CONFIG) },
+    { name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MEDIUM_MENU_TAG', null, CONFIG) },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MEDIUM_MENU_ARCHIVE', null, CONFIG) }
+    // { name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MENU_SEARCH', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -21,7 +20,7 @@ export const MenuBarMobile = (props) => {
   }
 
   // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -31,8 +30,7 @@ export const MenuBarMobile = (props) => {
 
   return (
     <nav id='nav' className=' text-md'>
-        {/* {links.map(link => <NormalMenu key={link?.id} link={link}/>)} */}
-        {links?.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.id} link={link}/>)}
+        {links?.map((link, index) => <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link}/>)}
 
     </nav>
   )
diff --git a/themes/medium/components/Progress.js b/themes/medium/components/Progress.js
index 62e1cc87..f6fa94a6 100644
--- a/themes/medium/components/Progress.js
+++ b/themes/medium/components/Progress.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
 
 /**
diff --git a/themes/medium/components/SocialButton.js b/themes/medium/components/SocialButton.js
index 3a31552e..e522f114 100644
--- a/themes/medium/components/SocialButton.js
+++ b/themes/medium/components/SocialButton.js
@@ -1,5 +1,4 @@
-import BLOG from '@/blog.config'
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 社交联系方式按钮组
@@ -8,34 +7,34 @@ import React from 'react'
  */
 const SocialButton = () => {
   return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
-      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
         <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
         <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
         <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
+      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
         <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
         <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
         <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
         <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
         <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
+      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
         <i className='fab fa-bilibili transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_YOUTUBE && <a target='_blank' rel='noreferrer' title={'youtube'} href={BLOG.CONTACT_YOUTUBE} >
+      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
         <i className='fab fa-youtube transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
     </div>
diff --git a/themes/medium/components/TopNavBar.js b/themes/medium/components/TopNavBar.js
index 67c8a975..d22ab395 100644
--- a/themes/medium/components/TopNavBar.js
+++ b/themes/medium/components/TopNavBar.js
@@ -4,7 +4,7 @@ import Collapse from '@/components/Collapse'
 import { MenuBarMobile } from './MenuBarMobile'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 
 /**
@@ -20,10 +20,10 @@ export default function TopNavBar(props) {
   const { locale } = useGlobal()
 
   const defaultLinks = [
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MEDIUM_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MEDIUM_MENU_TAG', null, CONFIG) },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MEDIUM_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MEDIUM_MENU_SEARCH', null, CONFIG) }
   ]
 
   let links = defaultLinks.concat(customNav)
@@ -33,7 +33,7 @@ export default function TopNavBar(props) {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -66,7 +66,7 @@ export default function TopNavBar(props) {
 
                 {/* 桌面端顶部菜单 */}
                 <div className='hidden md:flex'>
-                    {links && links?.map(link => <MenuItemDrop key={link?.id} link={link}/>)}
+                    {links && links?.map((link, index) => <MenuItemDrop key={index} link={link}/>)}
                 </div>
             </div>
         </div>
diff --git a/themes/medium/config.js b/themes/medium/config.js
index 923863a2..c29a2ef2 100644
--- a/themes/medium/config.js
+++ b/themes/medium/config.js
@@ -1,24 +1,24 @@
 const CONFIG = {
 
   // Style
-  RIGHT_PANEL_DARK: process.env.NEXT_PUBLIC_MEDIUM_RIGHT_DARK || false, // 右侧面板深色模式
+  MEDIUM_RIGHT_PANEL_DARK: process.env.NEXT_PUBLIC_MEDIUM_RIGHT_DARK || false, // 右侧面板深色模式
 
-  POST_LIST_COVER: true, // 文章列表显示图片封面
-  POST_LIST_PREVIEW: true, // 列表显示文章预览
-  POST_LIST_CATEGORY: true, // 列表显示文章分类
-  POST_LIST_TAG: true, // 列表显示文章标签
+  MEDIUM_POST_LIST_COVER: true, // 文章列表显示图片封面
+  MEDIUM_POST_LIST_PREVIEW: true, // 列表显示文章预览
+  MEDIUM_POST_LIST_CATEGORY: true, // 列表显示文章分类
+  MEDIUM_POST_LIST_TAG: true, // 列表显示文章标签
 
-  POST_DETAIL_CATEGORY: true, // 文章显示分类
-  POST_DETAIL_TAG: true, // 文章显示标签
+  MEDIUM_POST_DETAIL_CATEGORY: true, // 文章显示分类
+  MEDIUM_POST_DETAIL_TAG: true, // 文章显示标签
 
   // 菜单
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
+  MEDIUM_MENU_CATEGORY: true, // 显示分类
+  MEDIUM_MENU_TAG: true, // 显示标签
+  MEDIUM_MENU_ARCHIVE: true, // 显示归档
+  MEDIUM_MENU_SEARCH: true, // 显示搜索
 
   // Widget
-  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
-  WIDGET_TO_TOP: true // 跳回顶部
+  MEDIUM_WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
+  MEDIUM_WIDGET_TO_TOP: true // 跳回顶部
 }
 export default CONFIG
diff --git a/themes/medium/index.js b/themes/medium/index.js
index 82811e46..8087057c 100644
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -1,5 +1,4 @@
 import CONFIG from './config'
-
 import { useState, createContext, useContext, useEffect } from 'react'
 import Footer from './components/Footer'
 import InfoCard from './components/InfoCard'
@@ -11,7 +10,6 @@ import BottomMenuBar from './components/BottomMenuBar'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Live2D from '@/components/Live2D'
-import BLOG from '@/blog.config'
 import Announcement from './components/Announcement'
 import JumpToTopButton from './components/JumpToTopButton'
 import BlogPostListPage from './components/BlogPostListPage'
@@ -36,6 +34,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,22 +47,24 @@ export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, showInfoCard = true, slotRight, slotTop, siteInfo, notice, meta } = props
+  const { children, showInfoCard = true, slotRight, notice, meta } = props
   const { locale } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
-  const { onLoading } = useGlobal()
+  const { onLoading, fullWidth } = useGlobal()
+
+  const slotTop = <BlogPostBar {...props} />
 
   return (
         <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
             {/* SEO相关 */}
-            <CommonHead meta={meta}/>
+            <CommonHead meta={meta} />
             {/* CSS样式 */}
-            <Style/>
+            <Style />
 
             <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
 
-                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
+                <main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
                     {/* 桌面端左侧菜单 */}
                     {/* <LeftMenuBar/> */}
 
@@ -73,7 +74,7 @@ const LayoutBase = props => {
                         {/* 顶部导航栏 */}
                         <TopNavBar {...props} />
 
-                        <div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
+                        <div id='container-inner' className={`px-7 ${fullWidth ? '' : 'max-w-5xl'} justify-center mx-auto min-h-screen`}>
                             <Transition
                                 show={!onLoading}
                                 appear={true}
@@ -93,24 +94,27 @@ const LayoutBase = props => {
                         </div>
 
                         {/* 底部 */}
-                        <Footer title={siteInfo?.title} />
+                        <Footer title={siteConfig('TITLE')} />
                     </div>
 
                     {/* 桌面端右侧 */}
-                    <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
-                        <div className='py-14 px-6 sticky top-0'>
-                            <Tabs>
-                                {slotRight}
-                                <div key={locale.NAV.ABOUT}>
-                                    {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
-                                    {showInfoCard && <InfoCard {...props} />}
-                                    {CONFIG.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
-                                </div>
-                            </Tabs>
-                            <Announcement post={notice} />
-                            <Live2D />
-                        </div>
-                    </div>
+                    {fullWidth
+                      ? null
+                      : <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${siteConfig('MEDIUM_RIGHT_PANEL_DARK', null, CONFIG) ? 'bg-hexo-black-gray dark' : ''}`}>
+                            <div className='py-14 px-6 sticky top-0'>
+                                <Tabs>
+                                    {slotRight}
+                                    <div key={locale.NAV.ABOUT}>
+                                        {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
+                                        {showInfoCard && <InfoCard {...props} />}
+                                        {siteConfig('MEDIUM_WIDGET_REVOLVER_MAPS', null, CONFIG) === 'true' && <RevolverMaps />}
+                                    </div>
+                                </Tabs>
+                                <Announcement post={notice} />
+                                <Live2D />
+                            </div>
+                        </div>}
+
                 </main>
 
                 {/* 移动端底部导航栏 */}
@@ -135,10 +139,9 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutPostList = (props) => {
-  const slotTop = <BlogPostBar {...props} />
-  return <LayoutBase {...props} slotTop={slotTop}>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-    </LayoutBase>
+  return <>
+        {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+    </>
 }
 
 /**
@@ -156,14 +159,14 @@ const LayoutSlug = props => {
   )
 
   return (
-        <LayoutBase showInfoCard={true} slotRight={slotRight} {...props} >
+        <div showInfoCard={true} slotRight={slotRight} {...props} >
             {/* 文章锁 */}
             {lock && <ArticleLock validPassword={validPassword} />}
 
             {!lock && <div id='article-wrapper'>
 
                 {/* 文章信息 */}
-                <ArticleInfo {...props}/>
+                <ArticleInfo {...props} />
 
                 {/* Notion文章主体 */}
                 <section className="px-1 max-w-4xl">
@@ -176,9 +179,9 @@ const LayoutSlug = props => {
                     <ShareBar post={post} />
                     {/* 文章分类和标签信息 */}
                     <div className='flex justify-between'>
-                        {CONFIG.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post?.category} />}
+                        {siteConfig('MEDIUM_POST_DETAIL_CATEGORY', null, CONFIG) && post?.category && <CategoryItem category={post?.category} />}
                         <div>
-                            {CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                            {siteConfig('MEDIUM_POST_DETAIL_TAG', null, CONFIG) && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
                         </div>
                     </div>
                     {/* 上一篇下一篇文章 */}
@@ -190,7 +193,7 @@ const LayoutSlug = props => {
                 {/* 移动端目录 */}
                 <TocDrawer {...props} />
             </div>}
-        </LayoutBase>
+        </div>
   )
 }
 
@@ -218,7 +221,7 @@ const LayoutSearch = (props) => {
     }
   }, [])
 
-  return <LayoutBase {...props}>
+  return <>
 
         {/* 搜索导航栏 */}
         <div className='py-12'>
@@ -232,9 +235,9 @@ const LayoutSearch = (props) => {
 
         {/* 文章列表 */}
         {currentSearch && <div>
-            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+            {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
         </div>}
-    </LayoutBase>
+    </>
 }
 
 /**
@@ -245,12 +248,12 @@ const LayoutSearch = (props) => {
 const LayoutArchive = props => {
   const { archivePosts } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
                 {Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
                 )}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -260,9 +263,9 @@ const LayoutArchive = props => {
  * @returns
  */
 const Layout404 = props => {
-  return <LayoutBase {...props}>
+  return <>
         <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
-    </LayoutBase>
+    </>
 }
 
 /**
@@ -274,7 +277,7 @@ const LayoutCategoryIndex = (props) => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
   return (
-        <LayoutBase {...props}>
+        <>
             <div className='bg-white dark:bg-gray-700 py-10'>
                 <div className='dark:text-gray-200 mb-5'>
                     <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
@@ -296,7 +299,7 @@ const LayoutCategoryIndex = (props) => {
                     })}
                 </div>
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -309,7 +312,7 @@ const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
   return (
-        <LayoutBase {...props}>
+        <>
             <div className="bg-white dark:bg-gray-700 py-10">
                 <div className="dark:text-gray-200 mb-5">
                     <i className="mr-4 fas fa-tag" />
@@ -325,12 +328,13 @@ const LayoutTagIndex = props => {
                     })}
                 </div>
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutPostList,
   LayoutSearch,
diff --git a/themes/nav/components/BlogArchiveItem.js b/themes/nav/components/BlogArchiveItem.js
index 8e9693dc..efd67565 100755
--- a/themes/nav/components/BlogArchiveItem.js
+++ b/themes/nav/components/BlogArchiveItem.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 
 /**
@@ -23,7 +23,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
                             </span>{' '}
                             &nbsp;
 
-                            <Link passHref href={`${BLOG.SUB_PATH}/${post.slug}`}
+                            <Link passHref href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                                 className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
                                 {post.title}
                             </Link>
diff --git a/themes/nav/components/BlogPostCard.js b/themes/nav/components/BlogPostCard.js
index 2d48f967..e611978a 100755
--- a/themes/nav/components/BlogPostCard.js
+++ b/themes/nav/components/BlogPostCard.js
@@ -1,17 +1,15 @@
-import BLOG from '@/blog.config'
 import Link from 'next/link'
 import NotionIcon from './NotionIcon'
 import { useRouter } from 'next/router'
-import React from 'react'
 
 const BlogPostCard = ({ post, className }) => {
   const router = useRouter()
   const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
   let pageIcon = post.pageIcon !== '' ? post.pageIcon : BLOG.IMG_LAZY_LOAD_PLACEHOLDER
-  pageIcon = post.pageIcon.indexOf("amazonaws.com")!=-1 ? post.pageIcon+"&width=88" : post.pageIcon
+  pageIcon = post.pageIcon.indexOf('amazonaws.com') !== -1 ? post.pageIcon + '&width=88' : post.pageIcon
   return (
     <Link href={`${removeHttp(post.slug)}`} target={(checkRemoveHttp(post.slug) ? '_blank' : '_self')} passHref>
-        <div key={post.id} className={`${className} h-full rounded-lg p-4 dark:bg-neutral-800 cursor-pointer bg-white hover:bg-white rounded-2xl dark:hover:bg-gray-800 ${currentSelected ? 'bg-green-50 text-green-500' : ''}`}>
+        <div key={post.id} className={`${className} h-full rounded-2xl p-4 dark:bg-neutral-800 cursor-pointer bg-white hover:bg-white dark:hover:bg-gray-800 ${currentSelected ? 'bg-green-50 text-green-500' : ''}`}>
                 <div className="stack-entry w-full flex space-x-3 select-none dark:text-neutral-200">
                     <NotionIcon icon={pageIcon} size='10' className='text-6xl w-11 h-11 mx-1 my-0 flex-none' />
                     <div className="stack-comment flex-auto">
@@ -24,9 +22,9 @@ const BlogPostCard = ({ post, className }) => {
   )
   function removeHttp(str) {
     // 检查字符串是否包含http
-    if (str.includes("http")) {
+    if (str.includes('http')) {
       // 如果包含，找到http的位置
-      let index = str.indexOf("http");
+      const index = str.indexOf('http');
       // 返回http之后的部分
       return str.slice(index, str.length);
     } else {
@@ -36,11 +34,9 @@ const BlogPostCard = ({ post, className }) => {
   }
   function checkRemoveHttp(str) {
     // 检查字符串是否包含http
-    if (str.includes("http")) {
+    if (str.includes('http')) {
       // 如果包含，找到http的位置
-      let index = str.indexOf("http");
-      // 包含
-      return true;
+      return str.indexOf('http') > -1
     } else {
       // 不包含
       return false;
diff --git a/themes/nav/components/BlogPostItem.js b/themes/nav/components/BlogPostItem.js
index 7500e8ff..5d8c6406 100755
--- a/themes/nav/components/BlogPostItem.js
+++ b/themes/nav/components/BlogPostItem.js
@@ -1,6 +1,4 @@
 import BlogPostCard from './BlogPostCard'
-import React, { useState } from 'react'
-import NotionIcon from './NotionIcon'
 // import Collapse from '@/components/Collapse'
 
 /**
@@ -11,16 +9,11 @@ import NotionIcon from './NotionIcon'
  * @constructor
  */
 const BlogPostItem = (props) => {
-  const { group, filterLinks } = props
-//   const [isOpen, changeIsOpen] = useState(group?.selected)
-
-//   const toggleOpenSubMenu = () => {
-//     changeIsOpen(!isOpen)
-//   }
+  const { group } = props
 
   console.log('####### group')
   console.log(group)
-  
+
   if (group?.category) {
     return <>
             <div id={group?.category} className='category  text-lg font-normal pt-9 pb-4 first:pt-4 select-none flex justify-between font-sans text-neutral-800 dark:text-neutral-400 p-2' key={group?.category}>
@@ -34,7 +27,7 @@ const BlogPostItem = (props) => {
         </>
   } else {
     return <>
-            <div id='uncategory' className='category text-lg font-normal pt-9 pb-4 first:pt-4 font-bold select-none flex justify-between font-sans text-neutral-800 dark:text-neutral-400 p-2' key='uncategory'>
+            <div id='uncategory' className='category text-lg pt-9 pb-4 first:pt-4 font-bold select-none flex justify-between font-sans text-neutral-800 dark:text-neutral-400 p-2' key='uncategory'>
                 <span><i className={`text-base mr-2 ${group?.icon ? group?.icon : 'fas fa-hashtag'}`} />未分类</span>
             </div>
             <div class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
diff --git a/themes/nav/components/BlogPostListAll.js b/themes/nav/components/BlogPostListAll.js
index 458c790b..d1249c56 100755
--- a/themes/nav/components/BlogPostListAll.js
+++ b/themes/nav/components/BlogPostListAll.js
@@ -1,10 +1,9 @@
+/* eslint-disable */
 import BlogPostListEmpty from './BlogPostListEmpty'
-import { useRouter } from 'next/router'
 import BlogPostItem from './BlogPostItem'
 import { useNavGlobal } from '@/themes/nav'
 import CONFIG from '../config'
-import { deepClone } from '@/lib/utils'
-import { useEffect, useState, createContext, useContext } from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 博客列表滚动分页
@@ -21,22 +20,22 @@ const BlogPostListAll = (props) => {
   // const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
   const { filteredNavPages, setFilteredNavPages, allNavPages } = useNavGlobal()
   // const [filteredNavPages] = useState(allNavPages)
-  
+
   // const router = useRouter()
   // 对自定义分类格式化，方便后续使用分类名称做索引，检索同步图标信息
   // 目前只支持二级分类
-  let links = customMenu
-  let filterLinks = {}
+  const links = customMenu
+  const filterLinks = {}
   // for循环遍历数组
   links?.map((link, i) => {
-    let linkTitle = link.title + ''
+    const linkTitle = link.title + ''
     // console.log('####### link')
     // console.log(link)
     // filterLinks[linkTitle] = link
-    filterLinks[linkTitle] = { title: link.title, icon: link.icon, pageIcon: link.pageIcon  }
-    if(link?.subMenus){
+    filterLinks[linkTitle] = { title: link.title, icon: link.icon, pageIcon: link.pageIcon }
+    if (link?.subMenus) {
       link.subMenus?.map((group, index) => {
-        let subMenuTitle = group?.title + ''
+        const subMenuTitle = group?.title + ''
         // 自定义分类图标与post的category共用
         // 判断自定义分类与Post中category同名的项，将icon的值传递给post
         // filterLinks[subMenuTitle] = group
@@ -44,18 +43,17 @@ const BlogPostListAll = (props) => {
       })
     }
   })
-  
+
   console.log('####### filterLinks')
   console.log(filterLinks)
 
-
   // console.log('####### filterLinks')
   // console.log(filterLinks)
 
-  let selectedSth = false
+  const selectedSth = false
   const groupedArray = filteredNavPages?.reduce((groups, item) => {
-    let categoryName = item?.category ? item?.category : '' // 将category转换为字符串
-    let categoryIcon = filterLinks[categoryName]?.icon ? filterLinks[categoryName]?.icon : '' // 将pageIcon转换为字符串
+    const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
+    const categoryIcon = filterLinks[categoryName]?.icon ? filterLinks[categoryName]?.icon : '' // 将pageIcon转换为字符串
 
     // console.log('####### categoryName')
     // console.log(categoryName)
@@ -64,7 +62,7 @@ const BlogPostListAll = (props) => {
 
     let existingGroup = null
     // 开启自动分组排序
-    if (JSON.parse(CONFIG.AUTO_SORT)) {
+    if (JSON.parse(siteConfig('NAV_AUTO_SORT', null, CONFIG))) {
       existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
     } else {
       existingGroup = groups[groups.length - 1] // 获取最后一个分组
@@ -87,7 +85,7 @@ const BlogPostListAll = (props) => {
     // item.icon = filterLinks[categoryName]?.icon ? filterLinks[categoryName]?.icon : ''
     // console.log('####### item')
     // console.log(item)
-    let groupSelected = false
+    const groupSelected = false
     // for (const post of group?.items) {
     //   if (router.asPath.split('?')[0] === '/' + post.slug) {
     //     groupSelected = true
@@ -133,7 +131,6 @@ const BlogPostListAll = (props) => {
   //     filterPosts.push(filterGroup)
   //   }
   // }
-  
 }
 
 export default BlogPostListAll
diff --git a/themes/nav/components/BlogPostListEmpty.js b/themes/nav/components/BlogPostListEmpty.js
index 86977fd0..a26cf292 100755
--- a/themes/nav/components/BlogPostListEmpty.js
+++ b/themes/nav/components/BlogPostListEmpty.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 
 /**
  * 空白博客 列表
@@ -5,8 +6,9 @@
  * @constructor
  */
 const BlogPostListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
   return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
-        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+        <p className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_RESULTS_FOUND}  {(currentSearch && <div>{currentSearch}</div>)}</p>
   </div>
 }
 export default BlogPostListEmpty
diff --git a/themes/nav/components/BlogPostListPage.js b/themes/nav/components/BlogPostListPage.js
index d9228b51..50936015 100755
--- a/themes/nav/components/BlogPostListPage.js
+++ b/themes/nav/components/BlogPostListPage.js
@@ -1,5 +1,4 @@
 import BlogPostCard from './BlogPostCard'
-import BLOG from '@/blog.config'
 import NavPostListEmpty from './NavPostListEmpty'
 import PaginationSimple from './PaginationSimple'
 
@@ -12,7 +11,7 @@ import PaginationSimple from './PaginationSimple'
  * @constructor
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
 
   if (!posts || posts.length === 0) {
     return <NavPostListEmpty />
diff --git a/themes/nav/components/BottomMenuBar.js b/themes/nav/components/BottomMenuBar.js
index 84a13f04..b91c9bc7 100755
--- a/themes/nav/components/BottomMenuBar.js
+++ b/themes/nav/components/BottomMenuBar.js
@@ -1,5 +1,4 @@
 import { useNavGlobal } from '@/themes/nav'
-import React from 'react'
 import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar({ post, className }) {
diff --git a/themes/nav/components/CategoryGroup.js b/themes/nav/components/CategoryGroup.js
index 1516c038..d562cd1f 100755
--- a/themes/nav/components/CategoryGroup.js
+++ b/themes/nav/components/CategoryGroup.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import CategoryItem from './CategoryItem'
 
 const CategoryGroup = ({ currentCategory, categoryOptions }) => {
diff --git a/themes/nav/components/Collapse.js b/themes/nav/components/Collapse.js
index caf86152..6a169aa2 100755
--- a/themes/nav/components/Collapse.js
+++ b/themes/nav/components/Collapse.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useImperativeHandle } from 'react'
+import { useEffect, useImperativeHandle, useRef } from 'react'
 
 /**
  * 折叠面板组件，支持水平折叠、垂直折叠
@@ -7,7 +7,7 @@ import React, { useEffect, useImperativeHandle } from 'react'
  */
 const Collapse = props => {
   const { collapseRef } = props
-  const ref = React.useRef(null)
+  const ref = useRef(null)
   const type = props.type || 'vertical'
 
   useImperativeHandle(collapseRef, () => {
diff --git a/themes/nav/components/Footer.js b/themes/nav/components/Footer.js
index 4df06b6d..68750316 100755
--- a/themes/nav/components/Footer.js
+++ b/themes/nav/components/Footer.js
@@ -1,15 +1,10 @@
-import React from 'react'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 
 const Footer = ({ siteInfo }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
-  const copyrightDate = (function () {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
         <footer
@@ -18,19 +13,19 @@ 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={siteConfig('LINK')} className='underline font-bold text-gray-500 dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br /></div>
                 © {`${copyrightDate}`}
             </div>
 
             <div className='text-xs font-serif py-1'>Powered By <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext</a></div>
 
-            {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br /></>}
+            {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br /></>}
 
             <span className='hidden busuanzi_container_site_pv'>
                 <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>
   )
diff --git a/themes/nav/components/InfoCard.js b/themes/nav/components/InfoCard.js
index 13fe31c8..4b6e5cfe 100755
--- a/themes/nav/components/InfoCard.js
+++ b/themes/nav/components/InfoCard.js
@@ -1,18 +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='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</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'>{siteConfig('BIO')}</div>
         <SocialButton/>
     </div>
   </div>
diff --git a/themes/nav/components/LeftMenuBar.js b/themes/nav/components/LeftMenuBar.js
index e6636e19..6bde6c51 100755
--- a/themes/nav/components/LeftMenuBar.js
+++ b/themes/nav/components/LeftMenuBar.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 
 export default function LeftMenuBar () {
   return (
diff --git a/themes/nav/components/LogoBar.js b/themes/nav/components/LogoBar.js
index b1774dfc..c590a8a2 100755
--- a/themes/nav/components/LogoBar.js
+++ b/themes/nav/components/LogoBar.js
@@ -1,6 +1,6 @@
-import BLOG from '@/blog.config'
 import Link from 'next/link'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * Logo区域
@@ -15,8 +15,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.BIO} className='md:block' />
-                    {CONFIG.SHOW_TITLE_TEXT && siteInfo?.title}
+                        height='44px' alt={siteConfig('AUTHOR') + ' - ' + siteConfig('NEXT_PUBLIC_BIO')} className='md:block transition-all hover:scale-110 duration-150' placeholderSrc='' />
+                    {siteConfig('NAV_SHOW_TITLE_TEXT', null, CONFIG) && siteConfig('TITLE')}
                 </Link>
         </div>
   )
diff --git a/themes/nav/components/MenuBarMobile.js b/themes/nav/components/MenuBarMobile.js
index bfe3fe25..754d2a36 100755
--- a/themes/nav/components/MenuBarMobile.js
+++ b/themes/nav/components/MenuBarMobile.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
 /**
@@ -15,10 +14,10 @@ export const MenuBarMobile = (props) => {
 
   let links = [
     // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
-    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
+    { name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NAV_MENU_CATEGORY', null, CONFIG) },
+    { name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NAV_MENU_TAG', null, CONFIG) },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NAV_MENU_ARCHIVE', null, CONFIG) }
+    // { name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MENU_SEARCH', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -26,7 +25,7 @@ export const MenuBarMobile = (props) => {
   }
 
   // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -36,9 +35,7 @@ export const MenuBarMobile = (props) => {
 
   return (
     <nav id='nav' className=' text-md'>
-        {/* {links.map(link => <NormalMenu key={link?.id} link={link}/>)} */}
         {links?.map((link, index) => <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link}/>)}
-
     </nav>
   )
 }
diff --git a/themes/nav/components/MenuItem.js b/themes/nav/components/MenuItem.js
index 7470520e..ee8de76b 100644
--- a/themes/nav/components/MenuItem.js
+++ b/themes/nav/components/MenuItem.js
@@ -27,7 +27,7 @@ export const MenuItem = ({ link }) => {
         {/* 菜单 */}
         <div
             onClick={toggleOpenSubMenu}
-            className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 pt-2 font-light select-none flex justify-between cursor-pointer' key={link?.name}>
+            className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 pt-2 font-light select-none flex justify-between cursor-pointer' key={link?.to}>
 
             {link?.subMenus
               ? (<>
@@ -51,13 +51,14 @@ export const MenuItem = ({ link }) => {
         {link?.subMenus && (
             <Collapse isOpen={isOpen} key='collapse'>
                 {
-                    link?.subMenus?.map((sLink, index) => (
-                        <div key={index} className='nav-submenu'>
-                            <a href={'#' + sLink?.title}>
-                                <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
-                            </a>
-                        </div>
-                    ))
+                    link?.subMenus?.map((sLink, index) => {
+                        const sUrl =  sLink?.to && sLink?.to.length > 0 ?  sLink.to : '#' + sLink?.title
+                        return <div key={index} className='nav-submenu'>
+                        <Link href={sUrl}>
+                            <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
+                        </Link>
+                    </div>
+                    })
                 }
 
             </Collapse>
diff --git a/themes/nav/components/NavPostItem.js b/themes/nav/components/NavPostItem.js
index ed869d69..32b22694 100755
--- a/themes/nav/components/NavPostItem.js
+++ b/themes/nav/components/NavPostItem.js
@@ -1,5 +1,5 @@
 import BlogPostCard from './BlogPostCard'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import Collapse from '@/components/Collapse'
 
 /**
diff --git a/themes/nav/components/NavPostList.js b/themes/nav/components/NavPostList.js
index 0f06a008..7c382335 100755
--- a/themes/nav/components/NavPostList.js
+++ b/themes/nav/components/NavPostList.js
@@ -1,7 +1,4 @@
 import NavPostListEmpty from './NavPostListEmpty'
-import { useRouter } from 'next/router'
-import NavPostItem from './NavPostItem'
-import CONFIG from '../config'
 import Link from 'next/link'
 
 /**
@@ -12,91 +9,31 @@ import Link from 'next/link'
  * @constructor
  */
 const NavPostList = (props) => {
-  const { customMenu, categoryOptions } = props
-  // let groupedArray = categoryOptions
-  // const { filteredNavPages, categoryOptions, categories } = props
-  // const router = useRouter()
-  // let selectedSth = false
-
-  // let groupedArray = categoryOptions?.map(item) => {
-  //   // let groups = [];
-  //   groupedArray.push({ category: item.name, id: item.id, count: item.count, selected: false,items: [] })
-  //   return groups
-  // })
-
-  // const groupedArray = categoryOptions?.reduce((groups, item) => {
-  //   const categoryName = item?.name ? item?.name : '' // 将category转换为字符串
-  //   // let existingGroup = null
-  //   console.log('categoryOptions => item::')
-  //   console.log(item)
-  //   // 添加数据
-  //   groups.push({ category: item.name, id: item.id, count: item.count, selected: false, items: [] })
-  //   return groups
-  // }, [])
-
-  // 处理是否选中
-  // groupedArray?.map((group) => {
-  //   let groupSelected = false
-  //   for (const post of group?.items) {
-  //     if (router.asPath.split('?')[0] === '/' + post.slug) {
-  //       groupSelected = true
-  //       selectedSth = true
-  //     }
-  //   }
-  //   group.selected = groupSelected
-  //   return null
-  // })
-
-  // 如果都没有选中默认打开第一个
-  // if (!selectedSth && groupedArray && groupedArray?.length > 0) {
-  //   groupedArray[0].selected = true
-  // }
-
-  
-  
-  // console.log('groupedArray::')
-  // console.log(groupedArray)
-
-  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  // if (BLOG.CUSTOM_MENU) {
-  //   links = customMenu
-  // }
-  let links = customMenu
-  return 
-    {links && links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
-  
-
-  console.log('categoryOptions::')
-  console.log(categoryOptions)
+  const { categoryOptions } = props
   if (!categoryOptions) {
     return <NavPostListEmpty />
   } else {
-    return 
-    
-    <div id='category-list' className='dark:border-gray-700 flex flex-wrap  mx-4'>
-    {categoryOptions.map(category => {
-      // const selected = currentCategory === category.name
-      let selected = false
-      return (
-        <Link
-          key={category.name}
-          href={`/category/${category.name}`}
-          passHref
-          className={(selected
-            ? 'hover:text-black dark:hover:text-gray bg-indigo-600 text-black '
-            : 'dark:text-gray-400 text-gray-500 hover:text-black dark:hover:text-white hover:bg-indigo-600') +
-            '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
+    return <div id='category-list' className='dark:border-gray-700 flex flex-wrap  mx-4'>
+            {categoryOptions?.map(category => {
+              // const selected = currentCategory === category.name
+              const selected = false
+              return (
+                    <Link
+                        key={category.name}
+                        href={`/category/${category.name}`}
+                        passHref
+                        className={(selected
+                          ? 'hover:text-black dark:hover:text-gray bg-indigo-600 text-black '
+                          : 'dark:text-gray-400 text-gray-500 hover:text-black dark:hover:text-white hover:bg-indigo-600') +
+                            '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
 
-          <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
+                        <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
 
-        </Link>
-        )
-      })}
-    </div>
+                    </Link>
+              )
+            })}
+        </div>
   }
-
-
-
 }
 
 export default NavPostList
diff --git a/themes/nav/components/NavPostListEmpty.js b/themes/nav/components/NavPostListEmpty.js
index 207599db..54f2f179 100755
--- a/themes/nav/components/NavPostListEmpty.js
+++ b/themes/nav/components/NavPostListEmpty.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 
 /**
  * 空白博客 列表
@@ -5,8 +6,9 @@
  * @constructor
  */
 const NavPostListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
   return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
-        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+        <p className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_RESULTS_FOUND}  {(currentSearch && <div>{currentSearch}</div>)}</p>
   </div>
 }
 export default NavPostListEmpty
diff --git a/themes/nav/components/Progress.js b/themes/nav/components/Progress.js
index 669d09a8..29feef49 100755
--- a/themes/nav/components/Progress.js
+++ b/themes/nav/components/Progress.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
 
 /**
diff --git a/themes/nav/components/SocialButton.js b/themes/nav/components/SocialButton.js
index 164a71fc..b1bd85f9 100755
--- a/themes/nav/components/SocialButton.js
+++ b/themes/nav/components/SocialButton.js
@@ -1,5 +1,4 @@
-import BLOG from '@/blog.config'
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 社交联系方式按钮组
@@ -8,28 +7,28 @@ import React from 'react'
  */
 const SocialButton = () => {
   return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
-      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
         <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
         <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
         <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
+      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
         <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
         <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
         <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
         <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
-      {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
         <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
     </div>
diff --git a/themes/nav/config.js b/themes/nav/config.js
index 48ca7d31..910a59ac 100755
--- a/themes/nav/config.js
+++ b/themes/nav/config.js
@@ -1,20 +1,20 @@
 const CONFIG = {
 
-  INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中
+  NAV_INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中
 
-  AUTO_SORT: process.env.NEXT_PUBLIC_GITBOOK_AUTO_SORT || true, // 是否自动按分类名 归组排序文章；自动归组可能会打乱您Notion中的文章顺序
+  NAV_AUTO_SORT: process.env.NEXT_PUBLIC_GITBOOK_AUTO_SORT || true, // 是否自动按分类名 归组排序文章；自动归组可能会打乱您Notion中的文章顺序
 
-  SHOW_TITLE_TEXT: false, // 标题栏显示文本
-  USE_CUSTOM_MENU: true, // 使用自定义菜单（可支持子菜单，支持自定义分类图标），若为true则显示所有的category分类
+  NAV_SHOW_TITLE_TEXT: false, // 标题栏显示文本
+  NAV_USE_CUSTOM_MENU: true, // 使用自定义菜单（可支持子菜单，支持自定义分类图标），若为true则显示所有的category分类
 
   // 菜单
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
+  NAV_MENU_CATEGORY: true, // 显示分类
+  NAV_MENU_TAG: true, // 显示标签
+  NAV_MENU_ARCHIVE: true, // 显示归档
+  NAV_MENU_SEARCH: true, // 显示搜索
 
   // Widget
-  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
-  WIDGET_TO_TOP: true // 跳回顶部
+  NAV_WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
+  NAV_WIDGET_TO_TOP: true // 跳回顶部
 }
 export default CONFIG
diff --git a/themes/nav/index.js b/themes/nav/index.js
index 4b00451d..48aa977a 100755
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -11,7 +11,6 @@ import { useEffect, useState, createContext, useContext } from 'react'
 import Footer from './components/Footer'
 import TopNavBar from './components/TopNavBar'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
 import Announcement from './components/Announcement'
 import PageNavDrawer from './components/PageNavDrawer'
 import FloatTocButton from './components/FloatTocButton'
@@ -35,6 +34,7 @@ import dynamic from 'next/dynamic'
 import { MenuItem } from './components/MenuItem'
 import LogoBar from './components/LogoBar'
 
+import { siteConfig } from '@/lib/config'
 const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
 
 // 主题全局变量
@@ -63,7 +63,7 @@ const LayoutBase = (props) => {
   let links = customMenu
 
   // 默认使用自定义菜单，否则将遍历所有的category生成菜单
-  if (!CONFIG.USE_CUSTOM_MENU) {
+  if (!siteConfig('NAV_USE_CUSTOM_MENU', null, CONFIG)) {
     links = categoryOptions && categoryOptions?.map(c => {
       return { id: c.name, title: `# ${c.name}`, to: `/category/${c.name}`, show: true }
     })
@@ -83,7 +83,7 @@ const LayoutBase = (props) => {
                 <TopNavBar {...props} />
 
                 {/* 左右布局区块 */}
-                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' relative flex justify-between w-full h-screen mx-auto'}>
+                <main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' relative flex justify-between w-full h-screen mx-auto'}>
 
                     {/* 左侧推拉抽屉 */}
                     <div className={'font-sans hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'}>
@@ -179,10 +179,10 @@ const LayoutPostListIndex = props => {
   // const { customMenu, children, post, allNavPages, categoryOptions, slotLeft, slotRight, slotTop, meta } = props
   // const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
   return (
-    <LayoutBase {...props} >
+    <>
         <Announcement {...props} />
         <BlogPostListAll { ...props } />
-    </LayoutBase>
+    </>
   )
 }
 
@@ -192,21 +192,20 @@ const LayoutPostListIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
-  return <LayoutBase {...props}></LayoutBase>
-  // const { posts } = props
-  // // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
-  // // 如果是搜索，则列表顶部嵌入 搜索框
-  // return (
-  //   <LayoutBase {...props} >
-  //       <div className='w-full max-w-7xl mx-auto justify-center mt-8'>
-  //           <div id='posts-wrapper' class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
-  //               {posts?.map(post => (
-  //                   <BlogPostCard key={post.id} post = {post} className='card' />
-  //               ))}
-  //           </div>
-  //       </div>
-  //   </LayoutBase>
-  // )
+  const { posts } = props
+  // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
+  // 如果是搜索，则列表顶部嵌入 搜索框
+  return (
+    <LayoutBase {...props} >
+        <div className='w-full max-w-7xl mx-auto justify-center mt-8'>
+            <div id='posts-wrapper' class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
+                {posts?.map(post => (
+                    <BlogPostCard key={post.id} post = {post} className='card' />
+                ))}
+            </div>
+        </div>
+    </LayoutBase>
+  )
 }
 
 /**
@@ -216,12 +215,11 @@ const LayoutPostList = props => {
  */
 const LayoutSlug = (props) => {
   const { post, lock, validPassword } = props
-  if(post?.slug?.startsWith('http') || post?.slug == '' || post?.slug == null){
-    return <LayoutBase {...props}></LayoutBase>
-  }else{
-    return  <LayoutBase {...props} >
-              {/* 文章锁 */}
-              {lock && <ArticleLock validPassword={validPassword} />}
+
+  return (
+        <LayoutBase {...props} >
+            {/* 文章锁 */}
+            {lock && <ArticleLock validPassword={validPassword} />}
 
               {!lock && <div id='container'>
 
@@ -232,15 +230,15 @@ const LayoutSlug = (props) => {
                   {post && (<section id="article-wrapper" className="px-1">
                       <NotionPage post={post} />
 
-                      {/* 分享 */}
-                      {/* <ShareBar post={post} /> */}
-                      {/* 文章分类和标签信息 */}
-                      <div className='flex justify-between'>
-                          {CONFIG.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
-                          <div>
-                              {CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
-                          </div>
-                      </div>
+                    {/* 分享 */}
+                    {/* <ShareBar post={post} /> */}
+                    {/* 文章分类和标签信息 */}
+                    <div className='flex justify-between'>
+                        {CONFIG.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
+                        <div>
+                            {CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                        </div>
+                    </div>
 
                       {/* 上一篇、下一篇文章 */}
                       {/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
@@ -251,10 +249,10 @@ const LayoutSlug = (props) => {
                       <Comment frontMatter={post} />
                   </section>)}
 
-                  <TocDrawer {...props} />
-              </div>}
-          </LayoutBase>
-  }
+                <TocDrawer {...props} />
+            </div>}
+        </LayoutBase>
+  )
 }
 
 /**
@@ -264,7 +262,7 @@ const LayoutSlug = (props) => {
  * @returns
  */
 const LayoutSearch = (props) => {
-  return <LayoutBase {...props}></LayoutBase>
+  return <></>
 }
 
 /**
@@ -277,52 +275,51 @@ const LayoutArchive = (props) => {
   return <LayoutBase {...props}></LayoutBase>
   // const { archivePosts } = props
 
-  // return <LayoutBase {...props}>
-  //       <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
-  //           {Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
-  //       </div>
-  // </LayoutBase>
+  return <LayoutBase {...props}>
+        <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
+            {Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
+        </div>
+  </LayoutBase>
 }
 
 /**
  * 404
  */
 const Layout404 = props => {
-  return <LayoutBase {...props}>
+  return <>
         <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
-    </LayoutBase>
+    </>
 }
 
 /**
  * 分类列表
  */
 const LayoutCategoryIndex = (props) => {
-  return <LayoutBase {...props}></LayoutBase>
-  // const { categoryOptions } = props
-  // const { locale } = useGlobal()
-  // return <LayoutBase {...props}>
-  //    <div className='bg-white dark:bg-gray-700 py-10'>
-  //               <div className='dark:text-gray-200 mb-5'>
-  //                   <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
-  //               </div>
-  //               <div id='category-list' className='duration-200 flex flex-wrap'>
-  //                   {categoryOptions?.map(category => {
-  //                     return (
-  //                           <Link
-  //                               key={category.name}
-  //                               href={`/category/${category.name}`}
-  //                               passHref
-  //                               legacyBehavior>
-  //                               <div
-  //                                   className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-  //                                   <i className='mr-4 fas fa-folder' />{category.name}({category.count})
-  //                               </div>
-  //                           </Link>
-  //                     )
-  //                   })}
-  //               </div>
-  //           </div>
-  // </LayoutBase>
+  const { categoryOptions } = props
+  const { locale } = useGlobal()
+  return <LayoutBase {...props}>
+     <div className='bg-white dark:bg-gray-700 py-10'>
+                <div className='dark:text-gray-200 mb-5'>
+                    <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
+                </div>
+                <div id='category-list' className='duration-200 flex flex-wrap'>
+                    {categoryOptions?.map(category => {
+                      return (
+                            <Link
+                                key={category.name}
+                                href={`/category/${category.name}`}
+                                passHref
+                                legacyBehavior>
+                                <div
+                                    className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
+                                    <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+                                </div>
+                            </Link>
+                      )
+                    })}
+                </div>
+            </div>
+  </LayoutBase>
 }
 
 /**
@@ -333,27 +330,28 @@ const LayoutTagIndex = (props) => {
   // const { tagOptions } = props
   // const { locale } = useGlobal()
 
-  // return <LayoutBase {...props}>
-  //    <div className="bg-white dark:bg-gray-700 py-10">
-  //               <div className="dark:text-gray-200 mb-5">
-  //                   <i className="mr-4 fas fa-tag" />
-  //                   {locale.COMMON.TAGS}:
-  //               </div>
-  //               <div id="tags-list" className="duration-200 flex flex-wrap">
-  //                   {tagOptions?.map(tag => {
-  //                     return (
-  //                           <div key={tag.name} className="p-2">
-  //                               <TagItemMini key={tag.name} tag={tag} />
-  //                           </div>
-  //                     )
-  //                   })}
-  //               </div>
-  //           </div>
-  // </LayoutBase>
+  return <LayoutBase {...props}>
+     <div className="bg-white dark:bg-gray-700 py-10">
+                <div className="dark:text-gray-200 mb-5">
+                    <i className="mr-4 fas fa-tag" />
+                    {locale.COMMON.TAGS}:
+                </div>
+                <div id="tags-list" className="duration-200 flex flex-wrap">
+                    {tagOptions?.map(tag => {
+                      return (
+                            <div key={tag.name} className="p-2">
+                                <TagItemMini key={tag.name} tag={tag} />
+                            </div>
+                      )
+                    })}
+                </div>
+            </div>
+  </LayoutBase>
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutSearch,
   LayoutArchive,
diff --git a/themes/next/components/ArticleCopyright.js b/themes/next/components/ArticleCopyright.js
index 143ce4f1..236fb187 100644
--- a/themes/next/components/ArticleCopyright.js
+++ b/themes/next/components/ArticleCopyright.js
@@ -1,10 +1,11 @@
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 export default function ArticleCopyright ({ author, url }) {
   const { locale } = useGlobal()
-  if (!CONFIG.ARTICLE_COPYRIGHT) {
+  if (!siteConfig('NEXT_ARTICLE_COPYRIGHT', null, CONFIG)) {
     return <></>
   }
   return (
diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js
index f26b6691..efb20983 100644
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import BlogAround from './BlogAround'
 import Comment from '@/components/Comment'
 import RecommendPosts from './RecommendPosts'
@@ -14,6 +13,8 @@ import CONFIG from '../config'
 import NotionIcon from '@/components/NotionIcon'
 import LazyImage from '@/components/LazyImage'
 import { formatDateFmt } from '@/lib/formatDate'
+import { siteConfig } from '@/lib/config'
+import WWAds from '@/components/WWAds'
 
 /**
  *
@@ -22,9 +23,9 @@ import { formatDateFmt } from '@/lib/formatDate'
  */
 export default function ArticleDetail(props) {
   const { post, recommendPosts, prev, next } = props
-  const url = BLOG.LINK + useRouter().asPath
+  const url = siteConfig('LINK') + useRouter().asPath
   const { locale } = useGlobal()
-  const showArticleInfo = CONFIG.ARTICLE_INFO
+  const showArticleInfo = siteConfig('NEXT_ARTICLE_INFO', null, CONFIG)
 
   return (
         <div id="article-wrapper"
@@ -39,7 +40,7 @@ export default function ArticleDetail(props) {
 
                 {showArticleInfo && <header>
                     {/* 头图 */}
-                    {CONFIG.POST_HEADER_IMAGE_VISIBLE && post?.type && !post?.type !== 'Page' && post?.pageCover && (
+                    {siteConfig('NEXT_POST_HEADER_IMAGE_VISIBLE', null, CONFIG) && post?.type && !post?.type !== 'Page' && post?.pageCover && (
                         <div className="w-full relative md:flex-shrink-0 overflow-hidden">
                             <LazyImage alt={post.title} src={post?.pageCover} className='object-center w-full' />
                         </div>
@@ -79,7 +80,9 @@ export default function ArticleDetail(props) {
 
                 {/* Notion内容主体 */}
                 <article className='mx-auto'>
+                    <WWAds className="w-full" orientation="horizontal" />
                     {post && (<NotionPage post={post} />)}
+                    <WWAds className="w-full" orientation="horizontal" />
                 </article>
 
                 {showArticleInfo && <>
@@ -88,7 +91,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} />}
diff --git a/themes/next/components/BlogPostArchive.js b/themes/next/components/BlogPostArchive.js
index b1f22296..c961d7f9 100644
--- a/themes/next/components/BlogPostArchive.js
+++ b/themes/next/components/BlogPostArchive.js
@@ -1,6 +1,6 @@
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-import BLOG from '@/blog.config'
+
 /**
  * 博客归档列表
  * @param posts 所有文章
@@ -30,7 +30,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
                 <span className="text-gray-400">{post.date?.start_date}</span>{' '}
                 &nbsp;
                 <Link
-                  href={`${BLOG.SUB_PATH}/${post.slug}`}
+                  href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                   passHref
                   className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
 
diff --git a/themes/next/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js
index 90224ecd..1d87b0fd 100644
--- a/themes/next/components/BlogPostCard.js
+++ b/themes/next/components/BlogPostCard.js
@@ -1,8 +1,6 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Image from 'next/image'
 import Link from 'next/link'
-import React from 'react'
 import Card from './Card'
 import TagItemMini from './TagItemMini'
 import CONFIG from '../config'
@@ -10,10 +8,11 @@ import NotionPage from '@/components/NotionPage'
 import NotionIcon from '@/components/NotionIcon'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
 import { formatDateFmt } from '@/lib/formatDate'
+import { siteConfig } from '@/lib/config'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const { locale } = useGlobal()
-  const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
+  const showPreview = siteConfig('NEXT_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
   return (
     <Card className="w-full">
       <div
@@ -22,7 +21,7 @@ const BlogPostCard = ({ post, showSummary }) => {
       >
         <div className="lg:p-8 p-4 flex flex-col w-full">
           <Link
-            href={`${BLOG.SUB_PATH}/${post.slug}`}
+            href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
             passHref
             data-aos="fade-down"
             data-aos-duration="500"
@@ -105,7 +104,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
           <div className="text-right border-t pt-8 border-dashed">
             <Link
-              href={`${BLOG.SUB_PATH}/${post.slug}`}
+              href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
               className="hover:bg-opacity-100 hover:underline transform duration-300 p-3 text-white bg-gray-800 cursor-pointer">
 
               {locale.COMMON.ARTICLE_DETAIL}
@@ -115,8 +114,8 @@ const BlogPostCard = ({ post, showSummary }) => {
           </div>
         </div>
 
-        {CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && (
-          <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+        {siteConfig('NEXT_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail && (
+          <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
             <div className="h-72 w-full relative duration-200 cursor-pointer transform overflow-hidden">
               <Image
                 className="hover:scale-105 transform duration-500"
diff --git a/themes/next/components/BlogPostListEmpty.js b/themes/next/components/BlogPostListEmpty.js
index b1d87253..ae09e90d 100644
--- a/themes/next/components/BlogPostListEmpty.js
+++ b/themes/next/components/BlogPostListEmpty.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 
 /**
  * 空白博客 列表
@@ -5,8 +6,9 @@
  * @constructor
  */
 const BlogPostListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
   return <div className='flex items-center justify-center min-h-screen mx-auto md:-mt-20'>
-        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+        <p className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_RESULTS_FOUND}  {(currentSearch && <div>{currentSearch}</div>)}</p>
   </div>
 }
 export default BlogPostListEmpty
diff --git a/themes/next/components/BlogPostListPage.js b/themes/next/components/BlogPostListPage.js
index c87e626a..fe87ad04 100644
--- a/themes/next/components/BlogPostListPage.js
+++ b/themes/next/components/BlogPostListPage.js
@@ -1,7 +1,7 @@
 import BlogPostCard from './BlogPostCard'
 import PaginationNumber from './PaginationNumber'
-import BLOG from '@/blog.config'
 import BlogPostListEmpty from './BlogPostListEmpty'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 文章列表分页表格
@@ -12,7 +12,7 @@ import BlogPostListEmpty from './BlogPostListEmpty'
  * @constructor
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
diff --git a/themes/next/components/BlogPostListScroll.js b/themes/next/components/BlogPostListScroll.js
index e9124bc6..64f42d0e 100644
--- a/themes/next/components/BlogPostListScroll.js
+++ b/themes/next/components/BlogPostListScroll.js
@@ -1,10 +1,10 @@
-import BLOG from '@/blog.config'
 import BlogPostCard from './BlogPostCard'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 博客列表滚动分页
@@ -13,8 +13,8 @@ import CONFIG from '../config'
  * @returns {JSX.Element}
  * @constructor
  */
-const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY }) => {
-  const postsPerPage = BLOG.POSTS_PER_PAGE
+const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfig('NEXT_POST_LIST_SUMMARY', null, CONFIG) }) => {
+  const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE'))
   const [page, updatePage] = useState(1)
   const postsToShow = getPostByPage(page, posts, postsPerPage)
 
diff --git a/themes/next/components/Card.js b/themes/next/components/Card.js
index a1c507b6..de70f580 100644
--- a/themes/next/components/Card.js
+++ b/themes/next/components/Card.js
@@ -1,10 +1,15 @@
+/**
+ * 卡片组件
+ * @param {*} param0 
+ * @returns 
+ */
 const Card = (props) => {
-  const { children, headerSlot } = props
-  return <div {...props}>
-    <>{headerSlot}</>
-    <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
-        {children}
-    </section>
-  </div>
+    const { children, headerSlot, className } = props
+    return <div className={className}>
+        <>{headerSlot}</>
+        <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
+            {children}
+        </section>
+    </div>
 }
 export default Card
diff --git a/themes/next/components/CategoryGroup.js b/themes/next/components/CategoryGroup.js
index 8e24231a..c00b5d1c 100644
--- a/themes/next/components/CategoryGroup.js
+++ b/themes/next/components/CategoryGroup.js
@@ -1,11 +1,13 @@
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
-  if (!categories) return <></>
+  if (!categories || categories.length === 0) return <></>
+  const categoryCount = siteConfig('PREVIEW_CATEGORY_COUNT')
+  const categoryOptions = categories.slice(0, categoryCount)
   return <>
     <div id='category-list' className='dark:border-gray-600 flex flex-wrap'>
-      {categories.map(category => {
+      {categoryOptions.map(category => {
         const selected = currentCategory === category.name
         return (
           <Link
diff --git a/themes/next/components/CategoryList.js b/themes/next/components/CategoryList.js
index ffe038ef..af8e3b52 100644
--- a/themes/next/components/CategoryList.js
+++ b/themes/next/components/CategoryList.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 
 const CategoryList = ({ currentCategory, categoryOptions }) => {
@@ -11,7 +10,7 @@ const CategoryList = ({ currentCategory, categoryOptions }) => {
   return (
     <ul className='flex py-1 space-x-3'>
       <li className='w-16 py-2 dark:text-gray-200 whitespace-nowrap'>{locale.COMMON.CATEGORY}</li>
-      {categoryOptions.map(category => {
+      {categoryOptions?.map(category => {
         const selected = category.name === currentCategory
         return (
           <Link
diff --git a/themes/next/components/ContactButton.js b/themes/next/components/ContactButton.js
index b9e0a75b..bc95ab25 100644
--- a/themes/next/components/ContactButton.js
+++ b/themes/next/components/ContactButton.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 
 /**
diff --git a/themes/next/components/FloatDarkModeButton.js b/themes/next/components/FloatDarkModeButton.js
index 6fef32ff..0cc5e5bf 100644
--- a/themes/next/components/FloatDarkModeButton.js
+++ b/themes/next/components/FloatDarkModeButton.js
@@ -1,11 +1,12 @@
 import { useGlobal } from '@/lib/global'
 import { saveDarkModeToCookies } from '@/themes/theme'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 export default function FloatDarkModeButton () {
   const { isDarkMode, updateDarkMode } = useGlobal()
 
-  if (!CONFIG.WIDGET_DARK_MODE) {
+  if (!siteConfig('NEXT_WIDGET_DARK_MODE', null, CONFIG)) {
     return <></>
   }
 
diff --git a/themes/next/components/Footer.js b/themes/next/components/Footer.js
index 2afc2f7a..fc4f5de9 100644
--- a/themes/next/components/Footer.js
+++ b/themes/next/components/Footer.js
@@ -1,16 +1,11 @@
-import React from 'react'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import DarkModeButton from '@/components/DarkModeButton'
 
 const Footer = ({ title }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
-  const copyrightDate = (function () {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
         <footer
@@ -20,9 +15,9 @@ 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={siteConfig('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 /></>}
+                {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br /></>}
 
                 <span className='hidden busuanzi_container_site_pv'>
                     <i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span> </span>
@@ -30,7 +25,7 @@ const Footer = ({ title }) => {
                     <i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
                 <br />
                 <h1>{title}</h1>
-                <span className='text-xs font-serif  text-gray-500 dark:text-gray-300 '>Powered by  <a href='https://github.com/tangly1024/NotionNext' className='underline '>NotionNext {BLOG.VERSION}</a>.</span>
+                <span className='text-xs font-serif  text-gray-500 dark:text-gray-300 '>Powered by  <a href='https://github.com/tangly1024/NotionNext' className='underline '>NotionNext {siteConfig('VERSION')}</a>.</span>
             </span>
         </footer>
   )
diff --git a/themes/next/components/InfoCard.js b/themes/next/components/InfoCard.js
index 8dc988f6..ababf306 100644
--- a/themes/next/components/InfoCard.js
+++ b/themes/next/components/InfoCard.js
@@ -1,18 +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='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center'>{BLOG.BIO}</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'>{siteConfig('BIO')}</div>
         <SocialButton/>
     </div>
   </>
diff --git a/themes/next/components/JumpToBottomButton.js b/themes/next/components/JumpToBottomButton.js
index cc624f2b..34d73922 100644
--- a/themes/next/components/JumpToBottomButton.js
+++ b/themes/next/components/JumpToBottomButton.js
@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到网页顶部
@@ -37,7 +38,7 @@ const JumpToBottomButton = ({ showPercent = false }) => {
     window.scrollTo({ top: targetRef.clientHeight, behavior: 'smooth' })
   }
 
-  if (!CONFIG.WIDGET_TO_BOTTOM) {
+  if (!siteConfig('NEXT_WIDGET_TO_BOTTOM', null, CONFIG)) {
     return <></>
   }
 
diff --git a/themes/next/components/JumpToTopButton.js b/themes/next/components/JumpToTopButton.js
index 9629d65b..c58e948e 100644
--- a/themes/next/components/JumpToTopButton.js
+++ b/themes/next/components/JumpToTopButton.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到网页顶部
@@ -12,7 +12,7 @@ import CONFIG from '../config'
  */
 const JumpToTopButton = ({ showPercent = true, percent }) => {
   const { locale } = useGlobal()
-  if (!CONFIG.WIDGET_TO_TOP) {
+  if (!siteConfig('NEXT_WIDGET_TO_TOP', null, CONFIG)) {
     return <></>
   }
   return (<div className='flex space-x-1 items-center transform hover:scale-105 duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
diff --git a/themes/next/components/LatestPostsGroup.js b/themes/next/components/LatestPostsGroup.js
index bf7cd4be..da80b68f 100644
--- a/themes/next/components/LatestPostsGroup.js
+++ b/themes/next/components/LatestPostsGroup.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -26,12 +26,12 @@ const LatestPostsGroup = ({ latestPosts }) => {
       </div>
     </div>
     {latestPosts.map(post => {
-      const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
+      const selected = currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
       return (
         (<Link
           key={post.id}
           title={post.title}
-          href={`${BLOG.SUB_PATH}/${post.slug}`}
+          href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
           passHref
           className={'my-1 flex font-light'}>
 
diff --git a/themes/next/components/LeftFloatButton.js b/themes/next/components/LeftFloatButton.js
index a84312da..bf303565 100644
--- a/themes/next/components/LeftFloatButton.js
+++ b/themes/next/components/LeftFloatButton.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import throttle from 'lodash.throttle'
 import DarkModeButton from './DarkModeButton'
 
diff --git a/themes/next/components/Logo.js b/themes/next/components/Logo.js
index dd8caed2..45b26f4d 100644
--- a/themes/next/components/Logo.js
+++ b/themes/next/components/Logo.js
@@ -1,8 +1,8 @@
 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 +10,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('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/next/components/MenuList.js b/themes/next/components/MenuList.js
index ec03a7bd..96d0726e 100644
--- a/themes/next/components/MenuList.js
+++ b/themes/next/components/MenuList.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
@@ -12,9 +11,9 @@ export const MenuList = (props) => {
 
   const defaultLinks = [
     { id: 1, icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 2, icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { id: 3, icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
-    { id: 4, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE }
+    { id: 2, icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NEXT_MENU_CATEGORY', null, CONFIG) },
+    { id: 3, icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NEXT_MENU_TAG', null, CONFIG) },
+    { id: 4, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: siteConfig('NEXT_MENU_ARCHIVE', null, CONFIG) }
   ]
 
   let links = [].concat(defaultLinks)
@@ -23,7 +22,7 @@ export const MenuList = (props) => {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -40,12 +39,12 @@ export const MenuList = (props) => {
                 data-aos-once="true"
                 data-aos-anchor-placement="top-bottom"
                 className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
-                {links.map(link => link && link.show && <MenuItemDrop key={link?.id} link={link} />)}
+                {links.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
             </nav>
 
             {/* 移动端菜单 */}
             <div id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
-                {links?.map(link => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.id} link={link} />)}
+                {links?.map((link, index) => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link} />)}
             </div>
         </>
   )
diff --git a/themes/next/components/NextRecentComments.js b/themes/next/components/NextRecentComments.js
index 2564949e..0237b07f 100644
--- a/themes/next/components/NextRecentComments.js
+++ b/themes/next/components/NextRecentComments.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import BLOG from '@/blog.config'
+import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { RecentComments } from '@waline/client'
+import { siteConfig } from '@/lib/config'
 
 /**
  * @see https://waline.js.org/guide/get-started.html
@@ -9,11 +9,11 @@ import { RecentComments } from '@waline/client'
  * @returns
  */
 const NextRecentComments = (props) => {
-  const [comments, updateComments] = React.useState([])
-  const [onLoading, changeLoading] = React.useState(true)
-  React.useEffect(() => {
+  const [comments, updateComments] = useState([])
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
     RecentComments({
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
       count: 5
     }).then(({ comments }) => {
       changeLoading(false)
diff --git a/themes/next/components/Progress.js b/themes/next/components/Progress.js
index 8eab47e9..bc206206 100644
--- a/themes/next/components/Progress.js
+++ b/themes/next/components/Progress.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
 
 /**
diff --git a/themes/next/components/RecommendPosts.js b/themes/next/components/RecommendPosts.js
index 1626f664..9be418da 100644
--- a/themes/next/components/RecommendPosts.js
+++ b/themes/next/components/RecommendPosts.js
@@ -1,16 +1,16 @@
-import React from 'react'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 展示文章推荐
  */
 const RecommendPosts = ({ recommendPosts }) => {
-  if (!CONFIG.ARTICLE_RELATE_POSTS || !recommendPosts || recommendPosts.length < 1) {
+  const { locale } = useGlobal()
+  if (!siteConfig('NEXT_ARTICLE_RELATE_POSTS', null, CONFIG) || !recommendPosts || recommendPosts.length < 1) {
     return <></>
   }
-  const { locale } = useGlobal()
 
   return (
     <div className="pt-2 border pl-4 py-2 my-4 dark:text-gray-300 ">
diff --git a/themes/next/components/RewardButton.js b/themes/next/components/RewardButton.js
index 44733d6d..fe3e10bb 100644
--- a/themes/next/components/RewardButton.js
+++ b/themes/next/components/RewardButton.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import Image from 'next/image'
 
 /**
diff --git a/themes/next/components/SideAreaLeft.js b/themes/next/components/SideAreaLeft.js
index 0fb39643..9aed7c97 100644
--- a/themes/next/components/SideAreaLeft.js
+++ b/themes/next/components/SideAreaLeft.js
@@ -3,13 +3,12 @@ import { MenuList } from './MenuList'
 import SearchInput from './SearchInput'
 import Toc from './Toc'
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 import Tabs from '@/components/Tabs'
 import Logo from './Logo'
 import Card from './Card'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
 import Live2D from '@/components/Live2D'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 侧边平铺
@@ -24,7 +23,7 @@ const SideAreaLeft = props => {
   const { post, slot, postCount } = props
   const { locale } = useGlobal()
   const showToc = post && post.toc && post.toc.length > 1
-  return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-20 relative'}>
+  return <aside id='left' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-20 relative'}>
 
         <section
             className='w-60'>
@@ -34,7 +33,7 @@ const SideAreaLeft = props => {
                 <div className='pt-2 px-2 font-sans'>
                     <MenuList allowCollapse={true} {...props} />
                 </div>
-                {CONFIG.MENU_SEARCH && <div className='px-2 pt-2 font-sans'>
+                {siteConfig('NEXT_MENU_SEARCH', null, CONFIG) && <div className='px-2 pt-2 font-sans'>
                     <SearchInput {...props} />
                 </div>}
 
diff --git a/themes/next/components/SideAreaRight.js b/themes/next/components/SideAreaRight.js
index ee694d35..4a4b30b8 100644
--- a/themes/next/components/SideAreaRight.js
+++ b/themes/next/components/SideAreaRight.js
@@ -1,15 +1,14 @@
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
-import React from 'react'
 import Card from './Card'
 import CategoryGroup from './CategoryGroup'
 import TagGroups from './TagGroups'
 import CONFIG from '../config'
 import { useRouter } from 'next/router'
-import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import Announcement from './Announcement'
 import LatestPostsGroup from './LatestPostsGroup'
+import { siteConfig } from '@/lib/config'
 const NextRecentComments = dynamic(() => import('./NextRecentComments'))
 
 /**
@@ -28,9 +27,9 @@ const SideAreaRight = (props) => {
   const router = useRouter()
   const announcementVisible = notice && Object.keys(notice).length > 0
 
-  return (<aside id='right' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'mr-4' : 'ml-4') + ' space-y-4 hidden xl:block flex-col w-60 relative z-10'}>
+  return (<aside id='right' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'mr-4' : 'ml-4') + ' space-y-4 hidden xl:block flex-col w-60 relative z-10'}>
 
-        {CONFIG.RIGHT_AD && <Card className='mb-2'>
+        {siteConfig('NEXT_RIGHT_AD', null, CONFIG) && <Card className='mb-2'>
             {/* 展示广告  */}
             <ins
                 className='adsbygoogle'
@@ -49,11 +48,11 @@ const SideAreaRight = (props) => {
                 <Announcement post={notice} />
             </Card>}
 
-            {CONFIG.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup latestPosts={latestPosts} /></Card>}
+            {siteConfig('NEXT_RIGHT_LATEST_POSTS', null, CONFIG) && <Card><LatestPostsGroup latestPosts={latestPosts} /></Card>}
             {slot}
 
             {/* 分类  */}
-            {CONFIG.RIGHT_CATEGORY_LIST && router.asPath !== '/category' && categoryOptions && (
+            {siteConfig('NEXT_RIGHT_CATEGORY_LIST', null, CONFIG) && router.asPath !== '/category' && categoryOptions && (
                 <Card>
                     <div className='text-sm px-2 flex flex-nowrap justify-between font-light'>
                         <div className='pb-2 text-gray-600 dark:text-gray-300'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
@@ -70,7 +69,7 @@ const SideAreaRight = (props) => {
                 </Card>
             )}
 
-            {CONFIG.RIGHT_TAG_LIST && router.asPath !== '/tag' && tagOptions && (
+            {siteConfig('NEXT_RIGHT_TAG_LIST', null, CONFIG) && router.asPath !== '/tag' && tagOptions && (
                 <Card>
                     <div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
                         <div className="text-gray-600 dark:text-gray-200">
@@ -93,7 +92,7 @@ const SideAreaRight = (props) => {
                 </Card>
             )}
 
-            {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <Card>
+            {siteConfig('COMMENT_WALINE_SERVER_URL') && siteConfig('COMMENT_WALINE_RECENT') && <Card>
                 <div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
                     <div className="text-gray-600 dark:text-gray-200">
                         <i className="mr-2 fas fa-tag" />
diff --git a/themes/next/components/SideBar.js b/themes/next/components/SideBar.js
index 3af651c5..27fe65b0 100644
--- a/themes/next/components/SideBar.js
+++ b/themes/next/components/SideBar.js
@@ -3,7 +3,6 @@ import InfoCard from './InfoCard'
 import TagGroups from './TagGroups'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
-import React from 'react'
 
 /**
  * 侧边栏
diff --git a/themes/next/components/SideBarDrawer.js b/themes/next/components/SideBarDrawer.js
index 213269f4..999e6b80 100644
--- a/themes/next/components/SideBarDrawer.js
+++ b/themes/next/components/SideBarDrawer.js
@@ -1,6 +1,6 @@
 import SideBar from './SideBar'
 import { useRouter } from 'next/router'
-import React, { useEffect, useImperativeHandle } from 'react'
+import { useEffect, useImperativeHandle } from 'react'
 
 /**
  * 侧边栏抽屉面板，可以从侧面拉出
diff --git a/themes/next/components/SocialButton.js b/themes/next/components/SocialButton.js
index 7508b273..6da30787 100644
--- a/themes/next/components/SocialButton.js
+++ b/themes/next/components/SocialButton.js
@@ -1,5 +1,4 @@
-import BLOG from '@/blog.config'
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 社交联系方式按钮组
@@ -9,34 +8,34 @@ import React from 'react'
 const SocialButton = () => {
   return <div className='w-52 justify-center flex-wrap flex'>
     <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 text-center'>
-      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
         <i className='fab fa-github transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
         <i className='fab fa-twitter transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
         <i className='fab fa-telegram transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
+      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
         <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
         <i className='fab fa-weibo transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
         <i className='fab fa-instagram transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
         <i className='fas fa-envelope transform hover:scale-125 duration-150'/>
       </a>}
-      {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
         <i className='fas fa-rss transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
+      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
         <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_YOUTUBE && <a target='_blank' rel='noreferrer' title={'youtube'} href={BLOG.CONTACT_YOUTUBE} >
+      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
         <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
       </a>}
     </div>
diff --git a/themes/next/components/StickyBar.js b/themes/next/components/StickyBar.js
index 13169f8e..e763b594 100644
--- a/themes/next/components/StickyBar.js
+++ b/themes/next/components/StickyBar.js
@@ -1,6 +1,7 @@
 import throttle from 'lodash.throttle'
 import { useCallback, useEffect } from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 let windowTop = 0
 
@@ -13,7 +14,7 @@ let windowTop = 0
 const StickyBar = ({ children }) => {
   // 滚动页面时导航条样式调整
   const scrollTrigger = useCallback(throttle(() => {
-    if (CONFIG.NAV_TYPE === 'normal') {
+    if (siteConfig('NEXT_NAV_TYPE', null, CONFIG) === 'normal') {
       return
     }
     const scrollS = window.scrollY
diff --git a/themes/next/components/TagGroups.js b/themes/next/components/TagGroups.js
index 1a406ed3..42efafab 100644
--- a/themes/next/components/TagGroups.js
+++ b/themes/next/components/TagGroups.js
@@ -1,3 +1,4 @@
+import { siteConfig } from '@/lib/config'
 import TagItemMini from './TagItemMini'
 
 /**
@@ -8,11 +9,14 @@ import TagItemMini from './TagItemMini'
  * @constructor
  */
 const TagGroups = ({ tags, currentTag }) => {
-  if (!tags) return <></>
+  if (!tags || tags.length === 0) return <></>
+
+  const tagsCount = siteConfig('PREVIEW_TAG_COUNT')
+  const tagOptions = tags.slice(0, tagsCount)
   return (
     <div id='tags-group' className='dark:border-gray-600 w-66 space-y-2'>
       {
-        tags.map(tag => {
+        tagOptions.map(tag => {
           const selected = tag.name === currentTag
           return <TagItemMini key={tag.name} tag={tag} selected={selected} />
         })
diff --git a/themes/next/components/TagItem.js b/themes/next/components/TagItem.js
index 85f6e0be..bb40a2f1 100644
--- a/themes/next/components/TagItem.js
+++ b/themes/next/components/TagItem.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 
 const TagItem = ({ tag, selected }) => {
diff --git a/themes/next/components/TagList.js b/themes/next/components/TagList.js
index 973e7b68..08d25add 100644
--- a/themes/next/components/TagList.js
+++ b/themes/next/components/TagList.js
@@ -1,5 +1,5 @@
-import React from 'react'
 import TagItem from './TagItem'
+
 /**
  * 横向的标签列表
  * @param tags
diff --git a/themes/next/components/Toc.js b/themes/next/components/Toc.js
index f734990d..077c9863 100644
--- a/themes/next/components/Toc.js
+++ b/themes/next/components/Toc.js
@@ -1,8 +1,7 @@
-import React, { useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
-// import { cs } from 'react-notion-x'
 
 /**
  * 目录导航组件
@@ -12,7 +11,7 @@ import Progress from './Progress'
  */
 const Toc = ({ toc }) => {
   // 监听滚动事件
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', actionSectionScrollSpy)
     actionSectionScrollSpy()
     return () => {
@@ -25,9 +24,9 @@ const Toc = ({ toc }) => {
   const tocIds = []
 
   // 同步选中目录事件
-  const [activeSection, setActiveSection] = React.useState(null)
+  const [activeSection, setActiveSection] = useState(null)
   const throttleMs = 200
-  const actionSectionScrollSpy = React.useCallback(throttle(() => {
+  const actionSectionScrollSpy = useCallback(throttle(() => {
     const sections = document.getElementsByClassName('notion-h')
     let prevBBox = null
     let currentSectionId = activeSection
diff --git a/themes/next/components/TocDrawer.js b/themes/next/components/TocDrawer.js
index 83861934..33172166 100644
--- a/themes/next/components/TocDrawer.js
+++ b/themes/next/components/TocDrawer.js
@@ -1,5 +1,5 @@
 import Toc from './Toc'
-import React, { useImperativeHandle, useState } from 'react'
+import { useImperativeHandle, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 
 /**
diff --git a/themes/next/components/TocDrawerButton.js b/themes/next/components/TocDrawerButton.js
index fc8548e4..6d51fdc2 100644
--- a/themes/next/components/TocDrawerButton.js
+++ b/themes/next/components/TocDrawerButton.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 点击召唤目录抽屉
@@ -11,7 +11,7 @@ import CONFIG from '../config'
  */
 const TocDrawerButton = (props) => {
   const { locale } = useGlobal()
-  if (!CONFIG.WIDGET_TOC) {
+  if (!siteConfig('NEXT_WIDGET_TOC', null, CONFIG)) {
     return <></>
   }
   if (props?.post?.toc?.length > 1) {
diff --git a/themes/next/components/TopNav.js b/themes/next/components/TopNav.js
index bf561bfd..5f6eec1e 100644
--- a/themes/next/components/TopNav.js
+++ b/themes/next/components/TopNav.js
@@ -9,6 +9,7 @@ import { MenuList } from './MenuList'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 let windowTop = 0
 
@@ -38,12 +39,12 @@ const TopNav = (props) => {
 
   // 监听滚动
   useEffect(() => {
-    if (CONFIG.NAV_TYPE === 'autoCollapse') {
+    if (siteConfig('NEXT_NAV_TYPE', null, CONFIG) === 'autoCollapse') {
       scrollTrigger()
       window.addEventListener('scroll', scrollTrigger)
     }
     return () => {
-      CONFIG.NAV_TYPE === 'autoCollapse' && window.removeEventListener('scroll', scrollTrigger)
+      siteConfig('NEXT_NAV_TYPE', null, CONFIG) === 'autoCollapse' && window.removeEventListener('scroll', scrollTrigger)
     }
   }, [])
 
@@ -96,7 +97,7 @@ const TopNav = (props) => {
             <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
 
             {/* 导航栏 */}
-            <div id='sticky-nav' className={`${CONFIG.NAV_TYPE !== 'normal' ? 'fixed' : 'relative'} lg:relative w-full top-0 z-20 transform duration-500`}>
+            <div id='sticky-nav' className={`${siteConfig('NEXT_NAV_TYPE', null, CONFIG) !== 'normal' ? 'fixed' : 'relative'} lg:relative w-full top-0 z-20 transform duration-500`}>
                 <div className='w-full flex justify-between items-center p-4 bg-black dark:bg-gray-800 text-white'>
                     {/* 左侧LOGO 标题 */}
                     <div className='flex flex-none flex-grow-0'>
diff --git a/themes/next/components/WordCount.js b/themes/next/components/WordCount.js
index 2062e69a..ccf146d4 100644
--- a/themes/next/components/WordCount.js
+++ b/themes/next/components/WordCount.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useEffect } from 'react'
 
 /**
@@ -9,8 +10,12 @@ export default function WordCount() {
     countWords()
   })
 
+  const { locale } = useGlobal()
+
   return <div id='wordCountWrapper' className='flex justify-center my-auto font-light'>
-    <i className='mr-1 fas fa-file-word my-auto' /> <span className='hidden md:block'>本文字数</span> <strong id='wordCount'>0</strong> &nbsp;|&nbsp; <i className='mr-1 fas fa-clock my-auto' /> <span className='hidden md:block'>阅读时长 ≈</span> <strong id='readTime'>0</strong> 分钟
+    <i className='mr-1 fas fa-file-word my-auto' />
+    <span className='hidden md:block'>{locale.COMMON.WORD_COUNT}≈</span>
+    <strong id='wordCount'>0</strong> &nbsp;|&nbsp; <i className='mr-1 fas fa-clock my-auto' />{locale.COMMON.READ_TIME} <span className='hidden md:block'>≈</span> <strong id='readTime'>0</strong> {locale.COMMON.MINUTE}
   </div>
 }
 
diff --git a/themes/next/config.js b/themes/next/config.js
index 16203f5c..7bd35ba3 100644
--- a/themes/next/config.js
+++ b/themes/next/config.js
@@ -1,38 +1,38 @@
 const CONFIG = {
 
-  HOME_BANNER: true, // 首页是否显示大图及标语 [true,false]
-  HOME_BANNER_Strings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
+  NEXT_HOME_BANNER: true, // 首页是否显示大图及标语 [true,false]
+  NEXT_HOME_BANNER_STRINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
 
-  NAV_TYPE: 'normal', // ['fixed','autoCollapse','normal'] 分别是固定屏幕顶部并始终显示、固定屏幕顶部且滚动时隐藏，不固定屏幕顶部
+  NEXT_NAV_TYPE: 'normal', // ['fixed','autoCollapse','normal'] 分别是固定屏幕顶部并始终显示、固定屏幕顶部且滚动时隐藏，不固定屏幕顶部
 
-  POST_LIST_COVER: false, // 文章列表显示封面图
-  POST_LIST_PREVIEW: true, // 显示文章预览
-  POST_LIST_SUMMARY: false, // 显示用户自定义摘要，有预览时优先只展示预览
+  NEXT_POST_LIST_COVER: false, // 文章列表显示封面图
+  NEXT_POST_LIST_PREVIEW: true, // 显示文章预览
+  NEXT_POST_LIST_SUMMARY: false, // 显示用户自定义摘要，有预览时优先只展示预览
 
-  POST_HEADER_IMAGE_VISIBLE: false, // 文章详情页是否显示封面图
+  NEXT_POST_HEADER_IMAGE_VISIBLE: false, // 文章详情页是否显示封面图
 
   // 右侧组件
-  RIGHT_BAR: true, // 是否显示右侧栏
-  RIGHT_LATEST_POSTS: true, // 右侧栏最新文章
-  RIGHT_CATEGORY_LIST: true, // 右侧边栏文章分类列表
-  RIGHT_TAG_LIST: true, // 右侧边栏标签分类列表
-  RIGHT_AD: false, // 右侧广告
+  NEXT_RIGHT_BAR: true, // 是否显示右侧栏
+  NEXT_RIGHT_LATEST_POSTS: true, // 右侧栏最新文章
+  NEXT_RIGHT_CATEGORY_LIST: true, // 右侧边栏文章分类列表
+  NEXT_RIGHT_TAG_LIST: true, // 右侧边栏标签分类列表
+  NEXT_RIGHT_AD: false, // 右侧广告
 
   // 菜单
-  MENU_HOME: true, // 显示首页
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
+  NEXT_MENU_HOME: true, // 显示首页
+  NEXT_MENU_CATEGORY: true, // 显示分类
+  NEXT_MENU_TAG: true, // 显示标签
+  NEXT_MENU_ARCHIVE: true, // 显示归档
+  NEXT_MENU_SEARCH: true, // 显示搜索
 
-  WIDGET_TO_TOP: true, // 是否显示回顶
-  WIDGET_TO_BOTTOM: false, // 显示回底
-  WIDGET_DARK_MODE: false, // 显示日间/夜间模式切换
-  WIDGET_TOC: true, // 移动端显示悬浮目录
+  NEXT_WIDGET_TO_TOP: true, // 是否显示回顶
+  NEXT_WIDGET_TO_BOTTOM: false, // 显示回底
+  NEXT_WIDGET_DARK_MODE: false, // 显示日间/夜间模式切换
+  NEXT_WIDGET_TOC: true, // 移动端显示悬浮目录
 
-  ARTICLE_RELATE_POSTS: true, // 相关文章推荐
-  ARTICLE_COPYRIGHT: true, // 文章版权声明
-  ARTICLE_INFO: true // 显示文章信息
+  NEXT_ARTICLE_RELATE_POSTS: true, // 相关文章推荐
+  NEXT_ARTICLE_COPYRIGHT: true, // 文章版权声明
+  NEXT_ARTICLE_INFO: true // 显示文章信息
 
 }
 
diff --git a/themes/next/index.js b/themes/next/index.js
index 93590525..35a6091a 100644
--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -8,7 +8,6 @@ import SideAreaRight from './components/SideAreaRight'
 import TopNav from './components/TopNav'
 import { useGlobal } from '@/lib/global'
 import { useEffect, useRef, useState } from 'react'
-import BLOG from '@/blog.config'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
 import StickyBar from './components/StickyBar'
@@ -26,6 +25,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,13 +33,12 @@ import CommonHead from '@/components/CommonHead'
  * @constructor
  */
 const LayoutBase = (props) => {
-  const { children, headerSlot, floatSlot, rightAreaSlot, siteInfo, meta } = props
+  const { children, headerSlot, rightAreaSlot, meta, post } = props
   const { onLoading } = useGlobal()
   const targetRef = useRef(null)
   const floatButtonGroup = useRef(null)
   const [showRightFloat, switchShow] = useState(false)
   const [percent, changePercent] = useState(0) // 页面阅读百分比
-
   const scrollListener = () => {
     const targetRef = document.getElementById('wrapper')
     const clientHeight = targetRef?.clientHeight
@@ -68,6 +67,15 @@ const LayoutBase = (props) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [showRightFloat])
 
+  // 悬浮抽屉
+  const drawerRight = useRef(null)
+  const floatSlot = <div className='block lg:hidden'>
+    <TocDrawerButton onClick={() => {
+        drawerRight?.current?.handleSwitchVisible()
+    }} />
+ </div>
+  const tocRef = isBrowser ? document.getElementById('article-wrapper') : null
+
   return (
         <div id='theme-next'>
             {/* SEO相关 */}
@@ -83,12 +91,12 @@ const LayoutBase = (props) => {
             <div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600 hidden lg:block' />
 
             {/* 主区 */}
-            <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' next relative flex justify-center flex-1 pb-12'}>
+            <main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' next relative flex justify-center flex-1 pb-12'}>
                 {/* 左侧栏样式 */}
                 <SideAreaLeft targetRef={targetRef} {...props} />
 
                 {/* 中央内容 */}
-                <section id='container-inner' className={`${CONFIG.NAV_TYPE !== 'normal' ? 'mt-24' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full relative z-10`} ref={targetRef}>
+                <section id='container-inner' className={`${siteConfig('NEXT_NAV_TYPE', null, CONFIG) !== 'normal' ? 'mt-24' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full relative z-10`} ref={targetRef}>
                     <Transition
                         show={!onLoading}
                         appear={true}
@@ -105,9 +113,15 @@ const LayoutBase = (props) => {
                 </section>
 
                 {/* 右侧栏样式 */}
-                {CONFIG.RIGHT_BAR && <SideAreaRight targetRef={targetRef} slot={rightAreaSlot} {...props} />}
+                {siteConfig('NEXT_RIGHT_BAR', null, CONFIG) && <SideAreaRight targetRef={targetRef} slot={rightAreaSlot} {...props} />}
+            
             </main>
 
+            {/* 悬浮目录按钮 */}
+            {post && <div className='block lg:hidden'>
+                <TocDrawer post={post} cRef={drawerRight} targetRef={tocRef} />
+            </div>}
+
             {/* 右下角悬浮 */}
             <div ref={floatButtonGroup} className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 font-sans'>
                 <div className={(showRightFloat ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
@@ -119,7 +133,7 @@ const LayoutBase = (props) => {
             </div>
 
             {/* 页脚 */}
-            <Footer title={siteInfo?.title} />
+            <Footer title={siteConfig('TITLE')} />
         </div>
   )
 }
@@ -140,15 +154,15 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutPostList = (props) => {
-  return <LayoutBase {...props} >
+  return <>
 
         <BlogListBar {...props} />
 
-        {BLOG.POST_LIST_STYLE !== 'page'
+        {siteConfig('POST_LIST_STYLE') !== 'page'
           ? <BlogPostListScroll {...props} showSummary={true} />
           : <BlogPostListPage {...props} />
         }
-    </LayoutBase>
+    </>
 }
 
 /**
@@ -174,7 +188,7 @@ const LayoutSearch = (props) => {
   }, [])
 
   return (
-        <LayoutBase {...props} >
+        <>
             <StickyBar>
                 <div className="p-4 dark:text-gray-200">
                     <i className="mr-1 fas fa-search" />{' '}
@@ -182,12 +196,12 @@ const LayoutSearch = (props) => {
                 </div>
             </StickyBar>
             <div className="md:mt-5">
-                {BLOG.POST_LIST_STYLE !== 'page'
+                {siteConfig('POST_LIST_STYLE') !== 'page'
                   ? <BlogPostListScroll {...props} showSummary={true} />
                   : <BlogPostListPage {...props} />
                 }
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -210,7 +224,7 @@ const Layout404 = props => {
     }, 3000)
   }, [])
 
-  return <LayoutBase {...props}>
+  return <>
         <div className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
             <div className='dark:text-gray-200'>
                 <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><i className='mr-2 fas fa-spinner animate-spin' />404</h2>
@@ -219,7 +233,7 @@ const Layout404 = props => {
                 </div>
             </div>
         </div>
-    </LayoutBase>
+    </>
 }
 
 /**
@@ -231,7 +245,7 @@ const LayoutArchive = (props) => {
   const { archivePosts } = props
 
   return (
-        <LayoutBase {...props}>
+        <>
             <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-hexo-black-gray shadow-md min-h-full">
                 {Object.keys(archivePosts).map(archiveTitle => (
                     <BlogPostArchive
@@ -241,7 +255,7 @@ const LayoutArchive = (props) => {
                     />
                 ))}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -252,27 +266,14 @@ const LayoutArchive = (props) => {
  */
 const LayoutSlug = (props) => {
   const { post, lock, validPassword } = props
-  const drawerRight = useRef(null)
-  const targetRef = isBrowser ? document.getElementById('article-wrapper') : null
-  const floatSlot = <div className='block lg:hidden'>
-        <TocDrawerButton onClick={() => {
-          drawerRight?.current?.handleSwitchVisible()
-        }} />
-    </div>
-
   return (
-        <LayoutBase {...props} floatSlot={floatSlot}>
+        <>
 
             {post && !lock && <ArticleDetail {...props} />}
 
             {post && lock && <ArticleLock validPassword={validPassword} />}
 
-            {/* 悬浮目录按钮 */}
-            {post && <div className='block lg:hidden'>
-                <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
-            </div>}
-
-        </LayoutBase>
+        </>
   )
 }
 
@@ -285,13 +286,13 @@ const LayoutCategoryIndex = (props) => {
   const { allPosts, categoryOptions } = props
   const { locale } = useGlobal()
   return (
-        <LayoutBase totalPosts={allPosts} {...props}>
+        <div totalPosts={allPosts} {...props}>
             <div className='bg-white dark:bg-hexo-black-gray px-10 py-10 shadow h-full'>
                 <div className='dark:text-gray-200 mb-5'>
                     <i className='mr-4 fas faTh' />{locale.COMMON.CATEGORY}:
                 </div>
                 <div id='category-list' className='duration-200 flex flex-wrap'>
-                    {categoryOptions.map(category => {
+                    {categoryOptions?.map(category => {
                       return (
                             <Link
                                 key={category.name}
@@ -307,7 +308,7 @@ const LayoutCategoryIndex = (props) => {
                     })}
                 </div>
             </div>
-        </LayoutBase>
+        </div>
   )
 }
 
@@ -319,7 +320,7 @@ const LayoutCategoryIndex = (props) => {
 const LayoutTagIndex = (props) => {
   const { tagOptions } = props
   const { locale } = useGlobal()
-  return <LayoutBase {...props}>
+  return <>
         <div className='bg-white dark:bg-hexo-black-gray px-10 py-10 shadow h-full'>
             <div className='dark:text-gray-200 mb-5'><i className='fas fa-tags mr-4' />{locale.COMMON.TAGS}:</div>
             <div id='tags-list' className='duration-200 flex flex-wrap'>
@@ -328,11 +329,12 @@ const LayoutTagIndex = (props) => {
                 })}
             </div>
         </div>
-    </LayoutBase>
+    </>
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutSearch,
   LayoutArchive,
@@ -340,5 +342,5 @@ export {
   Layout404,
   LayoutCategoryIndex,
   LayoutPostList,
-  LayoutTagIndex
+  LayoutTagIndex,
 }
diff --git a/themes/nobelium/components/ArticleFooter.js b/themes/nobelium/components/ArticleFooter.js
index 87cf7baf..628dd05d 100644
--- a/themes/nobelium/components/ArticleFooter.js
+++ b/themes/nobelium/components/ArticleFooter.js
@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 
@@ -16,7 +15,7 @@ export const ArticleFooter = props => {
   return <div className="flex justify-between font-medium text-gray-500 dark:text-gray-400">
   <a>
     <button
-      onClick={() => router.push(BLOG.path || '/')}
+      onClick={() => router.push('/')}
       className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
     >
       ← {locale.POST.BACK}
diff --git a/themes/nobelium/components/ArticleInfo.js b/themes/nobelium/components/ArticleInfo.js
index 0ecb4895..3e6a6220 100644
--- a/themes/nobelium/components/ArticleInfo.js
+++ b/themes/nobelium/components/ArticleInfo.js
@@ -1,52 +1,52 @@
 
 import Image from 'next/image'
-import BLOG from '@/blog.config'
 import TagItem from './TagItem'
 import md5 from 'js-md5'
+import { siteConfig } from '@/lib/config'
 
 export const ArticleInfo = (props) => {
   const { post } = props
 
-  const emailHash = md5(BLOG.CONTACT_EMAIL)
+  const emailHash = md5(siteConfig('CONTACT_EMAIL', '#'))
 
   return <section className="flex-wrap flex mt-2 text-gray--600 dark:text-gray-400 font-light leading-8">
         <div>
 
             <div className="font-bold text-3xl text-black dark:text-white">
-            {post?.title}
+                {post?.title}
             </div>
 
             {post?.type !== 'Page' && <>
-            <nav className="flex mt-7 items-start text-gray-500 dark:text-gray-400">
-            <div className="flex mb-4">
-              <a href={BLOG.CONTACT_GITHUB || '#'} className="flex">
-                <Image
-                  alt={BLOG.author}
-                  width={24}
-                  height={24}
-                  src={`https://gravatar.com/avatar/${emailHash}`}
-                  className="rounded-full"
-                />
-                <p className="ml-2 md:block">{BLOG.author}</p>
-              </a>
-              <span className="block">&nbsp;/&nbsp;</span>
-            </div>
-            <div className="mr-2 mb-4 md:ml-0">
-              {post?.publishDay}
-            </div>
-            {post?.tags && (
-              <div className="flex flex-nowrap max-w-full overflow-x-auto article-tags">
-                {post?.tags.map(tag => (
-                  <TagItem key={tag} tag={tag} />
-                ))}
-              </div>
-            )}
-            <span className="hidden busuanzi_container_page_pv mr-2">
-                    <i className='mr-1 fas fa-eye' />
-                    &nbsp;
-                    <span className="mr-2 busuanzi_value_page_pv" />
-                </span>
-             </nav>
+                <nav className="flex mt-7 items-start text-gray-500 dark:text-gray-400">
+                    <div className="flex mb-4">
+                        <a href={siteConfig('CONTACT_GITHUB', '#')} className="flex">
+                            <Image
+                                alt={siteConfig('AUTHOR')}
+                                width={24}
+                                height={24}
+                                src={`https://gravatar.com/avatar/${emailHash}`}
+                                className="rounded-full"
+                            />
+                            <p className="ml-2 md:block">{siteConfig('AUTHOR')}</p>
+                        </a>
+                        <span className="block">&nbsp;/&nbsp;</span>
+                    </div>
+                    <div className="mr-2 mb-4 md:ml-0">
+                        {post?.publishDay}
+                    </div>
+                    {post?.tags && (
+                        <div className="flex flex-nowrap max-w-full overflow-x-auto article-tags">
+                            {post?.tags.map(tag => (
+                                <TagItem key={tag} tag={tag} />
+                            ))}
+                        </div>
+                    )}
+                    <span className="hidden busuanzi_container_page_pv mr-2">
+                        <i className='mr-1 fas fa-eye' />
+                        &nbsp;
+                        <span className="mr-2 busuanzi_value_page_pv" />
+                    </span>
+                </nav>
             </>}
 
         </div>
diff --git a/themes/nobelium/components/BlogArchiveItem.js b/themes/nobelium/components/BlogArchiveItem.js
index b8184f45..809ac6d8 100644
--- a/themes/nobelium/components/BlogArchiveItem.js
+++ b/themes/nobelium/components/BlogArchiveItem.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 
 /**
@@ -25,7 +25,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
                             </span>{' '}
                             &nbsp;
                             <Link
-                                href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                                 passHref
                                 className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
 
diff --git a/themes/nobelium/components/BlogListBar.js b/themes/nobelium/components/BlogListBar.js
index 69076937..57ca7e7b 100644
--- a/themes/nobelium/components/BlogListBar.js
+++ b/themes/nobelium/components/BlogListBar.js
@@ -1,7 +1,8 @@
+import { useNobeliumGlobal } from '..'
 import Tags from './Tags'
 
 export default function BlogListBar(props) {
-  const { tag, setFilterKey } = props
+  const { tag, setFilterKey } = useNobeliumGlobal()
   const handleSearchChange = (val) => {
     setFilterKey(val)
   }
diff --git a/themes/nobelium/components/BlogListPage.js b/themes/nobelium/components/BlogListPage.js
index fc6b72ad..46db49fa 100644
--- a/themes/nobelium/components/BlogListPage.js
+++ b/themes/nobelium/components/BlogListPage.js
@@ -1,5 +1,5 @@
 
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
@@ -9,7 +9,7 @@ export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
   const { locale } = useGlobal()
   const router = useRouter()
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
   const currentPage = +page
 
   const showPrev = currentPage > 1
diff --git a/themes/nobelium/components/BlogListScroll.js b/themes/nobelium/components/BlogListScroll.js
index d3d91abb..42a1f440 100644
--- a/themes/nobelium/components/BlogListScroll.js
+++ b/themes/nobelium/components/BlogListScroll.js
@@ -1,34 +1,34 @@
-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 { useCallback, useEffect, useRef, useState } from 'react'
 
 export const BlogListScroll = props => {
   const { posts } = props
   const { locale } = useGlobal()
 
-  const [page, updatePage] = React.useState(1)
+  const [page, updatePage] = useState(1)
 
   let hasMore = false
   const postsToShow = posts && Array.isArray(posts)
-    ? deepClone(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+    ? deepClone(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page)
     : []
 
   if (posts) {
     const totalCount = posts.length
-    hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+    hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount
   }
   const handleGetMore = () => {
     if (!hasMore) return
     updatePage(page + 1)
   }
 
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   // 监听滚动自动分页加载
-  const scrollTrigger = React.useCallback(throttle(() => {
+  const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY + window.outerHeight
     const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
     if (scrollS > clientHeight + 100) {
@@ -36,7 +36,7 @@ export const BlogListScroll = props => {
     }
   }, 500))
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', scrollTrigger)
 
     return () => {
@@ -57,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>
diff --git a/themes/nobelium/components/BlogPost.js b/themes/nobelium/components/BlogPost.js
index 28bc1710..1d641975 100644
--- a/themes/nobelium/components/BlogPost.js
+++ b/themes/nobelium/components/BlogPost.js
@@ -1,9 +1,9 @@
 import Link from 'next/link'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 
 const BlogPost = ({ post }) => {
   return (
-    (<Link href={`${BLOG.SUB_PATH}/${post.slug}`}>
+    (<Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}>
 
       <article key={post.id} className="mb-6 md:mb-8">
         <header className="flex flex-col justify-between md:flex-row md:items-baseline">
diff --git a/themes/nobelium/components/ExampleRecentComments.js b/themes/nobelium/components/ExampleRecentComments.js
index b1555c1d..e5097740 100644
--- a/themes/nobelium/components/ExampleRecentComments.js
+++ b/themes/nobelium/components/ExampleRecentComments.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import BLOG from '@/blog.config'
+import { useEffect, useState } from 'react'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import { RecentComments } from '@waline/client'
 
@@ -9,11 +9,11 @@ import { RecentComments } from '@waline/client'
  * @returns
  */
 const ExampleRecentComments = (props) => {
-  const [comments, updateComments] = React.useState([])
-  const [onLoading, changeLoading] = React.useState(true)
-  React.useEffect(() => {
+  const [comments, updateComments] = useState([])
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
     RecentComments({
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
       count: 5
     }).then(({ comments }) => {
       changeLoading(false)
diff --git a/themes/nobelium/components/Footer.js b/themes/nobelium/components/Footer.js
index 6b4b7857..a5d44e27 100644
--- a/themes/nobelium/components/Footer.js
+++ b/themes/nobelium/components/Footer.js
@@ -1,19 +1,14 @@
-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()
   const currentYear = d.getFullYear()
   const { post } = props
   const fullWidth = post?.fullWidth ?? false
-
-  const copyrightDate = (function() {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return <footer
      className={`z-10 relative mt-6 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 transition-all ${
@@ -25,7 +20,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>
diff --git a/themes/nobelium/components/JumpToTopButton.js b/themes/nobelium/components/JumpToTopButton.js
index 30e684a8..f5e22b61 100644
--- a/themes/nobelium/components/JumpToTopButton.js
+++ b/themes/nobelium/components/JumpToTopButton.js
@@ -1,5 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 
 /**
  * 跳转到网页顶部
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/nobelium/components/Nav.js b/themes/nobelium/components/Nav.js
index 7e6c12ac..38253b43 100644
--- a/themes/nobelium/components/Nav.js
+++ b/themes/nobelium/components/Nav.js
@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { SvgIcon } from './SvgIcon'
@@ -10,10 +9,11 @@ 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
-  const useSticky = !BLOG.autoCollapsedNavBar
+  const useSticky = !JSON.parse(siteConfig('NOBELIUM_AUTO_COLLAPSE_NAV_BAR', true))
   const navRef = useRef(null)
   const sentinalRef = useRef([])
   const handler = ([entry]) => {
@@ -43,12 +43,12 @@ const Nav = props => {
             ref={navRef}
         >
             <div className="flex items-center">
-                <Link href="/" aria-label={BLOG.title}>
+                <Link href="/" aria-label={siteConfig('TITLE')}>
 
                     <div className="h-6 w-6">
                         {/* <SvgIcon/> */}
-                        {CONFIG.NAV_NOTION_ICON
-                          ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
+                        {siteConfig('NOBELIUM_NAV_NOTION_ICON', null, CONFIG)
+                          ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={siteConfig('AUTHOR')} />
                           : <SvgIcon />}
 
                     </div>
@@ -61,9 +61,9 @@ const Nav = props => {
                         </p>
                     )
                   : (
-                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-                            {siteInfo?.title}
-                            {/* ,{' '}<span className="font-normal">{siteInfo?.description}</span> */}
+                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name whitespace-nowrap">
+                            {siteConfig('TITLE')}
+                            {/* ,{' '}<span className="font-normal">{siteConfig('DESCRIPTION')}</span> */}
                         </p>
                     )}
             </div>
@@ -82,18 +82,18 @@ const NavBar = props => {
 
   const { locale } = useGlobal()
   let links = [
-    { id: 2, name: locale.NAV.RSS, to: '/feed', show: BLOG.ENABLE_RSS && CONFIG.MENU_RSS, target: '_blank' },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    { id: 2, name: locale.NAV.RSS, to: '/feed', show: siteConfig('ENABLE_RSS') && siteConfig('NOBELIUM_MENU_RSS', null, CONFIG), target: '_blank' },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG) },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG) }
   ]
   if (customNav) {
     links = links.concat(customNav)
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -104,28 +104,21 @@ const NavBar = props => {
   return (
         <div className="flex-shrink-0 flex">
             <ul className="hidden md:flex flex-row">
-                {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+                {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
             </ul>
             <div className='md:hidden'>
                 <Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
                     <div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
-                        {links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
+                        {links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
                     </div>
                 </Collapse>
             </div>
 
-            {JSON.parse(CONFIG.MENU_RANDOM_POST) && <RandomPostButton {...props} />}
-            {JSON.parse(CONFIG.MENU_SEARCH_BUTTON) && <SearchButton {...props}/>}
+            {JSON.parse(siteConfig('NOBELIUM_MENU_RANDOM_POST', null, CONFIG)) && <RandomPostButton {...props} />}
+            {JSON.parse(siteConfig('NOBELIUM_MENU_SEARCH_BUTTON', null, CONFIG)) && <SearchButton {...props}/>}
             <i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5 flex justify-center items-center md:hidden'></i>
         </div>
   )
 }
 
 export default Nav
-
-/**
- *
-                    {!JSON.parse(BLOG.THEME_SWITCH) && <div className='hidden md:block'><DarkModeButton {...props} /></div>}
-                    <ReadingProgress />
-
- */
diff --git a/themes/nobelium/components/RandomPostButton.js b/themes/nobelium/components/RandomPostButton.js
index a8a0597f..a791f0f8 100644
--- a/themes/nobelium/components/RandomPostButton.js
+++ b/themes/nobelium/components/RandomPostButton.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 
@@ -15,7 +15,7 @@ export default function RandomPostButton(props) {
   function handleClick() {
     const randomIndex = Math.floor(Math.random() * latestPosts.length)
     const randomPost = latestPosts[randomIndex]
-    router.push(`${BLOG.SUB_PATH}/${randomPost?.slug}`)
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
   }
 
   return (
diff --git a/themes/nobelium/components/SearchButton.js b/themes/nobelium/components/SearchButton.js
index 91e805c3..23b3c065 100644
--- a/themes/nobelium/components/SearchButton.js
+++ b/themes/nobelium/components/SearchButton.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useNobeliumGlobal } from '..'
@@ -13,7 +13,7 @@ export default function SearchButton(props) {
   const router = useRouter()
 
   function handleSearch() {
-    if (BLOG.ALGOLIA_APP_ID) {
+    if (siteConfig('ALGOLIA_APP_ID')) {
       searchModal.current.openSearch()
     } else {
       router.push('/search')
diff --git a/themes/nobelium/components/SideBar.js b/themes/nobelium/components/SideBar.js
index 986063b0..a4d1e060 100644
--- a/themes/nobelium/components/SideBar.js
+++ b/themes/nobelium/components/SideBar.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
@@ -48,7 +48,7 @@ export const SideBar = (props) => {
                 </div>
             </aside>
 
-            {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <aside className="rounded shadow overflow-hidden mb-6">
+            {siteConfig('COMMENT_WALINE_SERVER_URL') && JSON.parse(siteConfig('COMMENT_WALINE_RECENT')) && <aside className="rounded shadow overflow-hidden mb-6">
                 <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
 
                 <div className="p-4">
diff --git a/themes/nobelium/components/TagItem.js b/themes/nobelium/components/TagItem.js
index 6c385b9b..0364e3fc 100644
--- a/themes/nobelium/components/TagItem.js
+++ b/themes/nobelium/components/TagItem.js
@@ -2,11 +2,9 @@ import Link from 'next/link'
 
 const TagItem = ({ tag }) => (
   (<Link href={`/tag/${encodeURIComponent(tag)}`}>
-
     <p className="mr-1 rounded-full px-2 py-1 border leading-none text-sm dark:border-gray-600">
       {tag}
     </p>
-
   </Link>)
 )
 
diff --git a/themes/nobelium/components/Title.js b/themes/nobelium/components/Title.js
index e57e2347..151d736e 100644
--- 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('DESCRIPTION')
+  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>
diff --git a/themes/nobelium/config.js b/themes/nobelium/config.js
index 18dd8488..0c4a9c1e 100644
--- a/themes/nobelium/config.js
+++ b/themes/nobelium/config.js
@@ -1,17 +1,17 @@
 const CONFIG = {
 
-  NAV_NOTION_ICON: true, // 是否读取Notion图标作为站点头像 ; 否则默认显示黑色SVG方块
+  NOBELIUM_NAV_NOTION_ICON: true, // 是否读取Notion图标作为站点头像 ; 否则默认显示黑色SVG方块
 
   // 特殊菜单
-  MENU_RANDOM_POST: true, // 是否显示随机跳转文章按钮
-  MENU_SEARCH_BUTTON: true, // 是否显示搜索按钮，该按钮支持Algolia搜索
+  NOBELIUM_MENU_RANDOM_POST: true, // 是否显示随机跳转文章按钮
+  NOBELIUM_MENU_SEARCH_BUTTON: true, // 是否显示搜索按钮，该按钮支持Algolia搜索
 
   // 默认菜单配置 （开启自定义菜单后，以下配置则失效，请在Notion中自行配置菜单）
-  MENU_CATEGORY: false, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: false, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
-  MENU_RSS: false // 显示订阅
+  NOBELIUM_MENU_CATEGORY: false, // 显示分类
+  NOBELIUM_MENU_TAG: true, // 显示标签
+  NOBELIUM_MENU_ARCHIVE: false, // 显示归档
+  NOBELIUM_MENU_SEARCH: true, // 显示搜索
+  NOBELIUM_MENU_RSS: false // 显示订阅
 
 }
 export default CONFIG
diff --git a/themes/nobelium/index.js b/themes/nobelium/index.js
index 319cd37f..83650ae8 100644
--- a/themes/nobelium/index.js
+++ b/themes/nobelium/index.js
@@ -1,6 +1,5 @@
-import BLOG from '@/blog.config'
 import CONFIG from './config'
-import React, { createContext, useEffect, useState, useContext, useRef } from 'react'
+import { createContext, useEffect, useState, useContext, useRef } from 'react'
 import Nav from './components/Nav'
 import { Footer } from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
@@ -25,6 +24,7 @@ import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import CommonHead from '@/components/CommonHead'
 import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import { siteConfig } from '@/lib/config'
 
 // 主题全局状态
 const ThemeGlobalNobelium = createContext()
@@ -37,14 +37,16 @@ export const useNobeliumGlobal = () => useContext(ThemeGlobalNobelium)
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, post, topSlot, meta } = props
-
+  const { children, post,  meta } = props
   const fullWidth = post?.fullWidth ?? false
   const { onLoading } = useGlobal()
   const searchModal = useRef(null)
+  // 在列表中进行实时过滤
+  const [filterKey, setFilterKey] = useState('')
+  const topSlot= <BlogListBar {...props}/>
 
   return (
-        <ThemeGlobalNobelium.Provider value={{ searchModal }}>
+        <ThemeGlobalNobelium.Provider value={{ searchModal, filterKey, setFilterKey }}>
             <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen flex flex-col'>
                 {/* SEO相关 */}
                 <CommonHead meta={meta} />
@@ -114,10 +116,8 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
-  const { posts, topSlot } = props
-
-  // 在列表中进行实时过滤
-  const [filterKey, setFilterKey] = useState('')
+  const { posts, topSlot,tag } = props
+  const { filterKey } = useNobeliumGlobal()
   let filteredBlogPosts = []
   if (filterKey && posts) {
     filteredBlogPosts = posts.filter(post => {
@@ -130,10 +130,11 @@ const LayoutPostList = props => {
   }
 
   return (
-        <LayoutBase {...props} topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}>
+        <>
             {topSlot}
-            {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
-        </LayoutBase>
+            {tag && <SearchNavBar {...props} />}
+            {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
+        </>
   )
 }
 
@@ -159,7 +160,7 @@ const LayoutSearch = props => {
   }, [])
 
   // 在列表中进行实时过滤
-  const [filterKey, setFilterKey] = useState('')
+  const {filterKey} = useNobeliumGlobal()
   let filteredBlogPosts = []
   if (filterKey && posts) {
     filteredBlogPosts = posts.filter(post => {
@@ -170,12 +171,11 @@ const LayoutSearch = props => {
   } else {
     filteredBlogPosts = deepClone(posts)
   }
-  console.log('posts', props, posts, filteredBlogPosts)
 
-  return <LayoutBase {...props} topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}>
+  return <>
     <SearchNavBar {...props} />
-    {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
-  </LayoutBase>
+    {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
+  </>
 }
 
 /**
@@ -186,11 +186,11 @@ const LayoutSearch = props => {
 const LayoutArchive = props => {
   const { archivePosts } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
                 {Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -203,7 +203,7 @@ const LayoutSlug = props => {
   const { post, lock, validPassword } = props
 
   return (
-        <LayoutBase {...props}>
+        <>
 
             {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -217,7 +217,7 @@ const LayoutSlug = props => {
                 </>
             </div>}
 
-        </LayoutBase>
+        </>
   )
 }
 
@@ -227,9 +227,9 @@ const LayoutSlug = props => {
  * @returns
  */
 const Layout404 = (props) => {
-  return <LayoutBase {...props}>
+  return <>
         404 Not found.
-    </LayoutBase>
+    </>
 }
 
 /**
@@ -241,7 +241,7 @@ const LayoutCategoryIndex = (props) => {
   const { categoryOptions } = props
 
   return (
-        <LayoutBase {...props}>
+        <>
             <div id='category-list' className='duration-200 flex flex-wrap'>
                 {categoryOptions?.map(category => {
                   return (
@@ -258,7 +258,7 @@ const LayoutCategoryIndex = (props) => {
                   )
                 })}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -270,7 +270,7 @@ const LayoutCategoryIndex = (props) => {
 const LayoutTagIndex = (props) => {
   const { tagOptions } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div>
                 <div id='tags-list' className='duration-200 flex flex-wrap'>
                     {tagOptions.map(tag => {
@@ -285,12 +285,13 @@ const LayoutTagIndex = (props) => {
                     })}
                 </div>
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutSearch,
   LayoutArchive,
diff --git a/themes/plog/components/ArticleFooter.js b/themes/plog/components/ArticleFooter.js
index 87cf7baf..ec65adba 100644
--- a/themes/plog/components/ArticleFooter.js
+++ b/themes/plog/components/ArticleFooter.js
@@ -1,6 +1,6 @@
-import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 加密文章校验组件
@@ -16,7 +16,7 @@ export const ArticleFooter = props => {
   return <div className="flex justify-between font-medium text-gray-500 dark:text-gray-400">
   <a>
     <button
-      onClick={() => router.push(BLOG.path || '/')}
+      onClick={() => router.push(siteConfig('path') || '/')}
       className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
     >
       ← {locale.POST.BACK}
diff --git a/themes/plog/components/ArticleInfo.js b/themes/plog/components/ArticleInfo.js
index 0ecb4895..784faa48 100644
--- a/themes/plog/components/ArticleInfo.js
+++ b/themes/plog/components/ArticleInfo.js
@@ -1,13 +1,13 @@
 
 import Image from 'next/image'
-import BLOG from '@/blog.config'
 import TagItem from './TagItem'
 import md5 from 'js-md5'
+import { siteConfig } from '@/lib/config'
 
 export const ArticleInfo = (props) => {
   const { post } = props
 
-  const emailHash = md5(BLOG.CONTACT_EMAIL)
+  const emailHash = md5(siteConfig('CONTACT_EMAIL', '#'))
 
   return <section className="flex-wrap flex mt-2 text-gray--600 dark:text-gray-400 font-light leading-8">
         <div>
@@ -19,15 +19,15 @@ export const ArticleInfo = (props) => {
             {post?.type !== 'Page' && <>
             <nav className="flex mt-7 items-start text-gray-500 dark:text-gray-400">
             <div className="flex mb-4">
-              <a href={BLOG.CONTACT_GITHUB || '#'} className="flex">
+              <a href={siteConfig('CONTACT_GITHUB') || '#'} className="flex">
                 <Image
-                  alt={BLOG.author}
+                  alt={siteConfig('AUTHOR')}
                   width={24}
                   height={24}
                   src={`https://gravatar.com/avatar/${emailHash}`}
                   className="rounded-full"
                 />
-                <p className="ml-2 md:block">{BLOG.author}</p>
+                <p className="ml-2 md:block">{siteConfig('AUTHOR')}</p>
               </a>
               <span className="block">&nbsp;/&nbsp;</span>
             </div>
diff --git a/themes/plog/components/BlogArchiveItem.js b/themes/plog/components/BlogArchiveItem.js
index b8184f45..4d3f3d02 100644
--- a/themes/plog/components/BlogArchiveItem.js
+++ b/themes/plog/components/BlogArchiveItem.js
@@ -1,5 +1,5 @@
-import BLOG from '@/blog.config'
 import Link from 'next/link'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 归档分组文章
@@ -25,7 +25,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
                             </span>{' '}
                             &nbsp;
                             <Link
-                                href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                                 passHref
                                 className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
 
diff --git a/themes/plog/components/BlogListBar.js b/themes/plog/components/BlogListBar.js
deleted file mode 100644
index 69076937..00000000
--- a/themes/plog/components/BlogListBar.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import Tags from './Tags'
-
-export default function BlogListBar(props) {
-  const { tag, setFilterKey } = props
-  const handleSearchChange = (val) => {
-    setFilterKey(val)
-  }
-  if (tag) {
-    return (<div className="mb-4">
-            <div className='relative'>
-                <input
-                    type="text"
-                    placeholder={
-                        tag ? `Search in #${tag}` : 'Search Articles'
-                    }
-                    className="outline-none block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
-                    onChange={e => handleSearchChange(e.target.value)}
-                />
-                <svg
-                    className="absolute right-3 top-3 h-5 w-5 text-black dark:text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                    ></path>
-                </svg>
-            </div>
-            <Tags {...props} />
-        </div>)
-  } else {
-    return <></>
-  }
-}
diff --git a/themes/plog/components/BlogListPage.js b/themes/plog/components/BlogListPage.js
index 1ac57222..488fd188 100644
--- a/themes/plog/components/BlogListPage.js
+++ b/themes/plog/components/BlogListPage.js
@@ -1,16 +1,16 @@
 
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import BlogPost from './BlogPost'
 import { useEffect, useRef } from 'react'
+import { siteConfig } from '@/lib/config'
 
 export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
   const { locale } = useGlobal()
   const router = useRouter()
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
   const currentPage = +page
 
   const showPrev = currentPage > 1
diff --git a/themes/plog/components/BlogListScroll.js b/themes/plog/components/BlogListScroll.js
index 157e80e4..8e71d14a 100644
--- a/themes/plog/components/BlogListScroll.js
+++ b/themes/plog/components/BlogListScroll.js
@@ -1,33 +1,33 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
-import React from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
+import { siteConfig } from '@/lib/config'
 
 export const BlogListScroll = props => {
   const { posts } = props
   const { locale } = useGlobal()
 
-  const [page, updatePage] = React.useState(1)
+  const [page, updatePage] = useState(1)
 
   let hasMore = false
   const postsToShow = posts
-    ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+    ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page)
     : []
 
   if (posts) {
     const totalCount = posts.length
-    hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+    hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount
   }
   const handleGetMore = () => {
     if (!hasMore) return
     updatePage(page + 1)
   }
 
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   // 监听滚动自动分页加载
-  const scrollTrigger = React.useCallback(throttle(() => {
+  const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY + window.outerHeight
     const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
     if (scrollS > clientHeight + 100) {
@@ -35,7 +35,7 @@ export const BlogListScroll = props => {
     }
   }, 500))
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', scrollTrigger)
 
     return () => {
@@ -56,7 +56,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>
diff --git a/themes/plog/components/BottomNav.js b/themes/plog/components/BottomNav.js
index 7af88fba..3a0fbb27 100644
--- a/themes/plog/components/BottomNav.js
+++ b/themes/plog/components/BottomNav.js
@@ -1,10 +1,10 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { MenuItemDrop } from './MenuItemDrop'
 import FullScreenButton from '@/components/FullScreenButton'
 import InformationButton from './InformationButton'
 import LogoBar from './LogoBar'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 桌面端底部导航
@@ -32,18 +32,18 @@ const MenuList = props => {
 
   const { locale } = useGlobal()
   let links = [
-    { id: 2, name: locale.NAV.RSS, to: '/feed', show: BLOG.ENABLE_RSS && CONFIG.MENU_RSS, target: '_blank' },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    { id: 2, name: locale.NAV.RSS, to: '/feed', show: siteConfig('ENABLE_RSS') && siteConfig('NOBELIUM_MENU_RSS', null, CONFIG), target: '_blank' },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG) },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG) }
   ]
   if (customNav) {
     links = links.concat(customNav)
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -54,7 +54,7 @@ const MenuList = props => {
   return (
         <div className="flex-shrink-0">
             <ul className="hidden md:flex flex-row">
-                {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+                {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
                 <li className='my-auto px-2'>
                     <FullScreenButton />
                 </li>
diff --git a/themes/plog/components/ExampleRecentComments.js b/themes/plog/components/ExampleRecentComments.js
index b1555c1d..24135110 100644
--- a/themes/plog/components/ExampleRecentComments.js
+++ b/themes/plog/components/ExampleRecentComments.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import BLOG from '@/blog.config'
+import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { RecentComments } from '@waline/client'
+import { siteConfig } from '@/lib/config'
 
 /**
  * @see https://waline.js.org/guide/get-started.html
@@ -9,11 +9,11 @@ import { RecentComments } from '@waline/client'
  * @returns
  */
 const ExampleRecentComments = (props) => {
-  const [comments, updateComments] = React.useState([])
-  const [onLoading, changeLoading] = React.useState(true)
-  React.useEffect(() => {
+  const [comments, updateComments] = useState([])
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
     RecentComments({
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
       count: 5
     }).then(({ comments }) => {
       changeLoading(false)
diff --git a/themes/plog/components/Footer.js b/themes/plog/components/Footer.js
index 2a6bdcb9..1eabd26a 100644
--- a/themes/plog/components/Footer.js
+++ b/themes/plog/components/Footer.js
@@ -1,22 +1,18 @@
-import BLOG from '@/blog.config'
 import Vercel from '@/components/Vercel'
+import { siteConfig } from '@/lib/config'
 
 export const Footer = (props) => {
   const d = new Date()
   const currentYear = d.getFullYear()
 
-  const copyrightDate = (function() {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   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>Powered By <a href="https://github.com/tangly1024/NotionNext" className='underline'>NotionNext {BLOG.VERSION}</a></div>
+         <div> © {siteConfig('AUTHOR')} {copyrightDate}  </div>
+         <div>Powered By <a href="https://github.com/tangly1024/NotionNext" className='underline'>NotionNext {siteConfig('VERSION')}</a></div>
          <Vercel />
        </div>
      </div>
diff --git a/themes/plog/components/JumpToTopButton.js b/themes/plog/components/JumpToTopButton.js
index 30e684a8..f5e22b61 100644
--- a/themes/plog/components/JumpToTopButton.js
+++ b/themes/plog/components/JumpToTopButton.js
@@ -1,5 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
 
 /**
  * 跳转到网页顶部
diff --git a/themes/plog/components/LogoBar.js b/themes/plog/components/LogoBar.js
index 07539f2f..46dd8555 100644
--- a/themes/plog/components/LogoBar.js
+++ b/themes/plog/components/LogoBar.js
@@ -1,8 +1,8 @@
-import BLOG from '@/blog.config'
 import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
 import CONFIG from '../config'
 import { SvgIcon } from './SvgIcon'
+import { siteConfig } from '@/lib/config'
 
 /**
  * logo文字栏
@@ -13,16 +13,16 @@ export default function LogoBar(props) {
   const { navBarTitle, siteInfo } = props
 
   return <div className="flex items-center">
-    <Link href="/" aria-label={BLOG.title}>
+    <Link href="/" aria-label={siteConfig('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} />
+            {siteConfig('NOBELIUM_NAV_NOTION_ICON', null, CONFIG)
+              ? <LazyImage src={siteInfo?.icon} className='rounded-full' width={24} height={24} alt={siteConfig('AUTHOR')} />
               : <SvgIcon />}
         </div>
     </Link>
     {navBarTitle
       ? (
-            <Link href="/" aria-label={BLOG.title}>
+            <Link href="/" aria-label={siteConfig('title')}>
                 <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
                     {navBarTitle}
                 </p>
@@ -30,8 +30,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={siteConfig('TITLE')}> {siteConfig('TITLE')}</Link>
+                {' '}<span className="font-normal text-sm text-gray-00 dark:text-gray-400">{siteConfig('DESCRIPTION')}</span>
             </p>
         )}
 </div>
diff --git a/themes/plog/components/Modal.js b/themes/plog/components/Modal.js
index fae47bb2..8c490093 100644
--- a/themes/plog/components/Modal.js
+++ b/themes/plog/components/Modal.js
@@ -3,8 +3,9 @@ import { Dialog, Transition } from '@headlessui/react'
 import { usePlogGlobal } from '..'
 import { ArrowPath, ChevronLeft, ChevronRight } from '@/components/HeroIcons'
 import Link from 'next/link'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
+import { compressImage } from '@/lib/notion/mapImage'
 
 /**
  * 弹出框
@@ -13,7 +14,7 @@ export default function Modal(props) {
   const { showModal, setShowModal, modalContent, setModalContent } = usePlogGlobal()
   const { siteInfo, posts } = props
   const cancelButtonRef = useRef(null)
-  const img = modalContent?.pageCover || siteInfo?.pageCover
+  const img = compressImage(modalContent?.pageCover || siteInfo?.pageCover, 1200, 85, 'webp')
   const imgRef = useRef(null)
 
   // 添加loading状态
@@ -93,7 +94,7 @@ export default function Modal(props) {
                                             <h2 style={{ textShadow: '0.1em 0.1em 0.2em black' }} className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>{modalContent?.title}</h2>
                                         </div>
 
-                                        <Link href={`${BLOG.SUB_PATH}/${modalContent.slug}`}>
+                                        <Link href={`${siteConfig('SUB_PATH', '')}/${modalContent.slug}`}>
                                             <div style={{ textShadow: '0.1em 0.1em 0.2em black' }} className={'line-clamp-3 md:line-clamp-none overflow-hidden cursor-pointer text-gray-50 rounded-lg m-2'}>
                                                 {modalContent?.summary}
                                             </div>
diff --git a/themes/plog/components/Nav.js b/themes/plog/components/Nav.js
index 401f0d49..b01fab10 100644
--- a/themes/plog/components/Nav.js
+++ b/themes/plog/components/Nav.js
@@ -1,6 +1,5 @@
 import { useRef, useState } from 'react'
 import Link from 'next/link'
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { SvgIcon } from './SvgIcon'
@@ -8,27 +7,28 @@ 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"
             className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8  glassmorphism ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
                 }`} >
-                <Link href="/" aria-label={BLOG.title} className="flex items-center">
+                <Link href="/" aria-label={siteConfig('title')} className="flex items-center">
                     <>
                         <div className="h-6 w-6">
                             {/* <SvgIcon/> */}
-                            {CONFIG.NAV_NOTION_ICON
-                              ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
+                            {siteConfig('NOBELIUM_NAV_NOTION_ICON', null, CONFIG)
+                              ? <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>
@@ -48,18 +48,18 @@ const NavBar = props => {
 
   const { locale } = useGlobal()
   let links = [
-    { id: 2, name: locale.NAV.RSS, to: '/feed', show: BLOG.ENABLE_RSS && CONFIG.MENU_RSS, target: '_blank' },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    { id: 2, name: locale.NAV.RSS, to: '/feed', show: siteConfig('ENABLE_RSS') && siteConfig('NOBELIUM_MENU_RSS', null, CONFIG), target: '_blank' },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG) },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG) }
   ]
   if (customNav) {
     links = links.concat(customNav)
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -70,12 +70,12 @@ const NavBar = props => {
   return (
         <div className="flex-shrink-0">
             <ul className=" hidden md:flex flex-row">
-                {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+                {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
             </ul>
             <div className='md:hidden'><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5 block md:hidden'></i>
                 <Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
                     <div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
-                        {links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />)}
+                        {links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />)}
                     </div>
                 </Collapse>
             </div>
diff --git a/themes/plog/components/SideBar.js b/themes/plog/components/SideBar.js
index 986063b0..2779a64d 100644
--- a/themes/plog/components/SideBar.js
+++ b/themes/plog/components/SideBar.js
@@ -1,8 +1,9 @@
-import BLOG from '@/blog.config'
 import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
+import { siteConfig } from '@/lib/config'
+
 const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'))
 
 export const SideBar = (props) => {
@@ -48,7 +49,7 @@ export const SideBar = (props) => {
                 </div>
             </aside>
 
-            {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <aside className="rounded shadow overflow-hidden mb-6">
+            {siteConfig('COMMENT_WALINE_SERVER_URL') && siteConfig('COMMENT_WALINE_RECENT') && <aside className="rounded shadow overflow-hidden mb-6">
                 <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
 
                 <div className="p-4">
diff --git a/themes/plog/components/SlideOvers.js b/themes/plog/components/SlideOvers.js
index 651758b0..901316bb 100644
--- a/themes/plog/components/SlideOvers.js
+++ b/themes/plog/components/SlideOvers.js
@@ -2,7 +2,7 @@ import { Fragment, useRef, useImperativeHandle, useState } from 'react'
 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,8 +61,8 @@ 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-2xl text-gray-400'>{BLOG.BIO}</h2>
+                                            <h2 className='text-4xl text-gray-200'>关于{siteConfig('AUTHOR')}</h2>
+                                            <h2 className='text-2xl text-gray-400'>{siteConfig('BIO')}</h2>
                                             <h2 className='text-4xl text-gray-200'>联系我</h2>
                                             <SocialButton/>
                                             <Footer/>
diff --git a/themes/plog/components/SocialButton.js b/themes/plog/components/SocialButton.js
index 821ff90c..56cf9490 100644
--- a/themes/plog/components/SocialButton.js
+++ b/themes/plog/components/SocialButton.js
@@ -1,5 +1,4 @@
-import BLOG from '@/blog.config'
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 社交联系方式按钮组
@@ -9,34 +8,34 @@ import React from 'react'
 const SocialButton = () => {
   return <div className='justify-start flex-wrap flex mx-1'>
     <div className='space-x-3 text-2xl text-gray-600 dark:text-gray-400 text-center'>
-      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
         <i className='fab fa-github transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
         <i className='fab fa-twitter transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
         <i className='fab fa-telegram transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
+      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
         <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
       </a>}
-      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
         <i className='fab fa-weibo transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
         <i className='fab fa-instagram transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
         <i className='fas fa-envelope transform hover:scale-125 duration-150'/>
       </a>}
-      {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
         <i className='fas fa-rss transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
+      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
         <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_YOUTUBE && <a target='_blank' rel='noreferrer' title={'youtube'} href={BLOG.CONTACT_YOUTUBE} >
+      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
         <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
       </a>}
     </div>
diff --git a/themes/plog/components/Title.js b/themes/plog/components/Title.js
index e57e2347..151d736e 100644
--- 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('DESCRIPTION')
+  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>
diff --git a/themes/plog/config.js b/themes/plog/config.js
index 75f2e597..e2ffeaa5 100644
--- a/themes/plog/config.js
+++ b/themes/plog/config.js
@@ -1,13 +1,13 @@
 const CONFIG = {
 
   // 菜单配置
-  MENU_CATEGORY: false, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: false, // 显示归档
-  MENU_SEARCH: true, // 显示搜索
-  MENU_RSS: false, // 显示订阅
+  NOBELIUM_MENU_CATEGORY: false, // 显示分类
+  NOBELIUM_MENU_TAG: true, // 显示标签
+  NOBELIUM_MENU_ARCHIVE: false, // 显示归档
+  NOBELIUM_MENU_SEARCH: true, // 显示搜索
+  NOBELIUM_MENU_RSS: false, // 显示订阅
 
-  NAV_NOTION_ICON: true // 是否读取Notion图标作为站点头像
+  NOBELIUM_NAV_NOTION_ICON: true // 是否读取Notion图标作为站点头像
 
 }
 export default CONFIG
diff --git a/themes/plog/index.js b/themes/plog/index.js
index eb733e15..07d34068 100644
--- a/themes/plog/index.js
+++ b/themes/plog/index.js
@@ -2,8 +2,7 @@ import CONFIG from './config'
 import { createContext, useContext, useEffect, useState } from 'react'
 import Header from './components/Nav'
 import { useGlobal } from '@/lib/global'
-
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { BlogListPage } from './components/BlogListPage'
 import { BlogListScroll } from './components/BlogListScroll'
 import { isBrowser } from '@/lib/utils'
@@ -99,9 +98,9 @@ const LayoutIndex = props => {
  */
 const LayoutPostList = props => {
   return (
-        <LayoutBase {...props}>
-            {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-        </LayoutBase>
+        <>
+            {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
+        </>
   )
 }
 
@@ -138,11 +137,11 @@ const LayoutSearch = props => {
 const LayoutArchive = props => {
   const { archivePosts } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
                 {Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -155,7 +154,7 @@ const LayoutSlug = props => {
   const { post, lock, validPassword } = props
 
   return (
-        <LayoutBase {...props}>
+        <>
 
             {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -169,7 +168,7 @@ const LayoutSlug = props => {
                 </>
             </div>}
 
-        </LayoutBase>
+        </>
   )
 }
 
@@ -179,9 +178,9 @@ const LayoutSlug = props => {
  * @returns
  */
 const Layout404 = (props) => {
-  return <LayoutBase {...props}>
+  return <>
         404 Not found.
-    </LayoutBase>
+    </>
 }
 
 /**
@@ -193,7 +192,7 @@ const LayoutCategoryIndex = (props) => {
   const { categoryOptions } = props
 
   return (
-        <LayoutBase {...props}>
+        <>
             <div id='category-list' className='duration-200 flex flex-wrap'>
                 {categoryOptions?.map(category => {
                   return (
@@ -210,7 +209,7 @@ const LayoutCategoryIndex = (props) => {
                   )
                 })}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -222,7 +221,7 @@ const LayoutCategoryIndex = (props) => {
 const LayoutTagIndex = (props) => {
   const { tagOptions } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div>
                 <div id='tags-list' className='duration-200 flex flex-wrap'>
                     {tagOptions.map(tag => {
@@ -237,12 +236,13 @@ const LayoutTagIndex = (props) => {
                     })}
                 </div>
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutSearch,
   LayoutArchive,
diff --git a/themes/simple/components/ArticleInfo.js b/themes/simple/components/ArticleInfo.js
index 30e1b5f4..f4d3f7fc 100644
--- a/themes/simple/components/ArticleInfo.js
+++ b/themes/simple/components/ArticleInfo.js
@@ -1,32 +1,36 @@
 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) => {
+/**
+ * 文章描述
+ * @param {*} props
+ * @returns
+ */
+export default function ArticleInfo (props) {
   const { post } = props
 
   const { locale } = useGlobal()
 
   return (
-        <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">
-            <div>
-                <h2
-                    className="blog-item-title mb-5 font-bold text-black text-xl md:text-2xl no-underline">
-                    {post?.title}
-                </h2>
+        <section className="mt-2 text-gray-600 dark:text-gray-400 leading-8">
+            <h2
+                className="blog-item-title mb-5 font-bold text-black text-xl md:text-2xl no-underline">
+                {post?.title}
+            </h2>
 
-                {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-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>}
+            <div className='flex flex-wrap text-gray-700 dark:text-gray-300'>
+                {post?.type !== 'Page' && (
+                    <div className="space-x-3 mr-4">
+                        <span> <i className="fa-regular fa-user"></i> <a href={siteConfig('SIMPLE_AUTHOR_LINK', null, CONFIG)}>{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>)}
-                    </div>
-                </>)}
+                    </div>)}
 
-                {post?.type !== 'Page' && (<>
+                {post?.type !== 'Page' && (<div className=''>
                     <span>{locale.COMMON.POST_TIME}:
                         <Link
                             href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
@@ -36,7 +40,7 @@ export const ArticleInfo = (props) => {
                         </Link>
                     </span>
                     <span className='mr-2'>|</span>
-                    <span className='mx-2 text-gray-400 dark:text-gray-500'>
+                    <span className='mx-2  dark:text-gray-500'>
                         {locale.COMMON.LAST_EDITED_TIME}: {post?.lastEditedDay}
                     </span>
                     <span className='mr-2'>|</span>
@@ -45,10 +49,9 @@ export const ArticleInfo = (props) => {
                         &nbsp;
                         <span className="mr-2 busuanzi_value_page_pv" />
                     </span>
-                </>)}
+                </div>)}
 
             </div>
-
         </section>
   )
 }
diff --git a/themes/simple/components/ArticleLock.js b/themes/simple/components/ArticleLock.js
index 4957946d..eb1d10ef 100644
--- a/themes/simple/components/ArticleLock.js
+++ b/themes/simple/components/ArticleLock.js
@@ -8,7 +8,7 @@ import { useEffect, useRef } from 'react'
  * @param validPassword(bool) 回调函数，校验正确回调入参为true
  * @returns
  */
-export const ArticleLock = props => {
+export default function ArticleLock (props) {
   const { validPassword } = props
   const { locale } = useGlobal()
 
diff --git a/themes/simple/components/BlogArchiveItem.js b/themes/simple/components/BlogArchiveItem.js
index b8184f45..809ac6d8 100644
--- a/themes/simple/components/BlogArchiveItem.js
+++ b/themes/simple/components/BlogArchiveItem.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 
 /**
@@ -25,7 +25,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
                             </span>{' '}
                             &nbsp;
                             <Link
-                                href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                                 passHref
                                 className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
 
diff --git a/themes/simple/components/BlogItem.js b/themes/simple/components/BlogItem.js
index 49f5cd12..8d682e11 100644
--- a/themes/simple/components/BlogItem.js
+++ b/themes/simple/components/BlogItem.js
@@ -1,49 +1,66 @@
-import BLOG from '@/blog.config'
 import Link from 'next/link'
 import CONFIG from '../config'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
 import { formatDateFmt } from '@/lib/formatDate'
+import { siteConfig } from '@/lib/config'
+import LazyImage from '@/components/LazyImage'
 
 export const BlogItem = props => {
   const { post } = props
+  const showPageCover = siteConfig('SIMPLE_POST_COVER_ENABLE', false, CONFIG)
 
   return <div key={post.id} className="h-42 my-6 pb-12 border-b dark:border-gray-800" >
         {/* 文章标题 */}
 
-        <h2 className="mb-2">
-            <Link
-                href={`${BLOG.SUB_PATH}/${post.slug}`}
-                className="blog-item-title font-bold text-black text-2xl menu-link">
-                {post.title}
-            </Link>
-        </h2>
+        <div className='flex'>
+            <div className='article-cover h-full'>
+                {/* 图片封面 */}
+                {showPageCover && (
+                    <div className="overflow-hidden mr-2 w-56 h-full">
+                        <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
+                            <LazyImage src={post?.pageCoverThumbnail} className='w-56 h-full object-cover object-center group-hover:scale-110 duration-500' />
+                        </Link>
+                    </div>
+                )}
+            </div>
 
-        {/* 文章信息 */}
-
-        <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>
-                    <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}
+            <div className='article-info'>
+                <h2 className="mb-2">
+                    <Link
+                        href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
+                        className="blog-item-title font-bold text-black text-2xl menu-link">
+                        {post.title}
                     </Link>
-                </span>
-                <span><TwikooCommentCount post={post} /></span>
-            </div>
+                </h2>
 
-            <div>
-                {post.category && <Link href={`/category/${post.category}`} className='p-1'> <span className="hover:text-red-400 transition-all duration-200"><i className="fa-regular fa-folder mr-0.5"/>{post.category}</span></Link>}
-                {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <Link key={t} href={`/tag/${t}`} className=' hover:text-red-400 transition-all duration-200'><span > /{t}</span></Link>)}
-            </div>
-        </div>
+                {/* 文章信息 */}
 
-        <div className="text-gray-700 dark:text-gray-300 leading-normal mb-6">
-            {post.summary}
-            {post.summary && <span>...</span>}
+                <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={siteConfig('SIMPLE_AUTHOR_LINK', null, CONFIG)} 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}
+                            </Link>
+                        </span>
+                        <span><TwikooCommentCount post={post} /></span>
+                    </div>
+
+                    <div>
+                        {post.category && <Link href={`/category/${post.category}`} className='p-1'> <span className="hover:text-red-400 transition-all duration-200"><i className="fa-regular fa-folder mr-0.5" />{post.category}</span></Link>}
+                        {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <Link key={t} href={`/tag/${t}`} className=' hover:text-red-400 transition-all duration-200'><span > /{t}</span></Link>)}
+                    </div>
+                </div>
+
+                <div className="text-gray-700 dark:text-gray-300 leading-normal mb-6">
+                    {post.summary}
+                    {post.summary && <span>...</span>}
+                </div>
+            </div>
         </div>
 
         <div className='block'>
-            <Link href={`${BLOG.SUB_PATH}/${post.slug}`} className='inline-block rounded-sm text-blue-600 text-xs dark:border-gray-800 border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
+            <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} className='inline-block rounded-sm text-blue-600 text-xs dark:border-gray-800 border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
                 Continue Reading <i className="fa-solid fa-angle-right align-middle"></i>
             </Link>
         </div>
diff --git a/themes/simple/components/BlogListPage.js b/themes/simple/components/BlogListPage.js
index e05d4ecf..b0e6720c 100644
--- a/themes/simple/components/BlogListPage.js
+++ b/themes/simple/components/BlogListPage.js
@@ -1,16 +1,25 @@
 
-import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { BlogItem } from './BlogItem'
 import { AdSlot } from '@/components/GoogleAdsense'
+import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
 
-export const BlogListPage = props => {
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+export default function BlogListPage(props) {
   const { page = 1, posts, postCount } = props
   const router = useRouter()
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
   const currentPage = +page
 
+  // 博客列表嵌入广告
+  const SIMPLE_POST_AD_ENABLE = siteConfig('SIMPLE_POST_AD_ENABLE', false, CONFIG)
+
   const showPrev = currentPage > 1
   const showNext = page < totalPage
   const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
@@ -20,9 +29,9 @@ export const BlogListPage = props => {
 
             <div id="posts-wrapper">
                 {posts?.map((p, index) => (<div key={p.id}>
-                        {(index + 1) % 3 === 0 && <AdSlot type='in-article' />}
-                        { (index + 1) === 4 && <AdSlot type='flow'/>}
-                        <BlogItem post={p} />
+                    {SIMPLE_POST_AD_ENABLE && (index + 1) % 3 === 0 && <AdSlot type='in-article' />}
+                    {SIMPLE_POST_AD_ENABLE && (index + 1) === 4 && <AdSlot type='flow' />}
+                    <BlogItem post={p} />
                 </div>))}
 
             </div>
diff --git a/themes/simple/components/BlogListScroll.js b/themes/simple/components/BlogListScroll.js
index dc0b7dd3..d68745f3 100644
--- a/themes/simple/components/BlogListScroll.js
+++ b/themes/simple/components/BlogListScroll.js
@@ -1,33 +1,38 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import React from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { BlogItem } from './BlogItem'
+import { siteConfig } from '@/lib/config'
 
-export const BlogListScroll = props => {
+/**
+ * 滚动博客列表
+ * @param {*} props
+ * @returns
+ */
+export default function BlogListScroll (props) {
   const { posts } = props
   const { locale } = useGlobal()
 
-  const [page, updatePage] = React.useState(1)
+  const [page, updatePage] = useState(1)
 
   let hasMore = false
   const postsToShow = posts
-    ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+    ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page)
     : []
 
   if (posts) {
     const totalCount = posts.length
-    hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+    hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount
   }
   const handleGetMore = () => {
     if (!hasMore) return
     updatePage(page + 1)
   }
 
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   // 监听滚动自动分页加载
-  const scrollTrigger = React.useCallback(throttle(() => {
+  const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY + window.outerHeight
     const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
     if (scrollS > clientHeight + 100) {
@@ -35,7 +40,7 @@ export const BlogListScroll = props => {
     }
   }, 500))
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', scrollTrigger)
 
     return () => {
diff --git a/themes/simple/components/Catalog.js b/themes/simple/components/Catalog.js
index 54f0d69f..c84ca9b3 100644
--- a/themes/simple/components/Catalog.js
+++ b/themes/simple/components/Catalog.js
@@ -57,31 +57,33 @@ const Catalog = ({ post }) => {
   }
 
   return <div className='px-3 '>
-    <div className='dark:text-white'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
+        <div className='dark:text-white mb-2'>
+            <i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}
+        </div>
 
-    <div className='overflow-y-auto overscroll-none max-h-36 lg:max-h-96 scroll-hidden' ref={tRef}>
-      <nav className='h-full  text-black'>
-        {post?.toc?.map((tocItem) => {
-          const id = uuidToId(tocItem.id)
-          return (
-            <a
-              key={id}
-              href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
+        <div className='overflow-y-auto overscroll-none max-h-36 lg:max-h-96 scroll-hidden' ref={tRef}>
+            <nav className='h-full  text-black'>
+                {post?.toc?.map((tocItem) => {
+                  const id = uuidToId(tocItem.id)
+                  return (
+                        <a
+                            key={id}
+                            href={`#${id}`}
+                            className={`notion-table-of-contents-item duration-300 transform dark:text-gray-200
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
-            >
-              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-red-500 underline overflow-ellipsis truncate'}`}
-              >
-                {tocItem.text}
-              </span>
-            </a>
-          )
-        })}
-      </nav>
+                        >
+                            <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
+                                className={`${activeSection === id && ' font-bold text-red-600 underline overflow-ellipsis truncate'}`}
+                            >
+                                {tocItem.text}
+                            </span>
+                        </a>
+                  )
+                })}
+            </nav>
 
+        </div>
     </div>
-  </div>
 }
 
 export default Catalog
diff --git a/themes/simple/components/ExampleRecentComments.js b/themes/simple/components/ExampleRecentComments.js
index b1555c1d..7aad731b 100644
--- a/themes/simple/components/ExampleRecentComments.js
+++ b/themes/simple/components/ExampleRecentComments.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import BLOG from '@/blog.config'
 import Link from 'next/link'
 import { RecentComments } from '@waline/client'
+import { useEffect, useState } from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * @see https://waline.js.org/guide/get-started.html
@@ -9,11 +9,11 @@ import { RecentComments } from '@waline/client'
  * @returns
  */
 const ExampleRecentComments = (props) => {
-  const [comments, updateComments] = React.useState([])
-  const [onLoading, changeLoading] = React.useState(true)
-  React.useEffect(() => {
+  const [comments, updateComments] = useState([])
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
     RecentComments({
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
       count: 5
     }).then(({ comments }) => {
       changeLoading(false)
diff --git a/themes/simple/components/Footer.js b/themes/simple/components/Footer.js
index 7ebcfc32..4e3c8c45 100644
--- a/themes/simple/components/Footer.js
+++ b/themes/simple/components/Footer.js
@@ -1,28 +1,29 @@
-import BLOG from '@/blog.config'
 import DarkModeButton from '@/components/DarkModeButton'
+import { siteConfig } from '@/lib/config'
 
-export const Footer = (props) => {
+/**
+ * 页脚
+ * @param {*} props
+ * @returns
+ */
+export default function Footer (props) {
   const d = new Date()
   const currentYear = d.getFullYear()
-  const copyrightDate = (function() {
-    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
-      return BLOG.SINCE + '-' + currentYear
-    }
-    return currentYear
-  })()
+  const since = siteConfig('SINCE')
+  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return <footer className="relative w-full bg-black px-6 border-t">
         <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> */}
-                {BLOG.BEI_AN && (<a href="https://beian.miit.gov.cn/" className="text-black dark:text-gray-200 no-underline hover:underline ml-4">{BLOG.BEI_AN} </a>)}
+                {siteConfig('BEI_AN') && (<a href="https://beian.miit.gov.cn/" className="text-black dark:text-gray-200 no-underline hover:underline ml-4">{siteConfig('BEI_AN')} </a>)}
                 <span className='no-underline ml-4'>
                     Powered by
-                    <a href="https://github.com/tangly1024/NotionNext" className=' hover:underline'> NotionNext {BLOG.VERSION}  </a>
+                    <a href="https://github.com/tangly1024/NotionNext" className=' hover:underline'> NotionNext {siteConfig('VERSION')}  </a>
                 </span>
             </div>
         </div>
diff --git a/themes/simple/components/Header.js b/themes/simple/components/Header.js
index 8d98310d..96f504cf 100644
--- a/themes/simple/components/Header.js
+++ b/themes/simple/components/Header.js
@@ -1,17 +1,17 @@
-import BLOG from '@/blog.config'
 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'
+import { compressImage } from '@/lib/notion/mapImage'
 
 /**
  * 网站顶部
  * @returns
  */
-export const Header = (props) => {
+export default function Header (props) {
   const { siteInfo } = props
-  const avatar = siteInfo?.icon || BLOG.AVATAR
+  const avatar = compressImage(siteInfo?.icon || siteConfig('AVATAR'), 200)
 
   return (
         <header className="text-center justify-between items-center px-6 bg-white h-80 dark:bg-black relative z-10">
@@ -19,13 +19,13 @@ export const Header = (props) => {
                 <Link href='/'>
                     {/* 可使用一张单图作为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} />
+                        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer justify-center items-center flex'>
+                            <LazyImage priority={true} src={avatar} className='rounded-full' width={100} height={100} 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='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center' dangerouslySetInnerHTML={{ __html: CONFIG.LOGO_DESCRIPTION }} />
+                            <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: siteConfig('SIMPLE_LOGO_DESCRIPTION', null, CONFIG) }} />
                         </div>
                     </div>
                 </Link>
@@ -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('DESCRIPTION')}</div>
             </div>
         </header>
   )
diff --git a/themes/simple/components/JumpToTopButton.js b/themes/simple/components/JumpToTopButton.js
index 2ed28ab4..358c9372 100644
--- a/themes/simple/components/JumpToTopButton.js
+++ b/themes/simple/components/JumpToTopButton.js
@@ -1,5 +1,5 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
+import { useEffect, useState } from 'react'
 
 /**
  * 跳转到网页顶部
@@ -11,7 +11,7 @@ import React from 'react'
  */
 const JumpToTopButton = () => {
   const { locale } = useGlobal()
-  const [show, switchShow] = React.useState(false)
+  const [show, switchShow] = useState(false)
   const scrollListener = () => {
     const scrollY = window.pageYOffset
     const shouldShow = scrollY > 200
@@ -20,7 +20,7 @@ const JumpToTopButton = () => {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
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..b4be6381 100644
--- a/themes/simple/components/MenuItemDrop.js
+++ b/themes/simple/components/MenuItemDrop.js
@@ -15,8 +15,8 @@ export const MenuItemDrop = ({ link }) => {
             <Link
                 href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
                 className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
-                <>{link?.icon && <span className='mr-2'><i className={link.icon} /></span>}{link?.name}
-                    {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}</>
+                {link?.icon && <span className='mr-2'><i className={link.icon} /></span>}{link?.name}
+                    {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
             </Link>}
 
         {hasSubMenu && <>
@@ -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/simple/components/MenuList.js b/themes/simple/components/MenuList.js
index ba15befa..ec9700bf 100644
--- a/themes/simple/components/MenuList.js
+++ b/themes/simple/components/MenuList.js
@@ -1,5 +1,5 @@
-import BLOG from '@/blog.config'
 import Collapse from '@/components/Collapse'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
@@ -29,10 +29,10 @@ export const MenuList = ({ customNav, customMenu }) => {
   })
 
   let links = [
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('SIMPLE_MENU_SEARCH', null, CONFIG) },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('SIMPLE_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('SIMPLE_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('SIMPLE_MENU_TAG', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -40,7 +40,7 @@ export const MenuList = ({ customNav, customMenu }) => {
   }
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
     links = customMenu
   }
 
@@ -51,7 +51,7 @@ export const MenuList = ({ customNav, customMenu }) => {
   return (<>
         {/* 大屏模式菜单 */}
         <div id='nav-menu-pc' className='hidden md:flex my-auto'>
-            {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+            {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
         </div>
         {/* 移动端小屏菜单 */}
         <div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
@@ -62,7 +62,7 @@ export const MenuList = ({ customNav, customMenu }) => {
 
             <Collapse collapseRef={collapseRef} className='absolute w-full top-12 left-0' isOpen={isOpen}>
                 <div id='menu-wrap' className='bg-white dark:border-hexo-black-gray border'>
-                {links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
+                {links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
                 </div>
             </Collapse>
         </div>
diff --git a/themes/simple/components/NavBar.js b/themes/simple/components/NavBar.js
index 08506396..38df0736 100644
--- a/themes/simple/components/NavBar.js
+++ b/themes/simple/components/NavBar.js
@@ -1,5 +1,7 @@
+import { siteConfig } from '@/lib/config'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
+import { useSimpleGlobal } from '..'
 import { MenuList } from './MenuList'
 
 /**
@@ -7,12 +9,18 @@ import { MenuList } from './MenuList'
  * @param {*} props
  * @returns
  */
-export const NavBar = (props) => {
+export default function NavBar (props) {
   const [showSearchInput, changeShowSearchInput] = useState(false)
   const router = useRouter()
+  const { searchModal } = useSimpleGlobal()
 
+  // 展示搜索框
   const toggleShowSearchInput = () => {
-    changeShowSearchInput(!showSearchInput)
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal.current.openSearch()
+    } else {
+      changeShowSearchInput(!showSearchInput)
+    }
   }
 
   const onKeyUp = (e) => {
diff --git a/themes/simple/components/SideBar.js b/themes/simple/components/SideBar.js
index 44c4bd0b..980cccee 100644
--- a/themes/simple/components/SideBar.js
+++ b/themes/simple/components/SideBar.js
@@ -3,7 +3,13 @@ import Live2D from '@/components/Live2D'
 import Announcement from './Announcement'
 import Catalog from './Catalog'
 
-export const SideBar = (props) => {
+/**
+ * 侧边栏
+ * @param {*} props
+ * @returns
+ */
+let counter = 0;
+export default function SideBar (props) {
   const { notice } = props
   return (<>
 
diff --git a/themes/simple/components/SocialButton.js b/themes/simple/components/SocialButton.js
index 6a53cd70..b9def55b 100644
--- a/themes/simple/components/SocialButton.js
+++ b/themes/simple/components/SocialButton.js
@@ -1,5 +1,4 @@
-import BLOG from '@/blog.config'
-import React from 'react'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 社交联系方式按钮组
@@ -7,36 +6,36 @@ import React from 'react'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-52 justify-center flex-wrap flex'>
-    <div className='space-x-3 md:text-xl text-3xl text-gray-600 dark:text-gray-400 text-center'>
-      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+  return <div className='w-52 justify-center flex-wrap flex my-2'>
+    <div className='space-x-5 md:text-xl text-3xl text-gray-600 dark:text-gray-400 text-center'>
+      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
         <i className='fab fa-github transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
         <i className='fab fa-twitter transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
         <i className='fab fa-telegram transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
+      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
       <i className='fab fa-linkedin transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
         <i className='fab fa-weibo transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
         <i className='fab fa-instagram transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
         <i className='fas fa-envelope transform hover:scale-125 duration-150'/>
       </a>}
-      {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
         <i className='fas fa-rss transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
+      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
         <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
       </a>}
-      {BLOG.CONTACT_YOUTUBE && <a target='_blank' rel='noreferrer' title={'youtube'} href={BLOG.CONTACT_YOUTUBE} >
+      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
         <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
       </a>}
     </div>
diff --git a/themes/simple/components/Title.js b/themes/simple/components/Title.js
index e57e2347..151d736e 100644
--- 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('DESCRIPTION')
+  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>
diff --git a/themes/simple/components/TopBar.js b/themes/simple/components/TopBar.js
index eca11258..e9224de8 100644
--- a/themes/simple/components/TopBar.js
+++ b/themes/simple/components/TopBar.js
@@ -1,14 +1,17 @@
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 网站顶部 提示栏
  * @returns
  */
-export const TopBar = (props) => {
-  if (CONFIG.TOP_BAR_CONTENT) {
+export default function TopBar (props) {
+  const content = siteConfig('SIMPLE_TOP_BAR_CONTENT', null, CONFIG)
+
+  if (content) {
     return <header className="flex justify-center items-center bg-black dark:bg-hexo-black-gray">
        <div id='top-bar-inner' className='max-w-9/10 w-full z-20'>
-       <div className='text-xs text-center float-left text-white z-50 leading-5 py-2.5' dangerouslySetInnerHTML={{ __html: CONFIG.TOP_BAR_CONTENT }}/>
+       <div className='text-xs text-center float-left text-white z-50 leading-5 py-2.5' dangerouslySetInnerHTML={{ __html: content }}/>
        </div>
     </header>
   }
diff --git a/themes/simple/config.js b/themes/simple/config.js
index 4e4804bd..bbacb396 100644
--- a/themes/simple/config.js
+++ b/themes/simple/config.js
@@ -1,16 +1,20 @@
 const CONFIG = {
 
-  LOGO_IMG: '/Logo.webp',
-  TOP_BAR: true, // 显示顶栏
-  TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '',
-  LOGO_DESCRIPTION: process.env.NEXT_PUBLIC_THEME_SIMPLE_LOGO_DESCRIPTION || '<div>编程爱好者<br/>/互联网从业者<br/>/知识分享博主</div>',
+  SIMPLE_LOGO_IMG: '/Logo.webp',
+  SIMPLE_TOP_BAR: true, // 显示顶栏
+  SIMPLE_TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '',
+  SIMPLE_LOGO_DESCRIPTION: process.env.NEXT_PUBLIC_THEME_SIMPLE_LOGO_DESCRIPTION || '<div>编程爱好者<br/>/互联网从业者<br/>/知识分享博主</div>',
 
-  AUTHOR_LINK: process.env.NEXT_PUBLIC_AUTHOR_LINK || '#',
+  SIMPLE_AUTHOR_LINK: process.env.NEXT_PUBLIC_AUTHOR_LINK || '#',
+
+  SIMPLE_POST_AD_ENABLE: process.env.NEXT_PUBLIC_SIMPLE_POST_AD_ENABLE || false, // 文章列表是否插入广告
+
+  SIMPLE_POST_COVER_ENABLE: process.env.NEXT_PUBLIC_SIMPLE_POST_COVER_ENABLE || false, // 是否展示博客封面
 
   // 菜单配置
-  MENU_CATEGORY: true, // 显示分类
-  MENU_TAG: true, // 显示标签
-  MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: true // 显示搜索
+  SIMPLE_MENU_CATEGORY: true, // 显示分类
+  SIMPLE_MENU_TAG: true, // 显示标签
+  SIMPLE_MENU_ARCHIVE: true, // 显示归档
+  SIMPLE_MENU_SEARCH: true // 显示搜索
 }
 export default CONFIG
diff --git a/themes/simple/index.js b/themes/simple/index.js
index 03dd521d..c4a705a7 100644
--- a/themes/simple/index.js
+++ b/themes/simple/index.js
@@ -1,30 +1,39 @@
 import CONFIG from './config'
-import { BlogListPage } from './components/BlogListPage'
-import { BlogListScroll } from './components/BlogListScroll'
-import { useEffect } from 'react'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
-import BlogArchiveItem from './components/BlogArchiveItem'
-import { ArticleLock } from './components/ArticleLock'
-import NotionPage from '@/components/NotionPage'
-import { ArticleInfo } from './components/ArticleInfo'
-import Comment from '@/components/Comment'
-import ArticleAround from './components/ArticleAround'
-import ShareBar from '@/components/ShareBar'
-import { AdSlot } from '@/components/GoogleAdsense'
-import Link from 'next/link'
-import { TopBar } from './components/TopBar'
-import { Header } from './components/Header'
-import { NavBar } from './components/NavBar'
-import BLOG from '@/blog.config'
-import { SideBar } from './components/SideBar'
-import JumpToTopButton from './components/JumpToTopButton'
-import { Footer } from './components/Footer'
+import { createContext, useContext, useEffect, useRef } from 'react'
+import { isBrowser } from '@/lib/utils'
 import { useGlobal } from '@/lib/global'
-import SearchInput from './components/SearchInput'
+import { AdSlot } from '@/components/GoogleAdsense'
+import { siteConfig } from '@/lib/config'
 import { Transition } from '@headlessui/react'
+import Link from 'next/link'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
-import CommonHead from '@/components/CommonHead'
+import dynamic from 'next/dynamic'
+import NotionPage from '@/components/NotionPage'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+
+// 主题组件
+const BlogListScroll = dynamic(() => import('./components/BlogListScroll'), { ssr: false });
+const BlogArchiveItem = dynamic(() => import('./components/BlogArchiveItem'), { ssr: false });
+const ArticleLock = dynamic(() => import('./components/ArticleLock'), { ssr: false });
+const ArticleInfo = dynamic(() => import('./components/ArticleInfo'), { ssr: false });
+const Comment = dynamic(() => import('@/components/Comment'), { ssr: false });
+const ArticleAround = dynamic(() => import('./components/ArticleAround'), { ssr: false });
+const ShareBar = dynamic(() => import('@/components/ShareBar'), { ssr: false });
+const TopBar = dynamic(() => import('./components/TopBar'), { ssr: false });
+const Header = dynamic(() => import('./components/Header'), { ssr: false });
+const NavBar = dynamic(() => import('./components/NavBar'), { ssr: false });
+const SideBar = dynamic(() => import('./components/SideBar'), { ssr: false });
+const JumpToTopButton = dynamic(() => import('./components/JumpToTopButton'), { ssr: false });
+const Footer = dynamic(() => import('./components/Footer'), { ssr: false });
+const SearchInput = dynamic(() => import('./components/SearchInput'), { ssr: false });
+const CommonHead = dynamic(() => import('@/components/CommonHead'), { ssr: false });
+const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false });
+const BlogListPage = dynamic(() => import('./components/BlogListPage'), { ssr: false })
+
+// 主题全局状态
+const ThemeGlobalSimple = createContext()
+export const useSimpleGlobal = () => useContext(ThemeGlobalSimple)
 
 /**
  * 基础布局
@@ -34,18 +43,17 @@ import CommonHead from '@/components/CommonHead'
  */
 const LayoutBase = props => {
   const { children, slotTop, meta } = props
-  const { onLoading } = useGlobal()
+  const { onLoading, fullWidth } = useGlobal()
+  const searchModal = useRef(null)
 
-  if (isBrowser) {
-    loadExternalResource('/css/theme-simple.css', 'css')
-  }
   return (
+    <ThemeGlobalSimple.Provider value={{ searchModal }}>
         <div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black'>
             {/* SEO相关 */}
             <CommonHead meta={meta}/>
             <Style/>
 
-            {CONFIG.TOP_BAR && <TopBar {...props} />}
+            {siteConfig('SIMPLE_TOP_BAR', null, CONFIG) && <TopBar {...props} />}
 
             {/* 顶部LOGO */}
             <Header {...props} />
@@ -54,7 +62,7 @@ const LayoutBase = props => {
             <NavBar {...props} />
 
             {/* 主体 */}
-            <div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
+            <div id='container-wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' w-full flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
                 <div id='container-inner ' className='w-full flex-grow min-h-fit'>
                     <Transition
                         show={!onLoading}
@@ -74,9 +82,11 @@ const LayoutBase = props => {
                     <AdSlot type='native' />
                 </div>
 
-                <div id='right-sidebar' className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
-                    <SideBar {...props} />
-                </div>
+              {fullWidth
+                ? null
+                : <div id='right-sidebar' className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
+              <SideBar {...props} />
+              </div>}
 
             </div>
 
@@ -84,9 +94,13 @@ const LayoutBase = props => {
                 <JumpToTopButton />
             </div>
 
+              {/* 搜索框 */}
+              <AlgoliaSearchModal cRef={searchModal} {...props}/>
+
             <Footer {...props} />
 
         </div>
+    </ThemeGlobalSimple.Provider>
   )
 }
 
@@ -106,9 +120,9 @@ const LayoutIndex = props => {
  */
 const LayoutPostList = props => {
   return (
-        <LayoutBase {...props}>
-            {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-        </LayoutBase>
+        <>
+            {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
+        </>
   )
 }
 
@@ -134,7 +148,9 @@ const LayoutSearch = props => {
     }
   }, [])
 
-  return <LayoutPostList {...props} slotTop={<SearchInput {...props} />} />
+  const slotTop = siteConfig('ALGOLIA_APP_ID') ? null : <SearchInput {...props} />
+
+  return <LayoutPostList {...props} slotTop={slotTop} />
 }
 
 /**
@@ -145,11 +161,11 @@ const LayoutSearch = props => {
 const LayoutArchive = props => {
   const { archivePosts } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
                 {Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -160,19 +176,21 @@ const LayoutArchive = props => {
  */
 const LayoutSlug = props => {
   const { post, lock, validPassword, prev, next } = props
+  const { fullWidth } = useGlobal()
 
   return (
-        <LayoutBase {...props}>
+        <>
 
             {lock && <ArticleLock validPassword={validPassword} />}
 
-            <div id="article-wrapper" className="px-2 xl:max-w-4xl 2xl:max-w-6xl ">
+            <div id="article-wrapper" className={`px-2  ${fullWidth ? '' : 'xl:max-w-4xl 2xl:max-w-6xl'}`}>
 
                 {/* 文章信息 */}
                 <ArticleInfo post={post} />
 
                 {/* 广告嵌入 */}
-                <AdSlot type={'in-article'} />
+                {/* <AdSlot type={'in-article'} /> */}
+                <WWAds orientation="horizontal" className="w-full" />
 
                 {/* Notion文章主体 */}
                 {!lock && <NotionPage post={post} />}
@@ -190,7 +208,7 @@ const LayoutSlug = props => {
 
             </div>
 
-        </LayoutBase>
+        </>
   )
 }
 
@@ -200,9 +218,9 @@ const LayoutSlug = props => {
  * @returns
  */
 const Layout404 = (props) => {
-  return <LayoutBase {...props}>
+  return <>
         404 Not found.
-    </LayoutBase>
+    </>
 }
 
 /**
@@ -213,7 +231,7 @@ const Layout404 = (props) => {
 const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div id='category-list' className='duration-200 flex flex-wrap'>
                 {categoryOptions?.map(category => {
                   return (
@@ -230,7 +248,7 @@ const LayoutCategoryIndex = props => {
                   )
                 })}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
@@ -242,7 +260,7 @@ const LayoutCategoryIndex = props => {
 const LayoutTagIndex = (props) => {
   const { tagOptions } = props
   return (
-        <LayoutBase {...props}>
+        <>
             <div id='tags-list' className='duration-200 flex flex-wrap'>
                 {tagOptions.map(tag => {
                   return (
@@ -258,12 +276,13 @@ const LayoutTagIndex = (props) => {
                   )
                 })}
             </div>
-        </LayoutBase>
+        </>
   )
 }
 
 export {
   CONFIG as THEME_CONFIG,
+  LayoutBase,
   LayoutIndex,
   LayoutSearch,
   LayoutArchive,
@@ -271,5 +290,5 @@ export {
   Layout404,
   LayoutCategoryIndex,
   LayoutPostList,
-  LayoutTagIndex
+  LayoutTagIndex,
 }
diff --git a/themes/theme.js b/themes/theme.js
index f03f3fe6..9261749e 100644
--- a/themes/theme.js
+++ b/themes/theme.js
@@ -1,24 +1,65 @@
 import cookie from 'react-cookies'
 import BLOG from '@/blog.config'
-import { getQueryParam, getQueryVariable } from '../lib/utils'
+import { getQueryParam, getQueryVariable, isBrowser } from '../lib/utils'
 import dynamic from 'next/dynamic'
 import getConfig from 'next/config'
 import * as ThemeComponents from '@theme-components'
 // 所有主题在next.config.js中扫描
 export const { THEMES = [] } = getConfig().publicRuntimeConfig
+
+/**
+ * 加载全局布局
+ * 如果是
+ * @param {*} themeQuery
+ * @returns
+ */
+export const getGlobalLayoutByTheme = (themeQuery) => {
+    const layout = getLayoutNameByPath(-1)
+    if (themeQuery !== BLOG.THEME) {
+        return dynamic(() => import(`@/themes/${themeQuery}`).then(m => m[layout]), { ssr: true })
+      } else {
+        return ThemeComponents[layout]
+      }
+  }
+
 /**
  * 加载主题文件
  * 如果是
  * @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 => {
+      setTimeout(() => {
+        checkThemeDOM()
+      }, 500);
+      return m[layoutName]
+    }), { ssr: true })
   } else {
-    return ThemeComponents[layout]
+    setTimeout(() => {
+      checkThemeDOM()
+    }, 100);
+    return ThemeComponents[layoutName]
+  }
+}
+
+/**
+ * 切换主题时的特殊处理
+ */
+const checkThemeDOM = () => {
+  if (isBrowser) {
+    const elements = document.querySelectorAll('[id^="theme-"]')
+    if (elements?.length > 1) {
+      elements[elements.length - 1].scrollIntoView()
+      // 删除前面的元素，只保留最后一个元素
+      for (let i = 0; i < elements.length - 1; i++) {
+        elements[i].parentNode.removeChild(elements[i])
+      }
+    }
   }
 }
 
@@ -29,6 +70,8 @@ export const getLayoutByTheme = (router) => {
  */
 export const getLayoutNameByPath = (path) => {
   switch (path) {
+    case -1:
+        return 'LayoutBase'
     case '/':
       return 'LayoutIndex'
     case '/archive':