diff --git a/.env.local b/.env.local
index 314ae9ad..3b00243c 100644
--- a/.env.local
+++ b/.env.local
@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.5.3
+NEXT_PUBLIC_VERSION=4.6.1
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可
diff --git a/README_EN.md b/README_EN.md
index dbb75684..dd4063e5 100644
--- a/README_EN.md
+++ b/README_EN.md
@@ -35,15 +35,15 @@ Live Demo：[https://preview.tangly1024.com/](https://preview.tangly1024.com/) 
 
 It only takes a few minutes to set up your personal site:
 
-- [Quick Deployment Tutorial - Multiple Options Available](https://tangly1024.com/article/notion-next) 
+- [Quick Deployment Tutorial - Multiple Options Available](https://docs.tangly1024.com/article/vercel-deploy-notion-next) 
 
-- [Customization Guide - How to Configure Feature Plugins](https://tangly1024.com/article/notion-next-guide) 
+- [Customization Guide - How to Configure Feature Plugins](https://docs.tangly1024.com/article/how-to-config-notion-next) 
 
-- [Development Guide - How to Conduct Local Development](https://tangly1024.com/article/how-to-develop-with-notion-next)
+- [Development Guide - How to Conduct Local Development](https://docs.tangly1024.com/article/how-to-develop-with-notion-next)
  
-- [Update Guide - How to Get the Latest Upgrade Patch](https://tangly1024.com/article/how-to-update-notionnext)
+- [Update Guide - How to Get the Latest Upgrade Patch](https://docs.tangly1024.com/article/how-to-update-notionnext)
 
-- [Version History - Check Feature Highlights for Each Version](https://tangly1024.com/article/notion-next-changelogs)
+- [Version History - Check Feature Highlights for Each Version](https://docs.tangly1024.com/article/latest)
 
 ## Acknowledgements
 
diff --git a/blog.config.js b/blog.config.js
index 3a30ddea..7a2c2678 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -13,6 +13,7 @@ const BLOG = {
   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时关闭根据时间自动切换夜间模式
 
+  TAG_SORT_BY_COUNT: true, // 标签是否按照文章数量倒序排列，文章多的标签排在前。
   IS_TAG_COLOR_DISTINGUISHED:
     process.env.NEXT_PUBLIC_IS_TAG_COLOR_DISTINGUISHED === 'true' || true, // 对于名称相同的tag是否区分tag的颜色
 
@@ -38,6 +39,9 @@ const BLOG = {
   CONTACT_INSTAGRAM: process.env.NEXT_PUBLIC_CONTACT_INSTAGRAM || '', // 您的instagram地址
   CONTACT_BILIBILI: process.env.NEXT_PUBLIC_CONTACT_BILIBILI || '', // B站主页
   CONTACT_YOUTUBE: process.env.NEXT_PUBLIC_CONTACT_YOUTUBE || '', // Youtube主页
+  CONTACT_XIAOHONGSHU: process.env.NEXT_PUBLIC_CONTACT_XIAOHONGSHU || '', // 小红书主页
+  CONTACT_ZHISHIXINGQIU: process.env.NEXT_PUBLIC_CONTACT_ZHISHIXINGQIU || '', // 知识星球
+  CONTACT_WEHCHAT_PUBLIC: process.env.NEXT_PUBLIC_CONTACT_WEHCHAT_PUBLIC || '', // 微信公众号 格式：https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=【xxxxxx】==#wechat_redirect
 
   NOTION_HOST: process.env.NEXT_PUBLIC_NOTION_HOST || 'https://www.notion.so', // Notion域名，您可以选择用自己的域名进行反向代理，如果不懂得什么是反向代理，请勿修改此项
 
@@ -204,9 +208,10 @@ const BLOG = {
     'link,wechat,qq,weibo,email,facebook,twitter,telegram,messenger,line,reddit,whatsapp,linkedin', // 分享的服務，按顺序显示,逗号隔开
   // 所有支持的分享服务：link(复制链接),wechat(微信),qq,weibo(微博),email(邮件),facebook,twitter,telegram,messenger,line,reddit,whatsapp,linkedin,vkshare,okshare,tumblr,livejournal,mailru,viber,workplace,pocket,instapaper,hatena
 
-  POST_URL_PREFIX: process.env.NEXT_PUBLIC_POST_URL_PREFIX || 'article',
+  // 文章URL前缀
+  POST_URL_PREFIX: process.env.NEXT_PUBLIC_POST_URL_PREFIX ?? 'article',
   // POST类型文章的默认路径前缀，例如默认POST类型的路径是  /article/[slug]
-  // 如果此项配置为 '' 空， 则文章将没有前缀路径，使用场景： 希望文章前缀路径为 /post 的情况 支持多级
+  // 如果此项配置为 '' 空， 则文章将没有前缀路径
   // 支援類似 WP 可自訂文章連結格式的功能：https://wordpress.org/documentation/article/customize-permalinks/，目前只先實作 %year%/%month%/%day%
   // 例：如想連結改成前綴 article + 時間戳記，可變更為： 'article/%year%/%month%/%day%'
 
@@ -540,7 +545,7 @@ const BLOG = {
     process.env.ENABLE_CACHE ||
     process.env.npm_lifecycle_event === 'build' ||
     process.env.npm_lifecycle_event === 'export', // 在打包过程中默认开启缓存，开发或运行时开启此功能意义不大。
-  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' || process.env.EXPORT, // 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
index 076ab379..7d246def 100644
--- a/components/AOSAnimation.js
+++ b/components/AOSAnimation.js
@@ -10,14 +10,8 @@ import { useEffect } from 'react'
 export default function AOSAnimation() {
   const initAOS = async () => {
     Promise.all([
-      loadExternalResource(
-        'https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js',
-        'js'
-      ),
-      loadExternalResource(
-        'https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css',
-        'css'
-      )
+      loadExternalResource('/js/aos.js', 'js'),
+      loadExternalResource('/css/aos.css', 'css')
     ]).then(() => {
       if (window.AOS) {
         window.AOS.init()
diff --git a/components/AlgoliaSearchModal.js b/components/AlgoliaSearchModal.js
index ea727a48..eac9d8bf 100644
--- a/components/AlgoliaSearchModal.js
+++ b/components/AlgoliaSearchModal.js
@@ -1,11 +1,18 @@
-import { useState, useImperativeHandle, useRef, useEffect, Fragment } from 'react'
-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'
-import { useHotkeys } from 'react-hotkeys-hook';
+import { useGlobal } from '@/lib/global'
+import algoliasearch from 'algoliasearch'
+import throttle from 'lodash/throttle'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import {
+  Fragment,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 const ShortCutActions = [
   {
@@ -20,7 +27,6 @@ const ShortCutActions = [
     key: 'Esc',
     action: '关闭'
   }
-
 ]
 
 /**
@@ -36,31 +42,49 @@ export default function AlgoliaSearchModal({ cRef }) {
   const [totalPage, setTotalPage] = useState(0)
   const [totalHit, setTotalHit] = useState(0)
   const [useTime, setUseTime] = useState(0)
-  const inputRef = useRef(null)
   const [activeIndex, setActiveIndex] = useState(0)
   const [isLoading, setIsLoading] = useState(false)
-  useHotkeys('ctrl+k', (e) => {
+  const inputRef = useRef(null)
+  const router = useRouter()
+
+  /**
+   * 快捷键设置
+   */
+  useHotkeys('ctrl+k', e => {
     e.preventDefault()
     setIsModalOpen(true)
   })
   // 方向键调整选中
-  useHotkeys('down', (e) => {
-    e.preventDefault()
-    if (activeIndex < searchResults.length - 1) {
-      setActiveIndex(activeIndex + 1)
-    }
-  }, { enableOnFormTags: true })
-  useHotkeys('up', (e) => {
-    e.preventDefault()
-    if (activeIndex > 0) {
-      setActiveIndex(activeIndex - 1)
-    }
-  }, { enableOnFormTags: true })
+  useHotkeys(
+    'down',
+    e => {
+      e.preventDefault()
+      if (activeIndex < searchResults.length - 1) {
+        setActiveIndex(activeIndex + 1)
+      }
+    },
+    { enableOnFormTags: true }
+  )
+  useHotkeys(
+    'up',
+    e => {
+      e.preventDefault()
+      if (activeIndex > 0) {
+        setActiveIndex(activeIndex - 1)
+      }
+    },
+    { enableOnFormTags: true }
+  )
   // esc关闭
-  useHotkeys('esc', (e) => {
-    e.preventDefault()
-    setIsModalOpen(false)
-  }, { enableOnFormTags: true })
+  useHotkeys(
+    'esc',
+    e => {
+      e.preventDefault()
+      setIsModalOpen(false)
+    },
+    { enableOnFormTags: true }
+  )
+
   // 跳转Search结果
   const onJumpSearchResult = () => {
     if (searchResults.length > 0) {
@@ -68,11 +92,15 @@ export default function AlgoliaSearchModal({ cRef }) {
     }
   }
   // enter跳转
-  useHotkeys('enter', (e) => {
-    if (searchResults.length > 0) {
-      onJumpSearchResult(index)
-    }
-  }, { enableOnFormTags: true })
+  useHotkeys(
+    'enter',
+    e => {
+      if (searchResults.length > 0) {
+        onJumpSearchResult(index)
+      }
+    },
+    { enableOnFormTags: true }
+  )
 
   const resetSearch = () => {
     setActiveIndex(0)
@@ -84,6 +112,16 @@ export default function AlgoliaSearchModal({ cRef }) {
     if (inputRef.current) inputRef.current.value = ''
   }
 
+  /**
+   * 页面路径变化后，自动关闭此modal
+   */
+  useEffect(() => {
+    setIsModalOpen(false)
+  }, [router])
+
+  /**
+   * 自动聚焦搜索框
+   */
   useEffect(() => {
     if (isModalOpen) {
       setTimeout(() => {
@@ -93,9 +131,10 @@ export default function AlgoliaSearchModal({ cRef }) {
       resetSearch()
     }
   }, [isModalOpen])
+
   /**
-     * 对外暴露方法
-     */
+   * 对外暴露方法
+   **/
   useImperativeHandle(cRef, () => {
     return {
       openSearch: () => {
@@ -104,7 +143,10 @@ export default function AlgoliaSearchModal({ cRef }) {
     }
   })
 
-  const client = algoliasearch(siteConfig('ALGOLIA_APP_ID'), siteConfig('ALGOLIA_SEARCH_ONLY_APP_KEY'))
+  const client = algoliasearch(
+    siteConfig('ALGOLIA_APP_ID'),
+    siteConfig('ALGOLIA_SEARCH_ONLY_APP_KEY')
+  )
   const index = client.initIndex(siteConfig('ALGOLIA_INDEX'))
 
   /**
@@ -131,7 +173,9 @@ export default function AlgoliaSearchModal({ cRef }) {
       setTotalHit(nbHits)
       setSearchResults(hits)
       setIsLoading(false)
-      const doms = document.getElementById('search-wrapper').getElementsByClassName('replace')
+      const doms = document
+        .getElementById('search-wrapper')
+        .getElementsByClassName('replace')
 
       setTimeout(() => {
         replaceSearchResult({
@@ -149,33 +193,35 @@ export default function AlgoliaSearchModal({ cRef }) {
   }
 
   // 定义节流函数，确保在用户停止输入一段时间后才会调用处理搜索的方法
-  const throttledHandleInputChange = useRef(throttle((query, page = 0) => {
-    handleSearch(query, page);
-  }, 1000));
+  const throttledHandleInputChange = useRef(
+    throttle((query, page = 0) => {
+      handleSearch(query, page)
+    }, 1000)
+  )
 
   // 用于存储搜索延迟的计时器
-  const searchTimer = useRef(null);
+  const searchTimer = useRef(null)
 
   // 修改input的onChange事件处理函数
-  const handleInputChange = (e) => {
-    const query = e.target.value;
+  const handleInputChange = e => {
+    const query = e.target.value
 
     // 如果已经有计时器在等待搜索，先清除之前的计时器
     if (searchTimer.current) {
-      clearTimeout(searchTimer.current);
+      clearTimeout(searchTimer.current)
     }
 
     // 设置新的计时器，在用户停止输入一段时间后触发搜索
     searchTimer.current = setTimeout(() => {
-      throttledHandleInputChange.current(query);
-    }, 800);
-  };
+      throttledHandleInputChange.current(query)
+    }, 800)
+  }
 
   /**
    * 切换页码
    * @param {*} page
    */
-  const switchPage = (page) => {
+  const switchPage = page => {
     throttledHandleInputChange.current(keyword, page)
   }
 
@@ -191,58 +237,58 @@ export default function AlgoliaSearchModal({ cRef }) {
   }
   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 sm:mt-12 flex items-start justify-center mt-0`}
-    >
+      id='search-wrapper'
+      className={`${
+        isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none'
+      } z-30 fixed h-screen w-screen left-0 top-0 sm:mt-12 flex items-start justify-center mt-0`}>
       {/* 模态框 */}
       <div
-        className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10'
-          } flex flex-col justify-between w-full min-h-[10rem] h-full md:h-fit 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 dark:text-yellow-600 font-bold">搜索</div>
+        className={`${
+          isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10'
+        } flex flex-col justify-between w-full min-h-[10rem] h-full md:h-fit 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 dark:text-yellow-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>
+              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="在这里输入搜索关键词..."
+          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"
+          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'
           ref={inputRef}
         />
 
         {/* 标签组 */}
-        <div className="mb-4">
+        <div className='mb-4'>
           <TagGroups />
         </div>
-        {
-          searchResults.length === 0 && keyword && !isLoading && (
-            <div>
-              <p className=" text-slate-600 text-center my-4 text-base"> 无法找到相关结果
-                <span
-                  className='font-semibold'
-                >&quot;{keyword}&quot;</span></p>
-            </div>
-          )
-        }
+        {searchResults.length === 0 && keyword && !isLoading && (
+          <div>
+            <p className=' text-slate-600 text-center my-4 text-base'>
+              {' '}
+              无法找到相关结果
+              <span className='font-semibold'>&quot;{keyword}&quot;</span>
+            </p>
+          </div>
+        )}
         <ul className='flex-1 overflow-auto'>
           {searchResults.map((result, index) => (
-            <li key={result.objectID}
+            <li
+              key={result.objectID}
               onMouseEnter={() => setActiveIndex(index)}
               onClick={() => onJumpSearchResult(index)}
               className={`cursor-pointer replace my-2 p-2 duration-100 
               rounded-lg
               ${activeIndex === index ? 'bg-blue-600 dark:bg-yellow-600' : ''}`}>
               <a
-                className={`${activeIndex === index ? ' text-white' : ' text-black dark:text-gray-300 '}`}
-              >
+                className={`${activeIndex === index ? ' text-white' : ' text-black dark:text-gray-300 '}`}>
                 {result.title}
               </a>
             </li>
@@ -250,15 +296,22 @@ export default function AlgoliaSearchModal({ cRef }) {
         </ul>
         <Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
         <div className='flex items-center justify-between mt-2 sm:text-sm text-xs dark:text-gray-300'>
-          {totalHit === 0 && (<div className='flex items-center'>
-            {
-              ShortCutActions.map((action, index) => {
-                return <Fragment key={index}><div className='border-gray-300 dark:text-gray-300 text-gray-600 px-2 rounded border inline-block'>{action.key}</div>
-                  <span className='ml-2 mr-4  text-gray-600 dark:text-gray-300'>{action.action}</span></Fragment>
-              })
-            }
-          </div>)
-          }
+          {totalHit === 0 && (
+            <div className='flex items-center'>
+              {ShortCutActions.map((action, index) => {
+                return (
+                  <Fragment key={index}>
+                    <div className='border-gray-300 dark:text-gray-300 text-gray-600 px-2 rounded border inline-block'>
+                      {action.key}
+                    </div>
+                    <span className='ml-2 mr-4  text-gray-600 dark:text-gray-300'>
+                      {action.action}
+                    </span>
+                  </Fragment>
+                )
+              })}
+            </div>
+          )}
           <div>
             {totalHit > 0 && (
               <p>
@@ -266,19 +319,18 @@ export default function AlgoliaSearchModal({ cRef }) {
               </p>
             )}
           </div>
-          <div className="text-gray-600 dark:text-gray-300  text-right">
-            <span >
-              <i className="fa-brands fa-algolia"></i> Algolia 提供搜索服务
+          <div className='text-gray-600 dark:text-gray-300  text-right'>
+            <span>
+              <i className='fa-brands fa-algolia'></i> Algolia 提供搜索服务
             </span>
           </div>
         </div>
-
       </div>
 
       {/* 遮罩 */}
       <div
         onClick={closeModal}
-        className="z-30 fixed top-0 left-0 w-full h-full flex items-center justify-center glassmorphism"
+        className='z-30 fixed top-0 left-0 w-full h-full flex items-center justify-center glassmorphism'
       />
     </div>
   )
@@ -292,21 +344,31 @@ function TagGroups() {
   //  获取tagOptions数组前十个
   const firstTenTags = tagOptions?.slice(0, 10)
 
-  return <div id='tags-group' className='dark:border-gray-700 space-y-2'>
-    {
-      firstTenTags?.map((tag, index) => {
-        return <Link passHref
-          key={index}
-          href={`/tag/${encodeURIComponent(tag.name)}`}
-          className={'cursor-pointer inline-block whitespace-nowrap'}>
-          <div className={'flex items-center text-black dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-yellow-600 hover:scale-110 hover:text-white rounded-lg px-2 py-0.5 duration-150 transition-all'}>
-            <div className='text-lg'>{tag.name} </div>{tag.count ? <sup className='relative ml-1'>{tag.count}</sup> : <></>}
-          </div>
-
-        </Link>
-      })
-    }
-  </div>
+  return (
+    <div id='tags-group' className='dark:border-gray-700 space-y-2'>
+      {firstTenTags?.map((tag, index) => {
+        return (
+          <Link
+            passHref
+            key={index}
+            href={`/tag/${encodeURIComponent(tag.name)}`}
+            className={'cursor-pointer inline-block whitespace-nowrap'}>
+            <div
+              className={
+                'flex items-center text-black dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-yellow-600 hover:scale-110 hover:text-white rounded-lg px-2 py-0.5 duration-150 transition-all'
+              }>
+              <div className='text-lg'>{tag.name} </div>
+              {tag.count ? (
+                <sup className='relative ml-1'>{tag.count}</sup>
+              ) : (
+                <></>
+              )}
+            </div>
+          </Link>
+        )
+      })}
+    </div>
+  )
 }
 
 /**
@@ -321,16 +383,16 @@ function Pagination(props) {
   return (
     <div className='flex space-x-1 w-full justify-center py-1'>
       {Array.from({ length: totalPage }, (_, i) => {
-        const classNames = page === i
-          ? 'font-bold text-white bg-blue-600 dark:bg-yellow-600 rounded'
-          : 'hover:text-blue-600 hover:font-bold dark:text-gray-300'
+        const classNames =
+          page === i
+            ? 'font-bold text-white bg-blue-600 dark:bg-yellow-600 rounded'
+            : 'hover:text-blue-600 hover:font-bold dark:text-gray-300'
 
         return (
           <div
             onClick={() => switchPage(i)}
             className={`text-center cursor-pointer w-6 h-6 ${classNames}`}
-            key={i}
-          >
+            key={i}>
             {i + 1}
           </div>
         )
diff --git a/components/Comment.js b/components/Comment.js
index ba0d4256..fce7078d 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -121,6 +121,11 @@ const Comment = ({ frontMatter, className }) => {
     return null
   }
 
+  // 特定文章关闭评论区
+  if (frontMatter?.comment === 'Hide') {
+    return null
+  }
+
   return (
     <div
       key={frontMatter?.id}
diff --git a/components/CustomContextMenu.js b/components/CustomContextMenu.js
index 282c9244..19b65395 100644
--- a/components/CustomContextMenu.js
+++ b/components/CustomContextMenu.js
@@ -1,10 +1,10 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect, useState, useRef, useLayoutEffect } from 'react'
-import { useGlobal } from '@/lib/global'
-import { saveDarkModeToLocalStorage, THEMES } from '@/themes/theme'
 import useWindowSize from '@/hooks/useWindowSize'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { THEMES, saveDarkModeToLocalStorage } from '@/themes/theme'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 
 /**
  * 自定义右键菜单
@@ -20,14 +20,14 @@ export default function CustomContextMenu(props) {
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
 
-  const { latestPosts } = props
+  const { allNavPages } = props
   const router = useRouter()
   /**
    * 随机跳转文章
    */
   function handleJumpToRandomPost() {
-    const randomIndex = Math.floor(Math.random() * latestPosts.length)
-    const randomPost = latestPosts[randomIndex]
+    const randomIndex = Math.floor(Math.random() * allNavPages.length)
+    const randomPost = allNavPages[randomIndex]
     router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
   }
 
@@ -37,19 +37,30 @@ export default function CustomContextMenu(props) {
   }, [])
 
   useEffect(() => {
-    const handleContextMenu = (event) => {
+    setShow(false)
+  }, [router])
+
+  useEffect(() => {
+    const handleContextMenu = event => {
       event.preventDefault()
       // 计算点击位置加菜单宽高是否超出屏幕，如果超出则贴边弹出
-      const x = (event.clientX < windowSize.width - width) ? event.clientX : windowSize.width - width
-      const y = (event.clientY < windowSize.height - height) ? event.clientY : windowSize.height - height
+      const x =
+        event.clientX < windowSize.width - width
+          ? event.clientX
+          : windowSize.width - width
+      const y =
+        event.clientY < windowSize.height - height
+          ? event.clientY
+          : windowSize.height - height
       setPosition({ y: `${y}px`, x: `${x}px` })
       setShow(true)
     }
 
-    const handleClick = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setShow(false)
-      }
+    /**
+     * 鼠标点击即关闭菜单
+     */
+    const handleClick = event => {
+      setShow(false)
     }
 
     window.addEventListener('contextmenu', handleContextMenu)
@@ -75,24 +86,24 @@ export default function CustomContextMenu(props) {
 
   function handleScrollTop() {
     window.scrollTo({ top: 0, behavior: 'smooth' })
-    setShow(false)
   }
 
   function handleCopyLink() {
     const url = window.location.href
-    navigator.clipboard.writeText(url)
+    navigator.clipboard
+      .writeText(url)
       .then(() => {
-        console.log('页面地址已复制')
+        // console.log('页面地址已复制')
+        alert(`${locale.COMMON.PAGE_URL_COPIED} : ${url}`)
       })
-      .catch((error) => {
+      .catch(error => {
         console.error('复制页面地址失败:', error)
       })
-    setShow(false)
   }
 
   /**
-  * 切换主题
-  */
+   * 切换主题
+   */
   function handleChangeTheme() {
     const randomTheme = THEMES[Math.floor(Math.random() * THEMES.length)] // 从THEMES数组中 随机取一个主题
     const query = router.query
@@ -104,7 +115,7 @@ export default function CustomContextMenu(props) {
    * 复制内容
    */
   function handleCopy() {
-    const selectedText = document.getSelection().toString();
+    const selectedText = document.getSelection().toString()
     if (selectedText) {
       const tempInput = document.createElement('input');
       tempInput.value = selectedText;
@@ -118,8 +129,6 @@ export default function CustomContextMenu(props) {
     } else {
       // alert("Please select some text first.");
     }
-
-    setShow(false)
   }
 
   function handleChangeDarkMode() {
@@ -131,77 +140,140 @@ export default function CustomContextMenu(props) {
     htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
+  // 一些配置变量
+  const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST = siteConfig(
+    'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST'
+  )
+  const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY = siteConfig(
+    'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY'
+  )
+  const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG = siteConfig(
+    'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG'
+  )
+  const CAN_COPY = siteConfig('CAN_COPY')
+  const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK = siteConfig(
+    'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK'
+  )
+  const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE = siteConfig(
+    'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE'
+  )
+  const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH = siteConfig(
+    'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH'
+  )
   return (
-        <div
-            ref={menuRef}
-            style={{ top: position.y, left: position.x }}
-            className={`${show ? '' : 'invisible opacity-0'} select-none transition-opacity duration-200 fixed z-50`}
-        >
+    <div
+      ref={menuRef}
+      style={{ top: position.y, left: position.x }}
+      className={`${show ? '' : 'invisible opacity-0'} select-none transition-opacity duration-200 fixed z-50`}>
+      {/* 菜单内容 */}
+      <div className='rounded-xl w-52 dark:hover:border-yellow-600 bg-white dark:bg-[#040404] dark:text-gray-200 dark:border-gray-600 p-3 border drop-shadow-lg flex-col duration-300 transition-colors'>
+        {/* 顶部导航按钮 */}
+        <div className='flex justify-between'>
+          <i
+            onClick={handleBack}
+            className='hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-left'></i>
+          <i
+            onClick={handleForward}
+            className='hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-right'></i>
+          <i
+            onClick={handleRefresh}
+            className='hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-rotate-right'></i>
+          <i
+            onClick={handleScrollTop}
+            className='hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-up'></i>
+        </div>
 
-            {/* 菜单内容 */}
-            <div className='rounded-xl w-52 dark:hover:border-yellow-600 bg-white dark:bg-[#040404] dark:text-gray-200 dark:border-gray-600 p-3 border drop-shadow-lg flex-col duration-300 transition-colors'>
-                {/* 顶部导航按钮 */}
-                <div className='flex justify-between'>
-                    <i onClick={handleBack} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-left"></i>
-                    <i onClick={handleForward} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-right"></i>
-                    <i onClick={handleRefresh} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-rotate-right"></i>
-                    <i onClick={handleScrollTop} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-up"></i>
-                </div>
-
-                <hr className='my-2 border-dashed' />
-
-                {/* 跳转导航按钮 */}
-                <div className='w-full px-2'>
-
-                    {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST') && <div onClick={handleJumpToRandomPost} title={locale.MENU.WALK_AROUND} 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-podcast mr-2" />
-                        <div className='whitespace-nowrap'>{locale.MENU.WALK_AROUND}</div>
-                    </div>}
-
-                    {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY') && <Link href='/category' title={locale.MENU.CATEGORY} 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-square-minus mr-2" />
-                        <div className='whitespace-nowrap'>{locale.MENU.CATEGORY}</div>
-                    </Link>}
-
-                    {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG') && <Link href='/tag' title={locale.MENU.TAGS} 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-tag mr-2" />
-                        <div className='whitespace-nowrap'>{locale.MENU.TAGS}</div>
-                    </Link>}
-
-                </div>
-
-                <hr className='my-2 border-dashed' />
-
-                {/* 功能按钮 */}
-                <div className='w-full px-2'>
-
-                    {siteConfig('CAN_COPY') && (
-                         <div onClick={handleCopy} title={locale.MENU.COPY} 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-copy mr-2" />
-                         <div className='whitespace-nowrap'>{locale.MENU.COPY}</div>
-                     </div>
-                    )}
-
-                    {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK') && <div onClick={handleCopyLink} title={locale.MENU.SHARE_URL} 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-arrow-up-right-from-square mr-2" />
-                        <div className='whitespace-nowrap'>{locale.MENU.SHARE_URL}</div>
-                    </div>}
-
-                    {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE') && <div onClick={handleChangeDarkMode} title={isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE} 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'>
-                        {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={handleChangeTheme} 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>
+        <hr className='my-2 border-dashed' />
 
+        {/* 跳转导航按钮 */}
+        <div className='w-full px-2'>
+          {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST && (
+            <div
+              onClick={handleJumpToRandomPost}
+              title={locale.MENU.WALK_AROUND}
+              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-podcast mr-2' />
+              <div className='whitespace-nowrap'>{locale.MENU.WALK_AROUND}</div>
             </div>
-        </div >
+          )}
+
+          {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY && (
+            <Link
+              href='/category'
+              title={locale.MENU.CATEGORY}
+              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-square-minus mr-2' />
+              <div className='whitespace-nowrap'>{locale.MENU.CATEGORY}</div>
+            </Link>
+          )}
+
+          {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG && (
+            <Link
+              href='/tag'
+              title={locale.MENU.TAGS}
+              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-tag mr-2' />
+              <div className='whitespace-nowrap'>{locale.MENU.TAGS}</div>
+            </Link>
+          )}
+        </div>
+
+        <hr className='my-2 border-dashed' />
+
+        {/* 功能按钮 */}
+        <div className='w-full px-2'>
+          {CAN_COPY && (
+            <div
+              onClick={handleCopy}
+              title={locale.MENU.COPY}
+              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-copy mr-2' />
+              <div className='whitespace-nowrap'>{locale.MENU.COPY}</div>
+            </div>
+          )}
+
+          {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK && (
+            <div
+              onClick={handleCopyLink}
+              title={locale.MENU.SHARE_URL}
+              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-arrow-up-right-from-square mr-2' />
+              <div className='whitespace-nowrap'>{locale.MENU.SHARE_URL}</div>
+            </div>
+          )}
+
+          {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE && (
+            <div
+              onClick={handleChangeDarkMode}
+              title={
+                isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE
+              }
+              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'>
+              {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>
+          )}
+
+          {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH && (
+            <div
+              onClick={handleChangeTheme}
+              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>
+    </div>
   )
 }
diff --git a/components/ExternalPlugins.js b/components/ExternalPlugins.js
index bf1c9e8b..24ba5b55 100644
--- a/components/ExternalPlugins.js
+++ b/components/ExternalPlugins.js
@@ -5,8 +5,7 @@ import LA51 from './LA51'
 import TianLiGPT from './TianliGPT'
 import WebWhiz from './Webwhiz'
 
-import { CUSTOM_EXTERNAL_CSS, CUSTOM_EXTERNAL_JS } from '@/blog.config'
-import { mapPageUrl } from '@/lib/notion/mapPageUrl'
+import { convertInnerUrl } from '@/lib/notion/convertInnerUrl'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
@@ -44,8 +43,6 @@ const ExternalPlugin = props => {
   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')
@@ -64,6 +61,8 @@ const ExternalPlugin = props => {
   const IMG_SHADOW = siteConfig('IMG_SHADOW')
   const ANIMATE_CSS_URL = siteConfig('ANIMATE_CSS_URL')
   const MOUSE_FOLLOW = siteConfig('MOUSE_FOLLOW')
+  const CUSTOM_EXTERNAL_CSS = siteConfig('CUSTOM_EXTERNAL_CSS')
+  const CUSTOM_EXTERNAL_JS = siteConfig('CUSTOM_EXTERNAL_JS')
 
   // 自定义样式css和js引入
   if (isBrowser) {
@@ -106,7 +105,7 @@ const ExternalPlugin = props => {
     }
 
     // 映射url
-    mapPageUrl(props?.allNavPages)
+    convertInnerUrl(props?.allNavPages)
   }, [router])
 
   useEffect(() => {
diff --git a/components/Fireworks.js b/components/Fireworks.js
index cb6a2d98..a57a3023 100644
--- a/components/Fireworks.js
+++ b/components/Fireworks.js
@@ -18,7 +18,7 @@ const Fireworks = () => {
     // 异步加载
     async function loadFireworks() {
       loadExternalResource(
-        'https://cdn.bootcdn.net/ajax/libs/animejs/3.2.1/anime.min.js',
+        'https://cdnjs.snrat.com/ajax/libs/animejs/3.2.1/anime.min.js',
         'js'
       ).then(() => {
         loadExternalResource('/js/fireworks.js', 'js').then(() => {
@@ -35,7 +35,11 @@ const Fireworks = () => {
     loadFireworks()
 
     return () => {
-      // 在组件卸载时清理资源（如果需要）
+      // 在组件卸载时清理资源
+      const fireworksElements = document.getElementsByClassName('fireworks')
+      while (fireworksElements.length > 0) {
+        fireworksElements[0].parentNode.removeChild(fireworksElements[0])
+      }
     }
   }, [])
 
diff --git a/components/LazyImage.js b/components/LazyImage.js
index 4e353ad8..039fed37 100644
--- a/components/LazyImage.js
+++ b/components/LazyImage.js
@@ -1,6 +1,7 @@
 import { siteConfig } from '@/lib/config'
 import Head from 'next/head'
 import { useEffect, useRef, useState } from 'react'
+
 /**
  * 图片懒加载
  * @param {*} param0
@@ -20,27 +21,52 @@ export default function LazyImage({
   style
 }) {
   const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
+  const defaultPlaceholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
   const imageRef = useRef(null)
-  const [adjustedSrc, setAdjustedSrc] = useState(
-    placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+  const [currentSrc, setCurrentSrc] = useState(
+    placeholderSrc || defaultPlaceholderSrc
   )
 
-  if (!placeholderSrc) {
-    placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
-  }
-
   /**
-   * 图片加载成功回调
+   * 占位图加载成功
    */
-  const handleImageLoad = () => {
+  const handleThumbnailLoaded = () => {
+    if (typeof onLoad === 'function') {
+      // onLoad() // 触发传递的onLoad回调函数
+    }
+  }
+  // 原图加载完成
+  const handleImageLoaded = img => {
     if (typeof onLoad === 'function') {
       onLoad() // 触发传递的onLoad回调函数
     }
   }
+  /**
+   * 图片加载失败回调
+   */
+  const handleImageError = () => {
+    if (imageRef.current) {
+      // 尝试加载 placeholderSrc，如果失败则加载 defaultPlaceholderSrc
+      if (imageRef.current.src !== placeholderSrc && placeholderSrc) {
+        imageRef.current.src = placeholderSrc
+      } else {
+        imageRef.current.src = defaultPlaceholderSrc
+      }
+    }
+  }
 
   useEffect(() => {
-    const adjustedImageSrc = adjustImgSize(src, maxWidth)
-    setAdjustedSrc(adjustedImageSrc)
+    const adjustedImageSrc =
+      adjustImgSize(src, maxWidth) || defaultPlaceholderSrc
+
+    // 加载原图
+    const img = new Image()
+    img.src = adjustedImageSrc
+    img.onload = () => {
+      setCurrentSrc(adjustedImageSrc)
+      handleImageLoaded(adjustedImageSrc)
+    }
+    img.onerror = handleImageError
 
     const observer = new IntersectionObserver(
       entries => {
@@ -69,9 +95,10 @@ export default function LazyImage({
   // 动态添加width、height和className属性，仅在它们为有效值时添加
   const imgProps = {
     ref: imageRef,
-    src: priority ? adjustedSrc : placeholderSrc,
+    src: currentSrc,
     alt: alt,
-    onLoad: handleImageLoad
+    onLoad: handleThumbnailLoaded, // 缩略图加载完成
+    onError: handleImageError // 添加onError处理函数
   }
 
   if (id) {
@@ -95,6 +122,7 @@ export default function LazyImage({
   if (style) {
     imgProps.style = style
   }
+
   return (
     <>
       {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -102,24 +130,25 @@ export default function LazyImage({
       {/* 预加载 */}
       {priority && (
         <Head>
-          <link rel='preload' as='image' href={adjustedSrc} />
+          <link rel='preload' as='image' href={adjustImgSize(src, maxWidth)} />
         </Head>
       )}
     </>
   )
 }
+
 /**
  * 根据窗口尺寸决定压缩图片宽度
  * @param {*} src
  * @param {*} maxWidth
  * @returns
  */
-
 const adjustImgSize = (src, maxWidth) => {
   if (!src) {
-    return siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+    return null
   }
-  const screenWidth = window.screen.width
+  const screenWidth =
+    (typeof window !== 'undefined' && window?.screen?.width) || maxWidth
 
   // 屏幕尺寸大于默认图片尺寸，没必要再压缩
   if (screenWidth > maxWidth) {
diff --git a/components/LoadingProgress.js b/components/LoadingProgress.js
index 61ea172e..f217765f 100644
--- a/components/LoadingProgress.js
+++ b/components/LoadingProgress.js
@@ -11,7 +11,7 @@ export default function LoadingProgress() {
   // 加载进度条
   useEffect(() => {
     loadExternalResource(
-      'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js',
+      'https://cdnjs.snrat.com/ajax/libs/nprogress/0.2.0/nprogress.min.js',
       'js'
     ).then(() => {
       if (window.NProgress) {
@@ -19,7 +19,7 @@ export default function LoadingProgress() {
         // 调速
         window.NProgress.settings.minimun = 0.1
         loadExternalResource(
-          'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css',
+          'https://cdnjs.snrat.com/ajax/libs/nprogress/0.2.0/nprogress.min.css',
           'css'
         )
       }
diff --git a/components/MouseFollow.js b/components/MouseFollow.js
index 2215a0ce..cc10d29c 100644
--- a/components/MouseFollow.js
+++ b/components/MouseFollow.js
@@ -15,8 +15,26 @@ const MOUSE_FOLLOW = () => {
     loadExternalResource('/js/mouse-follow.js', 'js').then(url => {
       window.createMouseCanvas && window.createMouseCanvas()({ type, color })
     })
+
+    return () => {
+      // 在组件卸载时清理资源
+      const mouseFollowElement = document.getElementById('vixcityCanvas')
+      mouseFollowElement?.parentNode?.removeChild(mouseFollowElement)
+    }
   }, [])
 
-  return <></>
+  return (
+    <>
+      <style global jsx>
+        {`
+          @media (max-width: 600px) {
+            #vixcityCanvas {
+              display: none;
+            }
+          }
+        `}
+      </style>
+    </>
+  )
 }
 export default MOUSE_FOLLOW
diff --git a/components/Notification.js b/components/Notification.js
new file mode 100644
index 00000000..4fd4fda1
--- /dev/null
+++ b/components/Notification.js
@@ -0,0 +1,63 @@
+import { useState } from 'react'
+
+/**
+ * 弹框通知
+ * @returns
+ */
+const useNotification = () => {
+  const [message, setMessage] = useState('')
+  const [isVisible, setIsVisible] = useState(false)
+
+  const showNotification = msg => {
+    setMessage(msg)
+    setIsVisible(true)
+    setTimeout(() => {
+      closeNotification()
+    }, 3000)
+  }
+
+  const closeNotification = () => {
+    setIsVisible(false)
+    setMessage('')
+  }
+
+  // 测试通知效果
+  //   const toggleVisible = () => {
+  //     setIsVisible(prev => !prev) // 使用函数式更新
+  //   }
+  //   useEffect(() => {
+  //     document?.addEventListener('click', toggleVisible)
+  //     return () => {
+  //       document?.removeEventListener('click', toggleVisible)
+  //     }
+  //   }, [])
+
+  /**
+   * 通知组件
+   * @returns
+   */
+  const Notification = () => {
+    return (
+      <div className={`notification fixed left-0 w-full px-2 z-20 bottom-14`}>
+        <div
+          className={` ${isVisible && message ? 'opacity-100 ' : 'invisible opacity-0 bottom-0'} transition-opacity duration-200 
+           max-w-3xl mx-auto bg-green-500 flex items-center justify-between px-4 py-2 text-white rounded-lg shadow-lg`}>
+          {message}
+          <button
+            onClick={closeNotification}
+            className='ml-4 p-2 cursor-pointer bg-transparent text-white border-none'>
+            <i className='fas fa-times' />
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return {
+    showNotification,
+    closeNotification,
+    Notification
+  }
+}
+
+export default useNotification
diff --git a/components/NotionPage.js b/components/NotionPage.js
index 41716cf4..5bc3c31a 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -31,7 +31,7 @@ const NotionPage = ({ post, className }) => {
   // 页面首次打开时执行的勾子
   useEffect(() => {
     // 检测当前的url并自动滚动到对应目标
-    autoScrollToTarget()
+    autoScrollToHash()
   }, [])
 
   // 页面文章发生变化时会执行的勾子
@@ -144,9 +144,9 @@ const processGalleryImg = zoom => {
 }
 
 /**
- * 根据url参数自动滚动到指定区域
+ * 根据url参数自动滚动到锚位置
  */
-const autoScrollToTarget = () => {
+const autoScrollToHash = () => {
   setTimeout(() => {
     // 跳转到指定标题
     const needToJumpToTitle = window.location.hash
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 788f81b1..33c7ff8f 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -1,17 +1,18 @@
 import { useGlobal } from '@/lib/global'
-import { useState } from 'react'
-import { Draggable } from './Draggable'
+import LANGS from '@/lib/lang'
+import { getQueryParam } from '@/lib/utils'
 import { THEMES } from '@/themes/theme'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 import DarkModeButton from './DarkModeButton'
-import { getQueryParam } from '@/lib/utils'
-import LANGS from '@/lib/lang'
+import { Draggable } from './Draggable'
 /**
  *
  * @returns 主题切换
  */
 const ThemeSwitch = () => {
-  const { theme, lang, changeLang, locale, isDarkMode, toggleDarkMode } = 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
@@ -19,8 +20,12 @@ const ThemeSwitch = () => {
 
   // 修改当前路径url中的 theme 参数
   // 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme
-  const onThemeSelectChange = (e) => {
-    document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
+  const onThemeSelectChange = e => {
+    document.ontouchmove =
+      document.ontouchend =
+      document.onmousemove =
+      document.onmouseup =
+        null
     setIsLoading(true)
     const newTheme = e.target.value
     const query = router.query
@@ -28,59 +33,96 @@ const ThemeSwitch = () => {
     router.push({ pathname: router.pathname, query }).then(() => {
       setTimeout(() => {
         setIsLoading(false)
-      }, 500);
+      }, 500)
     })
   }
 
-  const onLangSelectChange = (e) => {
-    document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
+  const onLangSelectChange = e => {
+    document.ontouchmove =
+      document.ontouchend =
+      document.onmousemove =
+      document.onmouseup =
+        null
     const newLang = e.target.value
     changeLang(newLang)
   }
 
-  return (<>
-        <Draggable>
-            <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-white dark:bg-black rounded-xl shadow-lg ">
-                {/* 深色按钮 */}
-                <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'>
-                        <label htmlFor="langSelect" className="sr-only">选择语言：</label>
-                        <select id="langSelect" 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'>
-                        <label htmlFor="themeSelect" className="sr-only">选择主题：</label>
-                        <select id="themeSelect" 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>
-                </div>
+  return (
+    <>
+      <Draggable>
+        <div
+          id='draggableBox'
+          style={{ left: '0px', top: '80vh' }}
+          className='fixed group flex flex-col items-start space-y-2 overflow-hidden z-50 p-3
+                    dark:text-white bg-white dark:bg-black 
+                      rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl   '>
+          {/* 主题切换按钮 */}
+          <div className='text-sm flex items-center group-hover:w-32  duration-200'>
+            <i className='fa-solid fa-palette w-5' />
+            <div className='w-0 group-hover:w-24  duration-200 overflow-hidden'>
+              <label htmlFor='themeSelect' className='sr-only'>
+                {locale.COMMON.THEME}
+              </label>
+              <select
+                id='themeSelect'
+                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>
-        </Draggable>
+          </div>
 
-        {/* 切换主题加载时的全屏遮罩 */}
-        <div className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} 
-            w-screen h-screen glassmorphism 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 className='text-sm flex items-center w-0 group-hover:w-32  duration-200'>
+            <DarkModeButton />
+            <div
+              onClick={toggleDarkMode}
+              className='cursor-pointer w-0 group-hover:w-24  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  duration-200'>
+            <i className='fa-solid fa-language w-5' />
+            <div className='w-0 group-hover:w-24  duration-200 overflow-hidden'>
+              <label htmlFor='langSelect' className='sr-only'>
+                Language Select
+              </label>
+              <select
+                id='langSelect'
+                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>
+      </Draggable>
+
+      {/* 切换主题加载时的全屏遮罩 */}
+      <div
+        className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} 
+            w-screen h-screen glassmorphism bg-black text-white shadow-text flex justify-center items-center
+             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/lib/config.js b/lib/config.js
index 478bf84e..b4f70e82 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -2,7 +2,7 @@
 
 import BLOG from '@/blog.config'
 import { useGlobal } from './global'
-import { deepClone } from './utils'
+import { deepClone, isUrl } from './utils'
 
 /**
  * 读取配置顺序
@@ -19,7 +19,7 @@ export const siteConfig = (key, defaultVal = null, extendConfig = {}) => {
     return null
   }
 
-  // 特殊配置处理；某些配置只在服务端生效；而Global的NOTION_CONFIG仅限前端组件使用，因此需要从extendConfig中读取
+  // 特殊配置处理；以下配置只在服务端生效；而Global的NOTION_CONFIG仅限前端组件使用，因此需要从extendConfig中读取
   switch (key) {
     case 'NEXT_REVALIDATE_SECOND':
     case 'POST_RECOMMEND_COUNT':
@@ -32,6 +32,8 @@ export const siteConfig = (key, defaultVal = null, extendConfig = {}) => {
     case 'POST_LIST_STYLE':
     case 'POST_LIST_PREVIEW':
     case 'POST_URL_PREFIX_MAPPING_CATEGORY':
+    case 'IS_TAG_COLOR_DISTINGUISHED':
+    case 'TAG_SORT_BY_COUNT':
       return convertVal(extendConfig[key] || defaultVal || BLOG[key])
     default:
   }
@@ -53,8 +55,8 @@ export const siteConfig = (key, defaultVal = null, extendConfig = {}) => {
   let siteInfo = null
 
   if (global) {
-    val = global.NOTION_CONFIG?.[key]
     siteInfo = global.siteInfo
+    val = global.NOTION_CONFIG?.[key] || global.THEME_CONFIG?.[key]
   }
 
   if (!val) {
@@ -89,46 +91,62 @@ export const siteConfig = (key, defaultVal = null, extendConfig = {}) => {
     return defaultVal
   }
 
-  // 从Notion_CONFIG读取的配置通常都是字符串，适当转义
   return convertVal(val)
 }
 
 /**
- * 配置默认都是string类型；
- * 识别配置的值是否数字、布尔、[]数组，若是则转成对应类型
+ * 从环境变量和NotionConfig读取的配置都是string类型；
+ * 这里识别出配置的字符值若为否 数字、布尔、[]数组，{}对象，若是则转成对应类型
+ * 使用JSON和eval两个函数
  * @param {*} val
  * @returns
  */
 export const convertVal = val => {
-  if (typeof val === 'string') {
-    // 解析布尔
-    if (val === 'true' || val === 'false') {
-      return JSON.parse(val)
-    }
-
-    // 解析数字，parseInt将字符串转换为数字
-    if (/^\d+$/.test(val)) {
-      return parseInt(val)
-    }
-    //  转移 [] , {} 这种json串为json对象
-    try {
-      const parsedJson = JSON.parse(val)
-      // 检查解析后的结果是否是对象或数组
-      if (typeof parsedJson === 'object' && parsedJson !== null) {
-        return parsedJson
-      }
-    } catch (error) {
-      // JSON 解析失败，返回原始字符串值
-      return val
-    }
-  }
-
-  try {
-    return JSON.parse(val)
-  } catch (error) {
-    // 如果值是一个字符串但不是有效的 JSON 格式，直接返回字符串
+  // 如果传入参数本身就是obj、数组、boolean 就无需处理
+  if (typeof val !== 'string' || !val) {
     return val
   }
+
+  // 解析数字，parseInt将字符串转换为数字
+  if (/^\d+$/.test(val)) {
+    return parseInt(val)
+  }
+
+  // 检测是否url
+  if (isUrl(val)) {
+    return val
+  }
+  // 检测是否url
+  if (val === 'true' || val === 'false') {
+    return JSON.parse(val)
+  }
+
+  // 配置值前可能有污染的空格
+  if (val.indexOf('[') < 0 && val.indexOf('{') < 0) {
+    return val
+  }
+
+  // 转换 [] , {} , true/false 这类字符串为对象
+  try {
+    // 尝试解析json
+    const parsedJson = JSON.parse(val)
+    if (parsedJson !== null) {
+      return parsedJson
+    }
+  } catch (error) {
+    // try {
+    //   // 尝试解析对象,对象解析能力不如上一步的json
+    //   const evalObj = eval('(' + val + ')')
+    //   if (evalObj !== null) {
+    //     return evalObj
+    //   }
+    // } catch (error) {
+    //   // Ojbject 解析失败，返回原始字符串值
+    //   return val
+    // }
+    return val
+  }
+  return val
 }
 
 /**
diff --git a/lib/db/getSiteData.js b/lib/db/getSiteData.js
index 272c17f1..48de0f27 100755
--- a/lib/db/getSiteData.js
+++ b/lib/db/getSiteData.js
@@ -5,18 +5,18 @@ import getAllPageIds from '@/lib/notion/getAllPageIds'
 import { getAllTags } from '@/lib/notion/getAllTags'
 import { getConfigMapFromConfigPage } from '@/lib/notion/getNotionConfig'
 import getPageProperties, {
-  adjustPageProperties
+    adjustPageProperties
 } from '@/lib/notion/getPageProperties'
-import { fetchInBatches, getPostBlocks } from '@/lib/notion/getPostBlocks'
+import { fetchInBatches, getPage } from '@/lib/notion/getPostBlocks'
 import { compressImage, mapImgUrl } from '@/lib/notion/mapImage'
 import { deepClone } from '@/lib/utils'
 import { idToUuid } from 'notion-utils'
 import { siteConfig } from '../config'
-import { extractLangId, extractLangPrefix } from '../utils/pageId'
+import { extractLangId, extractLangPrefix, getShortId } from '../utils/pageId'
 
 export { getAllTags } from '../notion/getAllTags'
 export { getPost } from '../notion/getNotionPost'
-export { getPostBlocks } from '../notion/getPostBlocks'
+export { getPage as getPostBlocks } from '../notion/getPostBlocks'
 
 /**
  * 获取博客数据; 基于Notion实现
@@ -77,7 +77,18 @@ export async function getNotionPageData({ pageId, from }) {
   }
 
   // 返回给前端的数据做处理
-  const db = deepClone(data)
+  return handleDataBeforeReturn(deepClone(data))
+}
+
+/**
+ * 返回给浏览器前端的数据处理
+ * 适当脱敏
+ * 减少体积
+ * 其它处理
+ * @param {*} db
+ */
+function handleDataBeforeReturn(db) {
+  // 清理多余数据
   delete db.block
   delete db.schema
   delete db.rawMetadata
@@ -91,42 +102,88 @@ export async function getNotionPageData({ pageId, from }) {
   // 清理多余的块
   if (db?.notice) {
     db.notice = cleanBlock(db?.notice)
+    delete db.notice?.id
   }
-  if (db?.post) {
-    db.post = cleanBlock(db?.post)
-  }
+
+  db.tagOptions = cleanIds(db?.tagOptions)
+  db.categoryOptions = cleanIds(db?.categoryOptions)
+  db.customMenu = cleanIds(db?.customMenu)
+
+  //   db.latestPosts = shortenIds(db?.latestPosts)
+  db.allNavPages = shortenIds(db?.allNavPages)
+  //   db.allPages = cleanBlocks(db?.allPages)
+
   return db
 }
 
+/**
+ * 清理一组数据的id
+ * @param {*} items
+ * @returns
+ */
+function shortenIds(items) {
+  if (items && Array.isArray(items)) {
+    return deepClone(
+      items.map(item => {
+        item.short_id = getShortId(item.id)
+        delete item.id
+        return item
+      })
+    )
+  }
+  return items
+}
+
+/**
+ * 清理一组数据的id
+ * @param {*} items
+ * @returns
+ */
+function cleanIds(items) {
+  if (items && Array.isArray(items)) {
+    return deepClone(
+      items.map(item => {
+        delete item.id
+        return item
+      })
+    )
+  }
+  return items
+}
+
 /**
  * 清理block数据
  */
-function cleanBlock(post) {
+function cleanBlock(item) {
+  const post = deepClone(item)
   const pageBlock = post?.blockMap?.block
-  for (const i in pageBlock) {
-    pageBlock[i] = cleanBlock(pageBlock[i])
-    delete pageBlock[i]?.role
-    delete pageBlock[i]?.value?.version
-    delete pageBlock[i]?.value?.created_by_table
-    delete pageBlock[i]?.value?.created_by_id
-    delete pageBlock[i]?.value?.last_edited_by_table
-    delete pageBlock[i]?.value?.last_edited_by_id
-    delete pageBlock[i]?.value?.space_id
-    delete pageBlock[i]?.value?.version
-    delete pageBlock[i]?.value?.format?.copied_from_pointer
-    delete pageBlock[i]?.value?.format?.block_locked_by
-    delete pageBlock[i]?.value?.parent_table
-    delete pageBlock[i]?.value?.copied_from_pointer
-    delete pageBlock[i]?.value?.copied_from
-    delete pageBlock[i]?.value?.created_by_table
-    delete pageBlock[i]?.value?.created_by_id
-    delete pageBlock[i]?.value?.last_edited_by_table
-    delete pageBlock[i]?.value?.last_edited_by_id
-    delete pageBlock[i]?.value?.permissions
-    delete pageBlock[i]?.value?.alive
-  }
-
+  //   delete post?.id
   //   delete post?.blockMap?.collection
+
+  if (pageBlock) {
+    for (const i in pageBlock) {
+      pageBlock[i] = cleanBlock(pageBlock[i])
+      delete pageBlock[i]?.role
+      delete pageBlock[i]?.value?.version
+      delete pageBlock[i]?.value?.created_by_table
+      delete pageBlock[i]?.value?.created_by_id
+      delete pageBlock[i]?.value?.last_edited_by_table
+      delete pageBlock[i]?.value?.last_edited_by_id
+      delete pageBlock[i]?.value?.space_id
+      delete pageBlock[i]?.value?.version
+      delete pageBlock[i]?.value?.format?.copied_from_pointer
+      delete pageBlock[i]?.value?.format?.block_locked_by
+      delete pageBlock[i]?.value?.parent_table
+      delete pageBlock[i]?.value?.copied_from_pointer
+      delete pageBlock[i]?.value?.copied_from
+      delete pageBlock[i]?.value?.created_by_table
+      delete pageBlock[i]?.value?.created_by_id
+      delete pageBlock[i]?.value?.last_edited_by_table
+      delete pageBlock[i]?.value?.last_edited_by_id
+      delete pageBlock[i]?.value?.permissions
+      delete pageBlock[i]?.value?.alive
+    }
+  }
   return post
 }
 
@@ -290,7 +347,6 @@ export function getNavPages({ allPages }) {
     return (
       post &&
       post?.slug &&
-      !post?.slug?.startsWith('http') &&
       post?.type === 'Post' &&
       post?.status === 'Published'
     )
@@ -320,7 +376,7 @@ async function getNotice(post) {
     return null
   }
 
-  post.blockMap = await getPostBlocks(post.id, 'data-notice')
+  post.blockMap = await getPage(post.id, 'data-notice')
   return post
 }
 
@@ -372,7 +428,7 @@ const EmptyData = pageId => {
  */
 async function getDataBaseInfoByNotionAPI({ pageId, from }) {
   console.log('[Fetching Data]', pageId, from)
-  const pageRecordMap = await getPostBlocks(pageId, from)
+  const pageRecordMap = await getPage(pageId, from)
   if (!pageRecordMap) {
     console.error('can`t get Notion Data ; Which id is: ', pageId)
     return {}
@@ -455,6 +511,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
     adjustPageProperties(element, NOTION_CONFIG)
   })
 
+  // 站点基础信息
   const siteInfo = getSiteInfo({ collection, block, pageId })
 
   // 文章计数
@@ -468,7 +525,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
     return (
       post &&
       post?.slug &&
-      !post?.slug?.startsWith('http') &&
+      //   !post?.slug?.startsWith('http') &&
       (post?.status === 'Invisible' || post?.status === 'Published')
     )
   })
@@ -490,11 +547,17 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
       )
     })?.[0]
   )
+  // 所有分类
   const categoryOptions = getAllCategories({
     allPages,
     categoryOptions: getCategoryOptions(schema)
   })
-  const tagOptions = getAllTags({ allPages, tagOptions: getTagOptions(schema) })
+  // 所有标签
+  const tagOptions = getAllTags({
+    allPages,
+    tagOptions: getTagOptions(schema),
+    NOTION_CONFIG
+  })
   // 旧的菜单
   const customNav = getCustomNav({
     allPages: collectionData.filter(
diff --git a/lib/global.js b/lib/global.js
index d673c3ea..1dcd0c9f 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -1,5 +1,6 @@
 import {
   THEMES,
+  getThemeConfig,
   initDarkMode,
   saveDarkModeToLocalStorage
 } from '@/themes/theme'
@@ -29,11 +30,14 @@ export function GlobalContextProvider(props) {
     tagOptions,
     NOTION_CONFIG
   } = props
+
   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 [THEME_CONFIG, SET_THEME_CONFIG] = useState(null) // 主题配置
+
   const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE
   const [isDarkMode, updateDarkMode] = useState(defaultDarkMode === 'dark') // 默认深色模式
   const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
@@ -54,6 +58,12 @@ export function GlobalContextProvider(props) {
     return newTheme
   }
 
+  // 抓取主题配置
+  const updateThemeConfig = async theme => {
+    const config = await getThemeConfig(theme)
+    SET_THEME_CONFIG(config)
+  }
+
   // 切换深色模式
   const toggleDarkMode = () => {
     const newStatus = !isDarkMode
@@ -79,7 +89,10 @@ export function GlobalContextProvider(props) {
   useEffect(() => {
     initDarkMode(updateDarkMode, defaultDarkMode)
     initLocale(lang, locale, updateLang, updateLocale)
-    redirectUserLang(NOTION_PAGE_ID)
+    // 可以
+    if (NOTION_CONFIG?.REDIRECT_LANG) {
+      redirectUserLang(NOTION_PAGE_ID)
+    }
   }, [])
 
   // 加载进度条
@@ -96,6 +109,9 @@ export function GlobalContextProvider(props) {
       setOnLoading(false)
     }
 
+    const currentTheme = router?.query?.theme || theme
+    updateThemeConfig(currentTheme)
+
     router.events.on('routeChangeStart', handleStart)
     router.events.on('routeChangeError', handleStop)
     router.events.on('routeChangeComplete', handleStop)
@@ -111,6 +127,7 @@ export function GlobalContextProvider(props) {
       value={{
         fullWidth,
         NOTION_CONFIG,
+        THEME_CONFIG,
         toggleDarkMode,
         onLoading,
         setOnLoading,
diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
index 47bb171c..6b40a44c 100644
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -14,11 +14,15 @@ export default {
     INDEX: 'Home',
     RSS: 'RSS',
     SEARCH: 'Search',
+    NAVIGATOR: 'NAV',
     ABOUT: 'About',
     MAIL: 'E-Mail',
     ARCHIVE: 'Archive'
   },
   COMMON: {
+    THEME: 'Theme',
+    ARTICLE_LIST: 'Article List',
+    RECOMMEND_POSTS: 'Recommend Posts',
     MORE: 'More',
     NO_MORE: 'No More',
     LATEST_POSTS: 'Latest posts',
@@ -33,15 +37,21 @@ export default {
     COPYRIGHT: 'Copyright',
     AUTHOR: 'Author',
     URL: 'URL',
+    NOW: 'NOW',
+    RECOMMEND_BADGES: 'Recommend',
+    BLOG: 'Blog',
     POSTS: 'Posts',
     ARTICLE: 'Article',
     VISITORS: 'Visitors',
     VIEWS: 'Views',
-    COPYRIGHT_NOTICE: 'All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!',
+    PAGE_URL_COPIED: 'Page URL copied',
+    COPYRIGHT_NOTICE:
+      'All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!',
     RESULT_OF_SEARCH: 'Results Found',
     ARTICLE_DETAIL: 'Article Details',
     PASSWORD_ERROR: 'Password Error!',
     ARTICLE_LOCK_TIPS: 'Please Enter the password:',
+    ARTICLE_UNLOCK_TIPS: 'Article Unlocked',
     NO_RESULTS_FOUND: 'No results found.',
     SUBMIT: 'Submit',
     POST_TIME: 'Post on',
@@ -55,7 +65,8 @@ export default {
     START_READING: 'Start Reading',
     MINUTE: 'min',
     WORD_COUNT: 'Words',
-    READ_TIME: 'Read Time'
+    READ_TIME: 'Read Time',
+    NEXT_POST: '下一篇'
   },
   PAGINATION: {
     PREV: 'Prev',
diff --git a/lib/lang/ja-JP.js b/lib/lang/ja-JP.js
index c27eef0b..628b28b3 100644
--- a/lib/lang/ja-JP.js
+++ b/lib/lang/ja-JP.js
@@ -29,11 +29,14 @@ export default {
     ARTICLE: '記事',
     VISITORS: '人の訪問者',
     VIEWS: '回の閲覧',
-    COPYRIGHT_NOTICE: 'この記事はCC BY-NC-SA 4.0 ライセンスの下でライセンスされています。転載する場合には出典を明らかにしてください。',
+    COPYRIGHT_NOTICE:
+      'この記事はCC BY-NC-SA 4.0 ライセンスの下でライセンスされています。転載する場合には出典を明らかにしてください。',
     RESULT_OF_SEARCH: '個の検索結果',
     ARTICLE_DETAIL: '記事の詳細',
     PASSWORD_ERROR: 'パスワードが違います!',
-    ARTICLE_LOCK_TIPS: 'この記事はロックされています。アクセスパスワードを入力してください。',
+    ARTICLE_LOCK_TIPS:
+      'この記事はロックされています。アクセスパスワードを入力してください。',
+    ARTICLE_UNLOCK_TIPS: '記事がロック解除されました',
     SUBMIT: '送信',
     POST_TIME: '公開日',
     LAST_EDITED_TIME: '最終更新日',
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
index a2c8b1c7..c49ed544 100644
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -20,6 +20,9 @@ export default {
     ARCHIVE: '归档'
   },
   COMMON: {
+    THEME: 'Theme',
+    ARTICLE_LIST: '文章列表',
+    RECOMMEND_POSTS: '推荐文章',
     MORE: '更多',
     NO_MORE: '没有更多了',
     LATEST_POSTS: '最新发布',
@@ -35,16 +38,21 @@ export default {
     AUTHOR: '作者',
     URL: '链接',
     ANALYTICS: '统计',
+    RECOMMEND_BADGES: '荐',
+    BLOG: '博客',
+    NOW: '此刻',
     POSTS: '篇文章',
     ARTICLE: '文章',
     VISITORS: '位访客',
     VIEWS: '次查看',
+    PAGE_URL_COPIED: '页面地址已复制',
     COPYRIGHT_NOTICE: '本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。',
     RESULT_OF_SEARCH: '篇搜索到的结果',
     NO_RESULTS_FOUND: '没有找到文章',
     ARTICLE_DETAIL: '文章详情',
     PASSWORD_ERROR: '密码错误！',
     ARTICLE_LOCK_TIPS: '文章已上锁，请输入访问密码',
+    ARTICLE_UNLOCK_TIPS: '文章已解锁',
     SUBMIT: '提交',
     POST_TIME: '发布于',
     LAST_EDITED_TIME: '最后更新',
@@ -57,7 +65,8 @@ export default {
     START_READING: '开始阅读',
     MINUTE: '分钟',
     WORD_COUNT: '字数',
-    READ_TIME: '阅读时长'
+    READ_TIME: '阅读时长',
+    NEXT_POST: '下一篇'
   },
   PAGINATION: {
     PREV: '上页',
diff --git a/lib/lang/zh-HK.js b/lib/lang/zh-HK.js
index f434fe6e..6e9df618 100644
--- a/lib/lang/zh-HK.js
+++ b/lib/lang/zh-HK.js
@@ -5,7 +5,39 @@ export default {
     RSS: '訂閱',
     SEARCH: '搜尋',
     ABOUT: '關於',
-    MAIL: '電郵'
+    MAIL: '電郵',
+    NAVIGATOR: '導航',
+    ARCHIVE: '封存'
+  },
+  COMMON: {
+    ARTICLE_LIST: '文章列表',
+    MORE: '更多',
+    NO_MORE: '沒有更多了',
+    LATEST_POSTS: '最新文章',
+    TAGS: '標籤',
+    NO_TAG: '無標籤',
+    CATEGORY: '分類',
+    SHARE: '分享',
+    SCAN_QR_CODE: 'QRCode',
+    URL_COPIED: '連結已複製！',
+    TABLE_OF_CONTENTS: '目錄',
+    RELATE_POSTS: '相關文章',
+    COPYRIGHT: '著作權',
+    AUTHOR: '作者',
+    URL: '連結',
+    ANALYTICS: '分析',
+    POSTS: '篇文章',
+    ARTICLE: '文章',
+    VISITORS: '位訪客',
+    VIEWS: '次查看',
+    COPYRIGHT_NOTICE: '本文採用 CC BY-NC-SA 4.0 許可協議，轉載請註明出處。',
+    RESULT_OF_SEARCH: '篇搜尋到的结果',
+    ARTICLE_DETAIL: '完整文章',
+    PASSWORD_ERROR: '密碼錯誤！',
+    ARTICLE_LOCK_TIPS: '文章已上鎖，請輸入訪問密碼',
+    SUBMIT: '提交',
+    POST_TIME: '发布于',
+    LAST_EDITED_TIME: '最后更新'
   },
   PAGINATION: {
     PREV: '上一頁',
@@ -13,7 +45,7 @@ export default {
   },
   SEARCH: {
     ARTICLES: '搜尋文章',
-    TAGS: '搜尋標簽'
+    TAGS: '搜尋標籤'
   },
   POST: {
     BACK: '返回',
diff --git a/lib/lang/zh-TW.js b/lib/lang/zh-TW.js
index de746c08..1fe2dbb1 100644
--- a/lib/lang/zh-TW.js
+++ b/lib/lang/zh-TW.js
@@ -10,6 +10,7 @@ export default {
     ARCHIVE: '封存'
   },
   COMMON: {
+    ARTICLE_LIST: '文章列表',
     MORE: '更多',
     NO_MORE: '沒有更多了',
     LATEST_POSTS: '最新文章',
diff --git a/lib/notion/mapPageUrl.js b/lib/notion/convertInnerUrl.js
similarity index 57%
rename from lib/notion/mapPageUrl.js
rename to lib/notion/convertInnerUrl.js
index 80fe70d8..8762d805 100644
--- a/lib/notion/mapPageUrl.js
+++ b/lib/notion/convertInnerUrl.js
@@ -1,33 +1,44 @@
-import { uuidToId } from 'notion-utils'
+import { idToUuid } from 'notion-utils'
 import { checkStrIsNotionId, getLastPartOfUrl, isBrowser } from '../utils'
 
 /**
  * 处理页面内连接跳转:
- * 1. 若是本站域名，则在当前窗口打开、不开新窗口
- * 2. 若是Notion笔记中的内链，尝试转换成博客中现有的文章地址
+ * 1.若是本站域名，则在当前窗口打开、不开新窗口
+ * 2.url是notion-id，转成站内文章链接
  */
-export const mapPageUrl = allPages => {
+export const convertInnerUrl = allPages => {
   if (isBrowser) {
+    const allAnchorTags = document
+      ?.getElementById('notion-article')
+      ?.getElementsByTagName('a')
+
+    if (!allAnchorTags) {
+      return
+    }
     const currentURL = window.location.origin + window.location.pathname
-    const allAnchorTags = document.getElementsByTagName('a') // 或者使用 document.querySelectorAll('a') 获取 NodeList
+    // url替换成slug
     for (const anchorTag of allAnchorTags) {
       // 检查url
       if (anchorTag?.href) {
         // 如果url是一个Notion_id，尝试匹配成博客的文章内链
         const slug = getLastPartOfUrl(anchorTag.href)
         if (checkStrIsNotionId(slug)) {
-          const slugPage = allPages?.find(page => uuidToId(page.id) === slug)
+          const slugPage = allPages?.find(page => {
+            return idToUuid(slug).indexOf(page.short_id) === 0
+          })
           if (slugPage) {
             anchorTag.href = slugPage?.href
           }
         }
       }
+    }
 
+    // 链接在当前页面打开
+    for (const anchorTag of allAnchorTags) {
       if (anchorTag?.target === '_blank') {
         const hrefWithoutQueryHash = anchorTag.href.split('?')[0].split('#')[0]
         const hrefWithRelativeHash =
-          currentURL.split('#')[0] + anchorTag.href.split('#')[1]
-
+          currentURL.split('#')[0] || '' + anchorTag.href.split('#')[1] || ''
         if (
           currentURL === hrefWithoutQueryHash ||
           currentURL === hrefWithRelativeHash
diff --git a/lib/notion/getAllCategories.js b/lib/notion/getAllCategories.js
index 97c8ab3a..c7e66ba2 100644
--- a/lib/notion/getAllCategories.js
+++ b/lib/notion/getAllCategories.js
@@ -4,7 +4,7 @@ import { isIterable } from '../utils'
  * 获取所有文章的标签
  * @param allPosts
  * @param sliceCount 默认截取数量为12，若为0则返回全部
- * @param tagOptions tags的下拉选项
+ * @param categoryOptions categories的下拉选项
  * @returns {Promise<{}|*[]>}
  */
 
@@ -13,8 +13,14 @@ import { isIterable } from '../utils'
  * @param allPosts
  * @returns {Promise<{}|*[]>}
  */
-export function getAllCategories({ allPages, categoryOptions, sliceCount = 0 }) {
-  const allPosts = allPages?.filter(page => page.type === 'Post' && page.status === 'Published')
+export function getAllCategories({
+  allPages,
+  categoryOptions,
+  sliceCount = 0
+}) {
+  const allPosts = allPages?.filter(
+    page => page.type === 'Post' && page.status === 'Published'
+  )
   if (!allPosts || !categoryOptions) {
     return []
   }
diff --git a/lib/notion/getAllTags.js b/lib/notion/getAllTags.js
index 4c7559b9..cac8dac7 100644
--- a/lib/notion/getAllTags.js
+++ b/lib/notion/getAllTags.js
@@ -1,5 +1,5 @@
+import { siteConfig } from '../config'
 import { isIterable } from '../utils'
-import BLOG from '@/blog.config'
 
 /**
  * 获取所有文章的标签
@@ -8,8 +8,15 @@ import BLOG from '@/blog.config'
  * @param tagOptions tags的下拉选项
  * @returns {Promise<{}|*[]>}
  */
-export function getAllTags({ allPages, sliceCount = 0, tagOptions }) {
-  const allPosts = allPages?.filter(page => page.type === 'Post' && page.status === 'Published')
+export function getAllTags({
+  allPages,
+  sliceCount = 0,
+  tagOptions,
+  NOTION_CONFIG
+}) {
+  const allPosts = allPages?.filter(
+    page => page.type === 'Post' && page.status === 'Published'
+  )
 
   if (!allPosts || !tagOptions) {
     return []
@@ -27,7 +34,12 @@ export function getAllTags({ allPages, sliceCount = 0, tagOptions }) {
   })
 
   const list = []
-  const { IS_TAG_COLOR_DISTINGUISHED } = BLOG
+  const IS_TAG_COLOR_DISTINGUISHED = siteConfig(
+    'IS_TAG_COLOR_DISTINGUISHED',
+    false,
+    NOTION_CONFIG
+  )
+  const TAG_SORT_BY_COUNT = siteConfig('TAG_SORT_BY_COUNT', true, NOTION_CONFIG)
   if (isIterable(tagOptions)) {
     if (!IS_TAG_COLOR_DISTINGUISHED) {
       // 如果不区分颜色, 那么不同颜色相同名称的tag当做同一种tag
@@ -52,7 +64,10 @@ export function getAllTags({ allPages, sliceCount = 0, tagOptions }) {
   }
 
   // 按照数量排序
-  // list.sort((a, b) => b.count - a.count)
+  if (TAG_SORT_BY_COUNT) {
+    list.sort((a, b) => b.count - a.count)
+  }
+
   if (sliceCount && sliceCount > 0) {
     return list.slice(0, sliceCount)
   } else {
diff --git a/lib/notion/getNotionConfig.js b/lib/notion/getNotionConfig.js
index 889005f2..c0ef7c29 100644
--- a/lib/notion/getNotionConfig.js
+++ b/lib/notion/getNotionConfig.js
@@ -9,7 +9,7 @@
 import { getDateValue, getTextContent } from 'notion-utils'
 import { deepClone } from '../utils'
 import getAllPageIds from './getAllPageIds'
-import { getPostBlocks } from './getPostBlocks'
+import { getPage } from './getPostBlocks'
 
 /**
  * 从Notion中读取Config配置表
@@ -41,12 +41,12 @@ export async function getConfigMapFromConfigPage(allPages) {
   }
   const configPageId = configPage.id
   //   console.log('[Notion配置]请求配置数据 ', configPage.id)
-  let pageRecordMap = await getPostBlocks(configPageId, 'config-table')
+  let pageRecordMap = await getPage(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)
+    pageRecordMap = await getPage(configPageId, table)
     content = pageRecordMap.block[configPageId].value.content
   }
 
diff --git a/lib/notion/getNotionPost.js b/lib/notion/getNotionPost.js
index 3e096a11..f5aabb2a 100644
--- a/lib/notion/getNotionPost.js
+++ b/lib/notion/getNotionPost.js
@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
 import { idToUuid } from 'notion-utils'
 import { defaultMapImageUrl } from 'react-notion-x'
 import formatDate from '../utils/formatDate'
-import { getPostBlocks } from './getPostBlocks'
+import { getPage } from './getPostBlocks'
 
 /**
  * 根据页面ID获取内容
@@ -10,7 +10,7 @@ import { getPostBlocks } from './getPostBlocks'
  * @returns
  */
 export async function getPost(pageId) {
-  const blockMap = await getPostBlocks(pageId, 'slug')
+  const blockMap = await getPage(pageId, 'slug')
   if (!blockMap) {
     return null
   }
diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js
index 38eede18..53d7ce87 100644
--- a/lib/notion/getPageProperties.js
+++ b/lib/notion/getPageProperties.js
@@ -6,10 +6,11 @@ import formatDate from '../utils/formatDate'
 import md5 from 'js-md5'
 import { siteConfig } from '../config'
 import {
-  checkContainHttp,
-  convertUrlStartWithOneSlash,
-  sliceUrlFromHttp
+    checkStartWithHttp,
+    convertUrlStartWithOneSlash,
+    getLastSegmentFromUrl
 } from '../utils'
+import { extractLangPrefix } from '../utils/pageId'
 import { mapImgUrl } from './mapImage'
 
 /**
@@ -94,6 +95,7 @@ export default async function getPageProperties(
   properties.type = properties.type?.[0] || ''
   properties.status = properties.status?.[0] || ''
   properties.category = properties.category?.[0] || ''
+  properties.comment = properties.comment?.[0] || ''
 
   // 映射值：用户个性化type和status字段的下拉框选项，在此映射回代码的英文标识
   mapProperties(properties)
@@ -185,26 +187,38 @@ export function adjustPageProperties(properties, NOTION_CONFIG) {
     properties.name = properties.title ?? ''
   }
 
-  // 开启伪静态路径
-  if (JSON.parse(NOTION_CONFIG?.PSEUDO_STATIC || BLOG.PSEUDO_STATIC)) {
-    if (
-      !properties?.href?.endsWith('.html') &&
-      !properties?.href?.startsWith('http')
-    ) {
-      properties.href += '.html'
-    }
-  }
-
-  // 检查处理外链
-  properties.href = checkContainHttp(properties?.href)
-    ? sliceUrlFromHttp(properties?.href)
-    : convertUrlStartWithOneSlash(properties?.href)
-
-  // 设置链接在页内或新页面打开
-  if (properties.href?.indexOf('http') === 0) {
+  // http or https 开头的视为外链
+  if (checkStartWithHttp(properties?.href)) {
+    properties.href = properties?.slug
     properties.target = '_blank'
   } else {
     properties.target = '_self'
+    // 伪静态路径右侧拼接.html
+    if (siteConfig('PSEUDO_STATIC', false, NOTION_CONFIG)) {
+      if (
+        !properties?.href?.endsWith('.html') &&
+        properties?.href !== '' &&
+        properties?.href !== '#' &&
+        properties?.href !== '/'
+      ) {
+        properties.href += '.html'
+      }
+    }
+
+    // 相对路径转绝对路径：url左侧拼接 /
+    properties.href = convertUrlStartWithOneSlash(properties?.href)
+  }
+
+  // 如果跳转链接是多语言，则在新窗口打开
+  if (BLOG.NOTION_PAGE_ID.indexOf(',') > 0) {
+    const siteIds = BLOG.NOTION_PAGE_ID.split(',')
+    for (let index = 0; index < siteIds.length; index++) {
+      const siteId = siteIds[index]
+      const prefix = extractLangPrefix(siteId)
+      if (getLastSegmentFromUrl(properties.href) === prefix) {
+        properties.target = '_blank'
+      }
+    }
   }
 
   // 密码字段md5
@@ -221,6 +235,10 @@ export function adjustPageProperties(properties, NOTION_CONFIG) {
  * @returns
  */
 function generateCustomizeSlug(postProperties, NOTION_CONFIG) {
+  // 外链不处理
+  if (checkStartWithHttp(postProperties.slug)) {
+    return postProperties.slug
+  }
   let fullPrefix = ''
   const allSlugPatterns = siteConfig(
     'POST_URL_PREFIX',
@@ -272,5 +290,10 @@ function generateCustomizeSlug(postProperties, NOTION_CONFIG) {
   if (fullPrefix.endsWith('/')) {
     fullPrefix = fullPrefix.substring(0, fullPrefix.length - 1) // 去掉尾部部的"/"
   }
-  return `${fullPrefix}/${postProperties.slug ?? postProperties.id}`
+
+  if(fullPrefix){
+    return `${fullPrefix}/${postProperties.slug ?? postProperties.id}`
+  }else{
+    return `${postProperties.slug ?? postProperties.id}`
+  }
 }
diff --git a/lib/notion/getPostBlocks.js b/lib/notion/getPostBlocks.js
index 0b151f17..2859345f 100644
--- a/lib/notion/getPostBlocks.js
+++ b/lib/notion/getPostBlocks.js
@@ -10,7 +10,7 @@ import { deepClone, delay } from '../utils'
  * @param {*} slice
  * @returns
  */
-export async function getPostBlocks(id, from, slice) {
+export async function getPage(id, from, slice) {
   const cacheKey = 'page_block_' + id
   let pageBlock = await getDataFromCache(cacheKey)
   if (pageBlock) {
@@ -27,28 +27,6 @@ export async function getPostBlocks(id, from, slice) {
   return pageBlock
 }
 
-/**
- * 针对在getDataBaseInfoByNotionAPI=>getPostBlocks中获取不到的溢出的block-id，用此方法另外抓取
- * @param {*} id
- * @param {*} from
- * @returns
- */
-export async function getSingleBlock(id, from) {
-  const cacheKey = 'single_block_' + id
-  let pageBlock = await getDataFromCache(cacheKey)
-  if (pageBlock) {
-    // console.log('[API<<--缓存]', `from:${from}`, cacheKey)
-    return pageBlock
-  }
-
-  pageBlock = await getPageWithRetry(id, 'single_' + from)
-
-  if (pageBlock) {
-    await setDataToCache(cacheKey, pageBlock)
-  }
-  return pageBlock
-}
-
 /**
  * 调用接口，失败会重试
  * @param {*} id
@@ -103,49 +81,69 @@ export async function getPageWithRetry(id, from, retryAttempts = 3) {
 function filterPostBlocks(id, blockMap, slice) {
   const clonePageBlock = deepClone(blockMap)
   let count = 0
+  const blocksToProcess = Object.keys(clonePageBlock?.block || {})
 
   // 循环遍历文档的每个block
-  for (const i in clonePageBlock?.block) {
-    const b = clonePageBlock?.block[i]
-    if (slice && slice > 0 && count > slice) {
-      delete clonePageBlock?.block[i]
-      continue
+  for (let i = 0; i < blocksToProcess.length; i++) {
+  const blockId = blocksToProcess[i]
+  const b = clonePageBlock?.block[blockId]
+  
+  if (slice && slice > 0 && count > slice) {
+    delete clonePageBlock?.block[blockId]
+    continue
+  }
+  
+  // 当BlockId等于PageId时移除
+  if (b?.value?.id === id) {
+    // 此block含有敏感信息
+    delete b?.value?.properties
+    continue
+  }
+  
+  count++
+  
+  if (b?.value?.type === 'sync_block' && b?.value?.children) {
+    const childBlocks = b.value.children
+    // 移除同步块
+    delete clonePageBlock.block[blockId]
+    // 用子块替代同步块
+    childBlocks.forEach((childBlock, index) => {
+      const newBlockId = `${blockId}_child_${index}`
+      clonePageBlock.block[newBlockId] = childBlock
+      blocksToProcess.splice(i + index + 1, 0, newBlockId)
+    })
+    // 重新处理新加入的子块
+    i--
+    continue
+  }
+  
+  // 处理 c++、c#、汇编等语言名字映射
+  if (b?.value?.type === 'code') {
+    if (b?.value?.properties?.language?.[0][0] === 'C++') {
+      b.value.properties.language[0][0] = 'cpp'
     }
-    // 当BlockId等于PageId时移除
-    if (b?.value?.id === id) {
-      // 此block含有敏感信息
-      delete b?.value?.properties
-      continue
+    if (b?.value?.properties?.language?.[0][0] === 'C#') {
+      b.value.properties.language[0][0] = 'csharp'
     }
-
-    count++
-    // 处理 c++、c#、汇编等语言名字映射
-    if (b?.value?.type === 'code') {
-      if (b?.value?.properties?.language?.[0][0] === 'C++') {
-        b.value.properties.language[0][0] = 'cpp'
-      }
-      if (b?.value?.properties?.language?.[0][0] === 'C#') {
-        b.value.properties.language[0][0] = 'csharp'
-      }
-      if (b?.value?.properties?.language?.[0][0] === 'Assembly') {
-        b.value.properties.language[0][0] = 'asm6502'
-      }
-    }
-
-    // 如果是文件，或嵌入式PDF，需要重新加密签名
-    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
+    if (b?.value?.properties?.language?.[0][0] === 'Assembly') {
+      b.value.properties.language[0][0] = 'asm6502'
     }
   }
+  
+  // 如果是文件，或嵌入式PDF，需要重新加密签名
+  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
+  }
+}
 
   // 去掉不用的字段
   if (id === BLOG.NOTION_PAGE_ID) {
@@ -162,6 +160,11 @@ function filterPostBlocks(id, blockMap, slice) {
  * @returns
  */
 export const fetchInBatches = async (ids, batchSize = 100) => {
+  // 如果 ids 不是数组，则将其转换为数组
+  if (!Array.isArray(ids)) {
+    ids = [ids]
+  }
+
   const authToken = BLOG.NOTION_ACCESS_TOKEN || null
   const api = new NotionAPI({
     authToken,
@@ -171,7 +174,7 @@ export const fetchInBatches = async (ids, batchSize = 100) => {
   let fetchedBlocks = {}
   for (let i = 0; i < ids.length; i += batchSize) {
     const batch = ids.slice(i, i + batchSize)
-    console.log('[API-->>请求] Fetching missing blocks', ids.length)
+    console.log('[API-->>请求] Fetching missing blocks', batch, ids.length)
     const start = new Date().getTime()
     const pageChunk = await api.getBlocks(batch)
     const end = new Date().getTime()
diff --git a/lib/notion/mapImage.js b/lib/notion/mapImage.js
index 491632bc..5bb1e9b1 100644
--- a/lib/notion/mapImage.js
+++ b/lib/notion/mapImage.js
@@ -110,6 +110,8 @@ const compressImage = (image, width, quality = 50, fmt = 'webp') => {
     return image
   }
 
+  if (image.includes(".svg")) return image
+
   if (!width || width === 0) {
     width = siteConfig('IMAGE_COMPRESS_WIDTH')
   }
diff --git a/lib/password.js b/lib/password.js
new file mode 100644
index 00000000..67b341a6
--- /dev/null
+++ b/lib/password.js
@@ -0,0 +1,37 @@
+import { isBrowser } from './utils'
+
+/**
+ * 获取默认密码
+ * 用户可以通过url中拼接参数，输入密码
+ * 输入过一次的密码会被存储在浏览器中，便于下一次免密访问
+ * 返回的是一组历史密码，便于客户端多次尝试
+ */
+export const getPasswordQuery = path => {
+  // 使用 URL 对象解析 URL
+  const url = new URL(path, isBrowser ? window.location.origin : '')
+
+  // 获取查询参数
+  const queryParams = Object.fromEntries(url.searchParams.entries())
+
+  // 请求中带着密码
+  if (queryParams.password) {
+    // 将已输入密码作为默认密码存放在 localStorage，便于下次读取并自动尝试
+    localStorage.setItem('password_default', queryParams.password)
+  }
+
+  // 获取路径部分
+  const cleanedPath = url.pathname
+
+  // 从 localStorage 中获取相关密码
+  const storedPassword = localStorage.getItem('password_' + cleanedPath)
+  const defaultPassword = localStorage.getItem('password_default')
+
+  // 将所有密码存储在一个数组中，并过滤掉无效值
+  const passwords = [
+    queryParams.password,
+    storedPassword,
+    defaultPassword
+  ].filter(Boolean)
+
+  return passwords
+}
diff --git a/lib/plugins/algolia.js b/lib/plugins/algolia.js
index fe2f9a83..d161bf58 100644
--- a/lib/plugins/algolia.js
+++ b/lib/plugins/algolia.js
@@ -6,7 +6,7 @@ import algoliasearch from 'algoliasearch'
  * 生成全文索引
  * @param {*} allPages
  */
-const generateAlgoliaSearch = async({ allPages, force = false }) => {
+const generateAlgoliaSearch = async ({ allPages, force = false }) => {
   allPages?.forEach(p => {
     // 判断这篇文章是否需要重新创建索引
     if (p && !p.password) {
@@ -19,7 +19,7 @@ const generateAlgoliaSearch = async({ allPages, force = false }) => {
  * 上传数据
  * 根据上次修改文章日期和上次更新索引数据判断是否需要更新algolia索引
  */
-const uploadDataToAlgolia = async(post) => {
+const uploadDataToAlgolia = async post => {
   // Connect and authenticate with your Algolia app
   const client = algoliasearch(BLOG.ALGOLIA_APP_ID, BLOG.ALGOLIA_ADMIN_APP_KEY)
 
@@ -61,14 +61,18 @@ const uploadDataToAlgolia = async(post) => {
       summary: post.summary,
       lastEditedDate: post.lastEditedDate, // 更新文章时间
       lastIndexDate: new Date(), // 更新索引时间
-      content: truncate(getPageContentText(post, post.blockMap), 9000) // 索引9000个字节，因为api限制总请求内容上限1万个字节
+      content: truncate(getPageContentText(post, post.blockMap), 8192) // 索引8192个字符，API限制总请求内容上限1万个字节
     }
     // console.log('更新Algolia索引', record)
-    index.saveObject(record).wait().then(r => {
-      console.log('Algolia索引更新', r)
-    }).catch(err => {
-      console.log('Algolia异常', err)
-    })
+    index
+      .saveObject(record)
+      .wait()
+      .then(r => {
+        console.log('Algolia索引更新', r)
+      })
+      .catch(err => {
+        console.log('Algolia异常', err)
+      })
   }
 }
 
diff --git a/lib/utils/index.js b/lib/utils/index.js
index b8d78f30..27a6494f 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -47,7 +47,12 @@ export const memorize = Component => {
   return memo(MemoizedComponent)
 }
 
-// 转换外链
+/**
+ * 诸如 article/https://test.com 等被错误拼接前缀的slug进行处理
+ * 转换为 https://test.com
+ * @param {*} str
+ * @returns
+ */
 export function sliceUrlFromHttp(str) {
   // 检查字符串是否包含http
   if (str?.includes('http:') || str?.includes('https:')) {
@@ -81,12 +86,25 @@ export function convertUrlStartWithOneSlash(str) {
   return str
 }
 
+/**
+ * 是否是一个相对或绝对路径的ur类
+ * @param {*} str
+ * @returns
+ */
+export function isUrl(str) {
+  if (!str) {
+    return false
+  }
+
+  return str?.indexOf('/') === 0 || checkStartWithHttp(str)
+}
+
 // 检查是否外链
-export function checkContainHttp(str) {
+export function checkStartWithHttp(str) {
   // 检查字符串是否包含http
-  if (str?.includes('http:') || str?.includes('https:')) {
+  if (str?.indexOf('http:') === 0 || str?.indexOf('https:') === 0) {
     // 如果包含，找到http的位置
-    return str?.indexOf('http') > -1
+    return true
   } else {
     // 不包含
     return false
@@ -354,3 +372,19 @@ export const scanAndConvertToLinks = node => {
     }
   }
 }
+
+/**
+ * 获取url最后一个斜杆后面的内容
+ * @param {*} url
+ * @returns
+ */
+export function getLastSegmentFromUrl(url) {
+  if (!url) {
+    return ''
+  }
+  // 去掉 URL 中的查询参数部分
+  const trimmedUrl = url.split('?')[0]
+  // 获取最后一个斜杠后面的内容
+  const segments = trimmedUrl.split('/')
+  return segments[segments.length - 1]
+}
diff --git a/lib/utils/pageId.js b/lib/utils/pageId.js
index e3c648e1..c963df28 100644
--- a/lib/utils/pageId.js
+++ b/lib/utils/pageId.js
@@ -30,4 +30,18 @@ function extractLangId(str) {
   }
 }
 
-module.exports = { extractLangPrefix, extractLangId }
+/**
+ * 列表中用过来区分page只需要端的id足够
+ */
+
+function getShortId(uuid) {
+  if (!uuid || uuid.indexOf('-') < 0) {
+    return uuid
+  }
+  // 找到第一个 '-' 的位置
+  const index = uuid.indexOf('-')
+  // 截取从开始到第一个 '-' 之前的部分
+  return uuid.substring(0, index)
+}
+
+module.exports = { extractLangPrefix, extractLangId, getShortId }
diff --git a/lib/utils/post.js b/lib/utils/post.js
index 87852eda..e6402a02 100644
--- a/lib/utils/post.js
+++ b/lib/utils/post.js
@@ -1,7 +1,7 @@
 /**
  * 文章相关工具
  */
-import { checkContainHttp } from '.'
+import { checkStartWithHttp } from '.'
 
 /**
  * 获取文章的关联推荐文章列表，目前根据标签关联性筛选
@@ -50,7 +50,7 @@ export function checkSlugHasNoSlash(row) {
   }
   return (
     (slug.match(/\//g) || []).length === 0 &&
-    !checkContainHttp(slug) &&
+    !checkStartWithHttp(slug) &&
     row.type.indexOf('Menu') < 0
   )
 }
@@ -67,7 +67,7 @@ export function checkSlugHasOneSlash(row) {
   }
   return (
     (slug.match(/\//g) || []).length === 1 &&
-    !checkContainHttp(slug) &&
+    !checkStartWithHttp(slug) &&
     row.type.indexOf('Menu') < 0
   )
 }
@@ -85,6 +85,6 @@ export function checkSlugHasMorThanTwoSlash(row) {
   return (
     (slug.match(/\//g) || []).length >= 2 &&
     row.type.indexOf('Menu') < 0 &&
-    !checkContainHttp(slug)
+    !checkStartWithHttp(slug)
   )
 }
diff --git a/next.config.js b/next.config.js
index 20a1c311..5e5937cd 100644
--- a/next.config.js
+++ b/next.config.js
@@ -32,6 +32,16 @@ const locales = (function () {
   return langs
 })()
 
+// 编译前执行
+// const preBuild = (function () {
+//   // 删除 public/sitemap.xml 文件 ； 否则会和/pages/sitemap.xml.js 冲突。
+//   const sitemapPath = path.resolve(__dirname, 'public', 'sitemap.xml')
+//   if (fs.existsSync(sitemapPath)) {
+//     fs.unlinkSync(sitemapPath)
+//     console.log('Deleted existing sitemap.xml from public directory')
+//   }
+// })()
+
 /**
  * 扫描指定目录下的文件夹名，用于获取所有主题
  * @param {*} directory
@@ -53,7 +63,20 @@ function scanSubdirectories(directory) {
   return subdirectories
 }
 
+/**
+ * @type {import('next').NextConfig}
+ */
+
 const nextConfig = {
+  output: process.env.EXPORT ? 'export' : undefined,
+  // 多语言， 在export时禁用
+  i18n: process.env.EXPORT
+    ? undefined
+    : {
+        defaultLocale: BLOG.LANG.slice(0, 2),
+        // 支持的所有多语言,按需填写即可
+        locales
+      },
   images: {
     // 图片压缩
     formats: ['image/avif', 'image/webp'],
@@ -71,90 +94,87 @@ const nextConfig = {
   },
 
   // 默认将feed重定向至 /public/rss/feed.xml
-  async redirects() {
-    return [
-      {
-        source: '/feed',
-        destination: '/rss/feed.xml',
-        permanent: true
-      }
-    ]
-  },
-  // 多语言， 在export时禁用
-  i18n:
-    process.env.npm_lifecycle_event === 'export'
-      ? undefined
-      : {
-          defaultLocale: BLOG.LANG.slice(0, 2),
-          // 支持的所有多语言,按需填写即可
-          locales
-        },
-  // 重写url
-  async rewrites() {
-    // 处理多语言重定向
-    const langsRewrites = []
-    if (BLOG.NOTION_PAGE_ID.indexOf(',') > 0) {
-      const siteIds = BLOG.NOTION_PAGE_ID.split(',')
-      const langs = []
-      for (let index = 0; index < siteIds.length; index++) {
-        const siteId = siteIds[index]
-        const prefix = extractLangPrefix(siteId)
-        // 如果包含前缀 例如 zh , en 等
-        if (prefix) {
-          langs.push(prefix)
-        }
-        console.log('[Locales]', siteId)
-      }
-
-      // 映射多语言
-      // 示例： source: '/:locale(zh|en)/:path*' ; :locale() 会将语言放入重写后的 `?locale=` 中。
-      langsRewrites.push(
-        {
-          source: `/:locale(${langs.join('|')})/:path*`,
-          destination: '/:path*'
-        },
-        // 匹配没有路径的情况，例如 [domain]/zh 或 [domain]/en
-        {
-          source: `/:locale(${langs.join('|')})`,
-          destination: '/'
-        },
-        // 匹配没有路径的情况，例如 [domain]/zh/ 或 [domain]/en/
-        {
-          source: `/:locale(${langs.join('|')})/`,
-          destination: '/'
-        }
-      )
-    }
-
-    return [
-      ...langsRewrites,
-      // 伪静态重写
-      {
-        source: '/:path*.html',
-        destination: '/:path*'
-      }
-    ]
-  },
-  async headers() {
-    return [
-      {
-        source: '/:path*{/}?',
-        headers: [
-          { key: 'Access-Control-Allow-Credentials', value: 'true' },
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+  redirects: process.env.EXPORT
+    ? undefined
+    : async () => {
+        return [
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT'
-          },
-          {
-            key: 'Access-Control-Allow-Headers',
-            value:
-              'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
+            source: '/feed',
+            destination: '/rss/feed.xml',
+            permanent: true
           }
         ]
-      }
-    ]
-  },
+      },
+  // 重写url
+  rewrites: process.env.EXPORT
+    ? undefined
+    : async () => {
+        // 处理多语言重定向
+        const langsRewrites = []
+        if (BLOG.NOTION_PAGE_ID.indexOf(',') > 0) {
+          const siteIds = BLOG.NOTION_PAGE_ID.split(',')
+          const langs = []
+          for (let index = 0; index < siteIds.length; index++) {
+            const siteId = siteIds[index]
+            const prefix = extractLangPrefix(siteId)
+            // 如果包含前缀 例如 zh , en 等
+            if (prefix) {
+              langs.push(prefix)
+            }
+            console.log('[Locales]', siteId)
+          }
+
+          // 映射多语言
+          // 示例： source: '/:locale(zh|en)/:path*' ; :locale() 会将语言放入重写后的 `?locale=` 中。
+          langsRewrites.push(
+            {
+              source: `/:locale(${langs.join('|')})/:path*`,
+              destination: '/:path*'
+            },
+            // 匹配没有路径的情况，例如 [domain]/zh 或 [domain]/en
+            {
+              source: `/:locale(${langs.join('|')})`,
+              destination: '/'
+            },
+            // 匹配没有路径的情况，例如 [domain]/zh/ 或 [domain]/en/
+            {
+              source: `/:locale(${langs.join('|')})/`,
+              destination: '/'
+            }
+          )
+        }
+
+        return [
+          ...langsRewrites,
+          // 伪静态重写
+          {
+            source: '/:path*.html',
+            destination: '/:path*'
+          }
+        ]
+      },
+  headers: process.env.EXPORT
+    ? undefined
+    : async () => {
+        return [
+          {
+            source: '/:path*{/}?',
+            headers: [
+              { key: 'Access-Control-Allow-Credentials', value: 'true' },
+              { key: 'Access-Control-Allow-Origin', value: '*' },
+              {
+                key: 'Access-Control-Allow-Methods',
+                value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT'
+              },
+              {
+                key: 'Access-Control-Allow-Headers',
+                value:
+                  'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
+              }
+            ]
+          }
+        ]
+      },
   webpack: (config, { dev, isServer }) => {
     // 动态主题：添加 resolve.alias 配置，将动态路径映射到实际路径
     if (!isServer) {
diff --git a/package.json b/package.json
index 5e7761c7..55c67a2b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "4.5.3",
+  "version": "4.6.1",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {
@@ -17,8 +17,9 @@
     "build": "next build",
     "start": "next start",
     "post-build": "next-sitemap --config next-sitemap.config.js",
-    "export": "next build && next-sitemap --config next-sitemap.config.js && next export",
-    "bundle-report": "cross-env ANALYZE=true yarn build"
+    "export": "cross-env EXPORT=true next build && next-sitemap --config next-sitemap.config.js",
+    "bundle-report": "cross-env ANALYZE=true next build",
+    "build-all-in-dev": "cross-env VERCEL_ENV=production next build"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
@@ -29,7 +30,7 @@
     "js-md5": "^0.7.3",
     "lodash.throttle": "^4.1.1",
     "memory-cache": "^0.2.0",
-    "next": "13.3.1",
+    "next": "14.2.4",
     "notion-client": "6.15.6",
     "notion-utils": "6.15.6",
     "react": "^18.2.0",
diff --git a/pages/[prefix]/[slug]/[...suffix].js b/pages/[prefix]/[slug]/[...suffix].js
index 2050e81d..d9567c4c 100644
--- a/pages/[prefix]/[slug]/[...suffix].js
+++ b/pages/[prefix]/[slug]/[...suffix].js
@@ -30,17 +30,17 @@ export async function getStaticPaths() {
 
   const from = 'slug-paths'
   const { allPages } = await getGlobalData({ from })
-
+  const paths = allPages
+    ?.filter(row => checkSlugHasMorThanTwoSlash(row))
+    .map(row => ({
+      params: {
+        prefix: row.slug.split('/')[0],
+        slug: row.slug.split('/')[1],
+        suffix: row.slug.split('/').slice(2)
+      }
+    }))
   return {
-    paths: allPages
-      ?.filter(row => checkSlugHasMorThanTwoSlash(row))
-      .map(row => ({
-        params: {
-          prefix: row.slug.split('/')[0],
-          slug: row.slug.split('/')[1],
-          suffix: row.slug.split('/').slice(1)
-        }
-      })),
+    paths: paths,
     fallback: true
   }
 }
@@ -83,16 +83,18 @@ export async function getStaticProps({
     props.post = null
     return {
       props,
-      revalidate: siteConfig(
-        'REVALIDATE_SECOND',
-        BLOG.NEXT_REVALIDATE_SECOND,
-        props.NOTION_CONFIG
-      )
+      revalidate: process.env.EXPORT
+        ? undefined
+        : siteConfig(
+            'NEXT_REVALIDATE_SECOND',
+            BLOG.NEXT_REVALIDATE_SECOND,
+            props.NOTION_CONFIG
+          )
     }
   }
 
   // 文章内容加载
-  if (!props?.posts?.blockMap) {
+  if (!props?.post?.blockMap) {
     props.post.blockMap = await getPostBlocks(props.post.id, from)
   }
   // 生成全文索引 && JSON.parse(BLOG.ALGOLIA_RECREATE_DATA)
@@ -122,11 +124,13 @@ export async function getStaticProps({
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/[prefix]/[slug]/index.js b/pages/[prefix]/[slug]/index.js
index 2c844eba..6b50c206 100644
--- a/pages/[prefix]/[slug]/index.js
+++ b/pages/[prefix]/[slug]/index.js
@@ -72,16 +72,18 @@ export async function getStaticProps({ params: { prefix, slug }, locale }) {
     props.post = null
     return {
       props,
-      revalidate: siteConfig(
-        'REVALIDATE_SECOND',
-        BLOG.NEXT_REVALIDATE_SECOND,
-        props.NOTION_CONFIG
-      )
+      revalidate: process.env.EXPORT
+        ? undefined
+        : siteConfig(
+            'NEXT_REVALIDATE_SECOND',
+            BLOG.NEXT_REVALIDATE_SECOND,
+            props.NOTION_CONFIG
+          )
     }
   }
 
   // 文章内容加载
-  if (!props?.posts?.blockMap) {
+  if (!props?.post?.blockMap) {
     props.post.blockMap = await getPostBlocks(props.post.id, from)
   }
   // 生成全文索引 && JSON.parse(BLOG.ALGOLIA_RECREATE_DATA)
@@ -111,11 +113,13 @@ export async function getStaticProps({ params: { prefix, slug }, locale }) {
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/[prefix]/index.js b/pages/[prefix]/index.js
index 469ca617..dc480fcc 100644
--- a/pages/[prefix]/index.js
+++ b/pages/[prefix]/index.js
@@ -1,7 +1,10 @@
 import BLOG from '@/blog.config'
+import useNotification from '@/components/Notification'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData'
+import { useGlobal } from '@/lib/global'
 import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
+import { getPasswordQuery } from '@/lib/password'
 import { uploadDataToAlgolia } from '@/lib/plugins/algolia'
 import { checkSlugHasNoSlash, getRecommendPost } from '@/lib/utils/post'
 import { getLayoutByTheme } from '@/themes/theme'
@@ -19,9 +22,11 @@ import { useEffect, useState } from 'react'
 const Slug = props => {
   const { post } = props
   const router = useRouter()
+  const { locale } = useGlobal()
 
   // 文章锁🔐
   const [lock, setLock] = useState(post?.password && post?.password !== '')
+  const { showNotification, Notification } = useNotification()
 
   /**
    * 验证文章密码
@@ -36,6 +41,7 @@ const Slug = props => {
       setLock(false)
       // 输入密码存入localStorage，下次自动提交
       localStorage.setItem('password_' + router.asPath, passInput)
+      showNotification(locale.COMMON.ARTICLE_UNLOCK_TIPS) // 设置解锁成功提示显示
       return true
     }
     return false
@@ -56,10 +62,14 @@ const Slug = props => {
       }
     }
 
-    // 从localStorage中读取上次记录 自动提交密码
-    const passInput = localStorage.getItem('password_' + router.asPath)
-    if (passInput) {
-      validPassword(passInput)
+    // 读取上次记录 自动提交密码
+    const passInputs = getPasswordQuery(router.asPath)
+    if (passInputs.length > 0) {
+      for (const passInput of passInputs) {
+        if (validPassword(passInput)) {
+          break // 密码验证成功，停止尝试
+        }
+      }
     }
   }, [post])
 
@@ -83,7 +93,12 @@ const Slug = props => {
     theme: siteConfig('THEME'),
     router: useRouter()
   })
-  return <Layout {...props} />
+  return (
+    <>
+      <Layout {...props} />
+      {post?.password && post?.password !== '' && !lock && <Notification />}
+    </>
+  )
 }
 
 export async function getStaticPaths() {
@@ -109,17 +124,17 @@ export async function getStaticProps({ params: { prefix }, locale }) {
   let fullSlug = prefix
   const from = `slug-props-${fullSlug}`
   const props = await getGlobalData({ from, locale })
-  if (siteConfig('PSEUDO_STATIC', BLOG.PSEUDO_STATIC, props.NOTION_CONFIG)) {
+  if (siteConfig('PSEUDO_STATIC', false, props.NOTION_CONFIG)) {
     if (!fullSlug.endsWith('.html')) {
       fullSlug += '.html'
     }
   }
-
+  
   // 在列表内查找文章
   props.post = props?.allPages?.find(p => {
     return (
       p.type.indexOf('Menu') < 0 &&
-      (p.slug === fullSlug || p.id === idToUuid(fullSlug))
+      (p.slug === prefix || p.id === idToUuid(prefix))
     )
   })
 
@@ -136,16 +151,18 @@ export async function getStaticProps({ params: { prefix }, locale }) {
     props.post = null
     return {
       props,
-      revalidate: siteConfig(
-        'REVALIDATE_SECOND',
-        BLOG.NEXT_REVALIDATE_SECOND,
-        props.NOTION_CONFIG
-      )
+      revalidate: process.env.EXPORT
+        ? undefined
+        : siteConfig(
+            'NEXT_REVALIDATE_SECOND',
+            BLOG.NEXT_REVALIDATE_SECOND,
+            props.NOTION_CONFIG
+          )
     }
   }
 
   // 文章内容加载
-  if (!props?.posts?.blockMap) {
+  if (!props?.post?.blockMap) {
     props.post.blockMap = await getPostBlocks(props.post.id, from)
   }
 
@@ -176,11 +193,13 @@ export async function getStaticProps({ params: { prefix }, locale }) {
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 9f0803c8..beecf79c 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -61,11 +61,13 @@ export async function getStaticProps({ locale }) {
 
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/category/[category]/index.js b/pages/category/[category]/index.js
index 879dc642..ea70b454 100644
--- a/pages/category/[category]/index.js
+++ b/pages/category/[category]/index.js
@@ -49,11 +49,13 @@ export async function getStaticProps({ params: { category }, locale }) {
 
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/category/[category]/page/[page].js b/pages/category/[category]/page/[page].js
index 39ce44df..120d762a 100644
--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -44,11 +44,13 @@ export async function getStaticProps({ params: { category, page } }) {
 
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
@@ -69,7 +71,7 @@ export async function getStaticPaths() {
     // 处理文章页数
     const postCount = categoryPosts.length
     const totalPages = Math.ceil(
-      postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+      postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
     )
     if (totalPages > 1) {
       for (let i = 1; i <= totalPages; i++) {
diff --git a/pages/category/index.js b/pages/category/index.js
index 423383bf..62a3cc9f 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -24,10 +24,12 @@ export async function getStaticProps({ locale }) {
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
diff --git a/pages/index.js b/pages/index.js
index b925bc0e..43f5b114 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -69,11 +69,13 @@ export async function getStaticProps(req) {
 
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/page/[page].js b/pages/page/[page].js
index 236c93ef..bd1dc7e2 100644
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -23,7 +23,7 @@ export async function getStaticPaths({ locale }) {
   const from = 'page-paths'
   const { postCount, NOTION_CONFIG } = await getGlobalData({ from, locale })
   const totalPages = Math.ceil(
-    postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+    postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   )
   return {
     // remove first page, we 're not gonna handle that.
@@ -69,11 +69,13 @@ export async function getStaticProps({ params: { page } }) {
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js
index 6d753578..9b491b00 100644
--- a/pages/search/[keyword]/index.js
+++ b/pages/search/[keyword]/index.js
@@ -47,11 +47,13 @@ export async function getStaticProps({ params: { keyword }, locale }) {
   props.keyword = keyword
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/search/[keyword]/page/[page].js b/pages/search/[keyword]/page/[page].js
index 6e497b7c..bebaa9fc 100644
--- a/pages/search/[keyword]/page/[page].js
+++ b/pages/search/[keyword]/page/[page].js
@@ -45,11 +45,13 @@ export async function getStaticProps({ params: { keyword, page }, locale }) {
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/search/index.js b/pages/search/index.js
index 87d2e16d..6226a400 100644
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -54,11 +54,13 @@ export async function getStaticProps({ locale }) {
   )
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/signin.js b/pages/signin.js
index b3a2765f..fbf618a4 100644
--- a/pages/signin.js
+++ b/pages/signin.js
@@ -27,11 +27,13 @@ export async function getStaticProps(req) {
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/signup.js b/pages/signup.js
index d0852c4e..bbe38129 100644
--- a/pages/signup.js
+++ b/pages/signup.js
@@ -27,11 +27,13 @@ export async function getStaticProps(req) {
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/sitemap.xml.js b/pages/sitemap.xml.js
index eb7f7bd8..2f6c20fe 100644
--- a/pages/sitemap.xml.js
+++ b/pages/sitemap.xml.js
@@ -27,7 +27,6 @@ export const getServerSideProps = async ctx => {
     'Cache-Control',
     'public, max-age=3600, stale-while-revalidate=59'
   )
-  console.log('fff', fields)
   return getServerSideSitemap(ctx, fields)
 }
 
@@ -55,7 +54,7 @@ function generateLocalesSitemap(link, allPages, locale) {
       priority: '0.7'
     },
     {
-      loc: `${link}${locale}/feed`,
+      loc: `${link}${locale}/rss/feed.xml`,
       lastmod: new Date().toISOString().split('T')[0],
       changefreq: 'daily',
       priority: '0.7'
diff --git a/pages/tag/[tag]/index.js b/pages/tag/[tag]/index.js
index 2860f91c..79458257 100644
--- a/pages/tag/[tag]/index.js
+++ b/pages/tag/[tag]/index.js
@@ -45,11 +45,13 @@ export async function getStaticProps({ params: { tag }, locale }) {
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/pages/tag/[tag]/page/[page].js b/pages/tag/[tag]/page/[page].js
index f8e70c3c..da93f16f 100644
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -34,11 +34,13 @@ export async function getStaticProps({ params: { tag, page }, locale }) {
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
@@ -54,7 +56,7 @@ export async function getStaticPaths() {
     // 处理文章页数
     const postCount = tagPosts.length
     const totalPages = Math.ceil(
-      postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+      postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
     )
     if (totalPages > 1) {
       for (let i = 1; i <= totalPages; i++) {
diff --git a/pages/tag/index.js b/pages/tag/index.js
index f9cddea4..5433a033 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -26,11 +26,13 @@ export async function getStaticProps(req) {
   delete props.allPages
   return {
     props,
-    revalidate: siteConfig(
-      'NEXT_REVALIDATE_SECOND',
-      BLOG.NEXT_REVALIDATE_SECOND,
-      props.NOTION_CONFIG
-    )
+    revalidate: process.env.EXPORT
+      ? undefined
+      : siteConfig(
+          'NEXT_REVALIDATE_SECOND',
+          BLOG.NEXT_REVALIDATE_SECOND,
+          props.NOTION_CONFIG
+        )
   }
 }
 
diff --git a/public/css/aos.css b/public/css/aos.css
new file mode 100644
index 00000000..86710a57
--- /dev/null
+++ b/public/css/aos.css
@@ -0,0 +1,916 @@
+[data-aos][data-aos][data-aos-duration='50'],
+body[data-aos-duration='50'] [data-aos] {
+  transition-duration: 50ms;
+}
+[data-aos][data-aos][data-aos-delay='50'],
+body[data-aos-delay='50'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='50'].aos-animate,
+body[data-aos-delay='50'] [data-aos].aos-animate {
+  transition-delay: 50ms;
+}
+[data-aos][data-aos][data-aos-duration='100'],
+body[data-aos-duration='100'] [data-aos] {
+  transition-duration: 0.1s;
+}
+[data-aos][data-aos][data-aos-delay='100'],
+body[data-aos-delay='100'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='100'].aos-animate,
+body[data-aos-delay='100'] [data-aos].aos-animate {
+  transition-delay: 0.1s;
+}
+[data-aos][data-aos][data-aos-duration='150'],
+body[data-aos-duration='150'] [data-aos] {
+  transition-duration: 0.15s;
+}
+[data-aos][data-aos][data-aos-delay='150'],
+body[data-aos-delay='150'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='150'].aos-animate,
+body[data-aos-delay='150'] [data-aos].aos-animate {
+  transition-delay: 0.15s;
+}
+[data-aos][data-aos][data-aos-duration='200'],
+body[data-aos-duration='200'] [data-aos] {
+  transition-duration: 0.2s;
+}
+[data-aos][data-aos][data-aos-delay='200'],
+body[data-aos-delay='200'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='200'].aos-animate,
+body[data-aos-delay='200'] [data-aos].aos-animate {
+  transition-delay: 0.2s;
+}
+[data-aos][data-aos][data-aos-duration='250'],
+body[data-aos-duration='250'] [data-aos] {
+  transition-duration: 0.25s;
+}
+[data-aos][data-aos][data-aos-delay='250'],
+body[data-aos-delay='250'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='250'].aos-animate,
+body[data-aos-delay='250'] [data-aos].aos-animate {
+  transition-delay: 0.25s;
+}
+[data-aos][data-aos][data-aos-duration='300'],
+body[data-aos-duration='300'] [data-aos] {
+  transition-duration: 0.3s;
+}
+[data-aos][data-aos][data-aos-delay='300'],
+body[data-aos-delay='300'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='300'].aos-animate,
+body[data-aos-delay='300'] [data-aos].aos-animate {
+  transition-delay: 0.3s;
+}
+[data-aos][data-aos][data-aos-duration='350'],
+body[data-aos-duration='350'] [data-aos] {
+  transition-duration: 0.35s;
+}
+[data-aos][data-aos][data-aos-delay='350'],
+body[data-aos-delay='350'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='350'].aos-animate,
+body[data-aos-delay='350'] [data-aos].aos-animate {
+  transition-delay: 0.35s;
+}
+[data-aos][data-aos][data-aos-duration='400'],
+body[data-aos-duration='400'] [data-aos] {
+  transition-duration: 0.4s;
+}
+[data-aos][data-aos][data-aos-delay='400'],
+body[data-aos-delay='400'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='400'].aos-animate,
+body[data-aos-delay='400'] [data-aos].aos-animate {
+  transition-delay: 0.4s;
+}
+[data-aos][data-aos][data-aos-duration='450'],
+body[data-aos-duration='450'] [data-aos] {
+  transition-duration: 0.45s;
+}
+[data-aos][data-aos][data-aos-delay='450'],
+body[data-aos-delay='450'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='450'].aos-animate,
+body[data-aos-delay='450'] [data-aos].aos-animate {
+  transition-delay: 0.45s;
+}
+[data-aos][data-aos][data-aos-duration='500'],
+body[data-aos-duration='500'] [data-aos] {
+  transition-duration: 0.5s;
+}
+[data-aos][data-aos][data-aos-delay='500'],
+body[data-aos-delay='500'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='500'].aos-animate,
+body[data-aos-delay='500'] [data-aos].aos-animate {
+  transition-delay: 0.5s;
+}
+[data-aos][data-aos][data-aos-duration='550'],
+body[data-aos-duration='550'] [data-aos] {
+  transition-duration: 0.55s;
+}
+[data-aos][data-aos][data-aos-delay='550'],
+body[data-aos-delay='550'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='550'].aos-animate,
+body[data-aos-delay='550'] [data-aos].aos-animate {
+  transition-delay: 0.55s;
+}
+[data-aos][data-aos][data-aos-duration='600'],
+body[data-aos-duration='600'] [data-aos] {
+  transition-duration: 0.6s;
+}
+[data-aos][data-aos][data-aos-delay='600'],
+body[data-aos-delay='600'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='600'].aos-animate,
+body[data-aos-delay='600'] [data-aos].aos-animate {
+  transition-delay: 0.6s;
+}
+[data-aos][data-aos][data-aos-duration='650'],
+body[data-aos-duration='650'] [data-aos] {
+  transition-duration: 0.65s;
+}
+[data-aos][data-aos][data-aos-delay='650'],
+body[data-aos-delay='650'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='650'].aos-animate,
+body[data-aos-delay='650'] [data-aos].aos-animate {
+  transition-delay: 0.65s;
+}
+[data-aos][data-aos][data-aos-duration='700'],
+body[data-aos-duration='700'] [data-aos] {
+  transition-duration: 0.7s;
+}
+[data-aos][data-aos][data-aos-delay='700'],
+body[data-aos-delay='700'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='700'].aos-animate,
+body[data-aos-delay='700'] [data-aos].aos-animate {
+  transition-delay: 0.7s;
+}
+[data-aos][data-aos][data-aos-duration='750'],
+body[data-aos-duration='750'] [data-aos] {
+  transition-duration: 0.75s;
+}
+[data-aos][data-aos][data-aos-delay='750'],
+body[data-aos-delay='750'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='750'].aos-animate,
+body[data-aos-delay='750'] [data-aos].aos-animate {
+  transition-delay: 0.75s;
+}
+[data-aos][data-aos][data-aos-duration='800'],
+body[data-aos-duration='800'] [data-aos] {
+  transition-duration: 0.8s;
+}
+[data-aos][data-aos][data-aos-delay='800'],
+body[data-aos-delay='800'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='800'].aos-animate,
+body[data-aos-delay='800'] [data-aos].aos-animate {
+  transition-delay: 0.8s;
+}
+[data-aos][data-aos][data-aos-duration='850'],
+body[data-aos-duration='850'] [data-aos] {
+  transition-duration: 0.85s;
+}
+[data-aos][data-aos][data-aos-delay='850'],
+body[data-aos-delay='850'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='850'].aos-animate,
+body[data-aos-delay='850'] [data-aos].aos-animate {
+  transition-delay: 0.85s;
+}
+[data-aos][data-aos][data-aos-duration='900'],
+body[data-aos-duration='900'] [data-aos] {
+  transition-duration: 0.9s;
+}
+[data-aos][data-aos][data-aos-delay='900'],
+body[data-aos-delay='900'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='900'].aos-animate,
+body[data-aos-delay='900'] [data-aos].aos-animate {
+  transition-delay: 0.9s;
+}
+[data-aos][data-aos][data-aos-duration='950'],
+body[data-aos-duration='950'] [data-aos] {
+  transition-duration: 0.95s;
+}
+[data-aos][data-aos][data-aos-delay='950'],
+body[data-aos-delay='950'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='950'].aos-animate,
+body[data-aos-delay='950'] [data-aos].aos-animate {
+  transition-delay: 0.95s;
+}
+[data-aos][data-aos][data-aos-duration='1000'],
+body[data-aos-duration='1000'] [data-aos] {
+  transition-duration: 1s;
+}
+[data-aos][data-aos][data-aos-delay='1000'],
+body[data-aos-delay='1000'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1000'].aos-animate,
+body[data-aos-delay='1000'] [data-aos].aos-animate {
+  transition-delay: 1s;
+}
+[data-aos][data-aos][data-aos-duration='1050'],
+body[data-aos-duration='1050'] [data-aos] {
+  transition-duration: 1.05s;
+}
+[data-aos][data-aos][data-aos-delay='1050'],
+body[data-aos-delay='1050'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1050'].aos-animate,
+body[data-aos-delay='1050'] [data-aos].aos-animate {
+  transition-delay: 1.05s;
+}
+[data-aos][data-aos][data-aos-duration='1100'],
+body[data-aos-duration='1100'] [data-aos] {
+  transition-duration: 1.1s;
+}
+[data-aos][data-aos][data-aos-delay='1100'],
+body[data-aos-delay='1100'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1100'].aos-animate,
+body[data-aos-delay='1100'] [data-aos].aos-animate {
+  transition-delay: 1.1s;
+}
+[data-aos][data-aos][data-aos-duration='1150'],
+body[data-aos-duration='1150'] [data-aos] {
+  transition-duration: 1.15s;
+}
+[data-aos][data-aos][data-aos-delay='1150'],
+body[data-aos-delay='1150'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1150'].aos-animate,
+body[data-aos-delay='1150'] [data-aos].aos-animate {
+  transition-delay: 1.15s;
+}
+[data-aos][data-aos][data-aos-duration='1200'],
+body[data-aos-duration='1200'] [data-aos] {
+  transition-duration: 1.2s;
+}
+[data-aos][data-aos][data-aos-delay='1200'],
+body[data-aos-delay='1200'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1200'].aos-animate,
+body[data-aos-delay='1200'] [data-aos].aos-animate {
+  transition-delay: 1.2s;
+}
+[data-aos][data-aos][data-aos-duration='1250'],
+body[data-aos-duration='1250'] [data-aos] {
+  transition-duration: 1.25s;
+}
+[data-aos][data-aos][data-aos-delay='1250'],
+body[data-aos-delay='1250'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1250'].aos-animate,
+body[data-aos-delay='1250'] [data-aos].aos-animate {
+  transition-delay: 1.25s;
+}
+[data-aos][data-aos][data-aos-duration='1300'],
+body[data-aos-duration='1300'] [data-aos] {
+  transition-duration: 1.3s;
+}
+[data-aos][data-aos][data-aos-delay='1300'],
+body[data-aos-delay='1300'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1300'].aos-animate,
+body[data-aos-delay='1300'] [data-aos].aos-animate {
+  transition-delay: 1.3s;
+}
+[data-aos][data-aos][data-aos-duration='1350'],
+body[data-aos-duration='1350'] [data-aos] {
+  transition-duration: 1.35s;
+}
+[data-aos][data-aos][data-aos-delay='1350'],
+body[data-aos-delay='1350'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1350'].aos-animate,
+body[data-aos-delay='1350'] [data-aos].aos-animate {
+  transition-delay: 1.35s;
+}
+[data-aos][data-aos][data-aos-duration='1400'],
+body[data-aos-duration='1400'] [data-aos] {
+  transition-duration: 1.4s;
+}
+[data-aos][data-aos][data-aos-delay='1400'],
+body[data-aos-delay='1400'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1400'].aos-animate,
+body[data-aos-delay='1400'] [data-aos].aos-animate {
+  transition-delay: 1.4s;
+}
+[data-aos][data-aos][data-aos-duration='1450'],
+body[data-aos-duration='1450'] [data-aos] {
+  transition-duration: 1.45s;
+}
+[data-aos][data-aos][data-aos-delay='1450'],
+body[data-aos-delay='1450'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1450'].aos-animate,
+body[data-aos-delay='1450'] [data-aos].aos-animate {
+  transition-delay: 1.45s;
+}
+[data-aos][data-aos][data-aos-duration='1500'],
+body[data-aos-duration='1500'] [data-aos] {
+  transition-duration: 1.5s;
+}
+[data-aos][data-aos][data-aos-delay='1500'],
+body[data-aos-delay='1500'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1500'].aos-animate,
+body[data-aos-delay='1500'] [data-aos].aos-animate {
+  transition-delay: 1.5s;
+}
+[data-aos][data-aos][data-aos-duration='1550'],
+body[data-aos-duration='1550'] [data-aos] {
+  transition-duration: 1.55s;
+}
+[data-aos][data-aos][data-aos-delay='1550'],
+body[data-aos-delay='1550'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1550'].aos-animate,
+body[data-aos-delay='1550'] [data-aos].aos-animate {
+  transition-delay: 1.55s;
+}
+[data-aos][data-aos][data-aos-duration='1600'],
+body[data-aos-duration='1600'] [data-aos] {
+  transition-duration: 1.6s;
+}
+[data-aos][data-aos][data-aos-delay='1600'],
+body[data-aos-delay='1600'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1600'].aos-animate,
+body[data-aos-delay='1600'] [data-aos].aos-animate {
+  transition-delay: 1.6s;
+}
+[data-aos][data-aos][data-aos-duration='1650'],
+body[data-aos-duration='1650'] [data-aos] {
+  transition-duration: 1.65s;
+}
+[data-aos][data-aos][data-aos-delay='1650'],
+body[data-aos-delay='1650'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1650'].aos-animate,
+body[data-aos-delay='1650'] [data-aos].aos-animate {
+  transition-delay: 1.65s;
+}
+[data-aos][data-aos][data-aos-duration='1700'],
+body[data-aos-duration='1700'] [data-aos] {
+  transition-duration: 1.7s;
+}
+[data-aos][data-aos][data-aos-delay='1700'],
+body[data-aos-delay='1700'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1700'].aos-animate,
+body[data-aos-delay='1700'] [data-aos].aos-animate {
+  transition-delay: 1.7s;
+}
+[data-aos][data-aos][data-aos-duration='1750'],
+body[data-aos-duration='1750'] [data-aos] {
+  transition-duration: 1.75s;
+}
+[data-aos][data-aos][data-aos-delay='1750'],
+body[data-aos-delay='1750'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1750'].aos-animate,
+body[data-aos-delay='1750'] [data-aos].aos-animate {
+  transition-delay: 1.75s;
+}
+[data-aos][data-aos][data-aos-duration='1800'],
+body[data-aos-duration='1800'] [data-aos] {
+  transition-duration: 1.8s;
+}
+[data-aos][data-aos][data-aos-delay='1800'],
+body[data-aos-delay='1800'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1800'].aos-animate,
+body[data-aos-delay='1800'] [data-aos].aos-animate {
+  transition-delay: 1.8s;
+}
+[data-aos][data-aos][data-aos-duration='1850'],
+body[data-aos-duration='1850'] [data-aos] {
+  transition-duration: 1.85s;
+}
+[data-aos][data-aos][data-aos-delay='1850'],
+body[data-aos-delay='1850'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1850'].aos-animate,
+body[data-aos-delay='1850'] [data-aos].aos-animate {
+  transition-delay: 1.85s;
+}
+[data-aos][data-aos][data-aos-duration='1900'],
+body[data-aos-duration='1900'] [data-aos] {
+  transition-duration: 1.9s;
+}
+[data-aos][data-aos][data-aos-delay='1900'],
+body[data-aos-delay='1900'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1900'].aos-animate,
+body[data-aos-delay='1900'] [data-aos].aos-animate {
+  transition-delay: 1.9s;
+}
+[data-aos][data-aos][data-aos-duration='1950'],
+body[data-aos-duration='1950'] [data-aos] {
+  transition-duration: 1.95s;
+}
+[data-aos][data-aos][data-aos-delay='1950'],
+body[data-aos-delay='1950'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='1950'].aos-animate,
+body[data-aos-delay='1950'] [data-aos].aos-animate {
+  transition-delay: 1.95s;
+}
+[data-aos][data-aos][data-aos-duration='2000'],
+body[data-aos-duration='2000'] [data-aos] {
+  transition-duration: 2s;
+}
+[data-aos][data-aos][data-aos-delay='2000'],
+body[data-aos-delay='2000'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2000'].aos-animate,
+body[data-aos-delay='2000'] [data-aos].aos-animate {
+  transition-delay: 2s;
+}
+[data-aos][data-aos][data-aos-duration='2050'],
+body[data-aos-duration='2050'] [data-aos] {
+  transition-duration: 2.05s;
+}
+[data-aos][data-aos][data-aos-delay='2050'],
+body[data-aos-delay='2050'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2050'].aos-animate,
+body[data-aos-delay='2050'] [data-aos].aos-animate {
+  transition-delay: 2.05s;
+}
+[data-aos][data-aos][data-aos-duration='2100'],
+body[data-aos-duration='2100'] [data-aos] {
+  transition-duration: 2.1s;
+}
+[data-aos][data-aos][data-aos-delay='2100'],
+body[data-aos-delay='2100'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2100'].aos-animate,
+body[data-aos-delay='2100'] [data-aos].aos-animate {
+  transition-delay: 2.1s;
+}
+[data-aos][data-aos][data-aos-duration='2150'],
+body[data-aos-duration='2150'] [data-aos] {
+  transition-duration: 2.15s;
+}
+[data-aos][data-aos][data-aos-delay='2150'],
+body[data-aos-delay='2150'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2150'].aos-animate,
+body[data-aos-delay='2150'] [data-aos].aos-animate {
+  transition-delay: 2.15s;
+}
+[data-aos][data-aos][data-aos-duration='2200'],
+body[data-aos-duration='2200'] [data-aos] {
+  transition-duration: 2.2s;
+}
+[data-aos][data-aos][data-aos-delay='2200'],
+body[data-aos-delay='2200'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2200'].aos-animate,
+body[data-aos-delay='2200'] [data-aos].aos-animate {
+  transition-delay: 2.2s;
+}
+[data-aos][data-aos][data-aos-duration='2250'],
+body[data-aos-duration='2250'] [data-aos] {
+  transition-duration: 2.25s;
+}
+[data-aos][data-aos][data-aos-delay='2250'],
+body[data-aos-delay='2250'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2250'].aos-animate,
+body[data-aos-delay='2250'] [data-aos].aos-animate {
+  transition-delay: 2.25s;
+}
+[data-aos][data-aos][data-aos-duration='2300'],
+body[data-aos-duration='2300'] [data-aos] {
+  transition-duration: 2.3s;
+}
+[data-aos][data-aos][data-aos-delay='2300'],
+body[data-aos-delay='2300'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2300'].aos-animate,
+body[data-aos-delay='2300'] [data-aos].aos-animate {
+  transition-delay: 2.3s;
+}
+[data-aos][data-aos][data-aos-duration='2350'],
+body[data-aos-duration='2350'] [data-aos] {
+  transition-duration: 2.35s;
+}
+[data-aos][data-aos][data-aos-delay='2350'],
+body[data-aos-delay='2350'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2350'].aos-animate,
+body[data-aos-delay='2350'] [data-aos].aos-animate {
+  transition-delay: 2.35s;
+}
+[data-aos][data-aos][data-aos-duration='2400'],
+body[data-aos-duration='2400'] [data-aos] {
+  transition-duration: 2.4s;
+}
+[data-aos][data-aos][data-aos-delay='2400'],
+body[data-aos-delay='2400'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2400'].aos-animate,
+body[data-aos-delay='2400'] [data-aos].aos-animate {
+  transition-delay: 2.4s;
+}
+[data-aos][data-aos][data-aos-duration='2450'],
+body[data-aos-duration='2450'] [data-aos] {
+  transition-duration: 2.45s;
+}
+[data-aos][data-aos][data-aos-delay='2450'],
+body[data-aos-delay='2450'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2450'].aos-animate,
+body[data-aos-delay='2450'] [data-aos].aos-animate {
+  transition-delay: 2.45s;
+}
+[data-aos][data-aos][data-aos-duration='2500'],
+body[data-aos-duration='2500'] [data-aos] {
+  transition-duration: 2.5s;
+}
+[data-aos][data-aos][data-aos-delay='2500'],
+body[data-aos-delay='2500'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2500'].aos-animate,
+body[data-aos-delay='2500'] [data-aos].aos-animate {
+  transition-delay: 2.5s;
+}
+[data-aos][data-aos][data-aos-duration='2550'],
+body[data-aos-duration='2550'] [data-aos] {
+  transition-duration: 2.55s;
+}
+[data-aos][data-aos][data-aos-delay='2550'],
+body[data-aos-delay='2550'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2550'].aos-animate,
+body[data-aos-delay='2550'] [data-aos].aos-animate {
+  transition-delay: 2.55s;
+}
+[data-aos][data-aos][data-aos-duration='2600'],
+body[data-aos-duration='2600'] [data-aos] {
+  transition-duration: 2.6s;
+}
+[data-aos][data-aos][data-aos-delay='2600'],
+body[data-aos-delay='2600'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2600'].aos-animate,
+body[data-aos-delay='2600'] [data-aos].aos-animate {
+  transition-delay: 2.6s;
+}
+[data-aos][data-aos][data-aos-duration='2650'],
+body[data-aos-duration='2650'] [data-aos] {
+  transition-duration: 2.65s;
+}
+[data-aos][data-aos][data-aos-delay='2650'],
+body[data-aos-delay='2650'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2650'].aos-animate,
+body[data-aos-delay='2650'] [data-aos].aos-animate {
+  transition-delay: 2.65s;
+}
+[data-aos][data-aos][data-aos-duration='2700'],
+body[data-aos-duration='2700'] [data-aos] {
+  transition-duration: 2.7s;
+}
+[data-aos][data-aos][data-aos-delay='2700'],
+body[data-aos-delay='2700'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2700'].aos-animate,
+body[data-aos-delay='2700'] [data-aos].aos-animate {
+  transition-delay: 2.7s;
+}
+[data-aos][data-aos][data-aos-duration='2750'],
+body[data-aos-duration='2750'] [data-aos] {
+  transition-duration: 2.75s;
+}
+[data-aos][data-aos][data-aos-delay='2750'],
+body[data-aos-delay='2750'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2750'].aos-animate,
+body[data-aos-delay='2750'] [data-aos].aos-animate {
+  transition-delay: 2.75s;
+}
+[data-aos][data-aos][data-aos-duration='2800'],
+body[data-aos-duration='2800'] [data-aos] {
+  transition-duration: 2.8s;
+}
+[data-aos][data-aos][data-aos-delay='2800'],
+body[data-aos-delay='2800'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2800'].aos-animate,
+body[data-aos-delay='2800'] [data-aos].aos-animate {
+  transition-delay: 2.8s;
+}
+[data-aos][data-aos][data-aos-duration='2850'],
+body[data-aos-duration='2850'] [data-aos] {
+  transition-duration: 2.85s;
+}
+[data-aos][data-aos][data-aos-delay='2850'],
+body[data-aos-delay='2850'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2850'].aos-animate,
+body[data-aos-delay='2850'] [data-aos].aos-animate {
+  transition-delay: 2.85s;
+}
+[data-aos][data-aos][data-aos-duration='2900'],
+body[data-aos-duration='2900'] [data-aos] {
+  transition-duration: 2.9s;
+}
+[data-aos][data-aos][data-aos-delay='2900'],
+body[data-aos-delay='2900'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2900'].aos-animate,
+body[data-aos-delay='2900'] [data-aos].aos-animate {
+  transition-delay: 2.9s;
+}
+[data-aos][data-aos][data-aos-duration='2950'],
+body[data-aos-duration='2950'] [data-aos] {
+  transition-duration: 2.95s;
+}
+[data-aos][data-aos][data-aos-delay='2950'],
+body[data-aos-delay='2950'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='2950'].aos-animate,
+body[data-aos-delay='2950'] [data-aos].aos-animate {
+  transition-delay: 2.95s;
+}
+[data-aos][data-aos][data-aos-duration='3000'],
+body[data-aos-duration='3000'] [data-aos] {
+  transition-duration: 3s;
+}
+[data-aos][data-aos][data-aos-delay='3000'],
+body[data-aos-delay='3000'] [data-aos] {
+  transition-delay: 0;
+}
+[data-aos][data-aos][data-aos-delay='3000'].aos-animate,
+body[data-aos-delay='3000'] [data-aos].aos-animate {
+  transition-delay: 3s;
+}
+[data-aos][data-aos][data-aos-easing='linear'],
+body[data-aos-easing='linear'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
+}
+[data-aos][data-aos][data-aos-easing='ease'],
+body[data-aos-easing='ease'] [data-aos] {
+  transition-timing-function: ease;
+}
+[data-aos][data-aos][data-aos-easing='ease-in'],
+body[data-aos-easing='ease-in'] [data-aos] {
+  transition-timing-function: ease-in;
+}
+[data-aos][data-aos][data-aos-easing='ease-out'],
+body[data-aos-easing='ease-out'] [data-aos] {
+  transition-timing-function: ease-out;
+}
+[data-aos][data-aos][data-aos-easing='ease-in-out'],
+body[data-aos-easing='ease-in-out'] [data-aos] {
+  transition-timing-function: ease-in-out;
+}
+[data-aos][data-aos][data-aos-easing='ease-in-back'],
+body[data-aos-easing='ease-in-back'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+}
+[data-aos][data-aos][data-aos-easing='ease-out-back'],
+body[data-aos-easing='ease-out-back'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+[data-aos][data-aos][data-aos-easing='ease-in-out-back'],
+body[data-aos-easing='ease-in-out-back'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+[data-aos][data-aos][data-aos-easing='ease-in-sine'],
+body[data-aos-easing='ease-in-sine'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
+}
+[data-aos][data-aos][data-aos-easing='ease-out-sine'],
+body[data-aos-easing='ease-out-sine'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+[data-aos][data-aos][data-aos-easing='ease-in-out-sine'],
+body[data-aos-easing='ease-in-out-sine'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+[data-aos][data-aos][data-aos-easing='ease-in-quad'],
+body[data-aos-easing='ease-in-quad'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+[data-aos][data-aos][data-aos-easing='ease-out-quad'],
+body[data-aos-easing='ease-out-quad'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+[data-aos][data-aos][data-aos-easing='ease-in-out-quad'],
+body[data-aos-easing='ease-in-out-quad'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+[data-aos][data-aos][data-aos-easing='ease-in-cubic'],
+body[data-aos-easing='ease-in-cubic'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+[data-aos][data-aos][data-aos-easing='ease-out-cubic'],
+body[data-aos-easing='ease-out-cubic'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+[data-aos][data-aos][data-aos-easing='ease-in-out-cubic'],
+body[data-aos-easing='ease-in-out-cubic'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+[data-aos][data-aos][data-aos-easing='ease-in-quart'],
+body[data-aos-easing='ease-in-quart'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+[data-aos][data-aos][data-aos-easing='ease-out-quart'],
+body[data-aos-easing='ease-out-quart'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+[data-aos][data-aos][data-aos-easing='ease-in-out-quart'],
+body[data-aos-easing='ease-in-out-quart'] [data-aos] {
+  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+[data-aos^='fade'][data-aos^='fade'] {
+  opacity: 0;
+  transition-property: opacity, transform;
+}
+[data-aos^='fade'][data-aos^='fade'].aos-animate {
+  opacity: 1;
+  transform: translateZ(0);
+}
+[data-aos='fade-up'] {
+  transform: translate3d(0, 100px, 0);
+}
+[data-aos='fade-down'] {
+  transform: translate3d(0, -100px, 0);
+}
+[data-aos='fade-right'] {
+  transform: translate3d(-100px, 0, 0);
+}
+[data-aos='fade-left'] {
+  transform: translate3d(100px, 0, 0);
+}
+[data-aos='fade-up-right'] {
+  transform: translate3d(-100px, 100px, 0);
+}
+[data-aos='fade-up-left'] {
+  transform: translate3d(100px, 100px, 0);
+}
+[data-aos='fade-down-right'] {
+  transform: translate3d(-100px, -100px, 0);
+}
+[data-aos='fade-down-left'] {
+  transform: translate3d(100px, -100px, 0);
+}
+[data-aos^='zoom'][data-aos^='zoom'] {
+  opacity: 0;
+  transition-property: opacity, transform;
+}
+[data-aos^='zoom'][data-aos^='zoom'].aos-animate {
+  opacity: 1;
+  transform: translateZ(0) scale(1);
+}
+[data-aos='zoom-in'] {
+  transform: scale(0.6);
+}
+[data-aos='zoom-in-up'] {
+  transform: translate3d(0, 100px, 0) scale(0.6);
+}
+[data-aos='zoom-in-down'] {
+  transform: translate3d(0, -100px, 0) scale(0.6);
+}
+[data-aos='zoom-in-right'] {
+  transform: translate3d(-100px, 0, 0) scale(0.6);
+}
+[data-aos='zoom-in-left'] {
+  transform: translate3d(100px, 0, 0) scale(0.6);
+}
+[data-aos='zoom-out'] {
+  transform: scale(1.2);
+}
+[data-aos='zoom-out-up'] {
+  transform: translate3d(0, 100px, 0) scale(1.2);
+}
+[data-aos='zoom-out-down'] {
+  transform: translate3d(0, -100px, 0) scale(1.2);
+}
+[data-aos='zoom-out-right'] {
+  transform: translate3d(-100px, 0, 0) scale(1.2);
+}
+[data-aos='zoom-out-left'] {
+  transform: translate3d(100px, 0, 0) scale(1.2);
+}
+[data-aos^='slide'][data-aos^='slide'] {
+  transition-property: transform;
+}
+[data-aos^='slide'][data-aos^='slide'].aos-animate {
+  transform: translateZ(0);
+}
+[data-aos='slide-up'] {
+  transform: translate3d(0, 100%, 0);
+}
+[data-aos='slide-down'] {
+  transform: translate3d(0, -100%, 0);
+}
+[data-aos='slide-right'] {
+  transform: translate3d(-100%, 0, 0);
+}
+[data-aos='slide-left'] {
+  transform: translate3d(100%, 0, 0);
+}
+[data-aos^='flip'][data-aos^='flip'] {
+  backface-visibility: hidden;
+  transition-property: transform;
+}
+[data-aos='flip-left'] {
+  transform: perspective(2500px) rotateY(-100deg);
+}
+[data-aos='flip-left'].aos-animate {
+  transform: perspective(2500px) rotateY(0);
+}
+[data-aos='flip-right'] {
+  transform: perspective(2500px) rotateY(100deg);
+}
+[data-aos='flip-right'].aos-animate {
+  transform: perspective(2500px) rotateY(0);
+}
+[data-aos='flip-up'] {
+  transform: perspective(2500px) rotateX(-100deg);
+}
+[data-aos='flip-up'].aos-animate {
+  transform: perspective(2500px) rotateX(0);
+}
+[data-aos='flip-down'] {
+  transform: perspective(2500px) rotateX(100deg);
+}
+[data-aos='flip-down'].aos-animate {
+  transform: perspective(2500px) rotateX(0);
+}
diff --git a/public/js/aos.js b/public/js/aos.js
new file mode 100644
index 00000000..f77369b7
--- /dev/null
+++ b/public/js/aos.js
@@ -0,0 +1,672 @@
+!(function (e, t) {
+  'object' == typeof exports && 'object' == typeof module
+    ? (module.exports = t())
+    : 'function' == typeof define && define.amd
+      ? define([], t)
+      : 'object' == typeof exports
+        ? (exports.AOS = t())
+        : (e.AOS = t())
+})(this, function () {
+  return (function (e) {
+    function t(o) {
+      if (n[o]) return n[o].exports
+      var i = (n[o] = { exports: {}, id: o, loaded: !1 })
+      return e[o].call(i.exports, i, i.exports, t), (i.loaded = !0), i.exports
+    }
+    var n = {}
+    return (t.m = e), (t.c = n), (t.p = 'dist/'), t(0)
+  })([
+    function (e, t, n) {
+      'use strict'
+      function o(e) {
+        return e && e.__esModule ? e : { default: e }
+      }
+      var i =
+          Object.assign ||
+          function (e) {
+            for (var t = 1; t < arguments.length; t++) {
+              var n = arguments[t]
+              for (var o in n)
+                Object.prototype.hasOwnProperty.call(n, o) && (e[o] = n[o])
+            }
+            return e
+          },
+        r = n(1),
+        a = (o(r), n(6)),
+        u = o(a),
+        c = n(7),
+        s = o(c),
+        f = n(8),
+        d = o(f),
+        l = n(9),
+        p = o(l),
+        m = n(10),
+        b = o(m),
+        v = n(11),
+        y = o(v),
+        g = n(14),
+        h = o(g),
+        w = [],
+        k = !1,
+        x = {
+          offset: 120,
+          delay: 0,
+          easing: 'ease',
+          duration: 400,
+          disable: !1,
+          once: !1,
+          startEvent: 'DOMContentLoaded',
+          throttleDelay: 99,
+          debounceDelay: 50,
+          disableMutationObserver: !1
+        },
+        j = function () {
+          var e =
+            arguments.length > 0 && void 0 !== arguments[0] && arguments[0]
+          if ((e && (k = !0), k))
+            return (w = (0, y.default)(w, x)), (0, b.default)(w, x.once), w
+        },
+        O = function () {
+          ;(w = (0, h.default)()), j()
+        },
+        M = function () {
+          w.forEach(function (e, t) {
+            e.node.removeAttribute('data-aos'),
+              e.node.removeAttribute('data-aos-easing'),
+              e.node.removeAttribute('data-aos-duration'),
+              e.node.removeAttribute('data-aos-delay')
+          })
+        },
+        S = function (e) {
+          return (
+            e === !0 ||
+            ('mobile' === e && p.default.mobile()) ||
+            ('phone' === e && p.default.phone()) ||
+            ('tablet' === e && p.default.tablet()) ||
+            ('function' == typeof e && e() === !0)
+          )
+        },
+        _ = function (e) {
+          ;(x = i(x, e)), (w = (0, h.default)())
+          var t = document.all && !window.atob
+          return S(x.disable) || t
+            ? M()
+            : (x.disableMutationObserver ||
+                d.default.isSupported() ||
+                (console.info(
+                  '\n      aos: MutationObserver is not supported on this browser,\n      code mutations observing has been disabled.\n      You may have to call "refreshHard()" by yourself.\n    '
+                ),
+                (x.disableMutationObserver = !0)),
+              document
+                .querySelector('body')
+                .setAttribute('data-aos-easing', x.easing),
+              document
+                .querySelector('body')
+                .setAttribute('data-aos-duration', x.duration),
+              document
+                .querySelector('body')
+                .setAttribute('data-aos-delay', x.delay),
+              'DOMContentLoaded' === x.startEvent &&
+              ['complete', 'interactive'].indexOf(document.readyState) > -1
+                ? j(!0)
+                : 'load' === x.startEvent
+                  ? window.addEventListener(x.startEvent, function () {
+                      j(!0)
+                    })
+                  : document.addEventListener(x.startEvent, function () {
+                      j(!0)
+                    }),
+              window.addEventListener(
+                'resize',
+                (0, s.default)(j, x.debounceDelay, !0)
+              ),
+              window.addEventListener(
+                'orientationchange',
+                (0, s.default)(j, x.debounceDelay, !0)
+              ),
+              window.addEventListener(
+                'scroll',
+                (0, u.default)(function () {
+                  ;(0, b.default)(w, x.once)
+                }, x.throttleDelay)
+              ),
+              x.disableMutationObserver || d.default.ready('[data-aos]', O),
+              w)
+        }
+      e.exports = { init: _, refresh: j, refreshHard: O }
+    },
+    function (e, t) {},
+    ,
+    ,
+    ,
+    ,
+    function (e, t) {
+      ;(function (t) {
+        'use strict'
+        function n(e, t, n) {
+          function o(t) {
+            var n = b,
+              o = v
+            return (b = v = void 0), (k = t), (g = e.apply(o, n))
+          }
+          function r(e) {
+            return (k = e), (h = setTimeout(f, t)), M ? o(e) : g
+          }
+          function a(e) {
+            var n = e - w,
+              o = e - k,
+              i = t - n
+            return S ? j(i, y - o) : i
+          }
+          function c(e) {
+            var n = e - w,
+              o = e - k
+            return void 0 === w || n >= t || n < 0 || (S && o >= y)
+          }
+          function f() {
+            var e = O()
+            return c(e) ? d(e) : void (h = setTimeout(f, a(e)))
+          }
+          function d(e) {
+            return (h = void 0), _ && b ? o(e) : ((b = v = void 0), g)
+          }
+          function l() {
+            void 0 !== h && clearTimeout(h), (k = 0), (b = w = v = h = void 0)
+          }
+          function p() {
+            return void 0 === h ? g : d(O())
+          }
+          function m() {
+            var e = O(),
+              n = c(e)
+            if (((b = arguments), (v = this), (w = e), n)) {
+              if (void 0 === h) return r(w)
+              if (S) return (h = setTimeout(f, t)), o(w)
+            }
+            return void 0 === h && (h = setTimeout(f, t)), g
+          }
+          var b,
+            v,
+            y,
+            g,
+            h,
+            w,
+            k = 0,
+            M = !1,
+            S = !1,
+            _ = !0
+          if ('function' != typeof e) throw new TypeError(s)
+          return (
+            (t = u(t) || 0),
+            i(n) &&
+              ((M = !!n.leading),
+              (S = 'maxWait' in n),
+              (y = S ? x(u(n.maxWait) || 0, t) : y),
+              (_ = 'trailing' in n ? !!n.trailing : _)),
+            (m.cancel = l),
+            (m.flush = p),
+            m
+          )
+        }
+        function o(e, t, o) {
+          var r = !0,
+            a = !0
+          if ('function' != typeof e) throw new TypeError(s)
+          return (
+            i(o) &&
+              ((r = 'leading' in o ? !!o.leading : r),
+              (a = 'trailing' in o ? !!o.trailing : a)),
+            n(e, t, { leading: r, maxWait: t, trailing: a })
+          )
+        }
+        function i(e) {
+          var t = 'undefined' == typeof e ? 'undefined' : c(e)
+          return !!e && ('object' == t || 'function' == t)
+        }
+        function r(e) {
+          return (
+            !!e && 'object' == ('undefined' == typeof e ? 'undefined' : c(e))
+          )
+        }
+        function a(e) {
+          return (
+            'symbol' == ('undefined' == typeof e ? 'undefined' : c(e)) ||
+            (r(e) && k.call(e) == d)
+          )
+        }
+        function u(e) {
+          if ('number' == typeof e) return e
+          if (a(e)) return f
+          if (i(e)) {
+            var t = 'function' == typeof e.valueOf ? e.valueOf() : e
+            e = i(t) ? t + '' : t
+          }
+          if ('string' != typeof e) return 0 === e ? e : +e
+          e = e.replace(l, '')
+          var n = m.test(e)
+          return n || b.test(e) ? v(e.slice(2), n ? 2 : 8) : p.test(e) ? f : +e
+        }
+        var c =
+            'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
+              ? function (e) {
+                  return typeof e
+                }
+              : function (e) {
+                  return e &&
+                    'function' == typeof Symbol &&
+                    e.constructor === Symbol &&
+                    e !== Symbol.prototype
+                    ? 'symbol'
+                    : typeof e
+                },
+          s = 'Expected a function',
+          f = NaN,
+          d = '[object Symbol]',
+          l = /^\s+|\s+$/g,
+          p = /^[-+]0x[0-9a-f]+$/i,
+          m = /^0b[01]+$/i,
+          b = /^0o[0-7]+$/i,
+          v = parseInt,
+          y =
+            'object' == ('undefined' == typeof t ? 'undefined' : c(t)) &&
+            t &&
+            t.Object === Object &&
+            t,
+          g =
+            'object' == ('undefined' == typeof self ? 'undefined' : c(self)) &&
+            self &&
+            self.Object === Object &&
+            self,
+          h = y || g || Function('return this')(),
+          w = Object.prototype,
+          k = w.toString,
+          x = Math.max,
+          j = Math.min,
+          O = function () {
+            return h.Date.now()
+          }
+        e.exports = o
+      }).call(
+        t,
+        (function () {
+          return this
+        })()
+      )
+    },
+    function (e, t) {
+      ;(function (t) {
+        'use strict'
+        function n(e, t, n) {
+          function i(t) {
+            var n = b,
+              o = v
+            return (b = v = void 0), (O = t), (g = e.apply(o, n))
+          }
+          function r(e) {
+            return (O = e), (h = setTimeout(f, t)), M ? i(e) : g
+          }
+          function u(e) {
+            var n = e - w,
+              o = e - O,
+              i = t - n
+            return S ? x(i, y - o) : i
+          }
+          function s(e) {
+            var n = e - w,
+              o = e - O
+            return void 0 === w || n >= t || n < 0 || (S && o >= y)
+          }
+          function f() {
+            var e = j()
+            return s(e) ? d(e) : void (h = setTimeout(f, u(e)))
+          }
+          function d(e) {
+            return (h = void 0), _ && b ? i(e) : ((b = v = void 0), g)
+          }
+          function l() {
+            void 0 !== h && clearTimeout(h), (O = 0), (b = w = v = h = void 0)
+          }
+          function p() {
+            return void 0 === h ? g : d(j())
+          }
+          function m() {
+            var e = j(),
+              n = s(e)
+            if (((b = arguments), (v = this), (w = e), n)) {
+              if (void 0 === h) return r(w)
+              if (S) return (h = setTimeout(f, t)), i(w)
+            }
+            return void 0 === h && (h = setTimeout(f, t)), g
+          }
+          var b,
+            v,
+            y,
+            g,
+            h,
+            w,
+            O = 0,
+            M = !1,
+            S = !1,
+            _ = !0
+          if ('function' != typeof e) throw new TypeError(c)
+          return (
+            (t = a(t) || 0),
+            o(n) &&
+              ((M = !!n.leading),
+              (S = 'maxWait' in n),
+              (y = S ? k(a(n.maxWait) || 0, t) : y),
+              (_ = 'trailing' in n ? !!n.trailing : _)),
+            (m.cancel = l),
+            (m.flush = p),
+            m
+          )
+        }
+        function o(e) {
+          var t = 'undefined' == typeof e ? 'undefined' : u(e)
+          return !!e && ('object' == t || 'function' == t)
+        }
+        function i(e) {
+          return (
+            !!e && 'object' == ('undefined' == typeof e ? 'undefined' : u(e))
+          )
+        }
+        function r(e) {
+          return (
+            'symbol' == ('undefined' == typeof e ? 'undefined' : u(e)) ||
+            (i(e) && w.call(e) == f)
+          )
+        }
+        function a(e) {
+          if ('number' == typeof e) return e
+          if (r(e)) return s
+          if (o(e)) {
+            var t = 'function' == typeof e.valueOf ? e.valueOf() : e
+            e = o(t) ? t + '' : t
+          }
+          if ('string' != typeof e) return 0 === e ? e : +e
+          e = e.replace(d, '')
+          var n = p.test(e)
+          return n || m.test(e) ? b(e.slice(2), n ? 2 : 8) : l.test(e) ? s : +e
+        }
+        var u =
+            'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
+              ? function (e) {
+                  return typeof e
+                }
+              : function (e) {
+                  return e &&
+                    'function' == typeof Symbol &&
+                    e.constructor === Symbol &&
+                    e !== Symbol.prototype
+                    ? 'symbol'
+                    : typeof e
+                },
+          c = 'Expected a function',
+          s = NaN,
+          f = '[object Symbol]',
+          d = /^\s+|\s+$/g,
+          l = /^[-+]0x[0-9a-f]+$/i,
+          p = /^0b[01]+$/i,
+          m = /^0o[0-7]+$/i,
+          b = parseInt,
+          v =
+            'object' == ('undefined' == typeof t ? 'undefined' : u(t)) &&
+            t &&
+            t.Object === Object &&
+            t,
+          y =
+            'object' == ('undefined' == typeof self ? 'undefined' : u(self)) &&
+            self &&
+            self.Object === Object &&
+            self,
+          g = v || y || Function('return this')(),
+          h = Object.prototype,
+          w = h.toString,
+          k = Math.max,
+          x = Math.min,
+          j = function () {
+            return g.Date.now()
+          }
+        e.exports = n
+      }).call(
+        t,
+        (function () {
+          return this
+        })()
+      )
+    },
+    function (e, t) {
+      'use strict'
+      function n(e) {
+        var t = void 0,
+          o = void 0,
+          i = void 0
+        for (t = 0; t < e.length; t += 1) {
+          if (((o = e[t]), o.dataset && o.dataset.aos)) return !0
+          if ((i = o.children && n(o.children))) return !0
+        }
+        return !1
+      }
+      function o() {
+        return (
+          window.MutationObserver ||
+          window.WebKitMutationObserver ||
+          window.MozMutationObserver
+        )
+      }
+      function i() {
+        return !!o()
+      }
+      function r(e, t) {
+        var n = window.document,
+          i = o(),
+          r = new i(a)
+        ;(u = t),
+          r.observe(n.documentElement, {
+            childList: !0,
+            subtree: !0,
+            removedNodes: !0
+          })
+      }
+      function a(e) {
+        e &&
+          e.forEach(function (e) {
+            var t = Array.prototype.slice.call(e.addedNodes),
+              o = Array.prototype.slice.call(e.removedNodes),
+              i = t.concat(o)
+            if (n(i)) return u()
+          })
+      }
+      Object.defineProperty(t, '__esModule', { value: !0 })
+      var u = function () {}
+      t.default = { isSupported: i, ready: r }
+    },
+    function (e, t) {
+      'use strict'
+      function n(e, t) {
+        if (!(e instanceof t))
+          throw new TypeError('Cannot call a class as a function')
+      }
+      function o() {
+        return navigator.userAgent || navigator.vendor || window.opera || ''
+      }
+      Object.defineProperty(t, '__esModule', { value: !0 })
+      var i = (function () {
+          function e(e, t) {
+            for (var n = 0; n < t.length; n++) {
+              var o = t[n]
+              ;(o.enumerable = o.enumerable || !1),
+                (o.configurable = !0),
+                'value' in o && (o.writable = !0),
+                Object.defineProperty(e, o.key, o)
+            }
+          }
+          return function (t, n, o) {
+            return n && e(t.prototype, n), o && e(t, o), t
+          }
+        })(),
+        r =
+          /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i,
+        a =
+          /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i,
+        u =
+          /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i,
+        c =
+          /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i,
+        s = (function () {
+          function e() {
+            n(this, e)
+          }
+          return (
+            i(e, [
+              {
+                key: 'phone',
+                value: function () {
+                  var e = o()
+                  return !(!r.test(e) && !a.test(e.substr(0, 4)))
+                }
+              },
+              {
+                key: 'mobile',
+                value: function () {
+                  var e = o()
+                  return !(!u.test(e) && !c.test(e.substr(0, 4)))
+                }
+              },
+              {
+                key: 'tablet',
+                value: function () {
+                  return this.mobile() && !this.phone()
+                }
+              }
+            ]),
+            e
+          )
+        })()
+      t.default = new s()
+    },
+    function (e, t) {
+      'use strict'
+      Object.defineProperty(t, '__esModule', { value: !0 })
+      var n = function (e, t, n) {
+          var o = e.node.getAttribute('data-aos-once')
+          t > e.position
+            ? e.node.classList.add('aos-animate')
+            : 'undefined' != typeof o &&
+              ('false' === o || (!n && 'true' !== o)) &&
+              e.node.classList.remove('aos-animate')
+        },
+        o = function (e, t) {
+          var o = window.pageYOffset,
+            i = window.innerHeight
+          e.forEach(function (e, r) {
+            n(e, i + o, t)
+          })
+        }
+      t.default = o
+    },
+    function (e, t, n) {
+      'use strict'
+      function o(e) {
+        return e && e.__esModule ? e : { default: e }
+      }
+      Object.defineProperty(t, '__esModule', { value: !0 })
+      var i = n(12),
+        r = o(i),
+        a = function (e, t) {
+          return (
+            e.forEach(function (e, n) {
+              e.node.classList.add('aos-init'),
+                (e.position = (0, r.default)(e.node, t.offset))
+            }),
+            e
+          )
+        }
+      t.default = a
+    },
+    function (e, t, n) {
+      'use strict'
+      function o(e) {
+        return e && e.__esModule ? e : { default: e }
+      }
+      Object.defineProperty(t, '__esModule', { value: !0 })
+      var i = n(13),
+        r = o(i),
+        a = function (e, t) {
+          var n = 0,
+            o = 0,
+            i = window.innerHeight,
+            a = {
+              offset: e.getAttribute('data-aos-offset'),
+              anchor: e.getAttribute('data-aos-anchor'),
+              anchorPlacement: e.getAttribute('data-aos-anchor-placement')
+            }
+          switch (
+            (a.offset && !isNaN(a.offset) && (o = parseInt(a.offset)),
+            a.anchor &&
+              document.querySelectorAll(a.anchor) &&
+              (e = document.querySelectorAll(a.anchor)[0]),
+            (n = (0, r.default)(e).top),
+            a.anchorPlacement)
+          ) {
+            case 'top-bottom':
+              break
+            case 'center-bottom':
+              n += e.offsetHeight / 2
+              break
+            case 'bottom-bottom':
+              n += e.offsetHeight
+              break
+            case 'top-center':
+              n += i / 2
+              break
+            case 'bottom-center':
+              n += i / 2 + e.offsetHeight
+              break
+            case 'center-center':
+              n += i / 2 + e.offsetHeight / 2
+              break
+            case 'top-top':
+              n += i
+              break
+            case 'bottom-top':
+              n += e.offsetHeight + i
+              break
+            case 'center-top':
+              n += e.offsetHeight / 2 + i
+          }
+          return a.anchorPlacement || a.offset || isNaN(t) || (o = t), n + o
+        }
+      t.default = a
+    },
+    function (e, t) {
+      'use strict'
+      Object.defineProperty(t, '__esModule', { value: !0 })
+      var n = function (e) {
+        for (
+          var t = 0, n = 0;
+          e && !isNaN(e.offsetLeft) && !isNaN(e.offsetTop);
+
+        )
+          (t += e.offsetLeft - ('BODY' != e.tagName ? e.scrollLeft : 0)),
+            (n += e.offsetTop - ('BODY' != e.tagName ? e.scrollTop : 0)),
+            (e = e.offsetParent)
+        return { top: n, left: t }
+      }
+      t.default = n
+    },
+    function (e, t) {
+      'use strict'
+      Object.defineProperty(t, '__esModule', { value: !0 })
+      var n = function (e) {
+        return (
+          (e = e || document.querySelectorAll('[data-aos]')),
+          Array.prototype.map.call(e, function (e) {
+            return { node: e }
+          })
+        )
+      }
+      t.default = n
+    }
+  ])
+})
diff --git a/public/js/fireworks.js b/public/js/fireworks.js
index 937f9bf3..f1e8b4c9 100644
--- a/public/js/fireworks.js
+++ b/public/js/fireworks.js
@@ -57,10 +57,10 @@ function createFireworks({ config, anime }) {
   function updateCoords(e) {
     pointerX =
       e.clientX ||
-      (e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX)
+      (e?.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX)
     pointerY =
       e.clientY ||
-      (e.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY)
+      (e?.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY)
   }
 
   function setParticuleDirection(p) {
diff --git a/public/js/sakura.js b/public/js/sakura.js
index fcdf0739..ae018338 100644
--- a/public/js/sakura.js
+++ b/public/js/sakura.js
@@ -123,7 +123,7 @@ function createSakura() {
       'style',
       'position: fixed;left: 0;top: 0;pointer-events: none;'
     )
-    canvas.setAttribute('id', id)
+    canvas.setAttribute('id', 'sakura')
     document.getElementsByTagName('body')[0].appendChild(canvas)
     cxt = canvas.getContext('2d')
     var sakuraList = new SakuraList()
@@ -185,4 +185,4 @@ function destroySakura() {
 }
 
 window.createSakura = createSakura
-window.destroySakura = destroySakura
\ No newline at end of file
+window.destroySakura = destroySakura
diff --git a/public/js/typed.min.js b/public/js/typed.min.js
new file mode 100644
index 00000000..52411da8
--- /dev/null
+++ b/public/js/typed.min.js
@@ -0,0 +1,626 @@
+/*!
+ *
+ *   typed.js - A JavaScript Typing Animation Library
+ *   Author: Matt Boldt <me@mattboldt.com>
+ *   Version: v2.0.12
+ *   Url: https://github.com/mattboldt/typed.js
+ *   License(s): MIT
+ *
+ */
+;(function (t, e) {
+  'object' == typeof exports && 'object' == typeof module
+    ? (module.exports = e())
+    : 'function' == typeof define && define.amd
+      ? define([], e)
+      : 'object' == typeof exports
+        ? (exports.Typed = e())
+        : (t.Typed = e())
+})(this, function () {
+  return (function (t) {
+    function e(n) {
+      if (s[n]) return s[n].exports
+      var i = (s[n] = { exports: {}, id: n, loaded: !1 })
+      return t[n].call(i.exports, i, i.exports, e), (i.loaded = !0), i.exports
+    }
+    var s = {}
+    return (e.m = t), (e.c = s), (e.p = ''), e(0)
+  })([
+    function (t, e, s) {
+      'use strict'
+      function n(t, e) {
+        if (!(t instanceof e))
+          throw new TypeError('Cannot call a class as a function')
+      }
+      Object.defineProperty(e, '__esModule', { value: !0 })
+      var i = (function () {
+          function t(t, e) {
+            for (var s = 0; s < e.length; s++) {
+              var n = e[s]
+              ;(n.enumerable = n.enumerable || !1),
+                (n.configurable = !0),
+                'value' in n && (n.writable = !0),
+                Object.defineProperty(t, n.key, n)
+            }
+          }
+          return function (e, s, n) {
+            return s && t(e.prototype, s), n && t(e, n), e
+          }
+        })(),
+        r = s(1),
+        o = s(3),
+        a = (function () {
+          function t(e, s) {
+            n(this, t), r.initializer.load(this, s, e), this.begin()
+          }
+          return (
+            i(t, [
+              {
+                key: 'toggle',
+                value: function () {
+                  this.pause.status ? this.start() : this.stop()
+                }
+              },
+              {
+                key: 'stop',
+                value: function () {
+                  this.typingComplete ||
+                    this.pause.status ||
+                    (this.toggleBlinking(!0),
+                    (this.pause.status = !0),
+                    this.options.onStop(this.arrayPos, this))
+                }
+              },
+              {
+                key: 'start',
+                value: function () {
+                  this.typingComplete ||
+                    (this.pause.status &&
+                      ((this.pause.status = !1),
+                      this.pause.typewrite
+                        ? this.typewrite(
+                            this.pause.curString,
+                            this.pause.curStrPos
+                          )
+                        : this.backspace(
+                            this.pause.curString,
+                            this.pause.curStrPos
+                          ),
+                      this.options.onStart(this.arrayPos, this)))
+                }
+              },
+              {
+                key: 'destroy',
+                value: function () {
+                  this.reset(!1), this.options.onDestroy(this)
+                }
+              },
+              {
+                key: 'reset',
+                value: function () {
+                  var t =
+                    arguments.length <= 0 ||
+                    void 0 === arguments[0] ||
+                    arguments[0]
+                  clearInterval(this.timeout),
+                    this.replaceText(''),
+                    this.cursor &&
+                      this.cursor.parentNode &&
+                      (this.cursor.parentNode.removeChild(this.cursor),
+                      (this.cursor = null)),
+                    (this.strPos = 0),
+                    (this.arrayPos = 0),
+                    (this.curLoop = 0),
+                    t &&
+                      (this.insertCursor(),
+                      this.options.onReset(this),
+                      this.begin())
+                }
+              },
+              {
+                key: 'begin',
+                value: function () {
+                  var t = this
+                  this.options.onBegin(this),
+                    (this.typingComplete = !1),
+                    this.shuffleStringsIfNeeded(this),
+                    this.insertCursor(),
+                    this.bindInputFocusEvents && this.bindFocusEvents(),
+                    (this.timeout = setTimeout(function () {
+                      t.currentElContent && 0 !== t.currentElContent.length
+                        ? t.backspace(
+                            t.currentElContent,
+                            t.currentElContent.length
+                          )
+                        : t.typewrite(
+                            t.strings[t.sequence[t.arrayPos]],
+                            t.strPos
+                          )
+                    }, this.startDelay))
+                }
+              },
+              {
+                key: 'typewrite',
+                value: function (t, e) {
+                  var s = this
+                  this.fadeOut &&
+                    this.el.classList.contains(this.fadeOutClass) &&
+                    (this.el.classList.remove(this.fadeOutClass),
+                    this.cursor &&
+                      this.cursor.classList.remove(this.fadeOutClass))
+                  var n = this.humanizer(this.typeSpeed),
+                    i = 1
+                  return this.pause.status === !0
+                    ? void this.setPauseStatus(t, e, !0)
+                    : void (this.timeout = setTimeout(function () {
+                        e = o.htmlParser.typeHtmlChars(t, e, s)
+                        var n = 0,
+                          r = t.substr(e)
+                        if ('^' === r.charAt(0) && /^\^\d+/.test(r)) {
+                          var a = 1
+                          ;(r = /\d+/.exec(r)[0]),
+                            (a += r.length),
+                            (n = parseInt(r)),
+                            (s.temporaryPause = !0),
+                            s.options.onTypingPaused(s.arrayPos, s),
+                            (t = t.substring(0, e) + t.substring(e + a)),
+                            s.toggleBlinking(!0)
+                        }
+                        if ('`' === r.charAt(0)) {
+                          for (
+                            ;
+                            '`' !== t.substr(e + i).charAt(0) &&
+                            (i++, !(e + i > t.length));
+
+                          );
+                          var u = t.substring(0, e),
+                            l = t.substring(u.length + 1, e + i),
+                            c = t.substring(e + i + 1)
+                          ;(t = u + l + c), i--
+                        }
+                        s.timeout = setTimeout(function () {
+                          s.toggleBlinking(!1),
+                            e >= t.length
+                              ? s.doneTyping(t, e)
+                              : s.keepTyping(t, e, i),
+                            s.temporaryPause &&
+                              ((s.temporaryPause = !1),
+                              s.options.onTypingResumed(s.arrayPos, s))
+                        }, n)
+                      }, n))
+                }
+              },
+              {
+                key: 'keepTyping',
+                value: function (t, e, s) {
+                  0 === e &&
+                    (this.toggleBlinking(!1),
+                    this.options.preStringTyped(this.arrayPos, this)),
+                    (e += s)
+                  var n = t.substr(0, e)
+                  this.replaceText(n), this.typewrite(t, e)
+                }
+              },
+              {
+                key: 'doneTyping',
+                value: function (t, e) {
+                  var s = this
+                  this.options.onStringTyped(this.arrayPos, this),
+                    this.toggleBlinking(!0),
+                    (this.arrayPos === this.strings.length - 1 &&
+                      (this.complete(),
+                      this.loop === !1 || this.curLoop === this.loopCount)) ||
+                      (this.timeout = setTimeout(function () {
+                        s.backspace(t, e)
+                      }, this.backDelay))
+                }
+              },
+              {
+                key: 'backspace',
+                value: function (t, e) {
+                  var s = this
+                  if (this.pause.status === !0)
+                    return void this.setPauseStatus(t, e, !1)
+                  if (this.fadeOut) return this.initFadeOut()
+                  this.toggleBlinking(!1)
+                  var n = this.humanizer(this.backSpeed)
+                  this.timeout = setTimeout(function () {
+                    e = o.htmlParser.backSpaceHtmlChars(t, e, s)
+                    var n = t.substr(0, e)
+                    if ((s.replaceText(n), s.smartBackspace)) {
+                      var i = s.strings[s.arrayPos + 1]
+                      i && n === i.substr(0, e)
+                        ? (s.stopNum = e)
+                        : (s.stopNum = 0)
+                    }
+                    e > s.stopNum
+                      ? (e--, s.backspace(t, e))
+                      : e <= s.stopNum &&
+                        (s.arrayPos++,
+                        s.arrayPos === s.strings.length
+                          ? ((s.arrayPos = 0),
+                            s.options.onLastStringBackspaced(),
+                            s.shuffleStringsIfNeeded(),
+                            s.begin())
+                          : s.typewrite(s.strings[s.sequence[s.arrayPos]], e))
+                  }, n)
+                }
+              },
+              {
+                key: 'complete',
+                value: function () {
+                  this.options.onComplete(this),
+                    this.loop ? this.curLoop++ : (this.typingComplete = !0)
+                }
+              },
+              {
+                key: 'setPauseStatus',
+                value: function (t, e, s) {
+                  ;(this.pause.typewrite = s),
+                    (this.pause.curString = t),
+                    (this.pause.curStrPos = e)
+                }
+              },
+              {
+                key: 'toggleBlinking',
+                value: function (t) {
+                  this.cursor &&
+                    (this.pause.status ||
+                      (this.cursorBlinking !== t &&
+                        ((this.cursorBlinking = t),
+                        t
+                          ? this.cursor.classList.add('typed-cursor--blink')
+                          : this.cursor.classList.remove(
+                              'typed-cursor--blink'
+                            ))))
+                }
+              },
+              {
+                key: 'humanizer',
+                value: function (t) {
+                  return Math.round((Math.random() * t) / 2) + t
+                }
+              },
+              {
+                key: 'shuffleStringsIfNeeded',
+                value: function () {
+                  this.shuffle &&
+                    (this.sequence = this.sequence.sort(function () {
+                      return Math.random() - 0.5
+                    }))
+                }
+              },
+              {
+                key: 'initFadeOut',
+                value: function () {
+                  var t = this
+                  return (
+                    (this.el.className += ' ' + this.fadeOutClass),
+                    this.cursor &&
+                      (this.cursor.className += ' ' + this.fadeOutClass),
+                    setTimeout(function () {
+                      t.arrayPos++,
+                        t.replaceText(''),
+                        t.strings.length > t.arrayPos
+                          ? t.typewrite(t.strings[t.sequence[t.arrayPos]], 0)
+                          : (t.typewrite(t.strings[0], 0), (t.arrayPos = 0))
+                    }, this.fadeOutDelay)
+                  )
+                }
+              },
+              {
+                key: 'replaceText',
+                value: function (t) {
+                  this.attr
+                    ? this.el.setAttribute(this.attr, t)
+                    : this.isInput
+                      ? (this.el.value = t)
+                      : 'html' === this.contentType
+                        ? (this.el.innerHTML = t)
+                        : (this.el.textContent = t)
+                }
+              },
+              {
+                key: 'bindFocusEvents',
+                value: function () {
+                  var t = this
+                  this.isInput &&
+                    (this.el.addEventListener('focus', function (e) {
+                      t.stop()
+                    }),
+                    this.el.addEventListener('blur', function (e) {
+                      ;(t.el.value && 0 !== t.el.value.length) || t.start()
+                    }))
+                }
+              },
+              {
+                key: 'insertCursor',
+                value: function () {
+                  this.showCursor &&
+                    (this.cursor ||
+                      ((this.cursor = document.createElement('span')),
+                      (this.cursor.className = 'typed-cursor'),
+                      this.cursor.setAttribute('aria-hidden', !0),
+                      (this.cursor.innerHTML = this.cursorChar),
+                      this.el.parentNode &&
+                        this.el.parentNode.insertBefore(
+                          this.cursor,
+                          this.el.nextSibling
+                        )))
+                }
+              }
+            ]),
+            t
+          )
+        })()
+      ;(e['default'] = a), (t.exports = e['default'])
+    },
+    function (t, e, s) {
+      'use strict'
+      function n(t) {
+        return t && t.__esModule ? t : { default: t }
+      }
+      function i(t, e) {
+        if (!(t instanceof e))
+          throw new TypeError('Cannot call a class as a function')
+      }
+      Object.defineProperty(e, '__esModule', { value: !0 })
+      var r =
+          Object.assign ||
+          function (t) {
+            for (var e = 1; e < arguments.length; e++) {
+              var s = arguments[e]
+              for (var n in s)
+                Object.prototype.hasOwnProperty.call(s, n) && (t[n] = s[n])
+            }
+            return t
+          },
+        o = (function () {
+          function t(t, e) {
+            for (var s = 0; s < e.length; s++) {
+              var n = e[s]
+              ;(n.enumerable = n.enumerable || !1),
+                (n.configurable = !0),
+                'value' in n && (n.writable = !0),
+                Object.defineProperty(t, n.key, n)
+            }
+          }
+          return function (e, s, n) {
+            return s && t(e.prototype, s), n && t(e, n), e
+          }
+        })(),
+        a = s(2),
+        u = n(a),
+        l = (function () {
+          function t() {
+            i(this, t)
+          }
+          return (
+            o(t, [
+              {
+                key: 'load',
+                value: function (t, e, s) {
+                  if (
+                    ('string' == typeof s
+                      ? (t.el = document.querySelector(s))
+                      : (t.el = s),
+                    (t.options = r({}, u['default'], e)),
+                    (t.isInput = 'input' === t.el.tagName.toLowerCase()),
+                    (t.attr = t.options.attr),
+                    (t.bindInputFocusEvents = t.options.bindInputFocusEvents),
+                    (t.showCursor = !t.isInput && t.options.showCursor),
+                    (t.cursorChar = t.options.cursorChar),
+                    (t.cursorBlinking = !0),
+                    (t.elContent = t.attr
+                      ? t.el.getAttribute(t.attr)
+                      : t.el.textContent),
+                    (t.contentType = t.options.contentType),
+                    (t.typeSpeed = t.options.typeSpeed),
+                    (t.startDelay = t.options.startDelay),
+                    (t.backSpeed = t.options.backSpeed),
+                    (t.smartBackspace = t.options.smartBackspace),
+                    (t.backDelay = t.options.backDelay),
+                    (t.fadeOut = t.options.fadeOut),
+                    (t.fadeOutClass = t.options.fadeOutClass),
+                    (t.fadeOutDelay = t.options.fadeOutDelay),
+                    (t.isPaused = !1),
+                    (t.strings = t.options.strings.map(function (t) {
+                      return t.trim()
+                    })),
+                    'string' == typeof t.options.stringsElement
+                      ? (t.stringsElement = document.querySelector(
+                          t.options.stringsElement
+                        ))
+                      : (t.stringsElement = t.options.stringsElement),
+                    t.stringsElement)
+                  ) {
+                    ;(t.strings = []), (t.stringsElement.style.display = 'none')
+                    var n = Array.prototype.slice.apply(
+                        t.stringsElement.children
+                      ),
+                      i = n.length
+                    if (i)
+                      for (var o = 0; o < i; o += 1) {
+                        var a = n[o]
+                        t.strings.push(a.innerHTML.trim())
+                      }
+                  }
+                  ;(t.strPos = 0),
+                    (t.arrayPos = 0),
+                    (t.stopNum = 0),
+                    (t.loop = t.options.loop),
+                    (t.loopCount = t.options.loopCount),
+                    (t.curLoop = 0),
+                    (t.shuffle = t.options.shuffle),
+                    (t.sequence = []),
+                    (t.pause = {
+                      status: !1,
+                      typewrite: !0,
+                      curString: '',
+                      curStrPos: 0
+                    }),
+                    (t.typingComplete = !1)
+                  for (var o in t.strings) t.sequence[o] = o
+                  ;(t.currentElContent = this.getCurrentElContent(t)),
+                    (t.autoInsertCss = t.options.autoInsertCss),
+                    this.appendAnimationCss(t)
+                }
+              },
+              {
+                key: 'getCurrentElContent',
+                value: function (t) {
+                  var e = ''
+                  return (e = t.attr
+                    ? t.el.getAttribute(t.attr)
+                    : t.isInput
+                      ? t.el.value
+                      : 'html' === t.contentType
+                        ? t.el.innerHTML
+                        : t.el.textContent)
+                }
+              },
+              {
+                key: 'appendAnimationCss',
+                value: function (t) {
+                  var e = 'data-typed-js-css'
+                  if (
+                    t.autoInsertCss &&
+                    (t.showCursor || t.fadeOut) &&
+                    !document.querySelector('[' + e + ']')
+                  ) {
+                    var s = document.createElement('style')
+                    ;(s.type = 'text/css'), s.setAttribute(e, !0)
+                    var n = ''
+                    t.showCursor &&
+                      (n +=
+                        '\n        .typed-cursor{\n          opacity: 1;\n        }\n        .typed-cursor.typed-cursor--blink{\n          animation: typedjsBlink 0.7s infinite;\n          -webkit-animation: typedjsBlink 0.7s infinite;\n                  animation: typedjsBlink 0.7s infinite;\n        }\n        @keyframes typedjsBlink{\n          50% { opacity: 0.0; }\n        }\n        @-webkit-keyframes typedjsBlink{\n          0% { opacity: 1; }\n          50% { opacity: 0.0; }\n          100% { opacity: 1; }\n        }\n      '),
+                      t.fadeOut &&
+                        (n +=
+                          '\n        .typed-fade-out{\n          opacity: 0;\n          transition: opacity .25s;\n        }\n        .typed-cursor.typed-cursor--blink.typed-fade-out{\n          -webkit-animation: 0;\n          animation: 0;\n        }\n      '),
+                      0 !== s.length &&
+                        ((s.innerHTML = n), document.body.appendChild(s))
+                  }
+                }
+              }
+            ]),
+            t
+          )
+        })()
+      e['default'] = l
+      var c = new l()
+      e.initializer = c
+    },
+    function (t, e) {
+      'use strict'
+      Object.defineProperty(e, '__esModule', { value: !0 })
+      var s = {
+        strings: [
+          'These are the default values...',
+          'You know what you should do?',
+          'Use your own!',
+          'Have a great day!'
+        ],
+        stringsElement: null,
+        typeSpeed: 0,
+        startDelay: 0,
+        backSpeed: 0,
+        smartBackspace: !0,
+        shuffle: !1,
+        backDelay: 700,
+        fadeOut: !1,
+        fadeOutClass: 'typed-fade-out',
+        fadeOutDelay: 500,
+        loop: !1,
+        loopCount: 1 / 0,
+        showCursor: !0,
+        cursorChar: '|',
+        autoInsertCss: !0,
+        attr: null,
+        bindInputFocusEvents: !1,
+        contentType: 'html',
+        onBegin: function (t) {},
+        onComplete: function (t) {},
+        preStringTyped: function (t, e) {},
+        onStringTyped: function (t, e) {},
+        onLastStringBackspaced: function (t) {},
+        onTypingPaused: function (t, e) {},
+        onTypingResumed: function (t, e) {},
+        onReset: function (t) {},
+        onStop: function (t, e) {},
+        onStart: function (t, e) {},
+        onDestroy: function (t) {}
+      }
+      ;(e['default'] = s), (t.exports = e['default'])
+    },
+    function (t, e) {
+      'use strict'
+      function s(t, e) {
+        if (!(t instanceof e))
+          throw new TypeError('Cannot call a class as a function')
+      }
+      Object.defineProperty(e, '__esModule', { value: !0 })
+      var n = (function () {
+          function t(t, e) {
+            for (var s = 0; s < e.length; s++) {
+              var n = e[s]
+              ;(n.enumerable = n.enumerable || !1),
+                (n.configurable = !0),
+                'value' in n && (n.writable = !0),
+                Object.defineProperty(t, n.key, n)
+            }
+          }
+          return function (e, s, n) {
+            return s && t(e.prototype, s), n && t(e, n), e
+          }
+        })(),
+        i = (function () {
+          function t() {
+            s(this, t)
+          }
+          return (
+            n(t, [
+              {
+                key: 'typeHtmlChars',
+                value: function (t, e, s) {
+                  if ('html' !== s.contentType) return e
+                  var n = t.substr(e).charAt(0)
+                  if ('<' === n || '&' === n) {
+                    var i = ''
+                    for (
+                      i = '<' === n ? '>' : ';';
+                      t.substr(e + 1).charAt(0) !== i &&
+                      (e++, !(e + 1 > t.length));
+
+                    );
+                    e++
+                  }
+                  return e
+                }
+              },
+              {
+                key: 'backSpaceHtmlChars',
+                value: function (t, e, s) {
+                  if ('html' !== s.contentType) return e
+                  var n = t.substr(e).charAt(0)
+                  if ('>' === n || ';' === n) {
+                    var i = ''
+                    for (
+                      i = '>' === n ? '<' : '&';
+                      t.substr(e - 1).charAt(0) !== i && (e--, !(e < 0));
+
+                    );
+                    e--
+                  }
+                  return e
+                }
+              }
+            ]),
+            t
+          )
+        })()
+      e['default'] = i
+      var r = new i()
+      e.htmlParser = r
+    }
+  ])
+})
+//# sourceMappingURL=typed.min.js.map
diff --git a/public/svg/xiaohongshu.svg b/public/svg/xiaohongshu.svg
new file mode 100644
index 00000000..3a5e4222
--- /dev/null
+++ b/public/svg/xiaohongshu.svg
@@ -0,0 +1 @@
+<svg t="1717576439356" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6277" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#333333" p-id="6278"></path><path d="M199.936 439.04H147.456c4.608 68.352-12.288 120.064-12.288 120.064l28.16 51.456c37.376-15.872 36.608-171.52 36.608-171.52m169.984 0H317.44s-0.768 155.648 36.352 171.52l28.16-51.456c0.256 0.256-16.64-51.712-12.032-120.064M232.96 595.712H199.936c0 38.656 32.512 41.984 32.512 41.984h16.64c33.536 0 34.816-38.4 34.816-38.4v-228.352H232.96v224.768z m176.128-109.568h34.048L417.28 539.392s-15.104 29.952 9.216 30.976h56.576l22.528-41.216h-28.416c-2.56 0-4.864-2.048-4.864-4.864 0-0.768 0.256-1.536 0.512-2.048l42.24-82.944H465.92l-2.816 5.888h-3.328c-2.56 0-4.864-2.048-4.864-4.864 0-0.768 0.256-1.536 0.512-2.048l35.328-67.328h-49.152l-41.984 84.48c0.512 0-14.592 29.696 9.472 30.72m7.68 100.608s-6.4 0.512-10.496-3.584l-25.344 48.896s4.096 5.632 12.8 5.632h62.976l26.88-50.944h-66.816z" fill="#FFFFFF" p-id="6279"></path><path d="M606.976 439.04h32.512v-52.224h-115.968v52.224h32.768v149.248h-48.64l-24.32 49.152h172.8v-49.152h-49.152v-149.248z m232.192 38.656h-5.888v-33.792c0-31.488-25.6-57.088-57.088-57.088h-19.712v-15.872h-50.176v15.872h-31.488v51.2h31.488v39.68h-50.176v51.2h50.176v109.056h50.176v-108.8h68.864c6.656 0 12.288 5.376 12.288 12.288v53.76h-47.872c0 23.808 19.2 43.008 43.008 43.008h13.056c23.808 0 43.008-19.2 43.008-43.008v-67.584c-0.256-27.904-22.272-49.92-49.664-49.92M756.48 437.76h17.92c4.352 0 7.68 3.584 7.68 7.68v32h-25.856V437.76z" fill="#FFFFFF" p-id="6280"></path><path d="M888.064 411.904c0-13.824-11.008-24.832-24.832-24.832-13.824 0-24.832 11.008-24.832 24.832v24.832h24.832c13.568 0 24.832-11.264 24.832-24.832" fill="#FFFFFF" p-id="6281"></path></svg>
\ No newline at end of file
diff --git a/public/svg/zhishixingqiu.svg b/public/svg/zhishixingqiu.svg
new file mode 100644
index 00000000..77293e8f
--- /dev/null
+++ b/public/svg/zhishixingqiu.svg
@@ -0,0 +1 @@
+<svg t="1717576376677" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5034" width="200" height="200"><path d="M511.061333 801.92a291.157333 291.157333 0 0 1-290.858666-290.858667 291.157333 291.157333 0 0 1 338.517333-286.933333 26.752 26.752 0 0 1-8.704 52.736 237.653333 237.653333 0 0 0-276.309333 234.24 237.653333 237.653333 0 0 0 237.354666 237.354667 237.653333 237.653333 0 0 0 233.258667-281.770667 26.709333 26.709333 0 1 1 52.48-9.941333 291.157333 291.157333 0 0 1-285.781333 345.173333M694.613333 275.328a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667M511.061333 0C228.821333 0 0 228.821333 0 511.061333c0 282.24 228.821333 511.061333 511.061333 511.061334 282.24 0 511.061333-228.821333 511.061334-511.061334C1022.122667 228.821333 793.301333 0 511.061333 0" fill="#556377" p-id="5035"></path></svg>
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 2b8f568f..bdc13fe9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -264,3 +264,11 @@ a.avatar-wrapper {
   writing-mode: vertical-rl; /* 竖向排列从右向左 */
   text-orientation: upright; /* 文字方向正常 */
 }
+
+/* Chatbase 在移动端禁止遮挡 */
+@media (max-width: 700px) {
+  button#chatbase-bubble-button {
+    margin-bottom: 42px;
+    margin-right: 20px;
+  }
+}
diff --git a/styles/notion.css b/styles/notion.css
index 0991011e..ba794f88 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -523,8 +523,10 @@ summary > .notion-h {
 .notion-page {
   /* width: var(--notion-max-width); */
   width: 100% !important;
-  padding-left: calc(min(12px, 8vw));
-  padding-right: calc(min(12px, 8vw));
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+  /* padding-left: calc(min(12px, 8vw)); */
+  /* padding-right: calc(min(12px, 8vw)); */
 }
 
 .notion-full-width {
@@ -1449,6 +1451,7 @@ code[class*='language-'] {
 
 .notion-collection-card-property .notion-page-title-text {
   border-bottom: 0 none;
+  @apply dark:text-gray-200;
 }
 
 .notion-collection-card-property
diff --git a/themes/commerce/components/BlogPostListPage.js b/themes/commerce/components/BlogPostListPage.js
index d762e083..4c3ba5ac 100644
--- a/themes/commerce/components/BlogPostListPage.js
+++ b/themes/commerce/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import ProductCard from './ProductCard'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showPagination = postCount >= POSTS_PER_PAGE
   if (!posts || posts.length === 0 || page > totalPage) {
diff --git a/themes/commerce/components/BlogPostListScroll.js b/themes/commerce/components/BlogPostListScroll.js
index 004e2b5e..a00b8cc3 100644
--- a/themes/commerce/components/BlogPostListScroll.js
+++ b/themes/commerce/components/BlogPostListScroll.js
@@ -20,7 +20,7 @@ const BlogPostListScroll = ({
   siteInfo
 }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
 
   const [page, updatePage] = useState(1)
   const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
diff --git a/themes/commerce/components/SocialButton.js b/themes/commerce/components/SocialButton.js
index 555e8ea6..24823924 100644
--- a/themes/commerce/components/SocialButton.js
+++ b/themes/commerce/components/SocialButton.js
@@ -5,39 +5,101 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 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 '>
-      {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-red-400 hover:text-red-600'/>
-      </a>}
-      {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-red-400 hover:text-red-600'/>
-      </a>}
-      {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-red-400 hover:text-red-600'/>
-      </a>}
-      {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-red-400 hover:text-red-600'/>
-      </a>}
-      {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-red-400 hover:text-red-600'/>
-      </a>}
-      {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-red-400 hover:text-red-600'/>
-      </a>}
-      {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-red-400 hover:text-red-600'/>
-      </a>}
-      {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-red-400 hover:text-red-600'/>
-      </a>}
-      {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-red-400 hover:text-red-600'/>
-      </a>}
-      {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-red-400 hover:text-red-600'/>
-      </a>}
+  return (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
+        {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-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {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-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {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-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {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-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {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-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {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-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {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-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {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-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {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-red-400 hover:text-red-600' />
+          </a>
+        )}
+      </div>
     </div>
-  </div>
+  )
 }
 export default SocialButton
diff --git a/themes/example/components/BlogListPage.js b/themes/example/components/BlogListPage.js
index f9ae29a4..fe56e0bf 100644
--- a/themes/example/components/BlogListPage.js
+++ b/themes/example/components/BlogListPage.js
@@ -14,7 +14,7 @@ export const BlogListPage = props => {
   const { locale, NOTION_CONFIG } = useGlobal()
   const router = useRouter()
   const totalPage = Math.ceil(
-    postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+    postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   )
   const currentPage = +page
 
@@ -24,6 +24,7 @@ export const BlogListPage = props => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG)
 
@@ -44,7 +45,7 @@ export const BlogListPage = props => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          className={`${showPrev ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
+          className={`${showPrev ? 'bg-black dark:bg-hexo-black-gray' : 'bg-gray pointer-events-none invisible'} text-white no-underline py-2 px-3 rounded`}>
           {locale.PAGINATION.PREV}
         </Link>
         <Link
@@ -52,7 +53,7 @@ export const BlogListPage = props => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          className={`${showNext ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
+          className={`${showNext ? 'bg-black dark:bg-hexo-black-gray ' : 'bg-gray pointer-events-none invisible'} text-white no-underline py-2 px-3 rounded`}>
           {locale.PAGINATION.NEXT}
         </Link>
       </div>
diff --git a/themes/example/components/BlogListScroll.js b/themes/example/components/BlogListScroll.js
index 3ddc340a..d712b919 100644
--- a/themes/example/components/BlogListScroll.js
+++ b/themes/example/components/BlogListScroll.js
@@ -13,7 +13,7 @@ export const BlogListScroll = props => {
   const { posts } = props
   const { locale, NOTION_CONFIG } = useGlobal()
   const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
 
   let hasMore = false
   const postsToShow = posts
diff --git a/themes/example/components/Catalog.js b/themes/example/components/Catalog.js
new file mode 100644
index 00000000..161a6cae
--- /dev/null
+++ b/themes/example/components/Catalog.js
@@ -0,0 +1,94 @@
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+  // 监听滚动事件
+  useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+  const throttleMs = 200
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
+      }
+      setActiveSection(currentSectionId)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+  )
+
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+
+  return (
+    <div className='px-3'>
+      <div
+        className='overflow-y-auto max-h-96 overscroll-none scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full  text-black dark:text-gray-300'>
+          {toc.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`notion-table-of-contents-item duration-300 transform font-light
+              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate ${activeSection === id ? ' font-bold text-red-400 underline' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
+    </div>
+  )
+}
+
+export default Catalog
diff --git a/themes/example/components/Header.js b/themes/example/components/Header.js
index 5331eed2..ca60bf63 100644
--- a/themes/example/components/Header.js
+++ b/themes/example/components/Header.js
@@ -4,12 +4,13 @@ import { MenuList } from './MenuList'
 
 /**
  * 网站顶部
+ * LOGO 和 菜单
  * @returns
  */
 export const Header = props => {
   return (
     <header className='w-full px-6 bg-white  dark:bg-black relative z-20'>
-      <div className='container mx-auto max-w-4xl md:flex justify-between items-center'>
+      <div className='mx-auto max-w-4xl md:flex justify-between items-center'>
         <Link
           href='/'
           className='py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center'>
diff --git a/themes/example/components/MenuList.js b/themes/example/components/MenuList.js
index 90b00c7e..ef0c122a 100644
--- a/themes/example/components/MenuList.js
+++ b/themes/example/components/MenuList.js
@@ -58,7 +58,7 @@ export const MenuList = props => {
 
   return (
     <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'>
+      <div className='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, index) => (
             <MenuItemDrop key={index} link={link} />
diff --git a/themes/example/components/SearchInput.js b/themes/example/components/SearchInput.js
index 419e9984..043f2961 100644
--- a/themes/example/components/SearchInput.js
+++ b/themes/example/components/SearchInput.js
@@ -24,7 +24,6 @@ const SearchInput = ({ currentTag, keyword, cRef }) => {
     const key = searchInputRef.current.value
     if (key && key !== '') {
       router.push({ pathname: '/search/' + key }).then(r => {
-        console.log('搜索', key)
       })
     } else {
       router.push({ pathname: '/' }).then(r => {
diff --git a/themes/example/components/SideBar.js b/themes/example/components/SideBar.js
index 5cfe9d9f..35c95b1e 100644
--- a/themes/example/components/SideBar.js
+++ b/themes/example/components/SideBar.js
@@ -3,7 +3,9 @@ import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
+import CONFIG from '../config'
 import Announcement from './Announcement'
+import Catalog from './Catalog'
 const ExampleRecentComments = dynamic(
   () => import('./RecentCommentListForExample')
 )
@@ -13,10 +15,36 @@ const ExampleRecentComments = dynamic(
  */
 export const SideBar = props => {
   const { locale } = useGlobal()
-  const { latestPosts, categoryOptions, notice } = props
+  const { latestPosts, categoryOptions, notice, post } = props
+  // 评论相关
+  const COMMENT_WALINE_SERVER_URL = siteConfig(
+    'COMMENT_WALINE_SERVER_URL',
+    false
+  )
+  const COMMENT_WALINE_RECENT = siteConfig('COMMENT_WALINE_RECENT', false)
+
+  // 文章详情页特殊布局
+  const HIDDEN_NOTIFICATION =
+    post && siteConfig('EXAMPLE_ARTICLE_HIDDEN_NOTIFICATION', false, CONFIG)
+
+  // 文章详情页左右布局改为上下布局
+  const LAYOUT_VERTICAL =
+    post && siteConfig('EXAMPLE_ARTICLE_LAYOUT_VERTICAL', false, CONFIG)
+
   return (
-    <div className='w-full md:w-64 sticky top-8'>
-      <aside className='rounded shadow overflow-hidden mb-6'>
+    <>
+      {/* 目录 */}
+      {post?.toc && post?.toc.length > 2 && (
+        <aside className='w-full rounded shadow overflow-hidden mb-6 pb-4'>
+          <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.TABLE_OF_CONTENTS}
+          </h3>
+          <Catalog toc={post?.toc} />
+        </aside>
+      )}
+
+      {/* 分类 */}
+      <aside className='w-full 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.CATEGORY}
         </h3>
@@ -34,7 +62,7 @@ export const SideBar = props => {
                     {' '}
                     <a
                       href={`/category/${category.name}`}
-                      className='text-gray-darkest text-sm'>
+                      className='text-gray-darkest text-sm hover:underline'>
                       {category.name}({category.count})
                     </a>
                   </li>
@@ -44,7 +72,9 @@ export const SideBar = props => {
           </ul>
         </div>
       </aside>
-      <aside className='rounded shadow overflow-hidden mb-6'>
+
+      {/* 最新文章 */}
+      <aside className='w-full 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.LATEST_POSTS}
         </h3>
@@ -58,7 +88,7 @@ export const SideBar = props => {
                     {' '}
                     <a
                       href={`/${p.slug}`}
-                      className='text-gray-darkest text-sm'>
+                      className='text-gray-darkest text-sm hover:underline'>
                       {p.title}
                     </a>
                   </li>
@@ -68,25 +98,29 @@ export const SideBar = props => {
           </ul>
         </div>
       </aside>
+
+      {/* 公告 */}
       {/* 公告栏 */}
-      <Announcement post={notice} />
+      {!HIDDEN_NOTIFICATION && <Announcement post={notice} />}
 
       {/* 最近评论 */}
-      {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>
+      {COMMENT_WALINE_SERVER_URL && COMMENT_WALINE_RECENT && (
+        <aside className='w-full 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'>
-              <ExampleRecentComments />
-            </div>
-          </aside>
-        )}
-      <aside className='rounded  overflow-hidden mb-6'>
+          <div className='p-4'>
+            <ExampleRecentComments />
+          </div>
+        </aside>
+      )}
+
+      {/* 宠物挂件 */}
+      <aside
+        className={`rounded overflow-hidden mb-6 ${LAYOUT_VERTICAL ? 'hidden md:fixed right-4 bottom-20' : ''}`}>
         <Live2D />
       </aside>
-    </div>
+    </>
   )
 }
diff --git a/themes/example/components/TitleBar.js b/themes/example/components/TitleBar.js
new file mode 100644
index 00000000..add6901a
--- /dev/null
+++ b/themes/example/components/TitleBar.js
@@ -0,0 +1,48 @@
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+
+/**
+ * 标题栏
+ */
+export default function TitleBar(props) {
+  const { post } = props
+  const { fullWidth, siteInfo } = useGlobal()
+
+  const title = post?.title || siteConfig('TITLE')
+  const description = post?.description || siteConfig('AUTHOR')
+  const headerImage = post?.pageCoverThumbnail
+    ? post.pageCoverThumbnail
+    : siteInfo?.pageCover
+
+  const TITLE_BG = siteConfig('EXAMPLE_TITLE_IMAGE', false, CONFIG)
+
+  return (
+    <>
+      {/* 标题栏 */}
+      {!fullWidth && (
+        <div className='relative overflow-hidden 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='title-1 relative text-xl md:text-4xl pb-4 z-10'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post?.pageIcon} />
+            )}
+            {title}
+          </h1>
+          <p className='title-2 relative leading-loose text-gray-dark z-10'>
+            {description}
+          </p>
+          {TITLE_BG && (
+            <>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={headerImage}
+                className='absolute object-cover top-0 left-0 w-full h-full select-none opacity-70 z-0'
+              />
+            </>
+          )}
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/themes/example/config.js b/themes/example/config.js
index 181d3a93..b1c0af1f 100644
--- a/themes/example/config.js
+++ b/themes/example/config.js
@@ -8,7 +8,12 @@ const CONFIG = {
   EXAMPLE_MENU_ARCHIVE: true, // 显示归档
   EXAMPLE_MENU_SEARCH: true, // 显示搜索
 
-  EXAMPLE_POST_LIST_COVER: true // 列表显示文章封面
+  EXAMPLE_POST_LIST_COVER: true, // 列表显示文章封面
 
+  EXAMPLE_TITLE_IMAGE: false, // 标题栏，是否背景图片
+
+  // 文章页面布局
+  EXAMPLE_ARTICLE_LAYOUT_VERTICAL: false, // 文章详情，左右布局改为上下布局
+  EXAMPLE_ARTICLE_HIDDEN_NOTIFICATION: false // 文章详情隐藏公告
 }
 export default CONFIG
diff --git a/themes/example/index.js b/themes/example/index.js
index b1893935..90580a24 100644
--- a/themes/example/index.js
+++ b/themes/example/index.js
@@ -2,7 +2,6 @@
 
 import Comment from '@/components/Comment'
 import replaceSearchResult from '@/components/Mark'
-import NotionIcon from '@/components/NotionIcon'
 import NotionPage from '@/components/NotionPage'
 import ShareBar from '@/components/ShareBar'
 import { siteConfig } from '@/lib/config'
@@ -21,6 +20,7 @@ import { PostLock } from './components/PostLock'
 import { PostMeta } from './components/PostMeta'
 import SearchInput from './components/SearchInput'
 import { SideBar } from './components/SideBar'
+import TitleBar from './components/TitleBar'
 import CONFIG from './config'
 import { Style } from './style'
 
@@ -32,36 +32,15 @@ import { Style } from './style'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children } = props
+  const { children, post } = props
   const { onLoading, fullWidth, locale } = useGlobal()
-  const router = useRouter()
-  const { post, category, tag } = props
 
-  const title = post?.title || siteConfig('TITLE')
-  const description = post?.description || siteConfig('AUTHOR')
+  // 文章详情页左右布局改为上下布局
+  const LAYOUT_VERTICAL =
+    post && siteConfig('EXAMPLE_ARTICLE_LAYOUT_VERTICAL', false, CONFIG)
 
-  // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
-  // 如果是搜索，则列表顶部嵌入 搜索框
-  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>
-    )
-  }
+  // 网站左右布局颠倒
+  const LAYOUT_SIDEBAR_REVERSE = siteConfig('LAYOUT_SIDEBAR_REVERSE', false)
 
   return (
     <div
@@ -71,33 +50,20 @@ const LayoutBase = props => {
 
       {/* 页头 */}
       <Header {...props} />
+      {/* 标题栏 */}
+      <TitleBar {...props} />
 
       {/* 主体 */}
       <div id='container-inner' className='w-full relative z-10'>
-        {/* 标题栏 */}
-        {!fullWidth && (
-          <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'>
-              {siteConfig('POST_TITLE_ICON') && (
-                <NotionIcon icon={post?.pageIcon} />
-              )}
-              {title}
-            </h1>
-            <p className='leading-loose text-gray-dark'>{description}</p>
-          </div>
-        )}
-
         <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'
-          }>
+          className={`relative mx-auto justify-center md:flex py-8 px-2
+          ${LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : ''} 
+          ${LAYOUT_VERTICAL ? 'items-center flex-col' : 'items-start'} 
+          `}>
           {/* 内容 */}
           <div
-            className={`w-full ${fullWidth ? '' : 'max-w-3xl'} xl:px-14 lg:px-4`}>
+            className={`${fullWidth ? '' : LAYOUT_VERTICAL ? 'max-w-5xl' : 'max-w-3xl'} w-full xl:px-14 lg:px-4`}>
             <Transition
               show={!onLoading}
               appear={true}
@@ -109,13 +75,22 @@ const LayoutBase = props => {
               leaveTo='opacity-0 -translate-y-16'
               unmount={false}>
               {/* 嵌入模块 */}
-              {slotTop}
+              {props.slotTop}
               {children}
             </Transition>
           </div>
 
           {/* 侧边栏 */}
-          {!fullWidth && <SideBar {...props} />}
+          {!fullWidth && (
+            <div
+              className={`${
+                LAYOUT_VERTICAL
+                  ? 'flex space-x-0 md:space-x-2 md:flex-row flex-col w-full max-w-5xl justify-center xl:px-14 lg:px-4'
+                  : 'md:w-64 sticky top-8'
+              }`}>
+              <SideBar {...props} />
+            </div>
+          )}
         </div>
       </div>
 
@@ -150,8 +125,20 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
+  const { category, tag } = props
+
   return (
     <>
+      {/* 显示分类 */}
+      {category && (
+        <div className='pb-12'>
+          <i className='mr-1 fas fa-folder-open' />
+          {category}
+        </div>
+      )}
+      {/* 显示标签 */}
+      {tag && <div className='pb-12'>#{tag}</div>}
+
       {siteConfig('POST_LIST_STYLE') === 'page' ? (
         <BlogListPage {...props} />
       ) : (
@@ -192,7 +179,7 @@ const LayoutSlug = props => {
       {lock ? (
         <PostLock validPassword={validPassword} />
       ) : (
-        <div id='article-wrapper' className='px-2'>
+        <div id='article-wrapper'>
           <PostMeta post={post} />
           <NotionPage post={post} />
           <ShareBar post={post} />
@@ -237,7 +224,14 @@ const LayoutSearch = props => {
     }
   }, [router])
 
-  return <LayoutPostList {...props} />
+  return (
+    <>
+      <div className='pb-12'>
+        <SearchInput {...props} />
+      </div>
+      <LayoutPostList {...props} />
+    </>
+  )
 }
 
 /**
diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js
index f534d1b6..0fe42a91 100644
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -1,22 +1,22 @@
-import Logo from './Logo'
-import GroupCategory from './GroupCategory'
-import { MenuList } from './MenuList'
-import GroupTag from './GroupTag'
-import SearchInput from './SearchInput'
-import SiteInfo from './SiteInfo'
-import Catalog from './Catalog'
-import Announcement from './Announcement'
-import { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
-import SocialButton from './SocialButton'
-import CONFIG from '@/themes/fukasawa/config'
 import { AdSlot } from '@/components/GoogleAdsense'
 import { siteConfig } from '@/lib/config'
-import MailChimpForm from './MailChimpForm'
 import { useGlobal } from '@/lib/global'
-import { useEffect, useMemo, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
+import CONFIG from '@/themes/fukasawa/config'
 import { debounce } from 'lodash'
+import { useRouter } from 'next/router'
+import { useEffect, useMemo, useState } from 'react'
+import Announcement from './Announcement'
+import Catalog from './Catalog'
+import GroupCategory from './GroupCategory'
+import GroupTag from './GroupTag'
+import Logo from './Logo'
+import MailChimpForm from './MailChimpForm'
+import { MenuList } from './MenuList'
+import SearchInput from './SearchInput'
+import SiteInfo from './SiteInfo'
+import SocialButton from './SocialButton'
 
 /**
  * 侧边栏
@@ -24,16 +24,41 @@ import { debounce } from 'lodash'
  * @returns
  */
 function AsideLeft(props) {
-  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, notice } = props
+  const {
+    tagOptions,
+    currentTag,
+    categoryOptions,
+    currentCategory,
+    post,
+    slot,
+    notice
+  } = props
   const router = useRouter()
   const { fullWidth } = useGlobal()
 
-  const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT = fullWidth || siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)
+  const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT =
+    fullWidth ||
+    siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)
+
+  const FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL = siteConfig(
+    'FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL',
+    false,
+    CONFIG
+  )
+
+  const FUKASAWA_SIDEBAR_COLLAPSE_BUTTON = siteConfig(
+    'FUKASAWA_SIDEBAR_COLLAPSE_BUTTON',
+    null,
+    CONFIG
+  )
 
   // 侧边栏折叠从 本地存储中获取 open 状态的初始值
   const [isCollapsed, setIsCollapse] = useState(() => {
     if (typeof window !== 'undefined') {
-      return localStorage.getItem('fukasawa-sidebar-collapse') === 'true' || FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
+      return (
+        localStorage.getItem('fukasawa-sidebar-collapse') === 'true' ||
+        FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
+      )
     }
     return FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
   })
@@ -45,8 +70,8 @@ function AsideLeft(props) {
     }
   }, [isCollapsed])
 
+  const isReverse = siteConfig('LAYOUT_SIDEBAR_REVERSE')
   const position = useMemo(() => {
-    const isReverse = JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
     if (isCollapsed) {
       if (isReverse) {
         return 'right-2'
@@ -69,7 +94,7 @@ function AsideLeft(props) {
 
   // 自动折叠侧边栏 onResize 窗口宽度小于1366 || 滚动条滚动至页面的300px时 ; 将open设置为false
   useEffect(() => {
-    if (!siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL', false, CONFIG)) {
+    if (!FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL) {
       return
     }
     const handleResize = debounce(() => {
@@ -92,73 +117,89 @@ function AsideLeft(props) {
       }
     }
   }, [])
- 
- 
-  return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-300 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
-        {/* 折叠按钮 */}
-    {siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_BUTTON', null, CONFIG) && <div className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2   dark:text-white`} onClick={toggleOpen}>
-            {isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
-        </div>}
 
-        <div className={`h-full ${isCollapsed ? 'hidden' : 'p-8'}`}>
-
-            <Logo {...props} />
-
-            <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
-                {siteConfig('DESCRIPTION')}
-            </section>
-
-            <section className='flex flex-col text-gray-600'>
-                <div className='w-12 my-4' />
-                <MenuList {...props} />
-            </section>
-
-            <section className='flex flex-col text-gray-600'>
-                <div className='w-12 my-4' />
-                <SearchInput {...props} />
-            </section>
-
-            <section className='flex flex-col dark:text-gray-300'>
-                <div className='w-12 my-4' />
-                <Announcement post={notice} />
-            </section>
-
-            <section>
-                <MailChimpForm />
-            </section>
-
-            <section>
-                <AdSlot type='in-article' />
-            </section>
-
-            {router.asPath !== '/tag' && <section className='flex flex-col'>
-                <div className='w-12 my-4' />
-                <GroupTag tags={tagOptions} currentTag={currentTag} />
-            </section>}
-
-            {router.asPath !== '/category' && <section className='flex flex-col'>
-                <div className='w-12 my-4' />
-                <GroupCategory categories={categoryOptions} currentCategory={currentCategory} />
-            </section>}
-
-            <section className='flex flex-col'>
-                <div className='w-12 my-4' />
-                <SocialButton />
-                <SiteInfo />
-            </section>
-
-            <section className='flex justify-center dark:text-gray-200 pt-4'>
-                <DarkModeButton />
-            </section>
-
-            <section className='sticky top-0 pt-12  flex flex-col max-h-screen '>
-                <Catalog toc={post?.toc} />
-                <div className='flex justify-center'>
-                    <div>{slot}</div>
-                </div>
-            </section>
+  return (
+    <div
+      className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-300 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
+      {/* 悬浮的折叠按钮 */}
+      {FUKASAWA_SIDEBAR_COLLAPSE_BUTTON && (
+        <div
+          className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2 dark:text-white`}
+          onClick={toggleOpen}>
+          {isCollapsed ? (
+            <i className='fa-solid fa-indent text-xl'></i>
+          ) : (
+            <i className='fas fa-bars text-xl'></i>
+          )}
         </div>
+      )}
+
+      <div className={`h-full ${isCollapsed ? 'hidden' : 'p-8'}`}>
+        <Logo {...props} />
+
+        <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
+          {siteConfig('DESCRIPTION')}
+        </section>
+
+        <section className='flex flex-col text-gray-600'>
+          <div className='w-12 my-4' />
+          <MenuList {...props} />
+        </section>
+
+        <section className='flex flex-col text-gray-600'>
+          <div className='w-12 my-4' />
+          <SearchInput {...props} />
+        </section>
+
+        <section className='flex flex-col dark:text-gray-300'>
+          <div className='w-12 my-4' />
+          <Announcement post={notice} />
+        </section>
+
+        <section>
+          <MailChimpForm />
+        </section>
+
+        <section>
+          <AdSlot type='in-article' />
+        </section>
+
+        {router.asPath !== '/tag' && (
+          <section className='flex flex-col'>
+            <div className='w-12 my-4' />
+            <GroupTag tags={tagOptions} currentTag={currentTag} />
+          </section>
+        )}
+
+        {router.asPath !== '/category' && (
+          <section className='flex flex-col'>
+            <div className='w-12 my-4' />
+            <GroupCategory
+              categories={categoryOptions}
+              currentCategory={currentCategory}
+            />
+          </section>
+        )}
+
+        <section className='flex flex-col'>
+          <div className='w-12 my-4' />
+          <SocialButton />
+          <SiteInfo />
+        </section>
+
+        <section className='flex justify-center dark:text-gray-200 pt-4'>
+          <DarkModeButton />
+        </section>
+
+        <section className='sticky top-0 pt-12  flex flex-col max-h-screen '>
+          <Catalog toc={post?.toc} />
+          <div className='flex justify-center'>
+            <div>{slot}</div>
+          </div>
+        </section>
+      </div>
     </div>
+  )
 }
 
 export default AsideLeft
diff --git a/themes/fukasawa/components/BlogCard.js b/themes/fukasawa/components/BlogCard.js
index 7419dede..2cfb0ce4 100644
--- a/themes/fukasawa/components/BlogCard.js
+++ b/themes/fukasawa/components/BlogCard.js
@@ -1,6 +1,7 @@
 import LazyImage from '@/components/LazyImage'
 import NotionIcon from '@/components/NotionIcon'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import CONFIG from '../config'
 import TagItemMini from './TagItemMini'
@@ -10,7 +11,8 @@ import TagItemMini from './TagItemMini'
  * @param {*} param0
  * @returns
  */
-const BlogCard = ({ index, post, showSummary, siteInfo }) => {
+const BlogCard = ({ showAnimate, post, showSummary }) => {
+const {siteInfo} =useGlobal()
   const showPreview =
     siteConfig('FUKASAWA_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
   // fukasawa 强制显示图片
@@ -24,11 +26,12 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
   const showPageCover =
     siteConfig('FUKASAWA_POST_LIST_COVER', null, CONFIG) &&
     post?.pageCoverThumbnail
+    
   const FUKASAWA_POST_LIST_ANIMATION = siteConfig(
     'FUKASAWA_POST_LIST_ANIMATION',
     null,
     CONFIG
-  )
+  ) || showAnimate 
 
   // 动画样式  首屏卡片不用，后面翻出来的加动画
   const aosProps = FUKASAWA_POST_LIST_ANIMATION
diff --git a/themes/fukasawa/components/BlogListPage.js b/themes/fukasawa/components/BlogListPage.js
index e15c58fa..6d5e55b7 100644
--- a/themes/fukasawa/components/BlogListPage.js
+++ b/themes/fukasawa/components/BlogListPage.js
@@ -17,8 +17,9 @@ import PaginationSimple from './PaginationSimple'
  */
 const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
+  const postsPerPage = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(
-    postCount / parseInt(siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG))
+    postCount / postsPerPage
   )
   const showNext = page < totalPage
 
@@ -33,23 +34,27 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
     return () => window.removeEventListener('resize', handleResize)
   }, [])
 
-  /**
-   * 文章重新布局，使纵向排列看起来是横向排列
-   */
+   /**
+    * 文章重新布局，使纵向排列看起来是横向排列
+    */
   useEffect(() => {
-    const count = posts?.length || 0
-    const rows = Math.ceil(count / columns)
-    const newFilterPosts = []
-    for (let i = 0; i < columns; i++) {
-      for (let j = 0; j < rows; j++) {
-        const index = j * columns + i
-        if (index < count) {
-          newFilterPosts.push(deepClone(posts[index]))
+    const count = posts?.length || 0;
+    const rows = Math.ceil(count / columns);
+    const newFilterPosts = new Array(count);
+
+    let index = 0;
+    for (let col = 0; col < columns; col++) {
+        for (let row = 0; row < rows; row++) {
+        const sourceIndex = row * columns + col;
+        if (sourceIndex < count) {
+            newFilterPosts[index] = deepClone(posts[sourceIndex]);
+            index++;
+        }
         }
-      }
     }
-    setFilterPosts(newFilterPosts)
-  }, [columns, posts])
+  
+    setFilterPosts(newFilterPosts);
+  }, [columns, posts]);
 
   if (!filterPosts || filterPosts.length === 0) {
     return <BlogPostListEmpty />
diff --git a/themes/fukasawa/components/BlogListScroll.js b/themes/fukasawa/components/BlogListScroll.js
index 22b21751..489b22c8 100644
--- a/themes/fukasawa/components/BlogListScroll.js
+++ b/themes/fukasawa/components/BlogListScroll.js
@@ -1,41 +1,36 @@
-import { siteConfig } from '@/lib/config'
-import { useGlobal } from '@/lib/global'
-import { useEffect, useRef, useState } from 'react'
-import BlogCard from './BlogCard'
-import BlogPostListEmpty from './BlogListEmpty'
+import { siteConfig } from '@/lib/config';
+import { useGlobal } from '@/lib/global';
+import throttle from 'lodash.throttle';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import BlogCard from './BlogCard';
+import BlogPostListEmpty from './BlogListEmpty';
+
+const BlogListScroll = ({ posts }) => {
+  const { locale, NOTION_CONFIG } = useGlobal();
+  const [page, setPage] = useState(1);
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG);
+  const [filterPostsGroups, setFilterPostsGroups] = useState([]);
+
+  // 每页显示的文章数量
+  const postsPerPage = POSTS_PER_PAGE;
+
+  // 计算总页数
+  const totalPages = Math.ceil(posts.length / postsPerPage);
+
+  // 加载更多文章
+  const loadMorePosts = () => {
+    if (page < totalPages) {
+      setPage(page + 1);
+    }
+  };
+
 
-/**
- * 文章列表分页表格
- * @param page 当前页
- * @param posts 所有文章
- * @param tags 所有标签
- * @returns {JSX.Element}
- * @constructor
- */
-const BlogListScroll = props => {
-  const { posts = [], siteInfo } = props
-  const { locale, NOTION_CONFIG } = useGlobal()
   const targetRef = useRef(null)
-  const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
 
-  let hasMore = false
-  const postsToShow = posts
-    ? Object.assign(posts).slice(0, POSTS_PER_PAGE * page)
-    : []
-
-  if (posts) {
-    const totalCount = posts.length
-    hasMore = page * POSTS_PER_PAGE < totalCount
-  }
-  const handleGetMore = () => {
-    if (!hasMore) return
-    updatePage(page + 1)
-  }
 
   // 监听滚动自动分页加载
-  const scrollTrigger = () => {
-    requestAnimationFrame(() => {
+  const scrollTrigger = useCallback(
+    throttle(() => {
       const scrollS = window.scrollY + window.outerHeight
       const clientHeight = targetRef
         ? targetRef.current
@@ -43,47 +38,64 @@ const BlogListScroll = props => {
           : 0
         : 0
       if (scrollS > clientHeight + 100) {
-        handleGetMore()
+        loadMorePosts()
       }
-    })
-  }
+    }, 500)
+  )
 
   useEffect(() => {
     window.addEventListener('scroll', scrollTrigger)
     return () => {
       window.removeEventListener('scroll', scrollTrigger)
     }
-  }, [])
+  })
+
+  // 根据当前页和每页文章数截取应该显示的文章
+  useEffect(() => {
+    const startIndex = (page - 1) * postsPerPage;
+    const endIndex = startIndex + postsPerPage;
+    const postsToShow = posts.slice(startIndex, endIndex);
+    const columns = 3; // 假设有3列
+
+    // 重新排列文章，保证列优先顺序
+    const newFilterPosts = [];
+    for (let col = 0; col < columns; col++) {
+      for (let i = col; i < postsToShow.length; i += columns) {
+        newFilterPosts.push(postsToShow[i]);
+      }
+    }
+
+    setFilterPostsGroups((prev) => [...prev, newFilterPosts]);
+  }, [posts, page]);
 
   if (!posts || posts.length === 0) {
-    return <BlogPostListEmpty />
+    return <BlogPostListEmpty />;
   } else {
     return (
-      <div id='posts-wrapper' ref={targetRef} className='grid-container'>
-        {/* 文章列表 */}
-        {postsToShow?.map(post => (
-          <div
-            key={post.id}
-            className='grid-item justify-center flex'
-            style={{ breakInside: 'avoid' }}>
-            <BlogCard
-              index={posts.indexOf(post)}
-              key={post.id}
-              post={post}
-              siteInfo={siteInfo}
-            />
+      <div ref={targetRef}>
+        {filterPostsGroups.map((group, groupIndex) => (
+          <div key={groupIndex} id="posts-wrapper" className="grid-container mb-10">
+            {group.map((post) => (
+              <div
+                key={post.id}
+                className="grid-item justify-center flex"
+                style={{ breakInside: 'avoid' }}
+              >
+                <BlogCard key={post.id} post={post} showAnimate={groupIndex > 0}/>
+              </div>
+            ))}
           </div>
         ))}
-
         <div
-          className='w-full my-4 py-4 text-center cursor-pointer '
-          onClick={handleGetMore}>
-          {' '}
-          {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+          className="w-full my-4 py-4 text-center cursor-pointer"
+          onClick={loadMorePosts}
+        >
+          {page < totalPages ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}
         </div>
       </div>
-    )
+    );
   }
-}
+};
+
+export default BlogListScroll;
 
-export default BlogListScroll
diff --git a/themes/fukasawa/components/Header.js b/themes/fukasawa/components/Header.js
new file mode 100644
index 00000000..669b384b
--- /dev/null
+++ b/themes/fukasawa/components/Header.js
@@ -0,0 +1,64 @@
+import Collapse from '@/components/Collapse'
+import { useRef, useState } from 'react'
+import Logo from './Logo'
+import { MenuList } from './MenuList'
+import SearchInput from './SearchInput'
+
+/**
+ * 顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const Header = props => {
+  const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  return (
+    <div id='top-nav' className='z-40 block lg:hidden'>
+      {/* 导航栏 */}
+      <div
+        id='sticky-nav'
+        className={
+          'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'
+        }>
+        <Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
+          <div className='py-1 px-5'>
+            <MenuList
+              {...props}
+              onHeightChange={param =>
+                collapseRef.current?.updateCollapseHeight(param)
+              }
+            />
+            <SearchInput {...props} />
+          </div>
+        </Collapse>
+        <div className='w-full flex justify-between items-center p-4 '>
+          {/* 左侧LOGO 标题 */}
+          <div className='flex flex-none flex-grow-0'>
+            <Logo {...props} />
+          </div>
+          <div className='flex'></div>
+
+          {/* 右侧功能 */}
+          <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
+            <div
+              onClick={toggleMenuOpen}
+              className='cursor-pointer text-lg p-2'>
+              {isOpen ? (
+                <i className='fas fa-times' />
+              ) : (
+                <i className='fas fa-bars' />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Header
diff --git a/themes/fukasawa/components/MenuItemDrop.js b/themes/fukasawa/components/MenuItemDrop.js
index ccc77549..1de272c2 100644
--- a/themes/fukasawa/components/MenuItemDrop.js
+++ b/themes/fukasawa/components/MenuItemDrop.js
@@ -7,9 +7,11 @@ export const MenuItemDrop = ({ link }) => {
 
   return (
     <li
-      onMouseOver={() => changeShow(true)}
+      onMouseOver={() => {
+        changeShow(true)
+      }}
       onMouseOut={() => changeShow(false)}
-      className='relative py-1 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '>
+      className='relative py-1 mb-1.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '>
       {!hasSubMenu && (
         <Link
           href={link?.href}
@@ -33,7 +35,7 @@ export const MenuItemDrop = ({ link }) => {
           {hasSubMenu && (
             <div className='text-right'>
               <i
-                className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+                className={`px-2 fas fa-chevron-left duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
             </div>
           )}
         </div>
@@ -42,7 +44,7 @@ export const MenuItemDrop = ({ link }) => {
       {/* 子菜单 */}
       {hasSubMenu && (
         <ul
-          className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} z-20 py-1 absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
+          className={`${show ? 'visible opacity-100 left-72' : 'invisible opacity-0 left-80'} z-20 p-2 absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
           {link?.subMenus?.map((sLink, index) => {
             return (
               <li key={index}>
diff --git a/themes/fukasawa/components/MenuList.js b/themes/fukasawa/components/MenuList.js
index 33e7695b..981775b0 100644
--- a/themes/fukasawa/components/MenuList.js
+++ b/themes/fukasawa/components/MenuList.js
@@ -28,11 +28,6 @@ export const MenuList = props => {
       name: locale.NAV.ARCHIVE,
       href: '/archive',
       show: siteConfig('FUKASAWA_MENU_ARCHIVE', null, CONFIG)
-    },
-    {
-      name: locale.NAV.SEARCH,
-      href: '/search',
-      show: siteConfig('FUKASAWA_MENU_SEARCH', null, CONFIG)
     }
   ]
 
diff --git a/themes/fukasawa/components/SocialButton.js b/themes/fukasawa/components/SocialButton.js
index 796d5c5f..87c35d12 100644
--- a/themes/fukasawa/components/SocialButton.js
+++ b/themes/fukasawa/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-52 flex-wrap flex'>
-    <div className='space-x-3 text-lg text-gray-500 dark:text-gray-400'>
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {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>}
-      {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>}
+  return (
+    <div className='w-52 flex-wrap flex'>
+      <div className='space-x-3 text-lg text-gray-500 dark:text-gray-400'>
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {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>
+        )}
+        {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>
     </div>
-  </div>
+  )
 }
 export default SocialButton
diff --git a/themes/fukasawa/components/TopNav.js b/themes/fukasawa/components/TopNav.js
deleted file mode 100644
index 21ca59a9..00000000
--- a/themes/fukasawa/components/TopNav.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useState, useRef } from 'react'
-import Collapse from '@/components/Collapse'
-import { MenuList } from './MenuList'
-import Logo from './Logo'
-import SearchInput from './SearchInput'
-
-/**
- * 顶部导航
- * @param {*} param0
- * @returns
- */
-const TopNav = props => {
-  const [isOpen, changeShow] = useState(false)
-  const collapseRef = useRef(null)
-
-  const toggleMenuOpen = () => {
-    changeShow(!isOpen)
-  }
-
-  return (<div id='top-nav' className='z-40 block lg:hidden'>
-
-    {/* 导航栏 */}
-    <div id='sticky-nav' className={'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
-      <Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
-        <div className='py-1 px-5'>
-          <MenuList {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
-          <SearchInput {...props} />
-        </div>
-      </Collapse>
-      <div className='w-full flex justify-between items-center p-4 '>
-        {/* 左侧LOGO 标题 */}
-        <div className='flex flex-none flex-grow-0'>
-          <Logo {...props} />
-        </div>
-        <div className='flex'>
-        </div>
-
-        {/* 右侧功能 */}
-        <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-          <div onClick={toggleMenuOpen} className='cursor-pointer text-lg p-2'>
-            {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>)
-}
-
-export default TopNav
diff --git a/themes/fukasawa/config.js b/themes/fukasawa/config.js
index c5e06801..68a3ad3f 100644
--- a/themes/fukasawa/config.js
+++ b/themes/fukasawa/config.js
@@ -10,11 +10,9 @@ const CONFIG = {
   FUKASAWA_MENU_CATEGORY: true, // 显示分类
   FUKASAWA_MENU_TAG: true, // 显示标签
   FUKASAWA_MENU_ARCHIVE: true, // 显示归档
-  FUKASAWA_MENU_SEARCH: false, // 显示搜索
 
   FUKASAWA_SIDEBAR_COLLAPSE_BUTTON: true, // 侧边栏折叠按钮
   FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT: false, // 侧边栏默认折叠收起
   FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL: false // 侧边栏滚动时折叠 仅文章阅读页有效
-
 }
 export default CONFIG
diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js
index a8f97502..96936df8 100644
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -1,27 +1,27 @@
 'use client'
 
-import CONFIG from './config'
-import TopNav from './components/TopNav'
-import AsideLeft from './components/AsideLeft'
-import { isBrowser } from '@/lib/utils'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import { AdSlot } from '@/components/GoogleAdsense'
+import replaceSearchResult from '@/components/Mark'
+import WWAds from '@/components/WWAds'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useRef } from 'react'
+import ArticleDetail from './components/ArticleDetail'
+import ArticleLock from './components/ArticleLock'
+import AsideLeft from './components/AsideLeft'
 import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
 import BlogArchiveItem from './components/BlogPostArchive'
-import ArticleDetail from './components/ArticleDetail'
-import ArticleLock from './components/ArticleLock'
+import Header from './components/Header'
 import TagItemMini from './components/TagItemMini'
-import { useRouter } from 'next/router'
-import { createContext, useContext, useEffect, useRef } from 'react'
-import Link from 'next/link'
-import { Transition } from '@headlessui/react'
-import dynamic from 'next/dynamic'
-import { AdSlot } from '@/components/GoogleAdsense'
+import CONFIG from './config'
 import { Style } from './style'
-import replaceSearchResult from '@/components/Mark'
-import { siteConfig } from '@/lib/config'
-import WWAds from '@/components/WWAds'
-import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
 
 const Live2D = dynamic(() => import('@/components/Live2D'))
 
@@ -43,51 +43,58 @@ export const useFukasawaGlobal = () => useContext(ThemeGlobalFukasawa)
  * @returns {JSX.Element}
  * @constructor
  */
-const LayoutBase = (props) => {
+const LayoutBase = props => {
   const { children, headerSlot } = props
   const leftAreaSlot = <Live2D />
   const { onLoading, fullWidth } = useGlobal()
   const searchModal = useRef(null)
   return (
     <ThemeGlobalFukasawa.Provider value={{ searchModal }}>
-      <div id='theme-fukasawa' className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
-        <AlgoliaSearchModal cRef={searchModal} {...props} />
+      <div
+        id='theme-fukasawa'
+        className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
         <Style />
+        {/* 页头导航，此主题只在移动端生效 */}
+        <Header {...props} />
 
-        <TopNav {...props} />
-
-        <div className={(JSON.parse(siteConfig('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={`${fullWidth ? '' : '2xl:max-w-6xl md:max-w-4xl'} w-full relative z-10`}>
+          <main
+            id='wrapper'
+            className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
+            <div
+              id='container-inner'
+              className={`${fullWidth ? '' : '2xl:max-w-6xl md:max-w-4xl'} w-full relative z-10`}>
               <Transition
                 show={!onLoading}
                 appear={true}
-                className="w-full"
-                enter="transition ease-in-out duration-700 transform order-first"
-                enterFrom="opacity-0 translate-y-16"
-                enterTo="opacity-100"
-                leave="transition ease-in-out duration-300 transform"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 -translate-y-16"
-                unmount={false}
-              >
+                className='w-full'
+                enter='transition ease-in-out duration-700 transform order-first'
+                enterFrom='opacity-0 translate-y-16'
+                enterTo='opacity-100'
+                leave='transition ease-in-out duration-300 transform'
+                leaveFrom='opacity-100 translate-y-0'
+                leaveTo='opacity-0 -translate-y-16'
+                unmount={false}>
                 <div> {headerSlot} </div>
                 <div> {children} </div>
-
               </Transition>
 
               <div className='mt-2'>
                 <AdSlot type='native' />
               </div>
-
             </div>
           </main>
-
         </div>
 
+        <AlgoliaSearchModal cRef={searchModal} {...props} />
       </div>
     </ThemeGlobalFukasawa.Provider>
   )
@@ -96,49 +103,65 @@ const LayoutBase = (props) => {
 /**
  * 首页
  * @param {*} props notion数据
-            * @returns 首页就是一个博客列表
-            */
-const LayoutIndex = (props) => {
+ * @returns 首页就是一个博客列表
+ */
+const LayoutIndex = props => {
   return <LayoutPostList {...props} />
 }
 
 /**
  * 博客列表
  * @param {*} props
-            */
-const LayoutPostList = (props) => {
-  return <>
-    <div className='w-full p-2'><WWAds className='w-full' orientation='horizontal' /></div>
-    {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-  </>
+ */
+const LayoutPostList = props => {
+  const POST_LIST_STYLE = siteConfig('POST_LIST_STYLE')
+  return (
+    <>
+      <div className='w-full p-2'>
+        <WWAds className='w-full' orientation='horizontal' />
+      </div>
+      { POST_LIST_STYLE=== 'page' ? (
+        <BlogListPage {...props} />
+      ) : (
+        <BlogListScroll {...props} />
+      )}
+    </>
+  )
 }
 
 /**
  * 文章详情
  * @param {*} props
-            * @returns
-            */
-const LayoutSlug = (props) => {
+ * @returns
+ */
+const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const router = useRouter()
   useEffect(() => {
     // 404
     if (!post) {
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
+      setTimeout(
+        () => {
+          if (isBrowser) {
+            const article = document.getElementById('notion-article')
+            if (!article) {
+              router.push('/404').then(() => {
+                console.warn('找不到页面', router.asPath)
+              })
+            }
           }
-        }
-      }, siteConfig('POST_WAITING_TIME_FOR_404') * 1000)
+        },
+        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+      )
     }
   }, [post])
   return (
     <>
-      {lock ? <ArticleLock validPassword={validPassword} /> : <ArticleDetail {...props} />}
+      {lock ? (
+        <ArticleLock validPassword={validPassword} />
+      ) : (
+        <ArticleDetail {...props} />
+      )}
     </>
   )
 }
@@ -167,26 +190,28 @@ const LayoutSearch = props => {
 /**
  * 归档页面
  */
-const LayoutArchive = (props) => {
+const LayoutArchive = props => {
   const { archivePosts } = 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
-          key={archiveTitle}
-          posts={archivePosts[archiveTitle]}
-          archiveTitle={archiveTitle}
-        />
-      ))}
-    </div>
-  </>
+  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
+            key={archiveTitle}
+            posts={archivePosts[archiveTitle]}
+            archiveTitle={archiveTitle}
+          />
+        ))}
+      </div>
+    </>
+  )
 }
 
 /**
  * 404
  * @param {*} props
-            * @returns
-            */
+ * @returns
+ */
 const Layout404 = props => {
   return <>404</>
 }
@@ -194,16 +219,17 @@ const Layout404 = props => {
 /**
  * 分类列表
  * @param {*} props
-            * @returns
-            */
-const LayoutCategoryIndex = (props) => {
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
   const { locale } = useGlobal()
   const { categoryOptions } = 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-th' />{locale.COMMON.CATEGORY}:
+          <i className='mr-4 fas fa-th' />
+          {locale.COMMON.CATEGORY}:
         </div>
         <div id='category-list' className='duration-200 flex flex-wrap'>
           {categoryOptions?.map(category => {
@@ -214,8 +240,11 @@ const LayoutCategoryIndex = (props) => {
                 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})
+                  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>
             )
@@ -229,36 +258,41 @@ const LayoutCategoryIndex = (props) => {
 /**
  * 标签列表
  * @param {*} props
-            * @returns
-            */
-const LayoutTagIndex = (props) => {
+ * @returns
+ */
+const LayoutTagIndex = props => {
   const { locale } = useGlobal()
   const { tagOptions } = 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">
-        {tagOptions.map(tag => {
-          return (
-            <div key={tag.name} className="p-2">
-              <TagItemMini key={tag.name} tag={tag} />
-            </div>
-          )
-        })}
+  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'>
+          {tagOptions.map(tag => {
+            return (
+              <div key={tag.name} className='p-2'>
+                <TagItemMini key={tag.name} tag={tag} />
+              </div>
+            )
+          })}
+        </div>
       </div>
-    </div>
-  </>
+    </>
+  )
 }
 
 export {
-  CONFIG as THEME_CONFIG,
-  LayoutBase,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
   Layout404,
-  LayoutPostList,
+  LayoutArchive,
+  LayoutBase,
   LayoutCategoryIndex,
-  LayoutTagIndex
+  LayoutIndex,
+  LayoutPostList,
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }
diff --git a/themes/fukasawa/style.js b/themes/fukasawa/style.js
index e730d919..bfb8bde6 100644
--- a/themes/fukasawa/style.js
+++ b/themes/fukasawa/style.js
@@ -44,7 +44,16 @@ const Style = () => {
         column-gap: .5rem;
         }
     }
+
+    .container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 10px;
+            padding: 10px;
+        }
+
   `}</style>
 }
 
 export { Style }
+
diff --git a/themes/game/components/BlogListPage.js b/themes/game/components/BlogListPage.js
index 139eb783..dc1df2a6 100644
--- a/themes/game/components/BlogListPage.js
+++ b/themes/game/components/BlogListPage.js
@@ -1,3 +1,4 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { GameListIndexCombine } from './GameListIndexCombine'
 import PaginationSimple from './PaginationSimple'
@@ -9,7 +10,8 @@ import PaginationSimple from './PaginationSimple'
 export const BlogListPage = props => {
   const { page = 1, postCount } = props
   const { NOTION_CONFIG } = useGlobal()
-  const totalPage = Math.ceil(postCount / NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
+  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showNext = page < totalPage
 
   return (
diff --git a/themes/game/components/BlogListScroll.js b/themes/game/components/BlogListScroll.js
index 6fa04049..a46d0973 100644
--- a/themes/game/components/BlogListScroll.js
+++ b/themes/game/components/BlogListScroll.js
@@ -9,7 +9,7 @@ export const BlogListScroll = props => {
   const { posts } = props
   const { locale, NOTION_CONFIG } = useGlobal()
   const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
 
   let hasMore = false
   const postsToShow =
diff --git a/themes/game/components/PaginationSimple.js b/themes/game/components/PaginationSimple.js
index 3f5a2760..6df710f5 100644
--- a/themes/game/components/PaginationSimple.js
+++ b/themes/game/components/PaginationSimple.js
@@ -17,6 +17,7 @@ const PaginationSimple = ({ page, showNext }) => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   return (
     <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
diff --git a/themes/gitbook/components/BottomMenuBar.js b/themes/gitbook/components/BottomMenuBar.js
index 234221b5..52e095d4 100644
--- a/themes/gitbook/components/BottomMenuBar.js
+++ b/themes/gitbook/components/BottomMenuBar.js
@@ -1,23 +1,27 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-import JumpToTopButton from './JumpToTopButton'
+import MobileButtonCatalog from './MobileButtonCatalog'
+import MobileButtonPageNav from './MobileButtonPageNav'
 
+/**
+ * 移动端底部导航
+ * @param {*} param0
+ * @returns
+ */
 export default function BottomMenuBar({ post, className }) {
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
+  const showTocButton = post?.toc?.length > 1
 
   return (
-        <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
-            <div className='flex justify-between h-full shadow-card'>
-                <div onClick={togglePageNavVisible} className='flex w-full items-center justify-center cursor-pointer'>
-                <i className="fa-solid fa-book"></i>
-                </div>
-                <div className='flex w-full items-center justify-center cursor-pointer'>
-                    <JumpToTopButton />
-                </div>
-            </div>
+    <>
+      {/* 移动端底部导航按钮 */}
+      <div className='bottom-button-group md:hidden w-screen h-14 px-4 fixed flex items-center justify-between right-left bottom-0 z-30 bg-white border-t dark:border-gray-800'>
+        <div className='w-full'>
+          <MobileButtonPageNav />
         </div>
+        {showTocButton && (
+          <div className='w-full'>
+            <MobileButtonCatalog />
+          </div>
+        )}
+      </div>
+    </>
   )
 }
diff --git a/themes/gitbook/components/Catalog.js b/themes/gitbook/components/Catalog.js
index fde3b9f2..e4a20bdf 100644
--- a/themes/gitbook/components/Catalog.js
+++ b/themes/gitbook/components/Catalog.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
@@ -13,6 +14,7 @@ const Catalog = ({ post }) => {
   const toc = post?.toc
   // 同步选中目录事件
   const [activeSection, setActiveSection] = useState(null)
+  const {locale}= useGlobal()
 
   // 监听滚动事件
   useEffect(() => {
@@ -67,6 +69,7 @@ const Catalog = ({ post }) => {
 
   return (
     <>
+      <div className='w-full hidden md:block'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
       <div
         id='toc-wrapper'
         className='toc-wrapper overflow-y-auto my-2 max-h-80 overscroll-none scroll-hidden'>
diff --git a/themes/gitbook/components/CatalogDrawerWrapper.js b/themes/gitbook/components/CatalogDrawerWrapper.js
new file mode 100644
index 00000000..c978ee15
--- /dev/null
+++ b/themes/gitbook/components/CatalogDrawerWrapper.js
@@ -0,0 +1,66 @@
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '@/themes/gitbook'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import Catalog from './Catalog'
+
+/**
+ * 悬浮抽屉目录
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CatalogDrawerWrapper = ({ post, cRef }) => {
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const switchVisible = () => {
+    changeTocVisible(!tocVisible)
+  }
+  useEffect(() => {
+    changeTocVisible(false)
+  }, [router])
+  return (
+    <>
+      <div
+        id='gitbook-toc-float'
+        className='fixed top-0 right-0 z-40 md:hidden'>
+        {/* 侧边菜单 */}
+        <div
+          className={
+            (tocVisible
+              ? 'animate__slideInRight '
+              : ' -mr-72 animate__slideOutRight') +
+            ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'
+          }>
+          {post && (
+            <>
+              <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
+                <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
+                <i
+                  className='fas fa-times p-1 cursor-pointer'
+                  onClick={() => {
+                    changeTocVisible(false)
+                  }}></i>
+              </div>
+              <div className='dark:text-gray-400 text-gray-600 px-3'>
+                <Catalog post={post} />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {/* 背景蒙版 */}
+      <div
+        id='right-drawer-background'
+        className={
+          (tocVisible ? 'block' : 'hidden') +
+          ' fixed top-0 left-0 z-30 w-full h-full'
+        }
+        onClick={switchVisible}
+      />
+    </>
+  )
+}
+export default CatalogDrawerWrapper
diff --git a/themes/gitbook/components/FloatTocButton.js b/themes/gitbook/components/FloatTocButton.js
deleted file mode 100644
index 4215f447..00000000
--- a/themes/gitbook/components/FloatTocButton.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-
-/**
- * 移动端悬浮目录按钮
- */
-export default function FloatTocButton () {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
-
-  const toggleToc = () => {
-    changeTocVisible(!tocVisible)
-  }
-
-  return (
-    <div
-      onClick={toggleToc}
-      className={ 'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
-      }
-    >
-      <a
-        id="toc-button"
-        className={'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'}
-      />
-    </div>
-  )
-}
diff --git a/themes/gitbook/components/Footer.js b/themes/gitbook/components/Footer.js
index 78a91cd5..60dc84b3 100644
--- a/themes/gitbook/components/Footer.js
+++ b/themes/gitbook/components/Footer.js
@@ -1,33 +1,66 @@
 import { siteConfig } from '@/lib/config'
-
+import SocialButton from './SocialButton'
+/**
+ * 站点也叫
+ * @param {*} param0
+ * @returns
+ */
 const Footer = ({ siteInfo }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
   const since = siteConfig('SINCE')
-  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+  const copyrightDate =
+    parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
-        <footer
-            className='z-20 py-2 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'
-        >
-            <hr className='pb-2' />
+    <footer className='z-20 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
+      <hr className='pb-2' />
 
-            <div className='flex justify-center'>
-                <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>
+      <SocialButton />
 
-            <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>
+      <div className='flex justify-center pt-1'>
+        <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>
 
-            {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br /></>}
+      <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>
 
-            <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'>{siteConfig('TITLE')}</h1>
+      {siteConfig('BEI_AN') && (
+        <>
+          <i className='fas fa-shield-alt' />{' '}
+          <a href='https://beian.miit.gov.cn/' className='mr-2'>
+            {siteConfig('BEI_AN')}
+          </a>
+          <br />
+        </>
+      )}
 
-        </footer>
+      <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>
+      {/* SEO title */}
+      <h1 className='pt-1 hidden'>{siteConfig('TITLE')}</h1>
+    </footer>
   )
 }
 
diff --git a/themes/gitbook/components/Header.js b/themes/gitbook/components/Header.js
index 8dfb3735..8d538740 100644
--- a/themes/gitbook/components/Header.js
+++ b/themes/gitbook/components/Header.js
@@ -90,7 +90,7 @@ export default function Header(props) {
             {isOpen ? (
               <i className='fas fa-times' />
             ) : (
-              <i className='fa-solid fa-ellipsis-vertical' />
+              <i className='fa-solid fa-bars' />
             )}
           </div>
         </div>
diff --git a/themes/gitbook/components/JumpToTopButton.js b/themes/gitbook/components/JumpToTopButton.js
index 0afdbb6c..21b53733 100644
--- a/themes/gitbook/components/JumpToTopButton.js
+++ b/themes/gitbook/components/JumpToTopButton.js
@@ -1,4 +1,3 @@
-
 /**
  * 跳转到网页顶部
  * 当屏幕下滑500像素后会出现该控件
@@ -9,15 +8,20 @@
  */
 const JumpToTopButton = ({ showPercent = false, percent, className }) => {
   return (
-          <div
-              id="jump-to-top"
-              data-aos="fade-up"
-              data-aos-duration="300"
-              data-aos-once="false"
-              data-aos-anchor-placement="top-center"
-              className='fixed xl:right-80 right-2 mr-10 bottom-24 z-20'>
-              <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
-          </div>
+    <div
+      id='jump-to-top'
+      data-aos='fade-up'
+      data-aos-duration='300'
+      data-aos-once='false'
+      data-aos-anchor-placement='top-center'
+      className='fixed xl:right-80 right-2 bottom-24 z-20'>
+      <i
+        className='shadow fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray'
+        onClick={() => {
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }}
+      />
+    </div>
   )
 }
 
diff --git a/themes/gitbook/components/LogoBar.js b/themes/gitbook/components/LogoBar.js
index c2d1c453..dfe3cadd 100644
--- a/themes/gitbook/components/LogoBar.js
+++ b/themes/gitbook/components/LogoBar.js
@@ -1,6 +1,5 @@
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
-import { useGitBookGlobal } from '@/themes/gitbook'
 import Link from 'next/link'
 import CONFIG from '../config'
 
@@ -11,19 +10,8 @@ import CONFIG from '../config'
  */
 export default function LogoBar(props) {
   const { siteInfo } = props
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
   return (
     <div id='top-wrapper' className='w-full flex items-center'>
-      <div
-        onClick={togglePageNavVisible}
-        className='cursor-pointer md:hidden text-xl pr-3 hover:scale-110 duration-150'>
-        <i
-          className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
-      </div>
       <Link
         href={`/${siteConfig('GITBOOK_INDEX_PAGE', '', CONFIG)}`}
         className='flex text-md md:text-xl dark:text-gray-200'>
diff --git a/themes/gitbook/components/MobileButtonCatalog.js b/themes/gitbook/components/MobileButtonCatalog.js
new file mode 100644
index 00000000..e9e8b4e0
--- /dev/null
+++ b/themes/gitbook/components/MobileButtonCatalog.js
@@ -0,0 +1,31 @@
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '@/themes/gitbook'
+
+/**
+ * 移动端目录按钮
+ */
+export default function MobileButtonCatalog() {
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  return (
+    <div
+      onClick={toggleToc}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='toc-button'
+        className={
+          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
+        }>
+        <i className='fa-list-ol fas' />
+        <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
+      </a>
+    </div>
+  )
+}
diff --git a/themes/gitbook/components/MobileButtonPageNav.js b/themes/gitbook/components/MobileButtonPageNav.js
new file mode 100644
index 00000000..78f038f1
--- /dev/null
+++ b/themes/gitbook/components/MobileButtonPageNav.js
@@ -0,0 +1,30 @@
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '@/themes/gitbook'
+
+/**
+ * 移动端文章导航按钮
+ */
+export default function MobileButtonPageNav() {
+  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  return (
+    <div
+      onClick={togglePageNavVisible}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='nav-button'
+        className={
+          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
+        }>
+        <i className='fa-book fas' />
+        <span>{locale.COMMON.ARTICLE_LIST}</span>
+      </a>
+    </div>
+  )
+}
diff --git a/themes/gitbook/components/NavPostItem.js b/themes/gitbook/components/NavPostItem.js
index cd0c1742..4961d7de 100644
--- a/themes/gitbook/components/NavPostItem.js
+++ b/themes/gitbook/components/NavPostItem.js
@@ -40,8 +40,8 @@ const NavPostItem = props => {
             !expanded && <Badge />}
         </div>
         <Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
-          {group?.items?.map(post => (
-            <div key={post.id} className='ml-3 border-l'>
+          {group?.items?.map((post, index) => (
+            <div key={index} className='ml-3 border-l'>
               <BlogPostCard className='text-sm ml-3' post={post} />
             </div>
           ))}
@@ -51,8 +51,8 @@ const NavPostItem = props => {
   } else {
     return (
       <>
-        {group?.items?.map(post => (
-          <div key={post.id}>
+        {group?.items?.map((post, index) => (
+          <div key={index}>
             <BlogPostCard className='text-sm py-2' post={post} />
           </div>
         ))}
diff --git a/themes/gitbook/components/PageNavDrawer.js b/themes/gitbook/components/PageNavDrawer.js
index b5657d18..df50be6c 100644
--- a/themes/gitbook/components/PageNavDrawer.js
+++ b/themes/gitbook/components/PageNavDrawer.js
@@ -1,4 +1,7 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import NavPostList from './NavPostList'
 
 /**
@@ -11,11 +14,16 @@ import NavPostList from './NavPostList'
 const PageNavDrawer = props => {
   const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
   const { filteredNavPages } = props
-
+  const { locale } = useGlobal()
+  const router = useRouter()
   const switchVisible = () => {
     changePageNavVisible(!pageNavVisible)
   }
 
+  useEffect(() => {
+    changePageNavVisible(false)
+  }, [router])
+
   return (
     <>
       <div
@@ -24,7 +32,15 @@ const PageNavDrawer = props => {
         {/* 侧边菜单 */}
         <div
           className={`${pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft'} 
-                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+          <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
+            <span>{locale.COMMON.ARTICLE_LIST}</span>
+            <i
+              className='fas fa-times p-1 cursor-pointer'
+              onClick={() => {
+                changePageNavVisible(false)
+              }}></i>
+          </div>
           {/* 所有文章列表 */}
           <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
             <NavPostList filteredNavPages={filteredNavPages} />
diff --git a/themes/gitbook/components/SocialButton.js b/themes/gitbook/components/SocialButton.js
index b1bd85f9..36c7edd6 100644
--- a/themes/gitbook/components/SocialButton.js
+++ b/themes/gitbook/components/SocialButton.js
@@ -1,4 +1,6 @@
+import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
+import { useState } from 'react'
 
 /**
  * 社交联系方式按钮组
@@ -6,31 +8,176 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-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 hover:text-green-600'/>
-      </a>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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(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>}
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
+
+  const CONTACT_XIAOHONGSHU = siteConfig('CONTACT_XIAOHONGSHU')
+  const CONTACT_ZHISHIXINGQIU = siteConfig('CONTACT_ZHISHIXINGQIU')
+  const CONTACT_WEHCHAT_PUBLIC = siteConfig('CONTACT_WEHCHAT_PUBLIC')
+  const [qrCodeShow, setQrCodeShow] = useState(false)
+
+  const openPopover = () => {
+    setQrCodeShow(true)
+  }
+  const closePopover = () => {
+    setQrCodeShow(false)
+  }
+
+  return (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
+        {CONTACT_GITHUB && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={CONTACT_GITHUB}>
+            <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_TWITTER && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={CONTACT_TWITTER}>
+            <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_TELEGRAM && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={CONTACT_TELEGRAM}
+            title={'telegram'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_LINKEDIN && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={CONTACT_LINKEDIN}
+            title={'linkIn'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_WEIBO && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={CONTACT_WEIBO}>
+            <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_INSTAGRAM && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={CONTACT_INSTAGRAM}>
+            <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_EMAIL && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${CONTACT_EMAIL}`}>
+            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {ENABLE_RSS && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_BILIBILI && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={CONTACT_BILIBILI}>
+            <i className='transform hover:scale-125 duration-150 dark:hover:text-green-400 hover:text-green-600 fab fa-bilibili' />
+          </a>
+        )}
+        {CONTACT_YOUTUBE && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={CONTACT_YOUTUBE}>
+            <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_XIAOHONGSHU && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'小红书'}
+            href={CONTACT_XIAOHONGSHU}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className='transform hover:scale-125 duration-150 w-6'
+              src='/svg/xiaohongshu.svg'
+              alt='小红书'
+            />
+          </a>
+        )}
+        {CONTACT_ZHISHIXINGQIU && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'知识星球'}
+            href={CONTACT_ZHISHIXINGQIU}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className='transform hover:scale-125 duration-150 w-6'
+              src='/svg/zhishixingqiu.svg'
+              alt='知识星球'
+            />{' '}
+          </a>
+        )}
+        {CONTACT_WEHCHAT_PUBLIC && (
+          <button
+            onMouseEnter={openPopover}
+            onMouseLeave={closePopover}
+            aria-label={'微信公众号'}>
+            <div id='wechat-button'>
+              <i className='transform scale-105 hover:scale-125 duration-150 fab fa-weixin  dark:hover:text-green-400 hover:text-green-600' />
+            </div>
+            {/* 二维码弹框 */}
+            <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'>
+                  {qrCodeShow && <QrCode value={CONTACT_WEHCHAT_PUBLIC} />}
+                </div>
+              </div>
+            </div>
+          </button>
+        )}
+      </div>
     </div>
+  )
 }
 export default SocialButton
diff --git a/themes/gitbook/components/TocDrawer.js b/themes/gitbook/components/TocDrawer.js
deleted file mode 100644
index 7b07044a..00000000
--- a/themes/gitbook/components/TocDrawer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-import Catalog from './Catalog'
-
-/**
- * 悬浮抽屉目录
- * @param toc
- * @param post
- * @returns {JSX.Element}
- * @constructor
- */
-const TocDrawer = ({ post, cRef }) => {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
-  const switchVisible = () => {
-    changeTocVisible(!tocVisible)
-  }
-  return <>
-    <div id='gitbook-toc-float' className='fixed top-0 right-0 z-40 md:hidden'>
-      {/* 侧边菜单 */}
-      <div
-        className={(tocVisible ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
-        ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'}>
-          {post && <>
-           <div className='dark:text-gray-400 text-gray-600 h-96 p-3'>
-             <Catalog post={post}/>
-           </div>
-          </>}
-      </div>
-    </div>
-    {/* 背景蒙版 */}
-    <div id='right-drawer-background' className={(tocVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
-         onClick={switchVisible} />
-  </>
-}
-export default TocDrawer
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index d70e152e..5d4255e1 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -9,7 +9,7 @@ import ShareBar from '@/components/ShareBar'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
-import { Transition } from '@headlessui/react'
+import { getShortId } from '@/lib/utils/pageId'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -19,9 +19,10 @@ import ArticleAround from './components/ArticleAround'
 import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
 import BlogArchiveItem from './components/BlogArchiveItem'
+import BottomMenuBar from './components/BottomMenuBar'
 import Catalog from './components/Catalog'
+import CatalogDrawerWrapper from './components/CatalogDrawerWrapper'
 import CategoryItem from './components/CategoryItem'
-import FloatTocButton from './components/FloatTocButton'
 import Footer from './components/Footer'
 import Header from './components/Header'
 import InfoCard from './components/InfoCard'
@@ -31,7 +32,6 @@ import PageNavDrawer from './components/PageNavDrawer'
 import RevolverMaps from './components/RevolverMaps'
 import SearchInput from './components/SearchInput'
 import TagItemMini from './components/TagItemMini'
-import TocDrawer from './components/TocDrawer'
 import CONFIG from './config'
 import { Style } from './style'
 
@@ -54,14 +54,14 @@ function getNavPagesWithLatest(allNavPages, latestPosts, post) {
     localStorage.getItem('post_read_time') || '{}'
   )
   if (post) {
-    postReadTime[post.id] = new Date().getTime()
+    postReadTime[getShortId(post.id)] = new Date().getTime()
   }
   // 更新
   localStorage.setItem('post_read_time', JSON.stringify(postReadTime))
 
   return allNavPages?.map(item => {
     const res = {
-      id: item.id,
+      short_id: item.short_id,
       title: item.title || '',
       pageCoverThumbnail: item.pageCoverThumbnail || '',
       category: item.category || null,
@@ -74,9 +74,9 @@ function getNavPagesWithLatest(allNavPages, latestPosts, post) {
     }
     // 属于最新文章通常6篇 && (无阅读记录 || 最近更新时间大于上次阅读时间)
     if (
-      latestPosts.some(post => post.id === item.id) &&
-      (!postReadTime[item.id] ||
-        postReadTime[item.id] < new Date(item.lastEditedDate).getTime())
+      latestPosts.some(post => post?.id.indexOf(item?.short_id) === 0) &&
+      (!postReadTime[item.short_id] ||
+        postReadTime[item.short_id] < new Date(item.lastEditedDate).getTime())
     ) {
       return { ...res, isLatest: true }
     } else {
@@ -101,13 +101,12 @@ const LayoutBase = props => {
     slotRight,
     slotTop
   } = props
-  const { onLoading, fullWidth } = useGlobal()
+  const { fullWidth } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
   const [pageNavVisible, changePageNavVisible] = useState(false)
   const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
 
-  const showTocButton = post?.toc?.length > 1
   const searchModal = useRef(null)
 
   useEffect(() => {
@@ -130,7 +129,7 @@ const LayoutBase = props => {
 
       <div
         id='theme-gitbook'
-        className={`${siteConfig('FONT_STYLE')} scroll-smooth bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300`}>
+        className={`${siteConfig('FONT_STYLE')} pb-16 md:pb-0 scroll-smooth bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300`}>
         <AlgoliaSearchModal cRef={searchModal} {...props} />
 
         {/* 顶部导航栏 */}
@@ -139,9 +138,8 @@ const LayoutBase = props => {
         <main
           id='wrapper'
           className={
-            (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
-              ? 'flex-row-reverse'
-              : '') + 'relative flex justify-between w-full h-full mx-auto'
+            (siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : '') +
+            'relative flex justify-between w-full h-full mx-auto'
           }>
           {/* 左侧推拉抽屉 */}
           {fullWidth ? null : (
@@ -149,16 +147,19 @@ const LayoutBase = props => {
               className={
                 'hidden md:block border-r dark:border-transparent relative z-10 dark:bg-hexo-black-gray'
               }>
-              <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' />
-                <div className='mb-20'>
+              <div className='w-72 pt-14 pb-4 px-6 sticky top-0 h-screen flex justify-between flex-col'>
+                {/* 导航 */}
+                <div className='overflow-y-scroll scroll-hidden'>
+                  {/* 嵌入 */}
+                  {slotLeft}
+                  {/* 搜索框 */}
+                  <SearchInput className='my-3 rounded-md' />
+
+                  {/* 文章列表 */}
                   {/* 所有文章列表 */}
                   <NavPostList filteredNavPages={filteredNavPages} />
                 </div>
-              </div>
-
-              <div className='w-72 fixed left-0 bottom-0 z-20 bg-white'>
+                {/* 页脚 */}
                 <Footer {...props} />
               </div>
             </div>
@@ -173,7 +174,7 @@ const LayoutBase = props => {
               {slotTop}
               <WWAds className='w-full' orientation='horizontal' />
 
-              <Transition
+              {/* <Transition
                 show={!onLoading}
                 appear={true}
                 enter='transition ease-in-out duration-700 transform order-first'
@@ -182,9 +183,9 @@ const LayoutBase = props => {
                 leave='transition ease-in-out duration-300 transform'
                 leaveFrom='opacity-100 translate-y-0'
                 leaveTo='opacity-0 -translate-y-16'
-                unmount={false}>
-                {children}
-              </Transition>
+                unmount={false}> */}
+              {children}
+              {/* </Transition> */}
 
               {/* Google广告 */}
               <AdSlot type='in-article' />
@@ -211,6 +212,7 @@ const LayoutBase = props => {
                 <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
                 <div className='py-4'>
+                  {/* 桌面端目录 */}
                   <Catalog {...props} />
                   {slotRight}
                   {router.route === '/' && (
@@ -235,18 +237,11 @@ const LayoutBase = props => {
           )}
         </main>
 
-        {/* 移动端悬浮目录按钮 */}
-        {showTocButton && !tocVisible && (
-          <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
-            <FloatTocButton {...props} />
-          </div>
-        )}
-
         {/* 移动端导航抽屉 */}
         <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
 
         {/* 移动端底部导航栏 */}
-        {/* <BottomMenuBar {...props} className='block md:hidden' /> */}
+        <BottomMenuBar {...props} />
       </div>
     </ThemeGlobalGitbook.Provider>
   )
@@ -366,7 +361,8 @@ const LayoutSlug = props => {
             </section>
           )}
 
-          <TocDrawer {...props} />
+          {/* 文章目录 */}
+          <CatalogDrawerWrapper {...props} />
         </div>
       )}
     </>
@@ -412,11 +408,9 @@ const LayoutArchive = props => {
  */
 const Layout404 = props => {
   return (
-    <>
-      <div className='w-full h-96 py-80 flex justify-center items-center'>
-        404 Not found.
-      </div>
-    </>
+    <div className='w-full h-96 py-80 flex justify-center items-center'>
+      404 Not found.
+    </div>
   )
 }
 
diff --git a/themes/gitbook/style.js b/themes/gitbook/style.js
index 5e8eaa5a..904da2a7 100644
--- a/themes/gitbook/style.js
+++ b/themes/gitbook/style.js
@@ -5,14 +5,18 @@
  * @returns
  */
 const Style = () => {
-  return <style jsx global>{`
-    
-    // 底色
-    .dark body{
+  return (
+    <style jsx global>{`
+      // 底色
+      .dark body {
         background-color: black;
-    }
+      }
 
-  `}</style>
+      .bottom-button-group {
+        box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1);
+      }
+    `}</style>
+  )
 }
 
 export { Style }
diff --git a/themes/heo/components/ArticleAdjacent.js b/themes/heo/components/ArticleAdjacent.js
deleted file mode 100644
index d905be08..00000000
--- a/themes/heo/components/ArticleAdjacent.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
-
-/**
- * 上一篇，下一篇文章
- * @param {prev,next} param0
- * @returns
- */
-export default function ArticleAdjacent({ prev, next }) {
-  const [isScrollEnd, setIsScrollEnd] = useState(false)
-  const router = useRouter()
-
-  useEffect(() => {
-    setIsScrollEnd(false)
-  }, [router])
-
-  useEffect(() => {
-    // 文章是否已经到了底部
-    const targetElement = document.getElementById('article-end')
-
-    const handleIntersect = (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          setIsScrollEnd(true)
-        }
-      })
-    }
-
-    const options = {
-      root: null,
-      rootMargin: '0px',
-      threshold: 0.1
-    }
-
-    const observer = new IntersectionObserver(handleIntersect, options)
-    observer.observe(targetElement)
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [])
-
-  if (!prev || !next || !siteConfig('HEO_ARTICLE_ADJACENT', null, CONFIG)) {
-    return <></>
-  }
-
-  return (
-        <div id='article-end'>
-            {/* 移动端 */}
-            <section className='lg:hidden pt-8 text-gray-800 items-center text-xs md:text-sm flex flex-col m-1 '>
-                <Link
-                    href={`/${prev.slug}`}
-                    passHref
-                    className='cursor-pointer justify-between space-y-1 px-5 py-6 rounded-t-xl dark:bg-[#1e1e1e] border dark:border-gray-600 border-b-0 items-center dark:text-white flex flex-col w-full h-18 duration-200'
-                >
-                    <div className='flex justify-start items-center w-full'>上一篇</div>
-                    <div className='flex justify-center items-center text-lg font-bold'>{prev.title}</div>
-                </Link>
-                <Link
-                    href={`/${next.slug}`}
-                    passHref
-                    className='cursor-pointer justify-between space-y-1 px-5 py-6 rounded-b-xl dark:bg-[#1e1e1e] border dark:border-gray-600 items-center dark:text-white flex flex-col w-full h-18 duration-200'
-                >
-                    <div className='flex justify-start items-center w-full'>下一篇</div>
-                    <div className='flex justify-center items-center text-lg font-bold'>{next.title}</div>
-                </Link>
-            </section>
-
-            {/* 桌面端 */}
-
-            <div id='pc-next-post' className={`hidden md:block fixed z-40 right-24 bottom-4 duration-200 transition-all ${isScrollEnd ? 'mb-0 opacity-100' : '-mb-24 opacity-0'}`}>
-                <Link
-                    href={`/${next.slug}`}
-                    className='cursor-pointer drop-shadow-xl duration transition-all h-24 dark:bg-[#1e1e1e] border dark:border-gray-600 p-3 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:text-white hover:font-bold hover:bg-blue-600 rounded-lg flex flex-col justify-between'
-                >
-                    <div className='text-xs'>下一篇</div>
-                    <hr />
-                    <div>{next?.title}</div>
-                </Link>
-            </div>
-
-        </div>
-  )
-}
diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
index 3a1cf689..afd11ce6 100644
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -30,7 +30,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
         {/* 图片封面 */}
         {showPageCover && (
           <Link href={post?.href} passHref legacyBehavior>
-            <div className='w-full md:w-5/12 2xl:w-full overflow-hidden'>
+            <div className='w-full md:w-5/12 2xl:w-full overflow-hidden cursor-pointer select-none'>
               <LazyImage
                 priority={index === 0}
                 src={post?.pageCoverThumbnail}
@@ -50,11 +50,11 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
             {/* 分类 */}
             {post?.category && (
               <div
-                className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-500 text-gray-600 `}>
+                className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-300 text-gray-600 hover:text-indigo-700 dark:hover:text-yellow-500`}>
                 <Link
                   passHref
                   href={`/category/${post.category}`}
-                  className='cursor-pointer text-xs font-normal menu-link hover:text-indigo-700 dark:hover:text-yellow-700  dark:text-gray-600 transform'>
+                  className='cursor-pointer text-xs font-normal menu-link '>
                   {post.category}
                 </Link>
               </div>
@@ -76,7 +76,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
           {/* 摘要 */}
           {(!showPreview || showSummary) && (
-            <main className='line-clamp-2 replace my-3 2xl:my-1 text-gray-700  dark:text-gray-300 text-sm font-light leading-tight'>
+            <main className='line-clamp-2 replace text-gray-700  dark:text-gray-300 text-sm font-light leading-tight'>
               {post.summary}
             </main>
           )}
diff --git a/themes/heo/components/BlogPostListPage.js b/themes/heo/components/BlogPostListPage.js
index 4239e233..bf791ae5 100644
--- a/themes/heo/components/BlogPostListPage.js
+++ b/themes/heo/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showPagination = postCount >= POSTS_PER_PAGE
   if (!posts || posts.length === 0 || page > totalPage) {
diff --git a/themes/heo/components/BlogPostListScroll.js b/themes/heo/components/BlogPostListScroll.js
index 9fa7e736..8077e9fa 100644
--- a/themes/heo/components/BlogPostListScroll.js
+++ b/themes/heo/components/BlogPostListScroll.js
@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
 }) => {
   const { NOTION_CONFIG } = useGlobal()
   const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
 
   let hasMore = false
diff --git a/themes/heo/components/Catalog.js b/themes/heo/components/Catalog.js
index 1ec3dabb..c94622aa 100644
--- a/themes/heo/components/Catalog.js
+++ b/themes/heo/components/Catalog.js
@@ -63,14 +63,14 @@ const Catalog = ({ toc }) => {
     <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
     <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
       <nav className='h-full'>
-        {toc.map((tocItem) => {
+        {toc?.map((tocItem) => {
           const id = uuidToId(tocItem.id)
           tocIds.push(id)
           return (
             <a
               key={id}
               href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
+              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 }}
diff --git a/themes/heo/components/CategoryBar.js b/themes/heo/components/CategoryBar.js
index eccd9685..9879d8a7 100644
--- a/themes/heo/components/CategoryBar.js
+++ b/themes/heo/components/CategoryBar.js
@@ -29,23 +29,40 @@ export default function CategoryBar(props) {
     }
   }
 
-  return <div id='category-bar' className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]  
+  return (
+    <div
+      id='category-bar'
+      className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]  
   ${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''}  py-2 lg:px-2 rounded-xl transition-colors duration-200`}>
+      <div
+        id='category-bar-items'
+        ref={categoryBarItemsRef}
+        className='scroll-smooth max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
+        <MenuItem href='/' name={locale.NAV.INDEX} />
+        {categoryOptions?.map((c, index) => (
+          <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />
+        ))}
+      </div>
 
-        <div id='category-bar-items' ref={categoryBarItemsRef} className='scroll-smooth max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
-            <MenuItem href='/' name={locale.NAV.INDEX} />
-            {categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)}
-        </div>
-
-        <div id='category-bar-next' className='flex items-center justify-center'>
-            <div id='right' className='cursor-pointer mx-2' onClick={handleToggleScroll}>
-            {scrollRight ? <ChevronDoubleLeft className={'w-5 h-5'} /> : <ChevronDoubleRight className={'w-5 h-5'} /> }
-            </div>
-            <Link href='/category' className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600'>
-                {locale.MENU.CATEGORY}
-            </Link>
+      <div id='category-bar-next' className='flex items-center justify-center'>
+        <div
+          id='right'
+          className='cursor-pointer mx-2 dark:text-gray-300 dark:hover:text-yellow-600 hover:text-indigo-600'
+          onClick={handleToggleScroll}>
+          {scrollRight ? (
+            <ChevronDoubleLeft className={'w-5 h-5'} />
+          ) : (
+            <ChevronDoubleRight className={'w-5 h-5'} />
+          )}
         </div>
+        <Link
+          href='/category'
+          className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600 dark:hover:text-yellow-600'>
+          {locale.MENU.CATEGORY}
+        </Link>
+      </div>
     </div>
+  )
 }
 
 /**
@@ -57,7 +74,10 @@ const MenuItem = ({ href, name }) => {
   const router = useRouter()
   const { category } = router.query
   const selected = category === name
-  return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
-        <Link href={href}>{name}</Link>
+  return (
+    <div
+      className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
+      <Link href={href}>{name}</Link>
     </div>
+  )
 }
diff --git a/themes/heo/components/Footer.js b/themes/heo/components/Footer.js
index 8a4499a8..a4018b74 100644
--- a/themes/heo/components/Footer.js
+++ b/themes/heo/components/Footer.js
@@ -1,49 +1,66 @@
-import SocialButton from './SocialButton'
 import { siteConfig } from '@/lib/config'
+import SocialButton from './SocialButton'
 
 const Footer = ({ title }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
   const since = siteConfig('SINCE')
-  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+  const copyrightDate =
+    parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
-        <footer
-            className='relative flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm'
-        >
+    <footer className='relative flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm'>
+      {/* 颜色过度区 */}
+      <div
+        id='color-transition'
+        className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white  dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'
+      />
 
-            {/* 颜色过度区 */}
-            <div id='color-transition' className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white  dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'>
+      {/* 社交按钮 */}
+      <div className='w-full h-24'>
+        <SocialButton />
+      </div>
 
-            </div>
+      <br />
 
-            {/* 社交按钮 */}
-            <div className='w-full h-24'>
-                <SocialButton />
-            </div>
-
-            <br />
-
-            {/* 底部页面信息 */}
-            <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 {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'>
-                {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} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
-
-            </div>
+      {/* 底部页面信息 */}
+      <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-[#21232A] border-t dark:border-t-[#3D3D3F]'>
+        <div id='footer-bottom-left'>
+          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>
-        </footer >
+
+        <div id='footer-bottom-right'>
+          {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} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
+        </div>
+      </div>
+    </footer>
   )
 }
 
diff --git a/themes/heo/components/Header.js b/themes/heo/components/Header.js
new file mode 100644
index 00000000..eed540e8
--- /dev/null
+++ b/themes/heo/components/Header.js
@@ -0,0 +1,195 @@
+import { siteConfig } from '@/lib/config'
+import { isBrowser } from '@/lib/utils'
+import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import DarkModeButton from './DarkModeButton'
+import Logo from './Logo'
+import { MenuListTop } from './MenuListTop'
+import RandomPostButton from './RandomPostButton'
+import ReadingProgress from './ReadingProgress'
+import SearchButton from './SearchButton'
+import SlideOver from './SlideOver'
+
+/**
+ * 页头：顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const Header = props => {
+  const [fixedNav, setFixedNav] = useState(false)
+  const [textWhite, setTextWhite] = useState(false)
+  const [navBgWhite, setBgWhite] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  const router = useRouter()
+  const slideOverRef = useRef()
+
+  const toggleMenuOpen = () => {
+    slideOverRef?.current?.toggleSlideOvers()
+  }
+
+  /**
+   * 根据滚动条，切换导航栏样式
+   */
+  const scrollTrigger = useCallback(
+    throttle(() => {
+      const scrollS = window.scrollY
+      // 导航栏设置 白色背景
+      if (scrollS <= 1) {
+        setFixedNav(false)
+        setBgWhite(false)
+        setTextWhite(false)
+
+        // 文章详情页特殊处理
+        if (document?.querySelector('#post-bg')) {
+          setFixedNav(true)
+          setTextWhite(true)
+        }
+      } else {
+        // 向下滚动后的导航样式
+        setFixedNav(true)
+        setTextWhite(false)
+        setBgWhite(true)
+      }
+    }, 100)
+  )
+  useEffect(() => {
+    scrollTrigger()
+  }, [router])
+
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
+  // 导航栏根据滚动轮播菜单内容
+  useEffect(() => {
+    let prevScrollY = 0
+    let ticking = false
+
+    const handleScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          const currentScrollY = window.scrollY
+          if (currentScrollY > prevScrollY) {
+            setActiveIndex(1) // 向下滚动时设置activeIndex为1
+          } else {
+            setActiveIndex(0) // 向上滚动时设置activeIndex为0
+          }
+          prevScrollY = currentScrollY
+          ticking = false
+        })
+        ticking = true
+      }
+    }
+
+    if (isBrowser) {
+      window.addEventListener('scroll', handleScroll)
+    }
+
+    return () => {
+      if (isBrowser) {
+        window.removeEventListener('scroll', handleScroll)
+      }
+    }
+  }, [])
+
+  return (
+    <>
+      <style jsx>{`
+        @keyframes fade-in-down {
+          0% {
+            opacity: 0.5;
+            transform: translateY(-30%);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes fade-in-up {
+          0% {
+            opacity: 0.5;
+            transform: translateY(30%);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .fade-in-down {
+          animation: fade-in-down 0.3s ease-in-out;
+        }
+
+        .fade-in-up {
+          animation: fade-in-up 0.3s ease-in-out;
+        }
+      `}</style>
+
+      {/* fixed时留白高度 */}
+      {fixedNav && !document?.querySelector('#post-bg') && (
+        <div className='h-16'></div>
+      )}
+
+      {/* 顶部导航菜单栏 */}
+      <nav
+        id='nav'
+        className={`z-20 h-16 top-0 w-full duration-300 transition-all
+            ${fixedNav ? 'fixed' : 'relative bg-transparent'} 
+            ${textWhite ? 'text-white ' : 'text-black dark:text-white'}  
+            ${navBgWhite ? 'bg-white dark:bg-[#18171d] shadow' : 'bg-transparent'}`}>
+        <div className='flex h-full mx-auto justify-between items-center max-w-[86rem] px-6'>
+          {/* 左侧logo */}
+          <Logo {...props} />
+
+          {/* 中间菜单 */}
+          <div
+            id='nav-bar-swipe'
+            className={`hidden lg:flex flex-grow flex-col items-center justify-center h-full relative w-full`}>
+            <div
+              className={`absolute transition-all duration-700 ${activeIndex === 0 ? 'opacity-100 mt-0' : '-mt-20 opacity-0 invisible'}`}>
+              <MenuListTop {...props} />
+            </div>
+            <div
+              className={`absolute transition-all duration-700 ${activeIndex === 1 ? 'opacity-100 mb-0' : '-mb-20 opacity-0 invisible'}`}>
+              <h1 className='font-bold text-center text-light-400 dark:text-gray-400'>
+                {siteConfig('AUTHOR') || siteConfig('TITLE')}{' '}
+                {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}
+              </h1>
+            </div>
+          </div>
+
+          {/* 右侧固定 */}
+          <div className='flex flex-shrink-0 justify-end items-center w-48'>
+            <RandomPostButton {...props} />
+            <SearchButton {...props} />
+            {!JSON.parse(siteConfig('THEME_SWITCH')) && (
+              <div className='hidden md:block'>
+                <DarkModeButton {...props} />
+              </div>
+            )}
+            <ReadingProgress />
+
+            {/* 移动端菜单按钮 */}
+            <div
+              onClick={toggleMenuOpen}
+              className='flex lg:hidden w-8 justify-center items-center h-8 cursor-pointer'>
+              <i className='fas fa-bars' />
+            </div>
+          </div>
+
+          {/* 右边侧拉抽屉 */}
+          <SlideOver cRef={slideOverRef} {...props} />
+        </div>
+      </nav>
+    </>
+  )
+}
+
+export default Header
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
index d5462707..b22c640f 100644
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -2,6 +2,7 @@
 import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
@@ -62,13 +63,13 @@ function BannerGroup(props) {
  */
 function Banner(props) {
   const router = useRouter()
-  const { latestPosts } = props
+  const { allNavPages } = props
   /**
    * 随机跳转文章
    */
   function handleClickBanner() {
-    const randomIndex = Math.floor(Math.random() * latestPosts.length)
-    const randomPost = latestPosts[randomIndex]
+    const randomIndex = Math.floor(Math.random() * allNavPages.length)
+    const randomPost = allNavPages[randomIndex]
     router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
   }
 
@@ -161,13 +162,20 @@ function TagsGroupBar() {
  * @returns
  */
 function GroupMenu() {
+  const url_1 = siteConfig('HEO_HERO_CATEGORY_1', {}, CONFIG)?.url || ''
+  const title_1 = siteConfig('HEO_HERO_CATEGORY_1', {}, CONFIG)?.title || ''
+  const url_2 = siteConfig('HEO_HERO_CATEGORY_2', {}, CONFIG)?.url || ''
+  const title_2 = siteConfig('HEO_HERO_CATEGORY_2', {}, CONFIG)?.title || ''
+  const url_3 = siteConfig('HEO_HERO_CATEGORY_3', {}, CONFIG)?.url || ''
+  const title_3 = siteConfig('HEO_HERO_CATEGORY_3', {}, CONFIG)?.title || ''
+
   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={siteConfig('HEO_HERO_CATEGORY_1', null, CONFIG)?.url}
+        href={url_1}
         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'>
-          {siteConfig('HEO_HERO_CATEGORY_1', null, CONFIG)?.title}
+          {title_1}
           <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'>
@@ -175,10 +183,10 @@ function GroupMenu() {
         </div>
       </Link>
       <Link
-        href={siteConfig('HEO_HERO_CATEGORY_2', null, CONFIG)?.url}
+        href={url_2}
         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'>
-          {siteConfig('HEO_HERO_CATEGORY_2', null, CONFIG)?.title}
+          {title_2}
           <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'>
@@ -187,10 +195,10 @@ function GroupMenu() {
       </Link>
       {/* 第三个标签在小屏上不显示 */}
       <Link
-        href={siteConfig('HEO_HERO_CATEGORY_3', null, CONFIG)?.url}
+        href={url_3}
         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'>
-          {siteConfig('HEO_HERO_CATEGORY_3', null, CONFIG)?.title}
+          {title_3}
           <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'>
@@ -206,6 +214,7 @@ function GroupMenu() {
  */
 function TopGroup(props) {
   const { latestPosts, allNavPages, siteInfo } = props
+  const { locale } = useGlobal()
   const todayCardRef = useRef()
   function handleMouseLeave() {
     todayCardRef.current.coverUp()
@@ -238,13 +247,14 @@ function TopGroup(props) {
                 </div>
                 {/* hover 悬浮的 ‘荐’ 字 */}
                 <div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 dark:bg-yellow-600  text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>
-                  荐
+                  {locale.COMMON.RECOMMEND_BADGES}
                 </div>
               </div>
             </Link>
           )
         })}
       </div>
+      {/* 一个大的跳转文章卡片 */}
       <TodayCard cRef={todayCardRef} siteInfo={siteInfo} />
     </div>
   )
@@ -304,6 +314,7 @@ function getTopPosts({ latestPosts, allNavPages }) {
 function TodayCard({ cRef, siteInfo }) {
   const router = useRouter()
   const link = siteConfig('HEO_HERO_TITLE_LINK', null, CONFIG)
+  const { locale } = useGlobal()
   // 卡牌是否盖住下层
   const [isCoverUp, setIsCoverUp] = useState(true)
 
@@ -319,10 +330,10 @@ function TodayCard({ cRef, siteInfo }) {
   })
 
   /**
-   * 点击更多
+   * 查看更多
    * @param {*} e
    */
-  function handleClickMore(e) {
+  function handleClickShowMore(e) {
     e.stopPropagation()
     setIsCoverUp(false)
   }
@@ -348,10 +359,11 @@ function TodayCard({ cRef, siteInfo }) {
           isCoverUp
             ? 'opacity-100 cursor-pointer'
             : 'opacity-0 transform scale-110 pointer-events-none'
-        } shadow transition-all duration-200 today-card h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
+        } shadow transition-all duration-200 today-card h-full bg-black rounded-xl relative overflow-hidden flex items-end`}>
+        {/* 卡片文字信息 */}
         <div
           id='today-card-info'
-          className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
+          className='flex justify-between w-full relative text-white p-10 items-end'>
           <div className='flex flex-col'>
             <div className='text-xs font-light'>
               {siteConfig('HEO_HERO_TITLE_4', null, CONFIG)}
@@ -360,27 +372,31 @@ function TodayCard({ cRef, siteInfo }) {
               {siteConfig('HEO_HERO_TITLE_5', null, CONFIG)}
             </div>
           </div>
+          {/* 查看更多的按钮 */}
           <div
-            onClick={handleClickMore}
-            className={`'${
-              isCoverUp ? '' : 'hidden pointer-events-none '
-            } flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
+            onClick={handleClickShowMore}
+            className={`'${isCoverUp ? '' : 'hidden pointer-events-none'} z-10 group flex items-center px-3 h-10 justify-center  rounded-3xl
+            glassmorphism transition-colors duration-100 `}>
             <PlusSmall
-              className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'}
+              className={
+                'group-hover:rotate-180 duration-500 transition-all w-6 h-6 mr-2 bg-white rounded-full stroke-black'
+              }
             />
             <div id='more' className='select-none'>
-              更多推荐
+              {locale.COMMON.RECOMMEND_POSTS}
             </div>
           </div>
         </div>
-        <div
+
+        {/* 封面图 */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={siteInfo?.pageCover}
           id='today-card-cover'
           className={`${
             isCoverUp ? '' : ' pointer-events-none'
-          } cursor-pointer today-card-cover absolute w-full h-full top-0`}
-          style={{
-            background: `url('${siteInfo?.pageCover}') no-repeat center /cover`
-          }}></div>
+          } hover:scale-110 duration-1000 object-cover cursor-pointer today-card-cover absolute w-full h-full top-0`}
+        />
       </div>
     </div>
   )
diff --git a/themes/heo/components/InfoCard.js b/themes/heo/components/InfoCard.js
index a740f3b9..99d3052f 100644
--- a/themes/heo/components/InfoCard.js
+++ b/themes/heo/components/InfoCard.js
@@ -1,6 +1,6 @@
-import { siteConfig } from '@/lib/config'
-import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
+import { ArrowRightCircle } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
@@ -18,42 +18,83 @@ export function InfoCard(props) {
   const router = useRouter()
   // 在文章详情页特殊处理
   const isSlugPage = router.pathname.indexOf('/[prefix]') === 0
+  const url1 = siteConfig('HEO_INFO_CARD_URL1', null, CONFIG)
+  const icon1 = siteConfig('HEO_INFO_CARD_ICON1', null, CONFIG)
+  const url2 = siteConfig('HEO_INFO_CARD_URL2', null, CONFIG)
+  const icon2 = siteConfig('HEO_INFO_CARD_ICON2', null, CONFIG)
   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-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>
+    <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-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'>
-                {siteConfig('AUTHOR')}
-            </h2>
+      <h2 className='text-3xl font-extrabold mt-3'>{siteConfig('AUTHOR')}</h2>
 
-            {/* 公告栏 */}
-            <div>
-                <Announcement post={notice} style={{ color: 'white !important' }} />
-            </div>
+      {/* 公告栏 */}
+      <div>
+        <Announcement post={notice} style={{ color: 'white !important' }} />
+      </div>
 
-            <div className='flex justify-between'>
-                <div className='flex space-x-3  hover:text-black dark:hover:text-white'>
-                    {/* 两个社交按钮 */}
-                    <div className='bg-indigo-400 p-2 rounded-full  transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
-                        <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'>
-                        {siteConfig('HEO_INFO_CARD_URL', null, CONFIG) && <Link href={siteConfig('HEO_INFO_CARD_URL', null, CONFIG)}>
-                            <i className='fab fa-github text-xl' />
-                        </Link>
-                        }
-                    </div>
-                </div>
-                <MoreButton />
+      <div className='flex justify-between'>
+        <div className='flex space-x-3  hover:text-black dark:hover:text-white'>
+          {/* 两个社交按钮 */}
+          {url1 && (
+            <div className='w-10 text-center bg-indigo-400 p-2 rounded-full  transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
+              <Link href={url1}>
+                <i className={icon1} />
+              </Link>
             </div>
-        </Card>
+          )}
+          {url2 && (
+            <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={url2}>
+                <i className={icon2} />
+              </Link>
+            </div>
+          )}
+        </div>
+        {/* 第三个按钮 */}
+        <MoreButton />
+      </div>
+    </Card>
+  )
+}
+
+/**
+ * 了解更多按鈕
+ * @returns
+ */
+function MoreButton() {
+  const url3 = siteConfig('HEO_INFO_CARD_URL3', null, CONFIG)
+  const text3 = siteConfig('HEO_INFO_CARD_TEXT3', null, CONFIG)
+  if (!url3) {
+    return <></>
+  }
+  return (
+    <Link href={url3}>
+      <div
+        className={
+          'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'
+        }>
+        <ArrowRightCircle
+          className={
+            'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'
+          }
+        />
+        <div className='font-bold'>{text3}</div>
+      </div>
+    </Link>
   )
 }
 
@@ -69,20 +110,11 @@ function GreetingsWords() {
     setGreeting(greetings[randomIndex])
   }
 
-  return <div onClick={handleChangeGreeting} className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 hover:bg-indigo-50  hover:text-indigo-950 dark:bg-yellow-500 dark:hover:text-white dark:hover:bg-black text-sm rounded-lg  duration-200 transition-colors'>
-        {greeting}
+  return (
+    <div
+      onClick={handleChangeGreeting}
+      className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 hover:bg-indigo-50  hover:text-indigo-950 dark:bg-yellow-500 dark:hover:text-white dark:hover:bg-black text-sm rounded-lg  duration-200 transition-colors'>
+      {greeting}
     </div>
-}
-
-/**
- * 了解更多按鈕
- * @returns
- */
-function MoreButton() {
-  return <Link href='/about'>
-        <div className={'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'}>
-            <ArrowRightCircle className={'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'} />
-            <div className='font-bold'>了解更多</div>
-        </div>
-    </Link>
+  )
 }
diff --git a/themes/heo/components/LatestPostsGroupMini.js b/themes/heo/components/LatestPostsGroupMini.js
index 7bc65df3..c8f0dcf4 100644
--- a/themes/heo/components/LatestPostsGroupMini.js
+++ b/themes/heo/components/LatestPostsGroupMini.js
@@ -50,13 +50,13 @@ export default function LatestPostsGroupMini({ latestPosts, siteInfo }) {
             </div>
             <div
               className={
-                (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
+                (selected ? ' text-indigo-400 ' : 'dark:text-gray-200') +
                 ' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
-                ' hover:text-indigo-400 cursor-pointer items-center flex'
+                ' hover:text-indigo-400 dark:hover:text-yellow-600 cursor-pointer items-center flex'
               }>
               <div>
                 <div className='line-clamp-2 menu-link'>{post.title}</div>
-                <div className='text-gray-500'>{post.lastEditedDay}</div>
+                <div className='text-gray-400'>{post.lastEditedDay}</div>
               </div>
             </div>
           </Link>
diff --git a/themes/heo/components/Logo.js b/themes/heo/components/Logo.js
index 1de9ae3d..08d18b91 100644
--- a/themes/heo/components/Logo.js
+++ b/themes/heo/components/Logo.js
@@ -1,24 +1,30 @@
 import { Home } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
-import Link from 'next/link'
 import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
 
 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={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'>
-                        {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 '}/>
-                    </div>
-                </div>
-            </div>
-        </Link>
+    <Link href='/' passHref legacyBehavior>
+      <div className='flex flex-nowrap items-center cursor-pointer font-extrabold'>
+        <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'>
+            {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 '} />
+          </div>
+        </div>
+      </div>
+    </Link>
   )
 }
 export default Logo
diff --git a/themes/heo/components/MenuItemCollapse.js b/themes/heo/components/MenuItemCollapse.js
index f0f9486b..6278cebe 100644
--- a/themes/heo/components/MenuItemCollapse.js
+++ b/themes/heo/components/MenuItemCollapse.js
@@ -28,7 +28,7 @@ export const MenuItemCollapse = ({ link }) => {
   return (
     <>
       <div
-        className='select-none w-full px-2 py-2 border rounded-xl text-left dark:bg-hexo-black-gray'
+        className='select-none w-full p-2 border dark:border-gray-600 rounded-lg text-left dark:bg-[#1e1e1e]'
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
@@ -62,7 +62,7 @@ export const MenuItemCollapse = ({ link }) => {
             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'>
+                className='dark:bg-hexo-black-gray 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.href} target={link?.target}>
                   <span className='text-sm ml-4 whitespace-nowrap'>
                     {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
diff --git a/themes/heo/components/MenuItemDrop.js b/themes/heo/components/MenuItemDrop.js
index 2e6929a7..0b9c3053 100644
--- a/themes/heo/components/MenuItemDrop.js
+++ b/themes/heo/components/MenuItemDrop.js
@@ -22,7 +22,6 @@ export const MenuItemDrop = ({ link }) => {
           {link?.icon && <i className={link?.icon} />} {link?.name}
         </Link>
       )}
-
       {/* 含子菜单的按钮 */}
       {hasSubMenu && (
         <>
@@ -31,17 +30,16 @@ export const MenuItemDrop = ({ link }) => {
           </div>
         </>
       )}
-
       {/* 子菜单 */}
       {hasSubMenu && (
         <ul
           style={{ backdropFilter: 'blur(3px)' }}
-          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white transition-all duration-300 z-20 absolute`}>
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white dark:bg-[#1e1e1e] transition-all duration-300 z-20 absolute`}>
           {link.subMenus.map((sLink, index) => {
             return (
               <li
                 key={index}
-                className='cursor-pointer hover:bg-blue-600 hover:text-white text-gray-900  tracking-widest transition-all duration-200 dark:border-gray-700  py-1 pr-6 pl-3'>
+                className='cursor-pointer hover:bg-blue-600 dark:hover:bg-yellow-600 hover:text-white text-gray-900 dark:text-gray-100  tracking-widest transition-all duration-200 py-1 pr-6 pl-3'>
                 <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
diff --git a/themes/heo/components/MenuListSide.js b/themes/heo/components/MenuListSide.js
index 5716d5b8..50bec3c2 100644
--- a/themes/heo/components/MenuListSide.js
+++ b/themes/heo/components/MenuListSide.js
@@ -48,7 +48,7 @@ export const MenuListSide = props => {
   }
 
   return (
-    <nav className='flex-col space-y-2'>
+    <nav className='flex-col space-y-1'>
       {links?.map((link, index) => (
         <MenuItemCollapse key={index} link={link} />
       ))}
diff --git a/themes/heo/components/NavBar.js b/themes/heo/components/NavBar.js
deleted file mode 100644
index f244c742..00000000
--- a/themes/heo/components/NavBar.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import Logo from './Logo'
-import throttle from 'lodash.throttle'
-import RandomPostButton from './RandomPostButton'
-import SearchButton from './SearchButton'
-import DarkModeButton from './DarkModeButton'
-import SlideOver from './SlideOver'
-import ReadingProgress from './ReadingProgress'
-import { MenuListTop } from './MenuListTop'
-import { isBrowser } from '@/lib/utils'
-import { siteConfig } from '@/lib/config'
-
-/**
- * 顶部导航
- * @param {*} param0
- * @returns
- */
-const NavBar = props => {
-  const [fixedNav, setFixedNav] = useState(false)
-  const [textWhite, setTextWhite] = useState(false)
-  const [navBgWhite, setBgWhite] = useState(false)
-
-  const [activeIndex, setActiveIndex] = useState(0)
-
-  const slideOverRef = useRef()
-
-  const toggleMenuOpen = () => {
-    slideOverRef?.current?.toggleSlideOvers()
-  }
-
-  /**
-       * 根据滚动条，切换导航栏样式
-       */
-  const scrollTrigger = useCallback(throttle(() => {
-    const scrollS = window.scrollY
-    // 导航栏设置 白色背景
-    if (scrollS <= 0) {
-      setFixedNav(false)
-      setBgWhite(false)
-
-      // 文章详情页特殊处理
-      if (document.querySelector('#post-bg')) {
-        setFixedNav(true)
-        setTextWhite(true)
-        setBgWhite(false)
-      }
-    } else {
-      // 向下滚动后的导航样式
-      setFixedNav(true)
-      setTextWhite(false)
-      setBgWhite(true)
-    }
-  }, 200))
-
-  // 监听滚动
-  useEffect(() => {
-    scrollTrigger()
-    window.addEventListener('scroll', scrollTrigger)
-    return () => {
-      window.removeEventListener('scroll', scrollTrigger)
-    }
-  }, [])
-
-  // 监听导航栏显示文字
-  useEffect(() => {
-    let prevScrollY = 0
-    let ticking = false
-
-    const handleScroll = () => {
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          const currentScrollY = window.scrollY
-
-          if (currentScrollY > prevScrollY) {
-            setActiveIndex(1) // 向下滚动时设置activeIndex为1
-          } else {
-            setActiveIndex(0) // 向上滚动时设置activeIndex为0
-          }
-
-          prevScrollY = currentScrollY
-          ticking = false
-        })
-
-        ticking = true
-      }
-    }
-
-    if (isBrowser) {
-      window.addEventListener('scroll', handleScroll)
-    }
-
-    return () => {
-      if (isBrowser) {
-        window.removeEventListener('scroll', handleScroll)
-      }
-    }
-  }, [])
-
-  return (<>
-        <style jsx>{`
-            @keyframes fade-in-down {
-                0% {
-                opacity: 0.5;
-                transform: translateY(-30%);
-                }
-                100% {
-                opacity: 1;
-                transform: translateY(0);
-                }
-            }
-            
-            @keyframes fade-in-up {
-                0% {
-                opacity: 0.5;
-                transform: translateY(30%);
-                }
-                100% {
-                opacity: 1;
-                transform: translateY(0);
-                }
-            }
-            
-            .fade-in-down {
-                animation: fade-in-down 0.3s ease-in-out;
-            }
-            
-            .fade-in-up {
-                animation: fade-in-up 0.3s ease-in-out;
-            }
-        `}</style>
-
-        {/* 顶部导航菜单栏 */}
-        <nav id='nav' className={`z-20 h-16 top-0 w-full
-            ${fixedNav ? 'fixed' : 'relative bg-transparent'} 
-            ${textWhite ? 'text-white ' : 'text-black dark:text-white'}  
-            ${navBgWhite ? 'bg-white dark:bg-[#18171d]' : 'bg-transparent'}`}>
-
-            <div className='flex h-full mx-auto justify-between items-center max-w-[86rem] px-8'>
-                {/* 左侧logo */}
-                <div className='flex'>
-                    <Logo {...props} />
-                </div>
-
-                {/* 中间菜单 */}
-                <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'>{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(siteConfig('THEME_SWITCH')) && <div className='hidden md:block'><DarkModeButton {...props} /></div>}
-                    <ReadingProgress />
-
-                    {/* 移动端菜单按钮 */}
-                    <div onClick={toggleMenuOpen} className='flex lg:hidden w-8 justify-center items-center h-8 cursor-pointer'>
-                        <i className='fas fa-bars' />
-                    </div>
-                </div>
-
-                {/* 右边侧拉抽屉 */}
-                <SlideOver cRef={slideOverRef} {...props} />
-            </div>
-        </nav>
-    </>)
-}
-
-export default NavBar
diff --git a/themes/heo/components/NoticeBar.js b/themes/heo/components/NoticeBar.js
index 1ef5aa1e..0649bbd9 100644
--- a/themes/heo/components/NoticeBar.js
+++ b/themes/heo/components/NoticeBar.js
@@ -1,14 +1,15 @@
-
 import { ArrowRightCircle } from '@/components/HeroIcons'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import Swipe from './Swipe'
-import { siteConfig } from '@/lib/config'
 
 /**
  * 通知横幅
  */
 export function NoticeBar() {
   let notices = siteConfig('HEO_NOTICE_BAR', null, CONFIG)
+  const { locale } = useGlobal()
   if (typeof notices === 'string') {
     notices = JSON.parse(notices)
   }
@@ -17,14 +18,16 @@ export function NoticeBar() {
   }
 
   return (
-        <div className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
-            <div className="animate__animated animate__fadeIn animate__fast group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700  duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5">
-                <span className='whitespace-nowrap'>此刻</span>
-                <div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">
-                    <Swipe items={notices} />
-                </div>
-                <div><ArrowRightCircle className={'w-5 h-5'} /></div>
-            </div>
+    <div className='max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold'>
+      <div className='animate__animated animate__fadeIn animate__fast group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700  duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5'>
+        <span className='whitespace-nowrap'>{locale.COMMON.NOW}</span>
+        <div className='w-full h-full hover:text-indigo-600 dark:hover:text-yellow-600 flex justify-center items-center'>
+          <Swipe items={notices} />
         </div>
+        <div>
+          <ArrowRightCircle className={'w-5 h-5'} />
+        </div>
+      </div>
+    </div>
   )
 }
diff --git a/themes/heo/components/PaginationNumber.js b/themes/heo/components/PaginationNumber.js
index 54c1bf34..a68f33e5 100644
--- a/themes/heo/components/PaginationNumber.js
+++ b/themes/heo/components/PaginationNumber.js
@@ -21,6 +21,7 @@ const PaginationNumber = ({ page, totalPage }) => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   const [value, setValue] = useState('')
@@ -44,7 +45,7 @@ const PaginationNumber = ({ page, totalPage }) => {
   return (
     <>
       {/* pc端分页按钮 */}
-      <div className="hidden lg:flex justify-between items-end mt-10 mb-5 font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2 overflow-x-auto">
+      <div className='hidden lg:flex justify-between items-end mt-10 font-medium text-black duration-500 dark:text-gray-300 pt-3 space-x-2 overflow-x-auto'>
         {/* 上一页 */}
         <Link
           href={{
@@ -54,32 +55,29 @@ const PaginationNumber = ({ page, totalPage }) => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="prev"
-          className={`${currentPage === 1 ? 'invisible' : 'block'}`}
-        >
-          <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
-            <i className="fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4" />
-            <div className="absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0">
+          rel='prev'
+          className={`${currentPage === 1 ? 'invisible' : 'block'}`}>
+          <div className='hover:border-indigo-600 dark:hover:border-yellow-600 relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border dark:border-gray-600 rounded-lg cursor-pointer group'>
+            <i className='fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4' />
+            <div className='absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0'>
               {locale.PAGINATION.PREV}
             </div>
           </div>
         </Link>
 
         {/* 分页 */}
-        <div className="flex items-center space-x-2">
+        <div className='flex items-center space-x-2'>
           {pages}
 
           {/* 跳转页码 */}
-          <div className="bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200">
+          <div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border dark:border-gray-600 flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
             <input
               value={value}
-              className="w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg"
-              onInput={handleInputChange}
-            ></input>
+              className='w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg'
+              onInput={handleInputChange}></input>
             <div
               onClick={jumpToPage}
-              className="cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white"
-            >
+              className='cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white'>
               <ChevronDoubleRight className={'w-4 h-4'} />
             </div>
           </div>
@@ -91,12 +89,11 @@ const PaginationNumber = ({ page, totalPage }) => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'invisible'} `}
-        >
-          <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
-            <i className="fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6" />
-            <div className="absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2">
+          rel='next'
+          className={`${+showNext ? 'block' : 'invisible'} `}>
+          <div className='hover:border-indigo-600 dark:hover:border-yellow-600 relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border dark:border-gray-600 rounded-lg cursor-pointer group'>
+            <i className='fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6' />
+            <div className='absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2'>
               {locale.PAGINATION.NEXT}
             </div>
           </div>
@@ -105,7 +102,7 @@ const PaginationNumber = ({ page, totalPage }) => {
 
       {/* 移动端分页 */}
 
-      <div className="lg:hidden w-full flex flex-row">
+      <div className='lg:hidden w-full flex flex-row'>
         {/* 上一页 */}
         <Link
           href={{
@@ -115,13 +112,12 @@ const PaginationNumber = ({ page, totalPage }) => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="prev"
-          className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
-        >
+          rel='prev'
+          className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
           {locale.PAGINATION.PREV}
         </Link>
 
-        {showPrev && showNext && <div className="w-12"></div>}
+        {showPrev && showNext && <div className='w-12'></div>}
 
         {/* 下一页 */}
         <Link
@@ -129,9 +125,8 @@ const PaginationNumber = ({ page, totalPage }) => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
-        >
+          rel='next'
+          className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
           {locale.PAGINATION.NEXT}
         </Link>
       </div>
@@ -161,8 +156,7 @@ function getPageElement(page, currentPage, pagePrefix) {
           ? 'bg-indigo-600 dark:bg-yellow-600 text-white '
           : 'dark:bg-[#1e1e1e] bg-white') +
         ' hover:border-indigo-600 dark:hover:bg-yellow-600 dark:border-gray-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
-      }
-    >
+      }>
       {page}
     </Link>
   )
@@ -195,7 +189,7 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
     }
     if (startPage > 2) {
       pages.push(
-        <div key={-1} className="-mt-2 mx-1">
+        <div key={-1} className='-mt-2 mx-1'>
           ...{' '}
         </div>
       )
diff --git a/themes/heo/components/PostAdjacent.js b/themes/heo/components/PostAdjacent.js
new file mode 100644
index 00000000..9f97eac7
--- /dev/null
+++ b/themes/heo/components/PostAdjacent.js
@@ -0,0 +1,101 @@
+import { siteConfig } from '@/lib/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'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function PostAdjacent({ prev, next }) {
+  const [isShow, setIsShow] = useState(false)
+  const router = useRouter()
+  const { locale } = useGlobal()
+
+  useEffect(() => {
+    setIsShow(false)
+  }, [router])
+
+  useEffect(() => {
+    // 文章到底部时显示下一篇文章推荐
+    const articleEnd = document.getElementById('article-end')
+    const footerBottom = document.getElementById('footer-bottom')
+
+    const handleIntersect = entries => {
+      entries.forEach(entry => {
+        if (entry.target === articleEnd) {
+          if (entry.isIntersecting) {
+            setIsShow(true)
+          }
+        } else if (entry.target === footerBottom) {
+          if (entry.isIntersecting) {
+            setIsShow(false)
+          }
+        }
+      })
+    }
+
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    }
+
+    const observer = new IntersectionObserver(handleIntersect, options)
+    if (articleEnd) observer.observe(articleEnd)
+    if (footerBottom) observer.observe(footerBottom)
+
+    return () => {
+      if (articleEnd) observer.unobserve(articleEnd)
+      if (footerBottom) observer.unobserve(footerBottom)
+      observer.disconnect()
+    }
+  }, [])
+
+  if (!prev || !next || !siteConfig('HEO_ARTICLE_ADJACENT', null, CONFIG)) {
+    return <></>
+  }
+
+  return (
+    <div id='article-end'>
+      {/* 移动端 */}
+      <section className='lg:hidden pt-8 text-gray-800 items-center text-xs md:text-sm flex flex-col m-1 '>
+        <Link
+          href={`/${prev.slug}`}
+          passHref
+          className='cursor-pointer justify-between space-y-1 px-5 py-6 rounded-t-xl dark:bg-[#1e1e1e] border dark:border-gray-600 border-b-0 items-center dark:text-white flex flex-col w-full h-18 duration-200'>
+          <div className='flex justify-start items-center w-full'>上一篇</div>
+          <div className='flex justify-center items-center text-lg font-bold'>
+            {prev.title}
+          </div>
+        </Link>
+        <Link
+          href={`/${next.slug}`}
+          passHref
+          className='cursor-pointer justify-between space-y-1 px-5 py-6 rounded-b-xl dark:bg-[#1e1e1e] border dark:border-gray-600 items-center dark:text-white flex flex-col w-full h-18 duration-200'>
+          <div className='flex justify-start items-center w-full'>下一篇</div>
+          <div className='flex justify-center items-center text-lg font-bold'>
+            {next.title}
+          </div>
+        </Link>
+      </section>
+
+      {/* 桌面端 */}
+
+      <div
+        id='pc-next-post'
+        className={`${isShow ? 'mb-5 opacity-100' : '-mb-24 opacity-0'} hidden md:block fixed z-40 right-10 bottom-4 duration-200 transition-all`}>
+        <Link
+          href={`/${next.slug}`}
+          className='text-sm block p-4 w-72 h-28 cursor-pointer drop-shadow-xl duration transition-all dark:bg-[#1e1e1e] border dark:border-gray-600 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-blue-600 rounded-lg'>
+          <div className='font-semibold'>{locale.COMMON.NEXT_POST}</div>
+          <hr className='mt-2 mb-3' />
+          <div className='line-clamp-2'>{next?.title}</div>
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/themes/heo/components/ArticleCopyright.js b/themes/heo/components/PostCopyright.js
similarity index 68%
rename from themes/heo/components/ArticleCopyright.js
rename to themes/heo/components/PostCopyright.js
index 285eb2d4..a209d25e 100644
--- a/themes/heo/components/ArticleCopyright.js
+++ b/themes/heo/components/PostCopyright.js
@@ -1,11 +1,15 @@
+import { siteConfig } from '@/lib/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 () {
+/**
+ * 版权声明
+ * @returns
+ */
+export default function PostCopyright() {
   const router = useRouter()
   const [path, setPath] = useState(siteConfig('LINK') + router.asPath)
   useEffect(() => {
@@ -19,17 +23,19 @@ export default function ArticleCopyright () {
   }
 
   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">
+    <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">
+          <Link href={'/about'} className='hover:underline'>
             {siteConfig('AUTHOR')}
           </Link>
         </li>
         <li>
-        <strong className='mr-2'>{locale.COMMON.URL}:</strong>
-          <a className="whitespace-normal break-words hover:underline" href={path}>
+          <strong className='mr-2'>{locale.COMMON.URL}:</strong>
+          <a
+            className='whitespace-normal break-words hover:underline'
+            href={path}>
             {path}
           </a>
         </li>
diff --git a/themes/heo/components/PostHeader.js b/themes/heo/components/PostHeader.js
index 97ce4fff..e4452e92 100644
--- a/themes/heo/components/PostHeader.js
+++ b/themes/heo/components/PostHeader.js
@@ -1,105 +1,142 @@
-import Link from 'next/link'
-import { siteConfig } from '@/lib/config'
-import NotionIcon from '@/components/NotionIcon'
-import WavesArea from './WavesArea'
 import { HashTag } from '@/components/HeroIcons'
-import WordCount from '@/components/WordCount'
 import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import WordCount from '@/components/WordCount'
+import { siteConfig } from '@/lib/config'
 import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+import WavesArea from './WavesArea'
 
-export default function PostHeader({ post, siteInfo }) {
+/**
+ * 文章页头
+ * @param {*} param0
+ * @returns
+ */
+export default function PostHeader({ post, siteInfo, isDarkMode }) {
   if (!post) {
     return <></>
   }
   // 文章头图
   const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover
-
+  const ANALYTICS_BUSUANZI_ENABLE = siteConfig('ANALYTICS_BUSUANZI_ENABLE')
   return (
-        <div id='post-bg' className="w-full h-[30rem] relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10 mb-5">
-            <style jsx>{` 
-                .coverdiv:after {
-                    position: absolute;
-                    content: '';
-                    width: 100%;
-                    height: 100%;
-                    top: 0;
-                    left: 0;
-                    box-shadow: 110px -130px 300px 60px #0060e0 inset;
-                }
-            `}</style>
+    <div
+      id='post-bg'
+      className='md:mb-0 -mb-5 w-full h-[30rem] relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10'>
+      <style jsx>{`
+        .coverdiv:after {
+          position: absolute;
+          content: '';
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+          box-shadow: 110px -130px 500px 100px ${isDarkMode
+              ? '#CA8A04'
+              : '#0060e0'} inset;
+        }
+      `}</style>
 
-            <div style={{ backdropFilter: 'blur(15px)' }} className={'bg-[#0060e0] absolute top-0 w-full h-full py-10 flex justify-center items-center'}>
-
-                {/* 文章背景图 */}
-                <div id='post-cover-wrapper' style={{ filter: 'blur(15px)' }} className='coverdiv lg:translate-x-96 opacity-50 lg:rotate-12'>
-                    <LazyImage id='post-cover' className='w-full h-full object-cover opacity-80 max-h-[50rem] min-w-[50vw] min-h-[20rem]' src={headerImage} />
-                </div>
-
-                {/* 文章文字描述 */}
-                <div id='post-info' className='absolute top-48 z-10 flex flex-col space-y-4 lg:-mt-12 w-full max-w-[86rem] px-5'>
-                    {/* 分类+标签 */}
-                    <div className='flex justify-center md:justify-start items-center'>
-                        {post.category && <>
-                            <Link href={`/category/${post.category}`} className='mr-4' passHref legacyBehavior>
-                                <div className="cursor-pointer font-sm font-bold px-3 py-1 rounded-lg bg-blue-500 hover:bg-white text-white hover:text-blue-500 duration-200 ">
-                                    {post.category}
-                                </div>
-                            </Link>
-                        </>}
-
-                        {post.tagItems && (
-                            <div className="hidden md:flex justify-center flex-nowrap overflow-x-auto">
-                                {post.tagItems.map((tag, index) => (
-                                    <Link
-                                        key={index}
-                                        href={`/tag/${encodeURIComponent(tag.name)}`}
-                                        passHref
-                                        className={'cursor-pointer inline-block text-gray-50 hover:text-white duration-200 py-0.5 px-1 whitespace-nowrap '}>
-                                        <div className='font-light flex items-center'><HashTag className='text-gray-200 stroke-2 mr-0.5 w-3 h-3' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
-
-                                    </Link>
-                                ))}
-                            </div>
-                        )}
-                    </div>
-
-                    {/* 文章Title */}
-                    <div className="max-w-5xl font-bold text-3xl lg:text-5xl md:leading-snug shadow-text-md flex  justify-center md:justify-start text-white">
-                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
-                    </div>
-
-                    {/* 标题底部补充信息 */}
-                    <section className="flex-wrap shadow-text-md flex text-sm  justify-center md:justify-start mt-4 text-white dark:text-gray-400 font-light leading-8">
-
-                        <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
-                            <div className='mr-2'><WordCount /></div>
-                            {post?.type !== 'Page' && (
-                                <>
-                                    <Link
-                                        href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
-                                        passHref
-                                        className="pl-1 mr-2 cursor-pointer hover:underline">
-                                        <i className="fa-regular fa-calendar"></i> {post?.publishDay}
-                                    </Link>
-                                </>
-                            )}
-
-                            <div className="pl-1 mr-2">
-                              <i className="fa-regular fa-calendar-check"></i> {post.lastEditedDay}
-                            </div>
-
-                        </div>
-
-                        {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>
-
-                </div>
-
-                <WavesArea />
-
-            </div>
+      <div
+        className={`${isDarkMode ? 'bg-[#CA8A04]' : 'bg-[#0060e0]'} absolute top-0 w-full h-full py-10 flex justify-center items-center`}>
+        {/* 文章背景图 */}
+        <div
+          id='post-cover-wrapper'
+          style={{
+            filter: 'blur(15px)'
+          }}
+          className='coverdiv lg:opacity-50 lg:translate-x-96 lg:rotate-12'>
+          <LazyImage
+            id='post-cover'
+            className='w-full h-full object-cover max-h-[50rem] min-w-[50vw] min-h-[20rem]'
+            src={headerImage}
+          />
         </div>
+
+        {/* 文章文字描述 */}
+        <div
+          id='post-info'
+          className='absolute top-48 z-10 flex flex-col space-y-4 lg:-mt-12 w-full max-w-[86rem] px-5'>
+          {/* 分类+标签 */}
+          <div className='flex justify-center md:justify-start items-center gap-4'>
+            {post.category && (
+              <>
+                <Link
+                  href={`/category/${post.category}`}
+                  className='mr-4'
+                  passHref
+                  legacyBehavior>
+                  <div className='cursor-pointer font-sm font-bold px-3 py-1 rounded-lg  hover:bg-white text-white bg-blue-500 dark:bg-yellow-500 hover:text-blue-500 duration-200 '>
+                    {post.category}
+                  </div>
+                </Link>
+              </>
+            )}
+
+            {post.tagItems && (
+              <div className='hidden md:flex justify-center flex-nowrap overflow-x-auto'>
+                {post.tagItems.map((tag, index) => (
+                  <Link
+                    key={index}
+                    href={`/tag/${encodeURIComponent(tag.name)}`}
+                    passHref
+                    className={
+                      'cursor-pointer inline-block text-gray-50 hover:text-white duration-200 py-0.5 px-1 whitespace-nowrap '
+                    }>
+                    <div className='font-light flex items-center'>
+                      <HashTag className='text-gray-200 stroke-2 mr-0.5 w-3 h-3' />{' '}
+                      {tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* 文章Title */}
+          <div className='max-w-5xl font-bold text-3xl lg:text-5xl md:leading-snug shadow-text-md flex  justify-center md:justify-start text-white'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post.pageIcon} />
+            )}
+            {post.title}
+          </div>
+
+          {/* 标题底部补充信息 */}
+          <section className='flex-wrap dark:text-gray-200 text-opacity-70 shadow-text-md flex text-sm  justify-center md:justify-start mt-4 text-white font-light leading-8'>
+            <div className='flex justify-center '>
+              <div className='mr-2'>
+                <WordCount />
+              </div>
+              {post?.type !== 'Page' && (
+                <>
+                  <Link
+                    href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
+                    passHref
+                    className='pl-1 mr-2 cursor-pointer hover:underline'>
+                    <i className='fa-regular fa-calendar'></i>{' '}
+                    {post?.publishDay}
+                  </Link>
+                </>
+              )}
+
+              <div className='pl-1 mr-2'>
+                <i className='fa-regular fa-calendar-check'></i>{' '}
+                {post.lastEditedDay}
+              </div>
+            </div>
+
+            {/* 阅读统计 */}
+            {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>
+        </div>
+
+        <WavesArea />
+      </div>
+    </div>
   )
 }
diff --git a/themes/heo/components/ArticleLock.js b/themes/heo/components/PostLock.js
similarity index 58%
rename from themes/heo/components/ArticleLock.js
rename to themes/heo/components/PostLock.js
index 7f1da728..1e87d7e8 100644
--- a/themes/heo/components/ArticleLock.js
+++ b/themes/heo/components/PostLock.js
@@ -8,7 +8,7 @@ import { useEffect, useRef } from 'react'
  * @param validPassword(bool) 回调函数，校验正确回调入参为true
  * @returns
  */
-export const ArticleLock = props => {
+export const PostLock = props => {
   const { validPassword } = props
   const { locale } = useGlobal()
   const submitPassword = () => {
@@ -27,25 +27,35 @@ export const ArticleLock = props => {
     passwordInputRef.current.focus()
   }, [])
 
-  return <div id='container' className='w-full flex justify-center items-center h-96 '>
-    <div className='text-center space-y-3'>
-      <div className='font-bold dark:text-gray-300 text-black'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
-      <div className='flex mx-4'>
-        <input id="password" type='password'
-            onKeyDown={(e) => {
+  return (
+    <div
+      id='container'
+      className='w-full flex justify-center items-center h-96 '>
+      <div className='text-center space-y-3'>
+        <div className='font-bold dark:text-gray-300 text-black'>
+          {locale.COMMON.ARTICLE_LOCK_TIPS}
+        </div>
+        <div className='flex mx-4'>
+          <input
+            id='password'
+            type='password'
+            onKeyDown={e => {
               if (e.key === 'Enter') {
                 submitPassword()
               }
             }}
             ref={passwordInputRef} // 绑定ref到passwordInputRef变量
-            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg  font-light leading-10 bg-gray-100 dark:bg-gray-500'>
-        </input>
-        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
-          <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
+            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg  font-light leading-10 bg-gray-100 dark:bg-gray-500'></input>
+          <div
+            onClick={submitPassword}
+            className='px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300'>
+            <i className={'duration-200 cursor-pointer fas fa-key'}>
+              &nbsp;{locale.COMMON.SUBMIT}
+            </i>
+          </div>
         </div>
-      </div>
-      <div id='tips'>
+        <div id='tips'></div>
       </div>
     </div>
-  </div>
+  )
 }
diff --git a/themes/heo/components/ArticleRecommend.js b/themes/heo/components/PostRecommend.js
similarity index 82%
rename from themes/heo/components/ArticleRecommend.js
rename to themes/heo/components/PostRecommend.js
index 02874675..c66b8d4f 100644
--- a/themes/heo/components/ArticleRecommend.js
+++ b/themes/heo/components/PostRecommend.js
@@ -9,7 +9,7 @@ import CONFIG from '../config'
  * @param {prev,next} param0
  * @returns
  */
-export default function ArticleRecommend({ recommendPosts, siteInfo }) {
+export default function PostRecommend({ recommendPosts, siteInfo }) {
   const { locale } = useGlobal()
 
   if (
@@ -55,6 +55,10 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
                   src={headerImage}
                   className='absolute top-0 w-full h-full object-cover object-center group-hover:scale-110 group-hover:brightness-50 transform duration-200'
                 />
+                {/* 卡片的阴影遮罩，为了凸显图片上的文字 */}
+                <div className='h-3/4 w-full absolute left-0 bottom-0'>
+                  <div className='h-full w-full absolute opacity-80 group-hover:opacity-100 transition-all duration-1000 bg-gradient-to-b from-transparent to-black'></div>
+                </div>
               </div>
             </Link>
           )
diff --git a/themes/heo/components/SideRight.js b/themes/heo/components/SideRight.js
index 775b9b76..c4dbffd7 100644
--- a/themes/heo/components/SideRight.js
+++ b/themes/heo/components/SideRight.js
@@ -1,12 +1,12 @@
+import Live2D from '@/components/Live2D'
+import dynamic from 'next/dynamic'
+import { AnalyticsCard } from './AnalyticsCard'
 import Card from './Card'
-import TagGroups from './TagGroups'
 import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
-import dynamic from 'next/dynamic'
-import Live2D from '@/components/Live2D'
-import { AnalyticsCard } from './AnalyticsCard'
-import TouchMeCard from './TouchMeCard'
 import LatestPostsGroupMini from './LatestPostsGroupMini'
+import TagGroups from './TagGroups'
+import TouchMeCard from './TouchMeCard'
 
 const FaceBookPage = dynamic(
   () => {
@@ -27,46 +27,49 @@ const FaceBookPage = dynamic(
  * @returns
  */
 export default function SideRight(props) {
-  const {
-    post, tagOptions,
-    currentTag, rightAreaSlot
-  } = props
+  const { post, tagOptions, currentTag, rightAreaSlot } = props
+
+  // 只摘取标签的前60个，防止右侧过长
+  const sortedTags = tagOptions?.slice(0, 60) || []
 
   return (
-        <div id='sideRight' className='hidden xl:block w-72 space-y-4 h-full'>
+    <div id='sideRight' className='hidden xl:block w-72 space-y-4 h-full'>
+      <InfoCard {...props} className='w-72' />
 
-            <InfoCard {...props} className='w-72' />
+      <div className='sticky top-20 space-y-4'>
+        {/* 文章页显示目录 */}
+        {post && post.toc && post.toc.length > 0 && (
+          <Card className='bg-white dark:bg-[#1e1e1e]'>
+            <Catalog toc={post.toc} />
+          </Card>
+        )}
 
-            <div className='sticky top-20 space-y-4'>
-
-                {/* 文章页显示目录 */}
-                {post && post.toc && post.toc.length > 0 && (
-                    <Card className='bg-white dark:bg-[#1e1e1e]'>
-                        <Catalog toc={post.toc} />
-                    </Card>
-                )}
-
-                {/* 联系交流群 */}
-                <TouchMeCard />
-
-                {/* 最新文章列表 */}
-                <div className={'border dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'}>
-                    <LatestPostsGroupMini {...props} />
-                </div>
-
-                {rightAreaSlot}
-
-                <FaceBookPage />
-                <Live2D />
-
-                {/* 标签和成绩 */}
-                <Card className={'bg-white dark:bg-[#1e1e1e] dark:text-white'}>
-                    <TagGroups tags={tagOptions} currentTag={currentTag} />
-                    <hr className='mx-1 flex border-dashed relative my-4' />
-                    <AnalyticsCard {...props} />
-                </Card>
-            </div>
+        {/* 联系交流群 */}
+        <TouchMeCard />
 
+        {/* 最新文章列表 */}
+        <div
+          className={
+            'border hover:border-indigo-600  dark:hover:border-yellow-600 duration-200 dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'
+          }>
+          <LatestPostsGroupMini {...props} />
         </div>
+
+        {rightAreaSlot}
+
+        <FaceBookPage />
+        <Live2D />
+
+        {/* 标签和成绩 */}
+        <Card
+          className={
+            'bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600  dark:hover:border-yellow-600 duration-200'
+          }>
+          <TagGroups tags={sortedTags} currentTag={currentTag} />
+          <hr className='mx-1 flex border-dashed relative my-4' />
+          <AnalyticsCard {...props} />
+        </Card>
+      </div>
+    </div>
   )
 }
diff --git a/themes/heo/components/SlideOver.js b/themes/heo/components/SlideOver.js
index 77f9c638..e7bb95de 100644
--- a/themes/heo/components/SlideOver.js
+++ b/themes/heo/components/SlideOver.js
@@ -1,10 +1,17 @@
-
-import { Fragment, useImperativeHandle, useRef, useState } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
 import DarkModeButton from '@/components/DarkModeButton'
+import { useGlobal } from '@/lib/global'
+import { Dialog, Transition } from '@headlessui/react'
 import Link from 'next/link'
-import TagGroups from './TagGroups'
+import { useRouter } from 'next/router'
+import {
+  Fragment,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react'
 import { MenuListSide } from './MenuListSide'
+import TagGroups from './TagGroups'
 
 /**
  * 侧边抽屉
@@ -13,101 +20,105 @@ import { MenuListSide } from './MenuListSide'
 export default function SlideOver(props) {
   const { cRef, tagOptions } = props
   const [open, setOpen] = useState(false)
-
+  const { locale } = useGlobal()
+  const router = useRouter()
   /**
-                    * 函数组件暴露方法useImperativeHandle
-                    */
+   * 函数组件暴露方法useImperativeHandle
+   **/
   useImperativeHandle(cRef, () => ({
     toggleSlideOvers: toggleSlideOvers
   }))
 
+  /**
+   * 开关侧拉抽屉
+   */
   const toggleSlideOvers = () => {
     setOpen(!open)
   }
 
+  /**
+   * 自动关闭抽屉
+   */
+  useEffect(() => {
+    setOpen(false)
+  }, [router])
+
   return (
-        <Transition.Root show={open} as={Fragment}>
-            <Dialog as="div" className="relative z-20" onClose={setOpen}>
-                <Transition.Child
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as='div' className='relative z-20' onClose={setOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter='ease-in-out duration-500'
+          enterFrom='opacity-0'
+          enterTo='opacity-100'
+          leave='ease-in-out duration-500'
+          leaveFrom='opacity-100'
+          leaveTo='opacity-0'>
+          <div className='fixed inset-0 glassmorphism bg-black bg-opacity-30 transition-opacity' />
+        </Transition.Child>
+
+        <div className='fixed inset-0 overflow-hidden'>
+          <div className='absolute inset-0 overflow-hidden'>
+            <div className='pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10'>
+              <Transition.Child
+                as={Fragment}
+                enter='transform transition ease-in-out duration-500 sm:duration-700'
+                enterFrom='translate-x-full'
+                enterTo='translate-x-0'
+                leave='transform transition ease-in-out duration-500 sm:duration-700'
+                leaveFrom='translate-x-0'
+                leaveTo='translate-x-full'>
+                <Dialog.Panel className='pointer-events-auto relative w-96 max-w-md'>
+                  <Transition.Child
                     as={Fragment}
-                    enter="ease-in-out duration-500"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="ease-in-out duration-500"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                >
-                    <div className="fixed inset-0 glassmorphism bg-black bg-opacity-30 transition-opacity" />
-                </Transition.Child>
-
-                <div className="fixed inset-0 overflow-hidden">
-                    <div className="absolute inset-0 overflow-hidden">
-                        <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-                            <Transition.Child
-                                as={Fragment}
-                                enter="transform transition ease-in-out duration-500 sm:duration-700"
-                                enterFrom="translate-x-full"
-                                enterTo="translate-x-0"
-                                leave="transform transition ease-in-out duration-500 sm:duration-700"
-                                leaveFrom="translate-x-0"
-                                leaveTo="translate-x-full"
-                            >
-                                <Dialog.Panel className="pointer-events-auto relative w-96 max-w-md">
-                                    <Transition.Child
-                                        as={Fragment}
-                                        enter="ease-in-out duration-500"
-                                        enterFrom="opacity-0"
-                                        enterTo="opacity-100"
-                                        leave="ease-in-out duration-500"
-                                        leaveFrom="opacity-100"
-                                        leaveTo="opacity-0"
-                                    >
-                                        <div className="absolute left-0 top-0 -ml-8 flex pr-2 pt-4 sm:-ml-10 sm:pr-4">
-                                            <button
-                                                type="button"
-                                                className="rounded-md text-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
-                                                onClick={() => setOpen(false)}
-                                            >
-                                                <span className="sr-only">Close panel</span>
-                                                <i className="fa-solid fa-xmark px-2"></i>
-                                            </button>
-                                        </div>
-                                    </Transition.Child>
-                                    {/* 内容 */}
-                                    <div className="flex h-full flex-col overflow-y-scroll bg-white dark:bg-[#18171d] py-6 shadow-xl">
-                                        <div className="relative mt-6 flex-1 flex-col space-y-3 px-4 sm:px-6 dark:text-white ">
-
-                                            <section className='space-y-2 flex flex-col'>
-                                                <div>功能</div>
-                                                {/* 切换深色模式 */}
-                                                <DarkModeBlockButton />
-                                            </section>
-
-                                            <section className='space-y-2 flex flex-col'>
-                                                <div>博客</div>
-                                                {/* 导航按钮 */}
-                                                <div className='gap-2 grid grid-cols-2'>
-                                                    <Button title={'主页'} url={'/'} />
-                                                    <Button title={'关于'} url={'/about'} />
-                                                </div>
-                                                {/* 用户自定义菜单 */}
-                                                <MenuListSide {...props}/>
-                                            </section>
-
-                                            <section className='space-y-2 flex flex-col'>
-                                                <div>标签</div>
-                                                <TagGroups tags={tagOptions} />
-                                            </section>
-
-                                        </div>
-                                    </div>
-                                </Dialog.Panel>
-                            </Transition.Child>
-                        </div>
+                    enter='ease-in-out duration-500'
+                    enterFrom='opacity-0'
+                    enterTo='opacity-100'
+                    leave='ease-in-out duration-500'
+                    leaveFrom='opacity-100'
+                    leaveTo='opacity-0'>
+                    <div className='absolute left-0 top-0 -ml-8 flex pr-2 pt-4 sm:-ml-10 sm:pr-4'>
+                      <button
+                        type='button'
+                        className='rounded-md text-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-white'
+                        onClick={() => setOpen(false)}>
+                        <span className='sr-only'>Close panel</span>
+                        <i className='fa-solid fa-xmark px-2'></i>
+                      </button>
                     </div>
-                </div>
-            </Dialog>
-        </Transition.Root>
+                  </Transition.Child>
+                  {/* 内容 */}
+                  <div className='flex h-full flex-col overflow-y-scroll bg-white dark:bg-[#18171d] py-6 shadow-xl'>
+                    <div className='relative mt-6 flex-1 flex-col space-y-3 px-4 sm:px-6 dark:text-white '>
+                      <section className='space-y-2 flex flex-col'>
+                        {/* 切换深色模式 */}
+                        <DarkModeBlockButton />
+                      </section>
+
+                      <section className='space-y-2 flex flex-col'>
+                        <div>{locale.COMMON.BLOG}</div>
+                        {/* 导航按钮 */}
+                        <div className='gap-2 grid grid-cols-2'>
+                          <Button title={'主页'} url={'/'} />
+                          <Button title={'关于'} url={'/about'} />
+                        </div>
+                        {/* 用户自定义菜单 */}
+                        <MenuListSide {...props} />
+                      </section>
+
+                      <section className='space-y-2 flex flex-col'>
+                        <div>{locale.COMMON.TAGS}</div>
+                        <TagGroups tags={tagOptions} />
+                      </section>
+                    </div>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
   )
 }
 
@@ -116,19 +127,34 @@ export default function SlideOver(props) {
  */
 function DarkModeBlockButton() {
   const darkModeRef = useRef()
+  const { isDarkMode, locale } = useGlobal()
+
   function handleChangeDarkMode() {
     darkModeRef?.current?.handleChangeDarkMode()
   }
-  return <button onClick={handleChangeDarkMode} className={'group duration-200 hover:text-white hover:shadow-md hover:bg-blue-600 flex justify-between items-center px-2 py-2 border dark:border-gray-600 bg-white dark:bg-[#ff953e]  rounded-lg'}>
-        <DarkModeButton cRef={darkModeRef} className='group-hover:text-white' /> 显示模式
+  return (
+    <button
+      onClick={handleChangeDarkMode}
+      className={
+        'group duration-200 hover:text-white hover:shadow-md hover:bg-blue-600 flex justify-between items-center px-2 py-2 border dark:border-gray-600 bg-white dark:bg-[#ff953e]  rounded-lg'
+      }>
+      <DarkModeButton cRef={darkModeRef} className='group-hover:text-white' />{' '}
+      {isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE}
     </button>
+  )
 }
 
 /**
  * 一个简单的按钮
  */
 function Button({ title, url }) {
-  return <Link href={url} className={'duration-200 hover:text-white hover:shadow-md flex cursor-pointer justify-between items-center px-2 py-2 border dark:border-gray-600 bg-white hover:bg-blue-600 dark:bg-[#1e1e1e] rounded-lg'}>
-        {title}
+  return (
+    <Link
+      href={url}
+      className={
+        'duration-200 hover:text-white hover:shadow-md flex cursor-pointer justify-between items-center px-2 py-2 border dark:border-gray-600 bg-white hover:bg-blue-600 dark:bg-[#1e1e1e] rounded-lg'
+      }>
+      {title}
     </Link>
+  )
 }
diff --git a/themes/heo/components/SocialButton.js b/themes/heo/components/SocialButton.js
index c13cab43..9d4c6b0f 100644
--- a/themes/heo/components/SocialButton.js
+++ b/themes/heo/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 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 '>
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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(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>}
-      {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>}
-      {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>}
+  return (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-12 text-3xl text-gray-600 dark:text-gray-300 '>
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {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>
+        )}
+        {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>
     </div>
-  </div>
+  )
 }
 export default SocialButton
diff --git a/themes/heo/components/Swipe.js b/themes/heo/components/Swipe.js
index 6afc5f27..7ce7c08e 100644
--- a/themes/heo/components/Swipe.js
+++ b/themes/heo/components/Swipe.js
@@ -10,7 +10,7 @@ import { useEffect, useState } from 'react'
 export function Swipe({ items }) {
   const [activeIndex, setActiveIndex] = useState(0)
 
-  const handleClick = (item) => {
+  const handleClick = item => {
     if (isBrowser) {
       window.open(item?.url)
     }
@@ -24,50 +24,53 @@ export function Swipe({ items }) {
   }, [activeIndex, items.length])
 
   return (
-        <div className="h-full relative w-full overflow-hidden">
-            {items.map((item, index) => (
-                <div
-                    onClick={() => handleClick(item)}
-                    key={index}
-                    className={`absolute top-0 bottom-0 w-full h-full flex justify-center items-center line-clamp-1 transform transition-transform duration-500 ${index === activeIndex ? 'translate-y-0 slide-in' : 'translate-y-full slide-out'
-                        }`}
-                >
-                    {item.title}
-                </div>
-            ))}
-            <style jsx>{`
-            .slide-in {
-                animation-name: slide-in;
-                animation-duration: 0.5s;
-                animation-fill-mode: forwards;
-            }
-            
-            .slide-out {
-                animation-name: slide-out;
-                animation-duration: 0.5s;
-                animation-fill-mode: forwards;
-            }
-            
-            @keyframes slide-in {
-                from {
-                transform: translateY(100%);
-                }
-                to {
-                transform: translateY(0);
-                }
-            }
-            
-            @keyframes slide-out {
-                from {
-                transform: translateY(0);
-                }
-                to {
-                transform: translateY(-100%);
-                }
-            }
-      `}</style>
+    <div className='h-full relative w-full overflow-hidden'>
+      {items.map((item, index) => (
+        <div
+          onClick={() => handleClick(item)}
+          key={index}
+          className={`whitespace-nowrap absolute top-0 bottom-0 w-full h-full flex justify-center items-center line-clamp-1 transform transition-transform duration-500 ${
+            index === activeIndex
+              ? 'translate-y-0 slide-in'
+              : 'translate-y-full slide-out'
+          }`}>
+          {item.title}
         </div>
+      ))}
+
+      <style jsx>{`
+        .slide-in {
+          animation-name: slide-in;
+          animation-duration: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        .slide-out {
+          animation-name: slide-out;
+          animation-duration: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        @keyframes slide-in {
+          from {
+            transform: translateY(100%);
+          }
+          to {
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes slide-out {
+          from {
+            transform: translateY(0);
+          }
+          to {
+            transform: translateY(-100%);
+          }
+        }
+      `}</style>
+    </div>
   )
-};
+}
 
 export default Swipe
diff --git a/themes/heo/components/TagItemMini.js b/themes/heo/components/TagItemMini.js
index 9fbc1187..7b9a7c56 100644
--- a/themes/heo/components/TagItemMini.js
+++ b/themes/heo/components/TagItemMini.js
@@ -7,8 +7,13 @@ const TagItemMini = ({ tag, selected = false }) => {
       key={tag}
       href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
       passHref
-      className={'cursor-pointer inline-block hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 px-2 py-1 rounded-2xl dark:text-white duration-200 text-sm whitespace-nowrap ' }>
-      <div className='font-light flex items-center'><HashTag className='text-gray-500 stroke-2 mr-0.5 w-3 h-3'/> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+      className={
+        'cursor-pointer inline-block hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 px-2 py-1 rounded-2xl dark:text-white duration-200 text-sm whitespace-nowrap '
+      }>
+      <div className='font-light flex items-center'>
+        <HashTag className='stroke-2 mr-0.5 w-3 h-3' />{' '}
+        {tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
+      </div>
     </Link>
   )
 }
diff --git a/themes/heo/components/WavesArea.js b/themes/heo/components/WavesArea.js
index b8f1198a..70095ebb 100644
--- a/themes/heo/components/WavesArea.js
+++ b/themes/heo/components/WavesArea.js
@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useState } from 'react'
 
 /**
  * 文章波浪动画
@@ -6,60 +7,96 @@ import { useGlobal } from '@/lib/global'
 export default function WavesArea() {
   const { isDarkMode } = useGlobal()
   const color = isDarkMode ? '#18171d' : '#f7f9fe'
+  const [showWave, setShowWave] = useState(true)
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 800) {
+        setShowWave(false)
+      } else {
+        setShowWave(true)
+      }
+    }
+
+    // Initial check
+    handleResize()
+
+    // Add event listener for window resize
+    window.addEventListener('resize', handleResize)
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  if (!showWave) {
+    return null
+  }
 
   return (
-        <section className="main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0">
-            <svg className="waves-svg w-full h-[60px]" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
-                <defs>
-                    <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
-                </defs>
-                <g className="parallax">
-                    <use href="#gentle-wave" x="48" y="0"></use>
-                    <use href="#gentle-wave" x="48" y="3"></use>
-                    <use href="#gentle-wave" x="48" y="5"></use>
-                    <use href="#gentle-wave" x="48" y="7"></use>
-                </g>
-            </svg>
-            <style jsx global>{`
-                /* Animation */
+    <section className='main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0'>
+      <svg
+        className='waves-svg w-full h-[60px]'
+        xmlns='http://www.w3.org/2000/svg'
+        xlink='http://www.w3.org/1999/xlink'
+        viewBox='0 24 150 28'
+        preserveAspectRatio='none'
+        shapeRendering='auto'>
+        <defs>
+          <path
+            id='gentle-wave'
+            d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z'></path>
+        </defs>
+        <g className='parallax'>
+          <use href='#gentle-wave' x='48' y='0'></use>
+          <use href='#gentle-wave' x='48' y='3'></use>
+          <use href='#gentle-wave' x='48' y='5'></use>
+          <use href='#gentle-wave' x='48' y='7'></use>
+        </g>
+      </svg>
+      <style jsx global>
+        {`
+          /* Animation */
 
-                .parallax > use {
-                  animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
-                }
-                .parallax > use:nth-child(1) {
-                  animation-delay: -2s;
-                  animation-duration: 7s;
-                  fill: ${color};
-                  opacity: 0.5;
-                }
-                .parallax > use:nth-child(2) {
-                  animation-delay: -3s;
-                  animation-duration: 10s;
-                  fill: ${color};
-                  opacity: 0.6;
-                }
-                .parallax > use:nth-child(3) {
-                  animation-delay: -4s;
-                  animation-duration: 13s;
-                  fill: ${color};
-                  opacity: 0.7;
-                }
-                .parallax > use:nth-child(4) {
-                  animation-delay: -5s;
-                  animation-duration: 20s;
-                  fill: ${color};
-                }
-                
-                @keyframes move-forever {
-                  0% {
-                    transform: translate3d(-90px, 0, 0);
-                  }
-                  100% {
-                    transform: translate3d(85px, 0, 0);
-                  }
-                }
-            `}
-            </style>
-        </section>
+          .parallax > use {
+            animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5)
+              infinite;
+          }
+          .parallax > use:nth-child(1) {
+            animation-delay: -2s;
+            animation-duration: 7s;
+            fill: ${color};
+            opacity: 0.5;
+          }
+          .parallax > use:nth-child(2) {
+            animation-delay: -3s;
+            animation-duration: 10s;
+            fill: ${color};
+            opacity: 0.6;
+          }
+          .parallax > use:nth-child(3) {
+            animation-delay: -4s;
+            animation-duration: 13s;
+            fill: ${color};
+            opacity: 0.7;
+          }
+          .parallax > use:nth-child(4) {
+            animation-delay: -5s;
+            animation-duration: 20s;
+            fill: ${color};
+          }
+
+          @keyframes move-forever {
+            0% {
+              transform: translate3d(-90px, 0, 0);
+            }
+            100% {
+              transform: translate3d(85px, 0, 0);
+            }
+          }
+        `}
+      </style>
+    </section>
   )
 }
diff --git a/themes/heo/config.js b/themes/heo/config.js
index c8e730ea..c2dccbd3 100644
--- a/themes/heo/config.js
+++ b/themes/heo/config.js
@@ -42,7 +42,14 @@ const CONFIG = {
     '🤖️ 数码科技爱好者',
     '🧱 团队小组发动机'
   ],
-  HEO_INFO_CARD_URL: 'https://github.com/tangly1024/NotionNext', // 个人资料底部按钮链接
+
+  // 个人资料底部按钮
+  HEO_INFO_CARD_URL1: '/about',
+  HEO_INFO_CARD_ICON1: 'fas fa-user',
+  HEO_INFO_CARD_URL2: 'https://github.com/tangly1024',
+  HEO_INFO_CARD_ICON2: 'fab fa-github',
+  HEO_INFO_CARD_URL3: 'https://www.tangly1024.com',
+  HEO_INFO_CARD_TEXT3: '了解更多',
 
   // 用户技能图标
   HEO_GROUP_ICONS: [
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 36f84b1f..33f88f27 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -6,41 +6,41 @@
  *  2. 更多说明参考此[文档](https://docs.tangly1024.com/article/notionnext-heo)
  */
 
-import CONFIG from './config'
-import { useEffect, useState } from 'react'
-import Footer from './components/Footer'
-import SideRight from './components/SideRight'
-import NavBar from './components/NavBar'
+import Comment from '@/components/Comment'
+import { AdSlot } from '@/components/GoogleAdsense'
+import { HashTag } from '@/components/HeroIcons'
+import LazyImage from '@/components/LazyImage'
+import replaceSearchResult from '@/components/Mark'
+import NotionPage from '@/components/NotionPage'
+import ShareBar from '@/components/ShareBar'
+import WWAds from '@/components/WWAds'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { loadWowJS } from '@/lib/plugins/wow'
+import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import BlogPostArchive from './components/BlogPostArchive'
 import BlogPostListPage from './components/BlogPostListPage'
 import BlogPostListScroll from './components/BlogPostListScroll'
-import Hero from './components/Hero'
-import { useRouter } from 'next/router'
-import SearchNav from './components/SearchNav'
-import BlogPostArchive from './components/BlogPostArchive'
-import { ArticleLock } from './components/ArticleLock'
-import PostHeader from './components/PostHeader'
-import Comment from '@/components/Comment'
-import NotionPage from '@/components/NotionPage'
-import ArticleAdjacent from './components/ArticleAdjacent'
-import ArticleCopyright from './components/ArticleCopyright'
-import ArticleRecommend from './components/ArticleRecommend'
-import ShareBar from '@/components/ShareBar'
-import Link from 'next/link'
 import CategoryBar from './components/CategoryBar'
-import { Transition } from '@headlessui/react'
-import { Style } from './style'
-import { NoticeBar } from './components/NoticeBar'
-import { HashTag } from '@/components/HeroIcons'
-import LatestPostsGroup from './components/LatestPostsGroup'
 import FloatTocButton from './components/FloatTocButton'
-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'
-import { isBrowser } from '@/lib/utils'
-import { loadWowJS } from '@/lib/plugins/wow'
+import Footer from './components/Footer'
+import Header from './components/Header'
+import Hero from './components/Hero'
+import LatestPostsGroup from './components/LatestPostsGroup'
+import { NoticeBar } from './components/NoticeBar'
+import PostAdjacent from './components/PostAdjacent'
+import PostCopyright from './components/PostCopyright'
+import PostHeader from './components/PostHeader'
+import { PostLock } from './components/PostLock'
+import PostRecommend from './components/PostRecommend'
+import SearchNav from './components/SearchNav'
+import SideRight from './components/SideRight'
+import CONFIG from './config'
+import { Style } from './style'
 
 /**
  * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -49,38 +49,39 @@ import { loadWowJS } from '@/lib/plugins/wow'
  * @constructor
  */
 const LayoutBase = props => {
-  const {
-    children,
-    slotTop,
-    className
-  } = props
+  const { children, slotTop, className } = props
 
   // 全屏模式下的最大宽度
-  const { fullWidth } = useGlobal()
+  const { fullWidth, isDarkMode } = useGlobal()
   const router = useRouter()
 
   const headerSlot = (
     <header>
       {/* 顶部导航 */}
-      <NavBar {...props} />
+      <Header {...props} />
 
       {/* 通知横幅 */}
-      {router.route === '/'
-        ? <>
-            <NoticeBar />
-            <Hero {...props} />
+      {router.route === '/' ? (
+        <>
+          <NoticeBar />
+          <Hero {...props} />
         </>
-        : null}
-      {fullWidth ? null : <PostHeader {...props} />}
+      ) : null}
+      {fullWidth ? null : <PostHeader {...props} isDarkMode={isDarkMode} />}
     </header>
   )
 
   // 右侧栏 用户信息+标签列表
-  const slotRight = (router.route === '/404' || fullWidth) ? null : <SideRight {...props} />
+  const slotRight =
+    router.route === '/404' || 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)
+  const HEO_HERO_BODY_REVERSE = siteConfig(
+    'HEO_HERO_BODY_REVERSE',
+    false,
+    CONFIG
+  )
 
   // 加载wow动画
   useEffect(() => {
@@ -89,10 +90,8 @@ const LayoutBase = props => {
 
   return (
     <div
-      id="theme-heo"
-      className={`${siteConfig('FONT_STYLE')} bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col scroll-smooth`}
-    >
-
+      id='theme-heo'
+      className={`${siteConfig('FONT_STYLE')} bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col scroll-smooth`}>
       <Style />
 
       {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
@@ -100,15 +99,11 @@ const LayoutBase = props => {
 
       {/* 主区块 */}
       <main
-        id="wrapper-outer"
-        className={`flex-grow w-full ${maxWidth} mx-auto relative md:px-5`}
-      >
+        id='wrapper-outer'
+        className={`flex-grow w-full ${maxWidth} mx-auto relative md:px-5`}>
         <div
-          id="container-inner"
-          className={
-            `${HEO_HERO_BODY_REVERSE ? 'flex-row-reverse' : ''} w-full mx-auto lg:flex justify-center relative z-10`
-          }
-        >
+          id='container-inner'
+          className={`${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 || ''}`}>
             {/* 主区上部嵌入 */}
             {slotTop}
@@ -117,12 +112,11 @@ const LayoutBase = props => {
 
           <div className='lg:px-2'></div>
 
-          <div className="hidden xl:block">
+          <div className='hidden xl:block'>
             {/* 主区快右侧 */}
             {slotRight}
           </div>
         </div>
-
       </main>
 
       {/* 页脚 */}
@@ -139,17 +133,15 @@ const LayoutBase = props => {
  */
 const LayoutIndex = props => {
   return (
-      <div id="post-outer-wrapper" className="px-5 md:px-0">
-        {/* 文章分类条 */}
-        <CategoryBar {...props} />
-        {siteConfig('POST_LIST_STYLE') === 'page'
-          ? (
-            <BlogPostListPage {...props} />
-            )
-          : (
-            <BlogPostListScroll {...props} />
-            )}
-      </div>
+    <div id='post-outer-wrapper' className='px-5 md:px-0'>
+      {/* 文章分类条 */}
+      <CategoryBar {...props} />
+      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+        <BlogPostListPage {...props} />
+      ) : (
+        <BlogPostListScroll {...props} />
+      )}
+    </div>
   )
 }
 
@@ -160,17 +152,15 @@ const LayoutIndex = props => {
  */
 const LayoutPostList = props => {
   return (
-      <div id="post-outer-wrapper" className="px-5  md:px-0">
-        {/* 文章分类条 */}
-        <CategoryBar {...props} />
-        {siteConfig('POST_LIST_STYLE') === 'page'
-          ? (
-            <BlogPostListPage {...props} />
-            )
-          : (
-            <BlogPostListScroll {...props} />
-            )}
-      </div>
+    <div id='post-outer-wrapper' className='px-5  md:px-0'>
+      {/* 文章分类条 */}
+      <CategoryBar {...props} />
+      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+        <BlogPostListPage {...props} />
+      ) : (
+        <BlogPostListScroll {...props} />
+      )}
+    </div>
   )
 }
 
@@ -200,26 +190,19 @@ const LayoutSearch = props => {
     }
   }, [])
   return (
-    <div
-      {...props}
-      currentSearch={currentSearch}
-    >
-      <div id="post-outer-wrapper" className="px-5  md:px-0">
-        {!currentSearch
-          ? (
-            <SearchNav {...props} />
-            )
-          : (
-            <div id="posts-wrapper">
-              {siteConfig('POST_LIST_STYLE') === 'page'
-                ? (
-                  <BlogPostListPage {...props} />
-                  )
-                : (
-                  <BlogPostListScroll {...props} />
-                  )}
-            </div>
+    <div {...props} currentSearch={currentSearch}>
+      <div id='post-outer-wrapper' className='px-5  md:px-0'>
+        {!currentSearch ? (
+          <SearchNav {...props} />
+        ) : (
+          <div id='posts-wrapper'>
+            {siteConfig('POST_LIST_STYLE') === 'page' ? (
+              <BlogPostListPage {...props} />
+            ) : (
+              <BlogPostListScroll {...props} />
             )}
+          </div>
+        )}
       </div>
     </div>
   )
@@ -236,20 +219,20 @@ const LayoutArchive = props => {
   // 归档页顶部显示条，如果是默认归档则不显示。分类详情页显示分类列表，标签详情页显示当前标签
 
   return (
-      <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} />
+    <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} />
 
-        <div className="px-3">
-          {Object.keys(archivePosts).map(archiveTitle => (
-            <BlogPostArchive
-              key={archiveTitle}
-              posts={archivePosts[archiveTitle]}
-              archiveTitle={archiveTitle}
-            />
-          ))}
-        </div>
+      <div className='px-3'>
+        {Object.keys(archivePosts).map(archiveTitle => (
+          <BlogPostArchive
+            key={archiveTitle}
+            posts={archivePosts[archiveTitle]}
+            archiveTitle={archiveTitle}
+          />
+        ))}
       </div>
+    </div>
   )
 }
 
@@ -269,83 +252,92 @@ const LayoutSlug = props => {
     setHasCode(hasCode)
   }, [])
 
-  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')
+  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')
 
   const router = useRouter()
   useEffect(() => {
     // 404
     if (!post) {
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
+      setTimeout(
+        () => {
+          if (isBrowser) {
+            const article = document.getElementById('notion-article')
+            if (!article) {
+              router.push('/404').then(() => {
+                console.warn('找不到页面', router.asPath)
+              })
+            }
           }
-        }
-      }, siteConfig('POST_WAITING_TIME_FOR_404') * 1000)
+        },
+        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+      )
     }
   }, [post])
   return (
     <>
-      <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} />}
+      <div
+        className={`article h-full 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`}>
+        {/* 文章锁 */}
+        {lock && <PostLock validPassword={validPassword} />}
 
         {!lock && (
-          <div
-            id="article-wrapper"
-            className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 "
-          >
-            <article
-              itemScope
-              itemType="https://schema.org/Movie"
-              data-wow-delay=".2s"
-              className="wow fadeInUp subpixel-antialiased overflow-y-hidden"
-            >
+          <div id='article-wrapper' className='mx-auto md:w-full md:px-5'>
+            {/* 文章主体 */}
+            <article itemScope itemType='https://schema.org/Movie'>
               {/* Notion文章主体 */}
-              <section className="px-5 justify-center mx-auto">
-                <WWAds orientation="horizontal" className="w-full" />
+              <section
+                className='wow fadeInUp p-5 justify-center mx-auto'
+                data-wow-delay='.2s'>
+                <WWAds orientation='horizontal' className='w-full' />
                 {post && <NotionPage post={post} />}
-                <WWAds orientation="horizontal" className="w-full" />
+                <WWAds orientation='horizontal' className='w-full' />
               </section>
 
+              {/* 上一篇\下一篇文章 */}
+              <PostAdjacent {...props} />
+
               {/* 分享 */}
               <ShareBar post={post} />
               {post?.type === 'Post' && (
-                <div className="px-5">
+                <div className='px-5'>
                   {/* 版权 */}
-                  <ArticleCopyright {...props} />
+                  <PostCopyright {...props} />
                   {/* 文章推荐 */}
-                  <ArticleRecommend {...props} />
-                  {/* 上一篇\下一篇文章 */}
-                  <ArticleAdjacent {...props} />
+                  <PostRecommend {...props} />
                 </div>
               )}
             </article>
 
-            {fullWidth
-              ? null
-              : <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="py-2">
-                    <AdSlot />
+                <div className='py-2'>
+                  <AdSlot />
                 </div>
                 {/* 评论互动 */}
-                <div className="duration-200 overflow-x-auto px-5">
-                  <div className="text-2xl dark:text-white">
-                    <i className="fas fa-comment mr-1" />
+                <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="" />
+                  <Comment frontMatter={post} className='' />
                 </div>
-              </div>}
+              </div>
+            )}
           </div>
         )}
       </div>
+
       <FloatTocButton {...props} />
     </>
   )
@@ -361,39 +353,38 @@ const Layout404 = props => {
   const { onLoading, fullWidth } = useGlobal()
   return (
     <>
-    {/* 主区块 */}
+      {/* 主区块 */}
       <main
-        id="wrapper-outer"
-        className={`flex-grow ${fullWidth ? '' : 'max-w-4xl'} w-screen mx-auto px-5`}
-      >
-        <div id="error-wrapper" className={'w-full mx-auto justify-center'}>
+        id='wrapper-outer'
+        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
             show={!onLoading}
             appear={true}
-            enter="transition ease-in-out duration-700 transform order-first"
-            enterFrom="opacity-0 translate-y-16"
-            enterTo="opacity-100"
-            leave="transition ease-in-out duration-300 transform"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 -translate-y-16"
-            unmount={false}
-          >
+            enter='transition ease-in-out duration-700 transform order-first'
+            enterFrom='opacity-0 translate-y-16'
+            enterTo='opacity-100'
+            leave='transition ease-in-out duration-300 transform'
+            leaveFrom='opacity-100 translate-y-0'
+            leaveTo='opacity-0 -translate-y-16'
+            unmount={false}>
             {/* 404卡牌 */}
-            <div className="error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white dark:bg-[#1B1C20] border dark:border-gray-800 rounded-3xl">
+            <div className='error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white dark:bg-[#1B1C20] border dark:border-gray-800 rounded-3xl'>
               {/* 左侧动图 */}
               <LazyImage
-                className="error-img h-60 md:h-full p-4"
-                src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}
-              ></LazyImage>
+                className='error-img h-60 md:h-full p-4'
+                src={
+                  'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'
+                }></LazyImage>
 
               {/* 右侧文字 */}
-              <div className="error-info flex-1 flex flex-col justify-center items-center space-y-4">
-                <h1 className="error-title font-extrabold md:text-9xl text-7xl dark:text-white">
+              <div className='error-info flex-1 flex flex-col justify-center items-center space-y-4'>
+                <h1 className='error-title font-extrabold md:text-9xl text-7xl dark:text-white'>
                   404
                 </h1>
                 <div className='dark:text-white'>请尝试站内搜索寻找文章</div>
-                <Link href="/">
-                  <button className="bg-blue-500 py-2 px-4 text-white shadow rounded-lg hover:bg-blue-600 hover:shadow-md duration-200 transition-all">
+                <Link href='/'>
+                  <button className='bg-blue-500 py-2 px-4 text-white shadow rounded-lg hover:bg-blue-600 hover:shadow-md duration-200 transition-all'>
                     回到主页
                   </button>
                 </Link>
@@ -401,7 +392,7 @@ const Layout404 = props => {
             </div>
 
             {/* 404页面底部显示最新文章 */}
-            <div className="mt-12">
+            <div className='mt-12'>
               <LatestPostsGroup {...props} />
             </div>
           </Transition>
@@ -421,38 +412,35 @@ const LayoutCategoryIndex = props => {
   const { locale } = useGlobal()
 
   return (
-      <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>
-        <div
-          id="category-list"
-          className="duration-200 flex flex-wrap m-10 justify-center"
-        >
-          {categoryOptions?.map(category => {
-            return (
-              <Link
-                key={category.name}
-                href={`/category/${category.name}`}
-                passHref
-                legacyBehavior
-              >
-                <div
-                  className={
-                    'group mr-5 mb-5 flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'
-                  }
-                >
-                  <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
-                  {category.name}
-                  <div className="bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 ">
-                    {category.count}
-                  </div>
-                </div>
-              </Link>
-            )
-          })}
-        </div>
+    <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>
+      <div
+        id='category-list'
+        className='duration-200 flex flex-wrap m-10 justify-center'>
+        {categoryOptions?.map(category => {
+          return (
+            <Link
+              key={category.name}
+              href={`/category/${category.name}`}
+              passHref
+              legacyBehavior>
+              <div
+                className={
+                  'group mr-5 mb-5 flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'
+                }>
+                <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
+                {category.name}
+                <div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
+                  {category.count}
+                </div>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
   )
 }
 
@@ -466,50 +454,47 @@ const LayoutTagIndex = props => {
   const { locale } = useGlobal()
 
   return (
-      <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>
-        <div
-          id="tag-list"
-          className="duration-200 flex flex-wrap space-x-5 space-y-5 m-10 justify-center"
-        >
-          {tagOptions.map(tag => {
-            return (
-              <Link
-                key={tag.name}
-                href={`/tag/${tag.name}`}
-                passHref
-                legacyBehavior
-              >
-                <div
-                  className={
-                    'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'
-                  }
-                >
-                  <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
-                  {tag.name}
-                  <div className="bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 ">
-                    {tag.count}
-                  </div>
-                </div>
-              </Link>
-            )
-          })}
-        </div>
+    <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>
+      <div
+        id='tag-list'
+        className='duration-200 flex flex-wrap space-x-5 space-y-5 m-10 justify-center'>
+        {tagOptions.map(tag => {
+          return (
+            <Link
+              key={tag.name}
+              href={`/tag/${tag.name}`}
+              passHref
+              legacyBehavior>
+              <div
+                className={
+                  'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'
+                }>
+                <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
+                {tag.name}
+                <div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
+                  {tag.count}
+                </div>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
   )
 }
 
 export {
-  CONFIG as THEME_CONFIG,
-  LayoutBase,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
   Layout404,
-  LayoutPostList,
+  LayoutArchive,
+  LayoutBase,
   LayoutCategoryIndex,
-  LayoutTagIndex
+  LayoutIndex,
+  LayoutPostList,
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }
diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index 10a47726..e6217c8a 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -5,42 +5,60 @@ import CONFIG from '../config'
 import { BlogPostCardInfo } from './BlogPostCardInfo'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
-  const showPreview = siteConfig('HEXO_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
-  if (post && !post.pageCoverThumbnail && siteConfig('HEXO_POST_LIST_COVER_DEFAULT', null, CONFIG)) {
+  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 = siteConfig('HEXO_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail && !showPreview
+  const showPageCover =
+    siteConfig('HEXO_POST_LIST_COVER', null, CONFIG) &&
+    post?.pageCoverThumbnail &&
+    !showPreview
   //   const delay = (index % 2) * 200
 
   return (
-
-        <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"
-                data-aos-duration="800"
-                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 ${siteConfig('HEXO_POST_LIST_IMG_CROSSOVER', null, CONFIG) && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
+    <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'
+        data-aos-duration='800'
+        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 ${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`}>
+        {/* 文字内容 */}
+        <BlogPostCardInfo
+          index={index}
+          post={post}
+          showPageCover={showPageCover}
+          showPreview={showPreview}
+          showSummary={showSummary}
+        />
 
-                {/* 文字内容 */}
-                <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} />
-
-                {/* 图片封面 */}
-                {showPageCover && (
-                    <div className="md:w-5/12 overflow-hidden">
-                        <Link href={post?.href} 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>
-                )}
-
-            </div>
-
-        </div>
-
+        {/* 图片封面 */}
+        {showPageCover && (
+          <div className='md:w-5/12 overflow-hidden'>
+            <Link href={post?.href}>
+              <>
+                <LazyImage
+                  priority={index === 1}
+                  alt={post?.title}
+                  src={post?.pageCoverThumbnail}
+                  className='h-56 w-full object-cover object-center group-hover:scale-110 duration-500'
+                />
+              </>
+            </Link>
+          </div>
+        )}
+      </div>
+    </div>
   )
 }
 
diff --git a/themes/hexo/components/BlogPostListPage.js b/themes/hexo/components/BlogPostListPage.js
index c96b9cdd..ccc309bc 100644
--- a/themes/hexo/components/BlogPostListPage.js
+++ b/themes/hexo/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showPagination = postCount >= POSTS_PER_PAGE
   if (!posts || posts.length === 0 || page > totalPage) {
diff --git a/themes/hexo/components/BlogPostListScroll.js b/themes/hexo/components/BlogPostListScroll.js
index b3f19036..11291051 100644
--- a/themes/hexo/components/BlogPostListScroll.js
+++ b/themes/hexo/components/BlogPostListScroll.js
@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
 }) => {
   const { NOTION_CONFIG } = useGlobal()
   const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
 
   let hasMore = false
diff --git a/themes/hexo/components/FloatDarkModeButton.js b/themes/hexo/components/ButtonFloatDarkMode.js
similarity index 70%
rename from themes/hexo/components/FloatDarkModeButton.js
rename to themes/hexo/components/ButtonFloatDarkMode.js
index 6a7fb97e..6737020b 100644
--- a/themes/hexo/components/FloatDarkModeButton.js
+++ b/themes/hexo/components/ButtonFloatDarkMode.js
@@ -1,9 +1,12 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { saveDarkModeToLocalStorage } from '@/themes/theme'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 
-export default function FloatDarkModeButton () {
+/**
+ * 深色模式按钮
+ */
+export default function ButtonDarkModeFloat() {
   const { isDarkMode, updateDarkMode } = useGlobal()
 
   if (!siteConfig('HEXO_WIDGET_DARK_MODE', null, CONFIG)) {
@@ -23,10 +26,13 @@ export default function FloatDarkModeButton () {
   return (
     <div
       onClick={handleChangeDarkMode}
-      className={'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
-      }
-    >
-      <i id="darkModeButton" className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}/>
+      className={
+        'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
+      }>
+      <i
+        id='darkModeButton'
+        className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}
+      />
     </div>
   )
 }
diff --git a/themes/hexo/components/JumpToCommentButton.js b/themes/hexo/components/ButtonJumpToComment.js
similarity index 55%
rename from themes/hexo/components/JumpToCommentButton.js
rename to themes/hexo/components/ButtonJumpToComment.js
index 60f1d1e9..6a5b55a6 100644
--- a/themes/hexo/components/JumpToCommentButton.js
+++ b/themes/hexo/components/ButtonJumpToComment.js
@@ -1,19 +1,22 @@
-import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
 
 /**
  * 跳转到评论区
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToCommentButton = () => {
+const ButtonJumpToComment = () => {
   if (!siteConfig('HEXO_WIDGET_TO_COMMENT', null, CONFIG)) {
     return <></>
   }
 
   function navToComment() {
     if (document.getElementById('comment')) {
-      window.scrollTo({ top: document.getElementById('comment').offsetTop, behavior: 'smooth' })
+      window.scrollTo({
+        top: document.getElementById('comment').offsetTop,
+        behavior: 'smooth'
+      })
     }
     // 兼容性不好
     // const commentElement = document.getElementById('comment')
@@ -21,9 +24,13 @@ const JumpToCommentButton = () => {
     // commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
   }
 
-  return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center' onClick={navToComment} >
-    <i className='fas fa-comment text-xs' />
-  </div>)
+  return (
+    <div
+      className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center'
+      onClick={navToComment}>
+      <i className='fas fa-comment text-xs' />
+    </div>
+  )
 }
 
-export default JumpToCommentButton
+export default ButtonJumpToComment
diff --git a/themes/hexo/components/JumpToTopButton.js b/themes/hexo/components/ButtonJumpToTop.js
similarity index 89%
rename from themes/hexo/components/JumpToTopButton.js
rename to themes/hexo/components/ButtonJumpToTop.js
index 9a2b9712..23ee05d8 100644
--- a/themes/hexo/components/JumpToTopButton.js
+++ b/themes/hexo/components/ButtonJumpToTop.js
@@ -1,6 +1,6 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到网页顶部
@@ -10,7 +10,7 @@ import { siteConfig } from '@/lib/config'
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToTopButton = ({ showPercent = true, percent }) => {
+const ButtonJumpToTop = ({ showPercent = true, percent }) => {
   const { locale } = useGlobal()
 
   if (!siteConfig('HEXO_WIDGET_TO_TOP', null, CONFIG)) {
@@ -22,4 +22,4 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
     </div>)
 }
 
-export default JumpToTopButton
+export default ButtonJumpToTop
diff --git a/themes/hexo/components/ButtonRandomPost.js b/themes/hexo/components/ButtonRandomPost.js
new file mode 100644
index 00000000..a43f8509
--- /dev/null
+++ b/themes/hexo/components/ButtonRandomPost.js
@@ -0,0 +1,29 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+
+/**
+ * 随机跳转到一个文章
+ */
+export default function ButtonRandomPost(props) {
+  const { latestPosts } = props
+  const router = useRouter()
+  const { locale } = useGlobal()
+  /**
+   * 随机跳转文章
+   */
+  function handleClick() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length)
+    const randomPost = latestPosts[randomIndex]
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
+  }
+
+  return (
+    <div
+      title={locale.MENU.WALK_AROUND}
+      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'
+      onClick={handleClick}>
+      <i className='fa-solid fa-podcast'></i>
+    </div>
+  )
+}
diff --git a/themes/hexo/components/ButtonRandomPostMini.js b/themes/hexo/components/ButtonRandomPostMini.js
new file mode 100644
index 00000000..98eadeb1
--- /dev/null
+++ b/themes/hexo/components/ButtonRandomPostMini.js
@@ -0,0 +1,29 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+
+/**
+ * 随机跳转到一个文章
+ */
+export default function ButtonRandomPostMini(props) {
+  const { latestPosts } = props
+  const router = useRouter()
+  const { locale } = useGlobal()
+  /**
+   * 随机跳转文章
+   */
+  function handleClick() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length)
+    const randomPost = latestPosts[randomIndex]
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
+  }
+
+  return (
+    <div
+      title={locale.MENU.WALK_AROUND}
+      className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center'
+      onClick={handleClick}>
+      <i className='fa-solid fa-podcast'></i>
+    </div>
+  )
+}
diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Header.js
index 9c3da194..29a83d71 100644
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import CONFIG from '../config'
+import ButtonRandomPost from './ButtonRandomPost'
 import CategoryGroup from './CategoryGroup'
 import Logo from './Logo'
 import { MenuListTop } from './MenuListTop'
@@ -28,6 +29,7 @@ const Header = props => {
   const router = useRouter()
   const [isOpen, changeShow] = useState(false)
   const showSearchButton = siteConfig('HEXO_MENU_SEARCH', false, CONFIG)
+  const showRandomButton = siteConfig('HEXO_MENU_RANDOM', false, CONFIG)
 
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
@@ -172,6 +174,7 @@ const Header = props => {
               )}
             </div>
             {showSearchButton && <SearchButton />}
+            {showRandomButton && <ButtonRandomPost {...props} />}
           </div>
         </div>
       </div>
diff --git a/themes/hexo/components/Hero.js b/themes/hexo/components/Hero.js
index 91059205..27db5945 100644
--- a/themes/hexo/components/Hero.js
+++ b/themes/hexo/components/Hero.js
@@ -26,10 +26,7 @@ const Hero = props => {
     updateHeaderHeight()
 
     if (!typed && window && document.getElementById('typed')) {
-      loadExternalResource(
-        'https://cdn.jsdelivr.net/npm/typed.js@2.0.12',
-        'js'
-      ).then(() => {
+      loadExternalResource('/js/typed.min.js', 'js').then(() => {
         if (window.Typed) {
           changeType(
             new window.Typed('#typed', {
@@ -92,6 +89,7 @@ const Hero = props => {
 
       <LazyImage
         id='header-cover'
+        alt={siteInfo?.title}
         src={siteInfo?.pageCover}
         className={`header-cover w-full h-screen object-cover object-center ${siteConfig('HEXO_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`}
       />
diff --git a/themes/hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js
index 6254def8..5a0a0161 100644
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -42,6 +42,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
             className={'my-3 flex'}>
             <div className='w-20 h-14 overflow-hidden relative'>
               <LazyImage
+                alt={post?.title}
                 src={`${headerImage}`}
                 className='object-cover w-full h-full'
               />
diff --git a/themes/hexo/components/PaginationNumber.js b/themes/hexo/components/PaginationNumber.js
index 42281b93..57d755dd 100644
--- a/themes/hexo/components/PaginationNumber.js
+++ b/themes/hexo/components/PaginationNumber.js
@@ -12,60 +12,69 @@ const PaginationNumber = ({ page, totalPage }) => {
   const router = useRouter()
   const currentPage = +page
   const showNext = page < totalPage
-  const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+  const pagePrefix = router.asPath
+    .split('?')[0]
+    .replace(/\/page\/[1-9]\d*/, '')
+    .replace(/\/$/, '')
+    .replace('.html', '')
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   return (
-    <div className="mt-10 mb-5  flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
-        {/* 上一页 */}
-        <Link
-          href={{
-            pathname: currentPage === 2
+    <div className='mt-10 mb-5 flex justify-center items-end font-medium text-indigo-400 duration-500 py-3 space-x-2'>
+      {/* 上一页 */}
+      <Link
+        href={{
+          pathname:
+            currentPage === 2
               ? `${pagePrefix}/`
               : `${pagePrefix}/page/${currentPage - 1}`,
-            query: router.query.s ? { s: router.query.s } : {}
-          }}
-          rel="prev"
-          className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 border-white dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}>
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        rel='prev'
+        className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 hover:bg-indigo-400 hover:text-white w-6 text-center cursor-pointer duration-200 hover:font-bold`}>
+        <i className='fas fa-angle-left' />
+      </Link>
 
-          <i className="fas fa-angle-left" />
+      {pages}
 
-        </Link>
-
-        {pages}
-
-        {/* 下一页 */}
-        <Link
-          href={{
-            pathname: `${pagePrefix}/page/${currentPage + 1}`,
-            query: router.query.s ? { s: router.query.s } : {}
-          }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-indigo-300 dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}>
-
-          <i className="fas fa-angle-right" />
-
-        </Link>
+      {/* 下一页 */}
+      <Link
+        href={{
+          pathname: `${pagePrefix}/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        rel='next'
+        className={`${+showNext ? 'block' : 'invisible'} pb-0.5 hover:bg-indigo-400 hover:text-white w-6 text-center cursor-pointer duration-200 hover:font-bold`}>
+        <i className='fas fa-angle-right' />
+      </Link>
     </div>
   )
 }
 
+/**
+ * 获取页码
+ * @param {*} page
+ * @param {*} currentPage
+ * @param {*} pagePrefix
+ * @returns
+ */
 function getPageElement(page, currentPage, pagePrefix) {
+  const selected = page + '' === currentPage + ''
   return (
-    (<Link
+    <Link
       href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
       key={page}
       passHref
-      className={
-          (page + '' === currentPage + ''
-            ? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white '
-            : 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
-          ' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'
-      }>
-
+      className={`${
+        selected
+          ? 'font-bold bg-indigo-400 hover:bg-indigo-600 dark:bg-indigo-500 text-white'
+          : 'border-b border-indigo-400 text-indigo-400 hover:border-indigo-400 hover:bg-indigo-400'
+      }
+      duration-500  hover:font-bold hover:text-white
+      cursor-pointer pb-0.5 w-6 text-center
+      `}>
       {page}
-
-    </Link>)
+    </Link>
   )
 }
 
diff --git a/themes/hexo/components/RightFloatArea.js b/themes/hexo/components/RightFloatArea.js
index d7fadce5..162081b2 100644
--- a/themes/hexo/components/RightFloatArea.js
+++ b/themes/hexo/components/RightFloatArea.js
@@ -1,7 +1,7 @@
 import throttle from 'lodash.throttle'
 import { useCallback, useEffect, useState } from 'react'
-import FloatDarkModeButton from './FloatDarkModeButton'
-import JumpToTopButton from './JumpToTopButton'
+import ButtonDarkModeFloat from './ButtonFloatDarkMode'
+import ButtonJumpToTop from './ButtonJumpToTop'
 
 /**
  * 悬浮在右下角的按钮，当页面向下滚动100px时会出现
@@ -10,20 +10,22 @@ import JumpToTopButton from './JumpToTopButton'
  */
 export default function RightFloatArea({ floatSlot }) {
   const [showFloatButton, switchShow] = useState(false)
-  const scrollListener = useCallback(throttle(() => {
-    const targetRef = document.getElementById('wrapper')
-    const clientHeight = targetRef?.clientHeight
-    const scrollY = window.pageYOffset
-    const fullHeight = clientHeight - window.outerHeight
-    let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
-    if (per > 100) per = 100
-    const shouldShow = scrollY > 100 && per > 0
+  const scrollListener = useCallback(
+    throttle(() => {
+      const targetRef = document.getElementById('wrapper')
+      const clientHeight = targetRef?.clientHeight
+      const scrollY = window.pageYOffset
+      const fullHeight = clientHeight - window.outerHeight
+      let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+      if (per > 100) per = 100
+      const shouldShow = scrollY > 100 && per > 0
 
-    // 右下角显示悬浮按钮
-    if (shouldShow !== showFloatButton) {
-      switchShow(shouldShow)
-    }
-  }, 200))
+      // 右下角显示悬浮按钮
+      if (shouldShow !== showFloatButton) {
+        switchShow(shouldShow)
+      }
+    }, 200)
+  )
 
   useEffect(() => {
     document.addEventListener('scroll', scrollListener)
@@ -31,12 +33,17 @@ export default function RightFloatArea({ floatSlot }) {
   }, [])
 
   return (
-        <div className={(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') + '  duration-300 transition-all bottom-12 right-1 fixed justify-end z-20  text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'}>
-                <div className={'justify-center  flex flex-col items-center cursor-pointer'}>
-                    <FloatDarkModeButton />
-                    {floatSlot}
-                    <JumpToTopButton />
-                </div>
-            </div>
+    <div
+      className={
+        (showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') +
+        '  duration-300 transition-all bottom-12 right-1 fixed justify-end z-20  text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'
+      }>
+      <div
+        className={'justify-center  flex flex-col items-center cursor-pointer'}>
+        <ButtonDarkModeFloat />
+        {floatSlot}
+        <ButtonJumpToTop />
+      </div>
+    </div>
   )
 }
diff --git a/themes/hexo/components/SocialButton.js b/themes/hexo/components/SocialButton.js
index 38f3cc7f..3e220cf7 100644
--- a/themes/hexo/components/SocialButton.js
+++ b/themes/hexo/components/SocialButton.js
@@ -1,4 +1,6 @@
+import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
+import { useState } from 'react'
 
 /**
  * 社交联系方式按钮组
@@ -6,39 +8,176 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 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 '>
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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(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>}
-      {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>}
-      {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>}
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
+
+  const CONTACT_XIAOHONGSHU = siteConfig('CONTACT_XIAOHONGSHU')
+  const CONTACT_ZHISHIXINGQIU = siteConfig('CONTACT_ZHISHIXINGQIU')
+  const CONTACT_WEHCHAT_PUBLIC = siteConfig('CONTACT_WEHCHAT_PUBLIC')
+
+  const [qrCodeShow, setQrCodeShow] = useState(false)
+
+  const openPopover = () => {
+    setQrCodeShow(true)
+  }
+  const closePopover = () => {
+    setQrCodeShow(false)
+  }
+  return (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
+        {CONTACT_GITHUB && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={CONTACT_GITHUB}>
+            <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_TWITTER && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={CONTACT_TWITTER}>
+            <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_TELEGRAM && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={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>
+        )}
+        {CONTACT_LINKEDIN && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={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>
+        )}
+        {CONTACT_WEIBO && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={CONTACT_WEIBO}>
+            <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_INSTAGRAM && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={CONTACT_INSTAGRAM}>
+            <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_EMAIL && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${CONTACT_EMAIL}`}>
+            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {ENABLE_RSS && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_BILIBILI && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={CONTACT_BILIBILI}>
+            <i className='transform hover:scale-125 duration-150 dark:hover:text-indigo-400 hover:text-indigo-600 fab fa-bilibili' />
+          </a>
+        )}
+        {CONTACT_YOUTUBE && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={CONTACT_YOUTUBE}>
+            <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_XIAOHONGSHU && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'小红书'}
+            href={CONTACT_XIAOHONGSHU}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className='transform hover:scale-125 duration-150 w-6'
+              src='/svg/xiaohongshu.svg'
+              alt='小红书'
+            />
+          </a>
+        )}
+        {CONTACT_ZHISHIXINGQIU && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'知识星球'}
+            href={CONTACT_ZHISHIXINGQIU}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className='transform hover:scale-125 duration-150 w-6'
+              src='/svg/zhishixingqiu.svg'
+              alt='知识星球'
+            />{' '}
+          </a>
+        )}
+        {CONTACT_WEHCHAT_PUBLIC && (
+          <button
+            onMouseEnter={openPopover}
+            onMouseLeave={closePopover}
+            aria-label={'微信公众号'}>
+            <div id='wechat-button'>
+              <i className='transform scale-105 hover:scale-125 duration-150 fab fa-weixin  dark:hover:text-indigo-400 hover:text-indigo-600' />
+            </div>
+            {/* 二维码弹框 */}
+            <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'>
+                  {qrCodeShow && <QrCode value={CONTACT_WEHCHAT_PUBLIC} />}
+                </div>
+              </div>
+            </div>
+          </button>
+        )}
+      </div>
     </div>
-  </div>
+  )
 }
 export default SocialButton
diff --git a/themes/hexo/config.js b/themes/hexo/config.js
index dddfbe83..024c12e0 100644
--- a/themes/hexo/config.js
+++ b/themes/hexo/config.js
@@ -1,7 +1,12 @@
 const CONFIG = {
   HEXO_HOME_BANNER_ENABLE: true,
   // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。
-  HEXO_HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
+  HEXO_HOME_BANNER_GREETINGS: [
+    'Hi，我是一个程序员',
+    'Hi，我是一个打工人',
+    'Hi，我是一个干饭人',
+    '欢迎来到我的博客🎉'
+  ], // 首页大图标语文字
 
   HEXO_HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
   // 已知未修复bug, 在移动端开启true后会加载不出图片； 暂时建议设置为false。
@@ -15,6 +20,7 @@ const CONFIG = {
   HEXO_MENU_TAG: true, // 显示标签
   HEXO_MENU_ARCHIVE: true, // 显示归档
   HEXO_MENU_SEARCH: true, // 显示搜索
+  HEXO_MENU_RANDOM: true, // 显示随机跳转按钮
 
   HEXO_POST_LIST_COVER: true, // 列表显示文章封面
   HEXO_POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
index 8dd08ec9..4988dad9 100644
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -17,11 +17,12 @@ import ArticleRecommend from './components/ArticleRecommend'
 import BlogPostArchive from './components/BlogPostArchive'
 import BlogPostListPage from './components/BlogPostListPage'
 import BlogPostListScroll from './components/BlogPostListScroll'
+import ButtonJumpToComment from './components/ButtonJumpToComment'
+import ButtonRandomPostMini from './components/ButtonRandomPostMini'
 import Card from './components/Card'
 import Footer from './components/Footer'
 import Header from './components/Header'
 import Hero from './components/Hero'
-import JumpToCommentButton from './components/JumpToCommentButton'
 import PostHero from './components/PostHero'
 import RightFloatArea from './components/RightFloatArea'
 import SearchNav from './components/SearchNav'
@@ -51,8 +52,9 @@ export const useHexoGlobal = () => useContext(ThemeGlobalHexo)
 const LayoutBase = props => {
   const { post, children, slotTop, className } = props
   const { onLoading, fullWidth } = useGlobal()
-
   const router = useRouter()
+  const showRandomButton = siteConfig('HEXO_MENU_RANDOM', false, CONFIG)
+
   const headerSlot = post ? (
     <PostHero {...props} />
   ) : router.route === '/' &&
@@ -63,6 +65,7 @@ const LayoutBase = props => {
   const drawerRight = useRef(null)
   const tocRef = isBrowser ? document.getElementById('article-wrapper') : null
 
+  // 悬浮按钮内容
   const floatSlot = (
     <>
       {post?.toc?.length > 1 && (
@@ -74,7 +77,8 @@ const LayoutBase = props => {
           />
         </div>
       )}
-      {post && <JumpToCommentButton />}
+      {post && <ButtonJumpToComment />}
+      {showRandomButton && <ButtonRandomPostMini {...props} />}
     </>
   )
 
diff --git a/themes/matery/components/BlogPostListPage.js b/themes/matery/components/BlogPostListPage.js
index 8558d5e7..61d17db6 100644
--- a/themes/matery/components/BlogPostListPage.js
+++ b/themes/matery/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import PaginationSimple from './PaginationSimple'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showPagination = postCount >= POSTS_PER_PAGE
   if (!posts || posts.length === 0 || page > totalPage) {
diff --git a/themes/matery/components/BlogPostListScroll.js b/themes/matery/components/BlogPostListScroll.js
index 8a91bf07..4a8c166c 100644
--- a/themes/matery/components/BlogPostListScroll.js
+++ b/themes/matery/components/BlogPostListScroll.js
@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
   siteInfo
 }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const [page, updatePage] = useState(1)
   const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
   // 监听滚动
diff --git a/themes/matery/components/Hero.js b/themes/matery/components/Hero.js
index 65975a0f..2abc8d39 100644
--- a/themes/matery/components/Hero.js
+++ b/themes/matery/components/Hero.js
@@ -21,10 +21,7 @@ const Hero = props => {
   useEffect(() => {
     updateHeaderHeight()
     if (!typed && window && document.getElementById('typed')) {
-      loadExternalResource(
-        'https://cdn.jsdelivr.net/npm/typed.js@2.0.12',
-        'js'
-      ).then(() => {
+      loadExternalResource('/js/typed.min.js', 'js').then(() => {
         if (window.Typed) {
           changeType(
             new window.Typed('#typed', {
diff --git a/themes/matery/components/SocialButton.js b/themes/matery/components/SocialButton.js
index ae15d1f0..4e15fed7 100644
--- a/themes/matery/components/SocialButton.js
+++ b/themes/matery/components/SocialButton.js
@@ -12,42 +12,113 @@ const SocialButton = () => {
     setShow(!show)
   }
 
-  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 && <>
-            {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>}
-            {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>}
-            {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>}
-            {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>}
-            {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>}
-            {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>}
-            {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(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-                <i className='transform hover:scale-125 duration-150 fas fa-rss ' />
-            </a>}
-            {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>}
-            {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 ' />
-
-        </>}
+  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 && (
+        <>
+          {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>
+          )}
+          {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>
+          )}
+          {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>
+          )}
+          {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>
+          )}
+          {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>
+          )}
+          {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>
+          )}
+          {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(siteConfig('ENABLE_RSS')) && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'RSS'}
+              href={'/rss/feed.xml'}>
+              <i className='transform hover:scale-125 duration-150 fas fa-rss ' />
+            </a>
+          )}
+          {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>
+          )}
+          {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 '
+          />
+        </>
+      )}
     </div>
+  )
 }
 export default SocialButton
diff --git a/themes/medium/components/BlogPostListPage.js b/themes/medium/components/BlogPostListPage.js
index c8171c4b..79e031dd 100644
--- a/themes/medium/components/BlogPostListPage.js
+++ b/themes/medium/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import PaginationSimple from './PaginationSimple'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
 
   if (!posts || posts.length === 0) {
diff --git a/themes/medium/components/BlogPostListScroll.js b/themes/medium/components/BlogPostListScroll.js
index cf06a093..22960779 100644
--- a/themes/medium/components/BlogPostListScroll.js
+++ b/themes/medium/components/BlogPostListScroll.js
@@ -15,7 +15,7 @@ import BlogPostListEmpty from './BlogPostListEmpty'
  */
 const BlogPostListScroll = ({ posts = [], currentSearch }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const [page, updatePage] = useState(1)
   const router = useRouter()
   let filteredPosts = Object.assign(posts)
diff --git a/themes/medium/components/CategoryGroup.js b/themes/medium/components/CategoryGroup.js
index d562cd1f..3fd6b67d 100644
--- a/themes/medium/components/CategoryGroup.js
+++ b/themes/medium/components/CategoryGroup.js
@@ -1,18 +1,37 @@
+import { useGlobal } from '@/lib/global'
 import CategoryItem from './CategoryItem'
 
+/**
+ * 分类
+ * @param {*} param0
+ * @returns
+ */
 const CategoryGroup = ({ currentCategory, categoryOptions }) => {
+  const { locale } = useGlobal()
   if (!categoryOptions) {
     return <></>
   }
-  return <div id='category-list' className='pt-4'>
-    <div className='mb-2'><i className='mr-2 fas fa-th' />分类</div>
-    <div className='flex flex-wrap'>
-      {categoryOptions?.map(category => {
-        const selected = currentCategory === category.name
-        return <CategoryItem key={category.name} selected={selected} category={category.name} categoryCount={category.count} />
-      })}
+  return (
+    <div id='category-list' className='pt-4'>
+      <div className='mb-2'>
+        <i className='mr-2 fas fa-th' />
+        {locale.COMMON.CATEGORY}
+      </div>
+      <div className='flex flex-wrap'>
+        {categoryOptions?.map(category => {
+          const selected = currentCategory === category.name
+          return (
+            <CategoryItem
+              key={category.name}
+              selected={selected}
+              category={category.name}
+              categoryCount={category.count}
+            />
+          )
+        })}
+      </div>
     </div>
-  </div>
+  )
 }
 
 export default CategoryGroup
diff --git a/themes/medium/components/SocialButton.js b/themes/medium/components/SocialButton.js
index e522f114..95b8b412 100644
--- a/themes/medium/components/SocialButton.js
+++ b/themes/medium/components/SocialButton.js
@@ -6,37 +6,99 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-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 hover:text-green-600'/>
-      </a>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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(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>}
-      {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>}
-      {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>}
+  return (
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-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 hover:text-green-600' />
+        </a>
+      )}
+      {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>
+      )}
+      {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>
+      )}
+      {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>
+      )}
+      {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>
+      )}
+      {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>
+      )}
+      {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(siteConfig('ENABLE_RSS')) && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'RSS'}
+          href={'/rss/feed.xml'}>
+          <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {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>
+      )}
+      {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>
+  )
 }
 export default SocialButton
diff --git a/themes/medium/components/TagGroups.js b/themes/medium/components/TagGroups.js
index 390a6306..dc0895f8 100644
--- a/themes/medium/components/TagGroups.js
+++ b/themes/medium/components/TagGroups.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import TagItemMini from './TagItemMini'
 
 /**
@@ -8,17 +9,19 @@ import TagItemMini from './TagItemMini'
  * @constructor
  */
 const TagGroups = ({ tagOptions, currentTag }) => {
+  const { locale } = useGlobal()
   if (!tagOptions) return <></>
   return (
     <div id='tags-group' className='dark:border-gray-600 py-4'>
-      <div className='mb-2'><i className='mr-2 fas fa-tag' />标签</div>
+      <div className='mb-2'>
+        <i className='mr-2 fas fa-tag' />
+        {locale.COMMON.TAGS}
+      </div>
       <div className='space-y-2'>
-        {
-          tagOptions?.map(tag => {
-            const selected = tag.name === currentTag
-            return <TagItemMini key={tag.name} tag={tag} selected={selected} />
-          })
-        }
+        {tagOptions?.map(tag => {
+          const selected = tag.name === currentTag
+          return <TagItemMini key={tag.name} tag={tag} selected={selected} />
+        })}
       </div>
     </div>
   )
diff --git a/themes/movie/components/BlogListPage.js b/themes/movie/components/BlogListPage.js
index 9ba62844..dade70d1 100644
--- a/themes/movie/components/BlogListPage.js
+++ b/themes/movie/components/BlogListPage.js
@@ -7,7 +7,7 @@ import PaginationNumber from './PaginationNumber'
 export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
 
   const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)
diff --git a/themes/movie/components/PaginationNumber.js b/themes/movie/components/PaginationNumber.js
index effc1835..64323b9c 100644
--- a/themes/movie/components/PaginationNumber.js
+++ b/themes/movie/components/PaginationNumber.js
@@ -22,6 +22,7 @@ const PaginationNumber = ({ page, totalPage }) => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
   if (pages?.length <= 1) {
     return <></>
@@ -46,7 +47,7 @@ const PaginationNumber = ({ page, totalPage }) => {
   return (
     <>
       {/* pc端分页按钮 */}
-      <div className="hidden lg:flex justify-between items-end mt-10 mb-5 font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2 overflow-x-auto">
+      <div className='hidden lg:flex justify-between items-end mt-10 mb-5 font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2 overflow-x-auto'>
         {/* 上一页 */}
         <Link
           href={{
@@ -56,32 +57,29 @@ const PaginationNumber = ({ page, totalPage }) => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="prev"
-          className={`${currentPage === 1 ? 'invisible' : 'block'}`}
-        >
-          <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
-            <i className="fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4" />
-            <div className="absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0">
+          rel='prev'
+          className={`${currentPage === 1 ? 'invisible' : 'block'}`}>
+          <div className='relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
+            <i className='fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4' />
+            <div className='absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0'>
               {locale.PAGINATION.PREV}
             </div>
           </div>
         </Link>
 
         {/* 分页 */}
-        <div className="flex items-center space-x-2">
+        <div className='flex items-center space-x-2'>
           {pages}
 
           {/* 跳转页码 */}
-          <div className="bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200">
+          <div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
             <input
               value={value}
-              className="w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg"
-              onInput={handleInputChange}
-            ></input>
+              className='w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg'
+              onInput={handleInputChange}></input>
             <div
               onClick={jumpToPage}
-              className="cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white"
-            >
+              className='cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white'>
               <ChevronDoubleRight className={'w-4 h-4'} />
             </div>
           </div>
@@ -93,12 +91,11 @@ const PaginationNumber = ({ page, totalPage }) => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'invisible'} `}
-        >
-          <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
-            <i className="fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6" />
-            <div className="absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2">
+          rel='next'
+          className={`${+showNext ? 'block' : 'invisible'} `}>
+          <div className='relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
+            <i className='fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6' />
+            <div className='absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2'>
               {locale.PAGINATION.NEXT}
             </div>
           </div>
@@ -107,7 +104,7 @@ const PaginationNumber = ({ page, totalPage }) => {
 
       {/* 移动端分页 */}
 
-      <div className="lg:hidden w-full flex flex-row">
+      <div className='lg:hidden w-full flex flex-row'>
         {/* 上一页 */}
         <Link
           href={{
@@ -117,13 +114,12 @@ const PaginationNumber = ({ page, totalPage }) => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="prev"
-          className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
-        >
+          rel='prev'
+          className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
           {locale.PAGINATION.PREV}
         </Link>
 
-        {showPrev && showNext && <div className="w-12"></div>}
+        {showPrev && showNext && <div className='w-12'></div>}
 
         {/* 下一页 */}
         <Link
@@ -131,9 +127,8 @@ const PaginationNumber = ({ page, totalPage }) => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
-        >
+          rel='next'
+          className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
           {locale.PAGINATION.NEXT}
         </Link>
       </div>
@@ -163,8 +158,7 @@ function getPageElement(page, currentPage, pagePrefix) {
           ? 'bg-indigo-600 dark:bg-yellow-600 text-white '
           : 'dark:bg-[#1e1e1e] bg-white') +
         ' hover:border-indigo-600 dark:hover:bg-yellow-600 dark:border-gray-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
-      }
-    >
+      }>
       {page}
     </Link>
   )
@@ -197,7 +191,7 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
     }
     if (startPage > 2) {
       pages.push(
-        <div key={-1} className="-mt-2 mx-1">
+        <div key={-1} className='-mt-2 mx-1'>
           ...{' '}
         </div>
       )
diff --git a/themes/nav/components/BlogPostCard.js b/themes/nav/components/BlogPostCard.js
index b449c0d2..0f92a30a 100755
--- a/themes/nav/components/BlogPostCard.js
+++ b/themes/nav/components/BlogPostCard.js
@@ -1,5 +1,5 @@
 import { siteConfig } from '@/lib/config'
-import { checkContainHttp } from '@/lib/utils'
+import { checkStartWithHttp } from '@/lib/utils'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import NotionIcon from './NotionIcon'
@@ -23,7 +23,7 @@ const BlogPostCard = ({ post, className }) => {
   return (
     <Link
       href={post?.href}
-      target={checkContainHttp(post.slug) ? '_blank' : '_self'}
+      target={checkStartWithHttp(post.slug) ? '_blank' : '_self'}
       passHref>
       <div
         key={post.id}
diff --git a/themes/nav/components/BlogPostListAll.js b/themes/nav/components/BlogPostListAll.js
index 9b3bc85c..2f00f75c 100755
--- a/themes/nav/components/BlogPostListAll.js
+++ b/themes/nav/components/BlogPostListAll.js
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import BlogPostListEmpty from './BlogPostListEmpty'
-import BlogPostItem from './BlogPostItem'
+import { siteConfig } from '@/lib/config'
 import { useNavGlobal } from '@/themes/nav'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
+import BlogPostItem from './BlogPostItem'
+import BlogPostListEmpty from './BlogPostListEmpty'
 
 /**
  * 博客列表滚动分页
diff --git a/themes/nav/components/BlogPostListPage.js b/themes/nav/components/BlogPostListPage.js
index 4594f3b8..5075a2a0 100755
--- a/themes/nav/components/BlogPostListPage.js
+++ b/themes/nav/components/BlogPostListPage.js
@@ -13,7 +13,7 @@ import PaginationSimple from './PaginationSimple'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
   const totalPage = Math.ceil(
-    postCount / parseInt(siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG))
+    postCount / parseInt(siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG))
   )
 
   if (!posts || posts.length === 0) {
diff --git a/themes/nav/components/FloatButtonCatalog.js b/themes/nav/components/FloatButtonCatalog.js
new file mode 100644
index 00000000..753451da
--- /dev/null
+++ b/themes/nav/components/FloatButtonCatalog.js
@@ -0,0 +1,27 @@
+import { useNavGlobal } from '@/themes/nav'
+
+/**
+ * 移动端悬浮目录按钮
+ */
+export default function FloatButtonCatalog() {
+  const { tocVisible, changeTocVisible } = useNavGlobal()
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  return (
+    <div
+      onClick={toggleToc}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='toc-button'
+        className={
+          'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'
+        }
+      />
+    </div>
+  )
+}
diff --git a/themes/nav/components/FloatTocButton.js b/themes/nav/components/FloatTocButton.js
deleted file mode 100755
index d4ff317d..00000000
--- a/themes/nav/components/FloatTocButton.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useNavGlobal } from '@/themes/nav'
-
-/**
- * 移动端悬浮目录按钮
- */
-export default function FloatTocButton () {
-  const { tocVisible, changeTocVisible } = useNavGlobal()
-
-  const toggleToc = () => {
-    changeTocVisible(!tocVisible)
-  }
-
-  return (
-    <div
-      onClick={toggleToc}
-      className={ 'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
-      }
-    >
-      <a
-        id="toc-button"
-        className={'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'}
-      />
-    </div>
-  )
-}
diff --git a/themes/nav/components/NavPostItem.js b/themes/nav/components/NavPostItem.js
index ec27ce90..5ed7d65a 100755
--- a/themes/nav/components/NavPostItem.js
+++ b/themes/nav/components/NavPostItem.js
@@ -1,6 +1,6 @@
-import BlogPostCard from './BlogPostCard'
-import { useState } from 'react'
 import Collapse from '@/components/Collapse'
+import { useState } from 'react'
+import BlogPostCard from './BlogPostCard'
 
 /**
  * 导航列表
@@ -9,36 +9,46 @@ import Collapse from '@/components/Collapse'
  * @returns {JSX.Element}
  * @constructor
  */
-const NavPostItem = (props) => {
+const NavPostItem = props => {
   const { group } = props
   const [isOpen, changeIsOpen] = useState(group?.selected)
 
   const toggleOpenSubMenu = () => {
     changeIsOpen(!isOpen)
   }
-  console.log('group::')
-  console.log(group)
 
   if (group?.category) {
-    return <>
-            <div
-                onClick={toggleOpenSubMenu}
-                className='select-none flex justify-between text-sm  cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
-                <span>{group?.category}</span>
-                <div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
+    return (
+      <>
+        <div
+          onClick={toggleOpenSubMenu}
+          className='select-none flex justify-between text-sm  cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600'
+          key={group?.category}>
+          <span>{group?.category}</span>
+          <div className='inline-flex items-center select-none pointer-events-none '>
+            <i
+              className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i>
+          </div>
+        </div>
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {group?.items?.map((post, index) => (
+            <div key={index} className='ml-3 border-l'>
+              <BlogPostCard className='text-sm ml-3' post={post} />
             </div>
-            <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-                {group?.items?.map(post => (<div key={post.id} className='ml-3 border-l'>
-                    <BlogPostCard className='text-sm ml-3' post={post} /></div>))
-                }
-            </Collapse>
-        </>
+          ))}
+        </Collapse>
+      </>
+    )
   } else {
-    return <>
-            {group?.items?.map(post => (<div key={post.id} >
-                <BlogPostCard className='text-sm py-2' post={post} /></div>))
-            }
-        </>
+    return (
+      <>
+        {group?.items?.map((post, index) => (
+          <div key={index}>
+            <BlogPostCard className='text-sm py-2' post={post} />
+          </div>
+        ))}
+      </>
+    )
   }
 }
 
diff --git a/themes/nav/components/SocialButton.js b/themes/nav/components/SocialButton.js
index b1bd85f9..74fdad37 100755
--- a/themes/nav/components/SocialButton.js
+++ b/themes/nav/components/SocialButton.js
@@ -6,31 +6,81 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-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 hover:text-green-600'/>
-      </a>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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(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>}
+  return (
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-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 hover:text-green-600' />
+        </a>
+      )}
+      {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>
+      )}
+      {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>
+      )}
+      {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>
+      )}
+      {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>
+      )}
+      {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>
+      )}
+      {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(siteConfig('ENABLE_RSS')) && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'RSS'}
+          href={'/rss/feed.xml'}>
+          <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
     </div>
+  )
 }
 export default SocialButton
diff --git a/themes/nav/index.js b/themes/nav/index.js
index 54cea4b8..4a9bd724 100755
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -25,7 +25,7 @@ import BlogArchiveItem from './components/BlogArchiveItem'
 import BlogPostCard from './components/BlogPostCard'
 import BlogPostListAll from './components/BlogPostListAll'
 import CategoryItem from './components/CategoryItem'
-import FloatTocButton from './components/FloatTocButton'
+import FloatButtonCatalog from './components/FloatButtonCatalog'
 import Footer from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
 import LogoBar from './components/LogoBar'
@@ -187,7 +187,7 @@ const LayoutBase = props => {
         {/* 移动端悬浮目录按钮 */}
         {showTocButton && !tocVisible && (
           <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-neutral-800 rounded'>
-            <FloatTocButton {...props} />
+            <FloatButtonCatalog {...props} />
           </div>
         )}
 
diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js
index bdd677ef..f461b5f7 100644
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -1,20 +1,20 @@
-import BlogAround from './BlogAround'
 import Comment from '@/components/Comment'
-import RecommendPosts from './RecommendPosts'
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import NotionPage from '@/components/NotionPage'
 import ShareBar from '@/components/ShareBar'
-import TagItem from './TagItem'
+import WWAds from '@/components/WWAds'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import ArticleCopyright from './ArticleCopyright'
-import WordCount from './WordCount'
-import NotionPage from '@/components/NotionPage'
 import CONFIG from '../config'
-import NotionIcon from '@/components/NotionIcon'
-import LazyImage from '@/components/LazyImage'
-import { formatDateFmt } from '@/lib/utils/formatDate'
-import { siteConfig } from '@/lib/config'
-import WWAds from '@/components/WWAds'
+import ArticleCopyright from './ArticleCopyright'
+import BlogAround from './BlogAround'
+import RecommendPosts from './RecommendPosts'
+import TagItem from './TagItem'
+import WordCount from './WordCount'
 
 /**
  *
@@ -35,105 +35,135 @@ export default function ArticleDetail(props) {
   }
 
   return (
-        <div id="article-wrapper"
-            className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
-            <div itemScope itemType="https://schema.org/Movie"
-                className="subpixel-antialiased overflow-y-hidden py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray article-padding"
-            >
-
-                {showArticleInfo && <header {...aosProps}>
-                    {/* 头图 */}
-                    {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>
-                    )}
-
-                    {/* title */}
-                    <div className=" text-center font-bold text-3xl text-black dark:text-white font-serif pt-6">
-                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
-                    </div>
-
-                    {/* meta */}
-                    <section className="mt-2 text-gray-500 dark:text-gray-400 font-light leading-7 text-sm">
-                        <div className='flex flex-wrap justify-center'>
-                            {post?.type !== 'Page' && (<>
-                                <Link
-                                    href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
-                                    passHref
-                                    legacyBehavior>
-                                    <div className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
-                                        <i className='far fa-calendar mr-1' /> {post?.publishDay}
-                                    </div>
-                                </Link>
-                                <span className='mr-2'> | <i className='far fa-calendar-check mr-2' />{post.lastEditedDay} </span>
-
-                                <div className="hidden busuanzi_container_page_pv font-light mr-2">
-                                    <i className='mr-1 fas fa-eye' />
-                                    <span className="mr-2 busuanzi_value_page_pv" />
-                                </div>
-
-                            </>)}
-                        </div>
-
-                        <WordCount />
-                    </section>
-
-                </header>}
-
-                {/* Notion内容主体 */}
-                <article className='mx-auto'>
-                    <WWAds className="w-full" orientation="horizontal" />
-                    {post && (<NotionPage post={post} />)}
-                    <WWAds className="w-full" orientation="horizontal" />
-                </article>
-
-                {showArticleInfo && <>
-
-                    {/* 分享 */}
-                    <ShareBar post={post} />
-
-                    {/* 版权声明 */}
-                    {post?.type === 'Post' && <ArticleCopyright author={siteConfig('AUTHOR')} url={url} />}
-
-                    {/* 推荐文章 */}
-                    {post?.type === 'Post' && <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />}
-
-                    <section className="flex justify-between">
-                        {/* 分类 */}
-                        {post.category && <>
-                            <div className="cursor-pointer my-auto text-md mr-2 hover:text-black dark:hover:text-white border-b dark:text-gray-500 border-dashed">
-                                <Link href={`/category/${post.category}`} legacyBehavior>
-                                    <a><i className="mr-1 far fa-folder-open" /> {post.category}</a>
-                                </Link>
-                            </div>
-                        </>}
-
-                        {/* 标签列表 */}
-                        {post?.type === 'Post' && (
-                            <>
-                                {post.tagItems && (
-                                    <div className="flex items-center flex-nowrap leading-8 p-1 py-4 overflow-x-auto">
-                                        <div className="hidden md:block dark:text-gray-300 whitespace-nowrap">
-                                            {locale.COMMON.TAGS}:&nbsp;
-                                        </div>
-                                        {post.tagItems.map(tag => (
-                                            <TagItem key={tag.name} tag={tag} />
-                                        ))}
-                                    </div>
-                                )}
-                            </>
-                        )}
-                    </section>
-                    {post?.type === 'Post' && <BlogAround prev={prev} next={next} />}
-                </>}
-
-                {/* 评论互动 */}
-                <div className="duration-200 w-full dark:border-gray-700 bg-white dark:bg-hexo-black-gray">
-                    <Comment frontMatter={post} />
+    <div
+      id='article-wrapper'
+      className='shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full '>
+      <div
+        itemScope
+        itemType='https://schema.org/Movie'
+        className='overflow-y-hidden py-10 px-4 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray'>
+        {showArticleInfo && (
+          <header {...aosProps}>
+            {/* 头图 */}
+            {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>
+              )}
+
+            {/* title */}
+            <div className=' text-center font-bold text-3xl text-black dark:text-white font-serif pt-6'>
+              {siteConfig('POST_TITLE_ICON') && (
+                <NotionIcon icon={post.pageIcon} />
+              )}
+              {post.title}
             </div>
 
+            {/* meta */}
+            <section className='mt-2 text-gray-500 dark:text-gray-400 font-light leading-7 text-sm'>
+              <div className='flex flex-wrap justify-center'>
+                {post?.type !== 'Page' && (
+                  <>
+                    <Link
+                      href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
+                      passHref
+                      legacyBehavior>
+                      <div className='pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed'>
+                        <i className='far fa-calendar mr-1' />{' '}
+                        {post?.publishDay}
+                      </div>
+                    </Link>
+                    <span className='mr-2'>
+                      {' '}
+                      | <i className='far fa-calendar-check mr-2' />
+                      {post.lastEditedDay}{' '}
+                    </span>
+
+                    <div className='hidden busuanzi_container_page_pv font-light mr-2'>
+                      <i className='mr-1 fas fa-eye' />
+                      <span className='mr-2 busuanzi_value_page_pv' />
+                    </div>
+                  </>
+                )}
+              </div>
+
+              <WordCount />
+            </section>
+          </header>
+        )}
+
+        {/* Notion内容主体 */}
+        <article className='mx-auto'>
+          <WWAds className='w-full' orientation='horizontal' />
+          {post && <NotionPage post={post} />}
+          <WWAds className='w-full' orientation='horizontal' />
+        </article>
+
+        {showArticleInfo && (
+          <>
+            {/* 分享 */}
+            <ShareBar post={post} />
+
+            {/* 版权声明 */}
+            {post?.type === 'Post' && (
+              <ArticleCopyright author={siteConfig('AUTHOR')} url={url} />
+            )}
+
+            {/* 推荐文章 */}
+            {post?.type === 'Post' && (
+              <RecommendPosts
+                currentPost={post}
+                recommendPosts={recommendPosts}
+              />
+            )}
+
+            <section className='flex justify-between'>
+              {/* 分类 */}
+              {post.category && (
+                <>
+                  <div className='cursor-pointer my-auto text-md mr-2 hover:text-black dark:hover:text-white border-b dark:text-gray-500 border-dashed'>
+                    <Link href={`/category/${post.category}`} legacyBehavior>
+                      <a>
+                        <i className='mr-1 far fa-folder-open' />{' '}
+                        {post.category}
+                      </a>
+                    </Link>
+                  </div>
+                </>
+              )}
+
+              {/* 标签列表 */}
+              {post?.type === 'Post' && (
+                <>
+                  {post.tagItems && (
+                    <div className='flex items-center flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
+                      <div className='hidden md:block dark:text-gray-300 whitespace-nowrap'>
+                        {locale.COMMON.TAGS}:&nbsp;
+                      </div>
+                      {post.tagItems.map(tag => (
+                        <TagItem key={tag.name} tag={tag} />
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+            </section>
+            {post?.type === 'Post' && <BlogAround prev={prev} next={next} />}
+          </>
+        )}
+
+        {/* 评论互动 */}
+        <div className='duration-200 w-full dark:border-gray-700 bg-white dark:bg-hexo-black-gray'>
+          <Comment frontMatter={post} />
         </div>
+      </div>
+    </div>
   )
 }
diff --git a/themes/next/components/BlogPostListPage.js b/themes/next/components/BlogPostListPage.js
index c74fbbb2..87650a28 100644
--- a/themes/next/components/BlogPostListPage.js
+++ b/themes/next/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
 
   if (!posts || posts.length === 0) {
diff --git a/themes/next/components/BlogPostListScroll.js b/themes/next/components/BlogPostListScroll.js
index 1003d2b0..44db2010 100644
--- a/themes/next/components/BlogPostListScroll.js
+++ b/themes/next/components/BlogPostListScroll.js
@@ -19,7 +19,7 @@ const BlogPostListScroll = ({
   showSummary = siteConfig('NEXT_POST_LIST_SUMMARY', null, CONFIG)
 }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const [page, updatePage] = useState(1)
   const postsToShow = getPostByPage(page, posts, POSTS_PER_PAGE)
 
diff --git a/themes/next/components/PaginationNumber.js b/themes/next/components/PaginationNumber.js
index 808dd217..02c61693 100644
--- a/themes/next/components/PaginationNumber.js
+++ b/themes/next/components/PaginationNumber.js
@@ -12,76 +12,71 @@ const PaginationNumber = ({ page, totalPage }) => {
   const router = useRouter()
   const currentPage = +page
   const showNext = currentPage !== totalPage
-  const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+  const pagePrefix = router.asPath
+    .split('?')[0]
+    .replace(/\/page\/[1-9]\d*/, '')
+    .replace(/\/$/, '')
+    .replace('.html', '')
+
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   return (
     <div
-        data-aos="fade-down"
-        data-aos-duration="300"
-        data-aos-once="false"
-        data-aos-anchor-placement="top-bottom"
-        className="my-5 flex justify-center items-end font-medium text-black hover:shadow-xl duration-200 transition-all bg-white dark:bg-hexo-black-gray dark:text-gray-300 py-3 shadow space-x-2">
-        {/* 上一页 */}
-        <Link
-          href={{
-            pathname:
-                  currentPage - 1 === 1
-                    ? `${pagePrefix}/`
-                    : `${pagePrefix}/page/${currentPage - 1}`,
-            query: router.query.s ? { s: router.query.s } : {}
-          }}
-          passHref
-          legacyBehavior>
-            <div
-                rel="prev"
-                className={`${currentPage === 1 ? 'invisible' : 'block'
-                    } hover:border-t-2 border-white  hover:border-gray-400 dark:hover:border-gray-400 w-8 h-8 justify-center flex items-center cursor-pointer duration-200 transition-all hover:font-bold`}
-            >
-                <i className="fas fa-angle-left" />
-            </div>
-        </Link>
+      data-aos='fade-down'
+      data-aos-duration='300'
+      data-aos-once='false'
+      data-aos-anchor-placement='top-bottom'
+      className='mt-5 py-3 flex justify-center items-end font-medium text-black hover:shadow-xl duration-200 transition-all bg-white dark:bg-hexo-black-gray dark:text-gray-300 shadow space-x-2'>
+      {/* 上一页 */}
+      <Link
+        href={{
+          pathname:
+            currentPage - 1 === 1
+              ? `${pagePrefix}/`
+              : `${pagePrefix}/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        legacyBehavior>
+        <div
+          rel='prev'
+          className={`${
+            currentPage === 1 ? 'invisible' : 'block'
+          } hover:border-t-2 border-white  hover:border-gray-400 dark:hover:border-gray-400 w-8 h-8 justify-center flex items-center cursor-pointer duration-200 transition-all hover:font-bold`}>
+          <i className='fas fa-angle-left' />
+        </div>
+      </Link>
 
-        {pages}
+      {pages}
 
-        {/* 下一页 */}
-        <Link
-          href={{
-            pathname: `${pagePrefix}/page/${currentPage + 1}`,
-            query: router.query.s ? { s: router.query.s } : {}
-          }}
-          passHref
-          legacyBehavior>
-            <div
-                rel="next"
-                className={`${+showNext ? 'block' : 'invisible'
-                    } hover:border-t-2 border-white  hover:border-gray-400 dark:hover:border-gray-400 w-8 h-8 justify-center flex items-center cursor-pointer duration-200 transition-all hover:font-bold`}
-            >
-                <i className="fas fa-angle-right" />
-            </div>
-        </Link>
+      {/* 下一页 */}
+      <Link
+        href={{
+          pathname: `${pagePrefix}/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        legacyBehavior>
+        <div
+          rel='next'
+          className={`${
+            +showNext ? 'block' : 'invisible'
+          } hover:border-t-2 border-white  hover:border-gray-400 dark:hover:border-gray-400 w-8 h-8 justify-center flex items-center cursor-pointer duration-200 transition-all hover:font-bold`}>
+          <i className='fas fa-angle-right' />
+        </div>
+      </Link>
     </div>
   )
 }
 
-function getPageElement(pagePrefix, page, currentPage) {
-  return (
-    (<Link
-      href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
-      key={page}
-      passHref
-      className={
-          (page + '' === currentPage + ''
-            ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white '
-            : 'hover:border-t-2 duration-200 transition-all border-white hover:border-gray-400 ') +
-          ' border-white  dark:hover:border-gray-400 cursor-pointer w-8 h-8 justify-center flex items-center font-light hover:font-bold'
-      }>
-
-      {page}
-
-    </Link>)
-  )
-}
+/**
+ * 生成分页按钮组
+ * @param {*} pagePrefix
+ * @param {*} page
+ * @param {*} currentPage
+ * @param {*} totalPage
+ * @returns
+ */
 function generatePages(pagePrefix, page, currentPage, totalPage) {
   const pages = []
   const groupCount = 7 // 最多显示页签数
@@ -100,7 +95,11 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
       startPage = totalPage - dynamicGroupCount
     }
     if (startPage > 2) {
-      pages.push(<div key={-1} className='select-none'>... </div>)
+      pages.push(
+        <div key={-1} className='select-none'>
+          ...{' '}
+        </div>
+      )
     }
 
     for (let i = 0; i < dynamicGroupCount; i++) {
@@ -110,11 +109,39 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
     }
 
     if (startPage + dynamicGroupCount < totalPage) {
-      pages.push(<div key={-2} className='select-none'>... </div>)
+      pages.push(
+        <div key={-2} className='select-none'>
+          ...{' '}
+        </div>
+      )
     }
 
     pages.push(getPageElement(pagePrefix, totalPage, page))
   }
   return pages
 }
+/**
+ * 生成分页按钮对象
+ * @param {*} pagePrefix
+ * @param {*} page
+ * @param {*} currentPage
+ * @returns
+ */
+function getPageElement(pagePrefix, page, currentPage) {
+  return (
+    <Link
+      href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
+      key={page}
+      passHref
+      className={
+        (page + '' === currentPage + ''
+          ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white '
+          : 'hover:border-t-2 duration-200 transition-all border-white hover:border-gray-400 ') +
+        ' border-white  dark:hover:border-gray-400 cursor-pointer w-8 h-8 justify-center flex items-center font-light hover:font-bold'
+      }>
+      {page}
+    </Link>
+  )
+}
+
 export default PaginationNumber
diff --git a/themes/next/components/SocialButton.js b/themes/next/components/SocialButton.js
index 6da30787..8ade39ea 100644
--- a/themes/next/components/SocialButton.js
+++ b/themes/next/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 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'>
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {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>}
-      {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>}
+  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'>
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {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>
+        )}
+        {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>
     </div>
-  </div>
+  )
 }
 export default SocialButton
diff --git a/themes/next/style.js b/themes/next/style.js
index daf6af46..41746f9a 100644
--- a/themes/next/style.js
+++ b/themes/next/style.js
@@ -5,35 +5,31 @@
  * @returns
  */
 const Style = () => {
-  return <style jsx global>{`
-
-    // 底色
-    body{
-        background-color: #eeedee
-    }
-    .dark body{
+  return (
+    <style jsx global>{`
+      // 底色
+      body {
+        background-color: #eeedee;
+      }
+      .dark body {
         background-color: black;
-    }
+      }
 
-    .article-padding {
-      padding: 40px;
-    }
-
-    // 菜单下划线动画
-    #theme-next .menu-link {
-      text-decoration: none;
-      background-image: linear-gradient(#4e80ee, #4e80ee);
-      background-repeat: no-repeat;
-      background-position: bottom center;
-      background-size: 0 2px;
-      transition: background-size 100ms ease-in-out;
-    }
-    #theme-next .menu-link:hover {
-      background-size: 100% 2px;
-      color: #4e80ee;
-    }
-
-  `}</style>
+      // 菜单下划线动画
+      #theme-next .menu-link {
+        text-decoration: none;
+        background-image: linear-gradient(#4e80ee, #4e80ee);
+        background-repeat: no-repeat;
+        background-position: bottom center;
+        background-size: 0 2px;
+        transition: background-size 100ms ease-in-out;
+      }
+      #theme-next .menu-link:hover {
+        background-size: 100% 2px;
+        color: #4e80ee;
+      }
+    `}</style>
+  )
 }
 
 export { Style }
diff --git a/themes/nobelium/components/BlogListPage.js b/themes/nobelium/components/BlogListPage.js
index 0c313ba4..ba1c2b4a 100644
--- a/themes/nobelium/components/BlogListPage.js
+++ b/themes/nobelium/components/BlogListPage.js
@@ -9,7 +9,7 @@ export const BlogListPage = props => {
   const { locale } = useGlobal()
   const router = useRouter()
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const currentPage = +page
 
@@ -19,6 +19,7 @@ export const BlogListPage = props => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   return (
     <div className='w-full md:pr-12 my-6'>
diff --git a/themes/plog/components/BlogListPage.js b/themes/plog/components/BlogListPage.js
index 68790295..658c2377 100644
--- a/themes/plog/components/BlogListPage.js
+++ b/themes/plog/components/BlogListPage.js
@@ -10,7 +10,7 @@ export const BlogListPage = props => {
   const { locale } = useGlobal()
   const router = useRouter()
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const currentPage = +page
 
@@ -20,6 +20,7 @@ export const BlogListPage = props => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   const blogPostRefs = useRef([])
 
diff --git a/themes/plog/components/Modal.js b/themes/plog/components/Modal.js
index 68f66ca8..ba70b50c 100644
--- a/themes/plog/components/Modal.js
+++ b/themes/plog/components/Modal.js
@@ -14,7 +14,9 @@ export default function Modal(props) {
     usePlogGlobal()
   const { siteInfo, posts } = props
   const cancelButtonRef = useRef(null)
-  const img = compressImage(
+  const thumbnail =
+    modalContent?.pageCoverThumbnail || siteInfo?.pageCoverThumbnail
+  const bigImage = compressImage(
     modalContent?.pageCover || siteInfo?.pageCover,
     1200,
     85,
@@ -92,63 +94,74 @@ export default function Modal(props) {
               <Dialog.Panel className='group relative transform overflow-hidden rounded-xl text-left shadow-xl transition-all '>
                 {/* 添加onLoad事件处理函数 */}
                 {/* 添加loading状态 */}
+                {/* <div
+                  className={`bg-hexo-black-gray w-32 h-32 flex justify-center items-center `}> */}
                 <div
-                  className={`bg-hexo-black-gray w-32 h-32 flex justify-center items-center ${loading ? '' : 'hidden'}`}>
-                  <ArrowPath className='w-10 h-10 animate-spin text-gray-200' />
+                  className={`absolute right-0 bottom-0 m-4 ${loading ? '' : 'hidden'}`}>
+                  <ArrowPath
+                    className={`w-10 h-10 animate-spin text-gray-200`}
+                  />
                 </div>
 
+                {/* </div> */}
+
                 <Link href={modalContent?.href}>
                   <LazyImage
                     onLoad={handleImageLoad}
-                    src={img}
+                    placeholderSrc={thumbnail}
+                    src={bigImage}
                     ref={imgRef}
-                    style={{ display: loading ? 'none' : 'block' }}
-                    className={`w-full select-none max-w-7xl max-h-[90vh] shadow-xl ${!loading ? ' animate__animated animate__fadeIn' : ''}`}
+                    className={`w-full select-none max-w-7xl max-h-[90vh] shadow-xl  animate__animated animate__fadeIn'`}
                   />
                 </Link>
 
-                {!loading && (
-                  <>
-                    <div className='absolute bottom-0 left-0 m-4 z-20'>
-                      <div className='flex'>
-                        <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>
-                      <div
+                <>
+                  <div className='absolute bottom-0 left-0 m-4 z-20'>
+                    <div className='flex'>
+                      <h2
                         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>
+                        className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>
+                        {modalContent?.title}
+                      </h2>
+                    </div>
+                    <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>
 
-                      {modalContent?.category && (
-                        <div className='flex'>
-                          <Link
-                            href={`/category/${modalContent?.category}`}
-                            className='text-xs rounded-lg mt-3 px-2 py-1 bg-black bg-opacity-20 text-white hover:bg-blue-700 hover:text-white duration-200'>
-                            {modalContent?.category}
-                          </Link>
-                        </div>
-                      )}
-                    </div>
-                    {/* <div className="z-10 absolute hover:opacity-50 opacity-0 duration-200 transition-opacity w-full top-0 left-0 px-4 h-full items-center flex justify-between"> */}
-                    <div
-                      onClick={prev}
-                      className='z-10 absolute left-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity'>
-                      <ChevronLeft className='cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150' />
-                    </div>
-                    <div
-                      onClick={next}
-                      className='z-10 absolute right-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity'>
-                      <ChevronRight className='cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150' />
-                    </div>
-                    {/* </div> */}
-                  </>
-                )}
+                    {modalContent?.category && (
+                      <div className='flex'>
+                        <Link
+                          href={`/category/${modalContent?.category}`}
+                          className='text-xs rounded-lg mt-3 px-2 py-1 bg-black bg-opacity-20 text-white hover:bg-blue-700 hover:text-white duration-200'>
+                          {modalContent?.category}
+                        </Link>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 卡片的阴影遮罩，为了凸显图片上的文字 */}
+                  <div className='h-1/2 w-full absolute left-0 bottom-0'>
+                    <div className='h-full w-full absolute opacity-80 group-hover:opacity-100 transition-all duration-1000 bg-gradient-to-b from-transparent to-black'></div>
+                  </div>
+
+                  {/* <div className="z-10 absolute hover:opacity-50 opacity-0 duration-200 transition-opacity w-full top-0 left-0 px-4 h-full items-center flex justify-between"> */}
+
+                  <div
+                    onClick={prev}
+                    className='z-10 absolute left-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity'>
+                    <ChevronLeft className='cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150' />
+                  </div>
+                  <div
+                    onClick={next}
+                    className='z-10 absolute right-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity'>
+                    <ChevronRight className='cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150' />
+                  </div>
+                  {/* </div> */}
+                </>
               </Dialog.Panel>
             </Transition.Child>
           </div>
diff --git a/themes/plog/components/PlogModal.js b/themes/plog/components/PlogModal.js
deleted file mode 100644
index f08938f2..00000000
--- a/themes/plog/components/PlogModal.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useState } from 'react'
-import { Dialog } from '@headlessui/react'
-
-/**
- * 图片弹出模态框
- */
-export default function PlogModal(props) {
-  const [isOpen, setIsOpen] = useState(true)
-
-  return (
-    <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
-      <Dialog.Panel>
-        <Dialog.Title>Deactivate account</Dialog.Title>
-        <Dialog.Description>
-          This will permanently deactivate your account
-        </Dialog.Description>
-
-        <p>
-          Are you sure you want to deactivate your account? All of your data
-          will be permanently removed. This action cannot be undone.
-        </p>
-
-        <button onClick={() => setIsOpen(false)}>Deactivate</button>
-        <button onClick={() => setIsOpen(false)}>Cancel</button>
-      </Dialog.Panel>
-    </Dialog>
-  )
-}
diff --git a/themes/plog/components/SocialButton.js b/themes/plog/components/SocialButton.js
index 56cf9490..c1c1f769 100644
--- a/themes/plog/components/SocialButton.js
+++ b/themes/plog/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 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'>
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {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>}
-      {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>}
+  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'>
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {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>
+        )}
+        {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>
     </div>
-  </div>
+  )
 }
 export default SocialButton
diff --git a/themes/simple/components/BlogListPage.js b/themes/simple/components/BlogListPage.js
index 0345185b..f11d2cc2 100644
--- a/themes/simple/components/BlogListPage.js
+++ b/themes/simple/components/BlogListPage.js
@@ -15,7 +15,7 @@ export default function BlogListPage(props) {
   const { page = 1, posts, postCount } = props
   const router = useRouter()
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const currentPage = +page
 
@@ -32,6 +32,7 @@ export default function BlogListPage(props) {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   return (
     <div className='w-full md:pr-8 mb-12'>
diff --git a/themes/simple/components/BlogListScroll.js b/themes/simple/components/BlogListScroll.js
index a1af6c77..2252a995 100644
--- a/themes/simple/components/BlogListScroll.js
+++ b/themes/simple/components/BlogListScroll.js
@@ -13,7 +13,7 @@ export default function BlogListScroll(props) {
   const { posts } = props
   const { locale, NOTION_CONFIG } = useGlobal()
   const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   let hasMore = false
   const postsToShow = posts
     ? Object.assign(posts).slice(0, POSTS_PER_PAGE * page)
diff --git a/themes/simple/components/SocialButton.js b/themes/simple/components/SocialButton.js
index b9def55b..d11f3423 100644
--- a/themes/simple/components/SocialButton.js
+++ b/themes/simple/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {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>}
-      {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>}
+  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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {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>
+        )}
+        {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>
     </div>
-  </div>
+  )
 }
 export default SocialButton
diff --git a/themes/starter/components/SocialButton.js b/themes/starter/components/SocialButton.js
index b9def55b..d11f3423 100644
--- a/themes/starter/components/SocialButton.js
+++ b/themes/starter/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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>}
-      {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(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {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>}
-      {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>}
+  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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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>
+        )}
+        {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(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {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>
+        )}
+        {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>
     </div>
-  </div>
+  )
 }
 export default SocialButton
diff --git a/themes/theme.js b/themes/theme.js
index 8192c96f..388a86f0 100644
--- a/themes/theme.js
+++ b/themes/theme.js
@@ -7,6 +7,20 @@ import { getQueryParam, getQueryVariable, isBrowser } from '../lib/utils'
 // 在next.config.js中扫描所有主题
 export const { THEMES = [] } = getConfig().publicRuntimeConfig
 
+/**
+ * 获取主体配置
+ */
+export const getThemeConfig = async themeQuery => {
+  if (themeQuery && themeQuery !== BLOG.THEME) {
+    const THEME_CONFIG = await import(`@/themes/${themeQuery}`).then(
+      m => m.THEME_CONFIG
+    )
+    return THEME_CONFIG
+  } else {
+    return ThemeComponents?.THEME_CONFIG
+  }
+}
+
 /**
  * 加载全局布局
  * @param {*} themeQuery
@@ -14,7 +28,11 @@ export const { THEMES = [] } = getConfig().publicRuntimeConfig
  */
 export const getGlobalLayoutByTheme = themeQuery => {
   if (themeQuery !== BLOG.THEME) {
-    return dynamic(() => import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]), { ssr: true })
+    return dynamic(
+      () =>
+        import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]),
+      { ssr: true }
+    )
   } else {
     return ThemeComponents[getLayoutNameByPath('-1')]
   }
@@ -36,7 +54,8 @@ export const getLayoutByTheme = ({ router, theme }) => {
             checkThemeDOM()
           }, 500)
 
-          const components = m[getLayoutNameByPath(router.pathname, router.asPath)]
+          const components =
+            m[getLayoutNameByPath(router.pathname, router.asPath)]
           if (components) {
             return components
           } else {
@@ -49,7 +68,8 @@ export const getLayoutByTheme = ({ router, theme }) => {
     setTimeout(() => {
       checkThemeDOM()
     }, 100)
-    const components = ThemeComponents[getLayoutNameByPath(router.pathname, router.asPath)]
+    const components =
+      ThemeComponents[getLayoutNameByPath(router.pathname, router.asPath)]
     if (components) {
       return components
     } else {
@@ -104,6 +124,7 @@ export const initDarkMode = (updateDarkMode, defaultDarkMode) => {
   const userDarkMode = loadDarkModeFromLocalStorage()
   if (userDarkMode) {
     newDarkMode = userDarkMode === 'dark' || userDarkMode === 'true'
+    saveDarkModeToLocalStorage(newDarkMode) // 用户手动的才保存
   }
 
   // 如果站点强制设置默认深色，则优先级改过用
@@ -118,8 +139,9 @@ export const initDarkMode = (updateDarkMode, defaultDarkMode) => {
   }
 
   updateDarkMode(newDarkMode)
-  saveDarkModeToLocalStorage(newDarkMode)
-  document.getElementsByTagName('html')[0].setAttribute('class', newDarkMode ? 'dark' : 'light')
+  document
+    .getElementsByTagName('html')[0]
+    .setAttribute('class', newDarkMode ? 'dark' : 'light')
 }
 
 /**
@@ -133,11 +155,14 @@ export function isPreferDark() {
   if (BLOG.APPEARANCE === 'auto') {
     // 系统深色模式或时间是夜间时，强行置为夜间模式
     const date = new Date()
-    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+    const prefersDarkMode = window.matchMedia(
+      '(prefers-color-scheme: dark)'
+    ).matches
     return (
       prefersDarkMode ||
       (BLOG.APPEARANCE_DARK_TIME &&
-        (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
+        (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] ||
+          date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
     )
   }
   return false
diff --git a/yarn.lock b/yarn.lock
index 66e14e9f..c3b330c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -257,10 +257,10 @@
   dependencies:
     webpack-bundle-analyzer "4.3.0"
 
-"@next/env@13.3.1":
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.3.1.tgz#589707043065f6b71d411ed9b8f1ffd057c0fd4a"
-  integrity sha512-EDtCoedIZC7JlUQ3uaQpSc4aVmyhbLHmQVALg7pFfQgOTjgSnn7mKtA0DiCMkYvvsx6aFb5octGMtWrOtGXW9A==
+"@next/env@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/@next/env/-/env-14.2.4.tgz#5546813dc4f809884a37d257b254a5ce1b0248d7"
+  integrity sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==
 
 "@next/eslint-plugin-next@13.5.6":
   version "13.5.6"
@@ -269,50 +269,50 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-darwin-arm64@13.3.1":
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.1.tgz#2c9719dd10a9cdf63bf50a7576b05dcf78999fe8"
-  integrity sha512-UXPtriEc/pBP8luSLSCZBcbzPeVv+SSjs9cH/KygTbhmACye8/OOXRZO13Z2Wq1G0gLmEAIHQAOuF+vafPd2lw==
+"@next/swc-darwin-arm64@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.4.tgz#da9f04c34a3d5f0b8401ed745768420e4a604036"
+  integrity sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==
 
-"@next/swc-darwin-x64@13.3.1":
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.1.tgz#0be90342c89e53a390ccd9bece15f7f5cd480049"
-  integrity sha512-lT36yYxosCfLtplFzJWgo0hrPu6/do8+msgM7oQkPeohDNdhjtjFUgOOwdSnPublLR6Mo2Ym4P/wl5OANuD2bw==
+"@next/swc-darwin-x64@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.4.tgz#46dedb29ec5503bf171a72a3ecb8aac6e738e9d6"
+  integrity sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==
 
-"@next/swc-linux-arm64-gnu@13.3.1":
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.3.1.tgz#a7353265839f8b8569a346a444dc3ab3770d297e"
-  integrity sha512-wRb76nLWJhonH8s3kxC/1tFguEkeOPayIwe9mkaz1G/yeS3OrjeyKMJsb4+Kdg0zbTo53bNCOl59NNtDM7yyyw==
+"@next/swc-linux-arm64-gnu@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.4.tgz#c9697ab9eb422bd1d7ffd0eb0779cc2aefa9d4a1"
+  integrity sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==
 
-"@next/swc-linux-arm64-musl@13.3.1":
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.3.1.tgz#24552e6102c350e372f83f505a1d93c880551a50"
-  integrity sha512-qz3BzjJRZ16Iq/jrp+pjiYOc0jTjHlfmxQmZk9x/+5uhRP6/eWQSTAPVJ33BMo6oK5O5N4644OgTAbzXzorecg==
+"@next/swc-linux-arm64-musl@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.4.tgz#cbbceb2008571c743b5a310a488d2e166d200a75"
+  integrity sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==
 
-"@next/swc-linux-x64-gnu@13.3.1":
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.1.tgz#5f335a683b6eafa52307b12af97782993b6c45ff"
-  integrity sha512-6mgkLmwlyWlomQmpl21I3hxgqE5INoW4owTlcLpNsd1V4wP+J46BlI/5zV5KWWbzjfncIqzXoeGs5Eg+1GHODA==
+"@next/swc-linux-x64-gnu@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.4.tgz#d79184223f857bacffb92f643cb2943a43632568"
+  integrity sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==
 
-"@next/swc-linux-x64-musl@13.3.1":
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.1.tgz#58e5aad6f97203a0788783f66324456c8f9cdb50"
-  integrity sha512-uqm5sielhQmKJM+qayIhgZv1KlS5pqTdQ99b+Z7hMWryXS96qE0DftTmMZowBcUL6x7s2vSXyH5wPtO1ON7LBg==
+"@next/swc-linux-x64-musl@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.4.tgz#6b6c3e5ac02ca5e63394d280ec8ee607491902df"
+  integrity sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==
 
-"@next/swc-win32-arm64-msvc@13.3.1":
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.3.1.tgz#f8ed1badab57ed4503969758754e6fb0cf326753"
-  integrity sha512-WomIiTj/v3LevltlibNQKmvrOymNRYL+a0dp5R73IwPWN5FvXWwSELN/kiNALig/+T3luc4qHNTyvMCp9L6U5Q==
+"@next/swc-win32-arm64-msvc@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.4.tgz#dbad3906e870dba84c5883d9d4c4838472e0697f"
+  integrity sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==
 
-"@next/swc-win32-ia32-msvc@13.3.1":
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.3.1.tgz#7f599c8975b09ee5527cc49b9e5a4d13be50635a"
-  integrity sha512-M+PoH+0+q658wRUbs285RIaSTYnGBSTdweH/0CdzDgA6Q4rBM0sQs4DHmO3BPP0ltCO/vViIoyG7ks66XmCA5g==
+"@next/swc-win32-ia32-msvc@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.4.tgz#6074529b91ba49132922ce89a2e16d25d2ec235d"
+  integrity sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==
 
-"@next/swc-win32-x64-msvc@13.3.1":
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.3.1.tgz#192d43ab44ebb98bd4f5865d0e1d7ce62703182f"
-  integrity sha512-Sl1F4Vp5Z1rNXWZYqJwMuWRRol4bqOB6+/d7KqkgQ4AcafKPN1PZmpkCoxv4UFHtFNIB7EotnuIhtXu3zScicQ==
+"@next/swc-win32-x64-msvc@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.4.tgz#e65a1c6539a671f97bb86d5183d6e3a1733c29c7"
+  integrity sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -360,11 +360,17 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
   integrity sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==
 
-"@swc/helpers@0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.0.tgz#bf1d807b60f7290d0ec763feea7ccdeda06e85f1"
-  integrity sha512-SjY/p4MmECVVEWspzSRpQEM3sjR17sP8PbGxELWrT+YZMBfiUyt1MRUNjMV23zohwlG2HYtCQOsCwsTHguXkyg==
+"@swc/counter@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.npmmirror.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
+  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
+
+"@swc/helpers@0.5.5":
+  version "0.5.5"
+  resolved "https://registry.npmmirror.com/@swc/helpers/-/helpers-0.5.5.tgz#12689df71bfc9b21c4f4ca00ae55f2f16c8b77c0"
+  integrity sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==
   dependencies:
+    "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
 "@szmarczak/http-timer@^4.0.5":
@@ -990,11 +996,16 @@ can-use-dom@^0.1.0:
   resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
   integrity sha512-ceOhN1DL7Y4O6M0j9ICgmTYziV89WMd96SvSl0REd8PMgrY0B/WBOPoed5S1KUmJqXgUXh8gzSe6E3ae27upsQ==
 
-caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001580:
+caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001580:
   version "1.0.30001583"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001583.tgz#abb2970cc370801dc7e27bf290509dc132cfa390"
   integrity sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==
 
+caniuse-lite@^1.0.30001579:
+  version "1.0.30001634"
+  resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001634.tgz#aa563c8e7aeaf552f7ead60371bc8d803425deaa"
+  integrity sha512-fbBYXQ9q3+yp1q1gBk86tOFs4pyn/yxFm5ZNP18OXJDfA3txImOY9PhfxVggZ4vRHDqoU8NrKU81eN0OtzOgRA==
+
 chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -2026,9 +2037,9 @@ got@^11.8.1:
     p-cancelable "^2.0.0"
     responselike "^2.0.0"
 
-graceful-fs@^4.2.4:
+graceful-fs@^4.2.11, graceful-fs@^4.2.4:
   version "4.2.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  resolved "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
 gzip-size@^6.0.0:
@@ -2736,9 +2747,9 @@ nano-css@^5.6.1:
     stacktrace-js "^2.0.2"
     stylis "^4.3.0"
 
-nanoid@^3.3.4, nanoid@^3.3.7:
+nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
 natural-compare@^1.4.0:
@@ -2754,27 +2765,28 @@ next-sitemap@^1.6.203:
     "@corex/deepmerge" "^2.6.148"
     minimist "^1.2.5"
 
-next@13.3.1:
-  version "13.3.1"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.3.1.tgz#17625f7423db2e059d71b41bd9031756cf2b33bc"
-  integrity sha512-eByWRxPzKHs2oQz1yE41LX35umhz86ZSZ+mYyXBqn2IBi2hyUqxBA88avywdr4uyH+hCJczegGsDGWbzQA5Rqw==
+next@14.2.4:
+  version "14.2.4"
+  resolved "https://registry.npmmirror.com/next/-/next-14.2.4.tgz#ef66c39c71e2d8ad0a3caa0383c8933f4663e4d1"
+  integrity sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==
   dependencies:
-    "@next/env" "13.3.1"
-    "@swc/helpers" "0.5.0"
+    "@next/env" "14.2.4"
+    "@swc/helpers" "0.5.5"
     busboy "1.6.0"
-    caniuse-lite "^1.0.30001406"
-    postcss "8.4.14"
+    caniuse-lite "^1.0.30001579"
+    graceful-fs "^4.2.11"
+    postcss "8.4.31"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "13.3.1"
-    "@next/swc-darwin-x64" "13.3.1"
-    "@next/swc-linux-arm64-gnu" "13.3.1"
-    "@next/swc-linux-arm64-musl" "13.3.1"
-    "@next/swc-linux-x64-gnu" "13.3.1"
-    "@next/swc-linux-x64-musl" "13.3.1"
-    "@next/swc-win32-arm64-msvc" "13.3.1"
-    "@next/swc-win32-ia32-msvc" "13.3.1"
-    "@next/swc-win32-x64-msvc" "13.3.1"
+    "@next/swc-darwin-arm64" "14.2.4"
+    "@next/swc-darwin-x64" "14.2.4"
+    "@next/swc-linux-arm64-gnu" "14.2.4"
+    "@next/swc-linux-arm64-musl" "14.2.4"
+    "@next/swc-linux-x64-gnu" "14.2.4"
+    "@next/swc-linux-x64-musl" "14.2.4"
+    "@next/swc-win32-arm64-msvc" "14.2.4"
+    "@next/swc-win32-ia32-msvc" "14.2.4"
+    "@next/swc-win32-x64-msvc" "14.2.4"
 
 node-releases@^2.0.14:
   version "2.0.14"
@@ -3071,12 +3083,12 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.14:
-  version "8.4.14"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
-  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+postcss@8.4.31:
+  version "8.4.31"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
-    nanoid "^3.3.4"
+    nanoid "^3.3.6"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
@@ -3641,7 +3653,16 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3701,7 +3722,14 @@ string.prototype.trimstart@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==