diff --git a/blog.config.js b/blog.config.js
index acea5a5c..19169747 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -75,6 +75,8 @@ const BLOG = {
   ],
   FONT_AWESOME: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || '/css/all.min.css', // font-awesome 字体图标地址、默认读取本地; 可选 https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css
 
+  CUSTOM_RIGHT_CLICK_CONTEXT_MENU: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || true, // 自定义右键菜单，覆盖系统菜单
+
   // 自定义外部脚本，外部样式
   CUSTOM_EXTERNAL_JS: [''], // e.g. ['http://xx.com/script.js','http://xx.com/script.js']
   CUSTOM_EXTERNAL_CSS: [''], // e.g. ['http://xx.com/style.css','http://xx.com/style.css']
diff --git a/themes/heo/components/CustomContextMenu.js b/components/CustomContextMenu.js
similarity index 81%
rename from themes/heo/components/CustomContextMenu.js
rename to components/CustomContextMenu.js
index de1fcec9..b577c072 100644
--- a/themes/heo/components/CustomContextMenu.js
+++ b/components/CustomContextMenu.js
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState, useRef } from 'react'
 import { useGlobal } from '@/lib/global'
-import { saveDarkModeToCookies } from '@/themes/theme'
+import { saveDarkModeToCookies, THEMES } from '@/themes/theme'
 
 /**
  * 自定义右键菜单
@@ -74,6 +74,16 @@ export default function CustomContextMenu(props) {
     setShow(false)
   }
 
+  /**
+  * 切换主题
+  */
+  function handeChangeTheme() {
+    const randomTheme = THEMES[Math.floor(Math.random() * THEMES.length)] // 从THEMES数组中 随机取一个主题
+    const query = router.query
+    query.theme = randomTheme
+    router.push({ pathname: router.pathname, query })
+  }
+
   function handleChangeDarkMode() {
     const newStatus = !isDarkMode
     saveDarkModeToCookies(newStatus)
@@ -111,12 +121,12 @@ export default function CustomContextMenu(props) {
                     </div>
 
                     <Link href='/category' title={'博客分类'} 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 class="fa-solid fa-square-minus mr-2" />
+                        <i className="fa-solid fa-square-minus mr-2" />
                         <div className='whitespace-nowrap'> 博客分类</div>
                     </Link>
 
                     <Link href='/tag' title={'文章标签'} 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 class="fa-solid fa-tag mr-2" />
+                        <i className="fa-solid fa-tag mr-2" />
                         <div className='whitespace-nowrap'> 文章标签</div>
                     </Link>
 
@@ -128,18 +138,21 @@ export default function CustomContextMenu(props) {
                 <div className='w-full px-2'>
 
                     <div onClick={handleCopyLink} title={'复制地址'} 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 class="fa-solid fa-arrow-up-right-from-square mr-2" />
+                        <i className="fa-solid fa-arrow-up-right-from-square mr-2" />
                         <div className='whitespace-nowrap'> 复制地址</div>
                     </div>
 
                     <div onClick={handleChangeDarkMode} title={'深色模式'} 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 class="fa-regular fa-moon mr-2" />
-                        <div className='whitespace-nowrap'> 深色模式</div>
+                        {isDarkMode ? <i className="fa-regular fa-sun mr-2" /> : <i className="fa-regular fa-moon mr-2" />}
+                        <div className='whitespace-nowrap'> {isDarkMode ? '浅色模式' : '深色模式'}</div>
+                    </div>
+                    <div onClick={handeChangeTheme} title={'切换主题'} 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'> 切换主题</div>
                     </div>
-
                 </div>
 
             </div>
-        </div>
+        </div >
   )
 }
diff --git a/components/ExternalPlugins.js b/components/ExternalPlugins.js
index 867bb32b..c4b62548 100644
--- a/components/ExternalPlugins.js
+++ b/components/ExternalPlugins.js
@@ -29,6 +29,7 @@ const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
 const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false })
 const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr: false })
 const VConsole = dynamic(() => import('@/components/VConsole'), { ssr: false })
+const CustomContextMenu = dynamic(() => import('@/components/CustomContextMenu'), { ssr: false })
 
 /**
  * 各种第三方组件
@@ -53,6 +54,7 @@ const ExternalPlugin = (props) => {
           {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
           {JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...props}/>}
           {JSON.parse(BLOG.RIBBON) && <Ribbon />}
+          {JSON.parse(BLOG.CUSTOM_RIGHT_CLICK_CONTEXT_MENU) && <CustomContextMenu {...props} />}
           <VConsole/>
       </>
 }
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index fc875dae..ab11bab5 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -23,15 +23,17 @@ const ThemeSwitch = () => {
 
   return (<>
         <Draggable>
-            <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed dark:text-white bg-gray-50 dark:bg-black z-50 border dark:border-gray-800 rounded-2xl shadow-card">
-                <div className="p-3 flex items-center text-sm">
-                    <DarkModeButton className='mr-2'/>
-                    <select value={theme} onChange={onSelectChange} name="cars" className='appearance-none outline-none dark:text-white bg-gray-50 dark:bg-black uppercase cursor-pointer'>
-                        {THEMES?.map(t => {
-                          return <option key={t} value={t}>{t}</option>
-                        })}
-                    </select>
-                    <i class="fa-solid fa-paintbrush pl-2"></i>
+            <div id="draggableBox" style={{ left: '10px', top: '80vh' }} className="fixed z-50 dark:text-white bg-gray-50 dark:bg-black rounded-2xl drop-shadow-lg">
+                <div className="p-3 w-full flex items-center text-sm group duration-200 transition-all">
+                    <DarkModeButton className='mr-2' />
+                    <div className='w-0 group-hover:w-20 transition-all duration-200 overflow-hidden'>
+                        <select value={theme} onChange={onSelectChange} name="themes" className='appearance-none outline-none dark:text-white bg-gray-50 dark:bg-black uppercase cursor-pointer'>
+                            {THEMES?.map(t => {
+                              return <option key={t} value={t}>{t}</option>
+                            })}
+                        </select>
+                    </div>
+                    <i className="fa-solid fa-palette pl-2"></i>
                 </div>
             </div>
         </Draggable>
diff --git a/pages/_app.js b/pages/_app.js
index e0d11382..38e16c99 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 
-// import 'animate.css'
+import 'animate.css'
 import '@/styles/globals.css'
 import '@/styles/nprogress.css'
 import '@/styles/utility-patterns.css'
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index d3387d0e..2b034195 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -172,7 +172,7 @@ const LayoutIndex = (props) => {
           const article = document.getElementById('notion-article')
           if (!article) {
             console.log('请检查您的Notion数据库中是否包含此slug页面： ', CONFIG.INDEX_PAGE)
-            const containerInner = document.getElementById('container-inner')
+            const containerInner = document.querySelector('#theme-gitbook #container-inner')
             const newHTML = `<h1 class="text-3xl pt-12  dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${CONFIG.INDEX_PAGE}的文章</div></blockquote>`
             containerInner?.insertAdjacentHTML('afterbegin', newHTML)
           }
diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
index d89aab5c..add783ea 100644
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -12,7 +12,8 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
   return (
         <div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
-            <div className={'bg-white dark:bg-[#1e1e1e] cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full  dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl  '}>
+
+            <div className={'animate__animated animate__fadeIn animate__fast border bg-white dark:bg-[#1e1e1e] cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'}>
 
                 {/* 图片封面 */}
                 {showPageCover && (
diff --git a/themes/heo/components/Catalog.js b/themes/heo/components/Catalog.js
index 115ddd0c..627e3ef3 100644
--- a/themes/heo/components/Catalog.js
+++ b/themes/heo/components/Catalog.js
@@ -1,7 +1,6 @@
 import React, { useRef } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
-import Progress from './Progress'
 import { useGlobal } from '@/lib/global'
 
 /**
@@ -63,9 +62,6 @@ const Catalog = ({ toc }) => {
 
   return <div className='px-3 py-1 dark:text-white text-black'>
     <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <div className='w-full py-3'>
-      <Progress />
-    </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) => {
diff --git a/themes/heo/components/FloatTocButton.js b/themes/heo/components/FloatTocButton.js
index e96d2a07..337a6ed5 100644
--- a/themes/heo/components/FloatTocButton.js
+++ b/themes/heo/components/FloatTocButton.js
@@ -20,7 +20,7 @@ export default function FloatTocButton(props) {
 
   return (<div className='fixed lg:hidden right-4 bottom-24'>
         {/* 按钮 */}
-        <div onClick={toggleToc} className={'select-none hover:scale-110 transform duration-200 text-black dark:text-gray-200 w-10 h-10 rounded-full bg-white drop-shadow-lg flex justify-center items-center dark:bg-hexo-black-gray py-2 px-2'}>
+        <div onClick={toggleToc} className={'w-11 h-11 select-none hover:scale-110 transform duration-200 text-black dark:text-gray-200 rounded-full bg-white drop-shadow-lg flex justify-center items-center dark:bg-hexo-black-gray py-2 px-2'}>
             <button id="toc-button" className={'fa-list-ol cursor-pointer fas'} />
         </div>
 
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
index 0b9d405a..85ca9fb9 100644
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -2,12 +2,11 @@
 
 import BLOG from '@/blog.config'
 import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons'
+
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
 import CONFIG from '../config'
-import { useGlobal } from '@/lib/global'
-import { Transition } from '@headlessui/react'
 
 /**
  * 顶部英雄区
@@ -17,28 +16,18 @@ import { Transition } from '@headlessui/react'
  * @returns
  */
 const Hero = props => {
-  const { onLoading } = useGlobal()
   return (
         <div id="hero-wrapper" className='recent-top-post-group w-full overflow-hidden select-none px-5 mb-4'>
-            <Transition
-                show={!onLoading}
-                appear={true}
-                enter="transition ease-in-out duration-700 transform order-first"
-                enterFrom="opacity-0 -translate-y-16"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in-out duration-300 transform"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 translate-y-16"
-                unmount={false}
-            >
-                <hero id="hero" style={{ zIndex: 1 }} className="recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative space-x-3" >
-                    {/* 左侧banner组 */}
-                    <BannerGroup {...props} />
 
-                    {/* 右侧置顶文章组 */}
-                    <TopGroup {...props} />
-                </hero>
-            </Transition>
+            <hero id="hero" style={{ zIndex: 1 }} className={'animate__animated animate__fadeIn animate__fast recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative space-x-3'} >
+
+                {/* 左侧banner组 */}
+                <BannerGroup {...props} />
+
+                {/* 右侧置顶文章组 */}
+                <TopGroup {...props} />
+
+            </hero>
         </div>
   )
 }
@@ -76,7 +65,7 @@ function Banner(props) {
   return <div id='banners' onClick={handleClickBanner} className="group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative hidden xl:flex xl:flex-col overflow-hidden">
 
         <div id='banner-title' className='flex flex-col absolute top-10 left-10'>
-            <div className='text-4xl font-bold mb-3  dark:text-white'>{CONFIG.HERO_TITLE_1}<br/>{CONFIG.HERO_TITLE_2}</div>
+            <div className='text-4xl font-bold mb-3  dark:text-white'>{CONFIG.HERO_TITLE_1}<br />{CONFIG.HERO_TITLE_2}</div>
             <div className='text-xs text-gray-600  dark:text-gray-200'>{CONFIG.HERO_TITLE_3}</div>
         </div>
 
@@ -103,19 +92,17 @@ function TagsGroupBar() {
   return (
         <div className="tags-group-all flex -rotate-[30deg]">
             <div className="tags-group-wrapper flex flex-nowrap absolute top-16">
-                {groupIcons?.map(g => {
-                  return (<>
-                        <div className="tags-group-icon-pair ml-6 select-none">
-                            <div style={{ background: g.color_1 }} className={'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
-                                {/* eslint-disable-next-line @next/next/no-img-element */}
-                                <img src={g.img_1} title={g.title_1} className='w-2/3' />
-                            </div>
-                            <div style={{ background: g.color_2 }} className={'tags-group-icon  mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
-                                {/* eslint-disable-next-line @next/next/no-img-element */}
-                                <img src={g.img_2} title={g.title_2} className='w-2/3' />
-                            </div>
+                {groupIcons?.map((g, index) => {
+                  return (<div key={index} className="tags-group-icon-pair ml-6 select-none">
+                        <div style={{ background: g.color_1 }} className={'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img src={g.img_1} title={g.title_1} className='w-2/3' />
                         </div>
-                    </>)
+                        <div style={{ background: g.color_2 }} className={'tags-group-icon  mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img src={g.img_2} title={g.title_2} className='w-2/3' />
+                        </div>
+                    </div>)
                 })}
             </div>
         </div>
@@ -135,26 +122,26 @@ function GroupMenu() {
                     <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'>
-                    <i class="fa-solid fa-star text-4xl"></i>
+                    <i className="fa-solid fa-star text-4xl"></i>
                 </div>
             </Link>
             <Link href={CONFIG.HERO_CATEGORY_2?.url} className="group relative overflow-hidden bg-gradient-to-r from-red-500 to-yellow-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
                 <div className="font-bold text-lg pl-5 relative -mt-2">
-                {CONFIG.HERO_CATEGORY_2?.title}
+                    {CONFIG.HERO_CATEGORY_2?.title}
                     <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
                 </div>
                 <div className='absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
-                    <i class="fa-solid fa-fire-flame-curved text-4xl"></i>
+                    <i className="fa-solid fa-fire-flame-curved text-4xl"></i>
                 </div>
             </Link>
             {/* 第三个标签在小屏上不显示 */}
             <Link href={CONFIG.HERO_CATEGORY_3?.url} className="group relative overflow-hidden bg-gradient-to-r from-teal-300 to-cyan-300 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
                 <div className="font-bold text-lg pl-5 relative -mt-2">
-                {CONFIG.HERO_CATEGORY_3?.title}
+                    {CONFIG.HERO_CATEGORY_3?.title}
                     <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
                 </div>
                 <div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
-                    <i class="fa-solid fa-book-bookmark text-4xl "></i>
+                    <i className="fa-solid fa-book-bookmark text-4xl "></i>
                 </div>
 
             </Link>
@@ -204,8 +191,8 @@ function TodayCard({ cRef }) {
   const [isCoverUp, setIsCoverUp] = useState(true)
 
   /**
-     * 外部可以调用此方法
-     */
+       * 外部可以调用此方法
+       */
   useImperativeHandle(cRef, () => {
     return {
       coverUp: () => {
@@ -215,18 +202,18 @@ function TodayCard({ cRef }) {
   })
 
   /**
-     * 点击更多
-     * @param {*} e
-     */
+       * 点击更多
+       * @param {*} e
+       */
   function handleClickMore(e) {
     e.stopPropagation()
     setIsCoverUp(false)
   }
 
   /**
-     * 点击卡片跳转的链接
-     * @param {*} e
-     */
+       * 点击卡片跳转的链接
+       * @param {*} e
+       */
   function handleCardClick(e) {
     router.push('https://tangly1024.com')
   }
diff --git a/themes/heo/components/MenuItemCollapse.js b/themes/heo/components/MenuItemCollapse.js
index d12e9ffe..c69ca231 100644
--- a/themes/heo/components/MenuItemCollapse.js
+++ b/themes/heo/components/MenuItemCollapse.js
@@ -26,7 +26,7 @@ export const MenuItemCollapse = ({ link }) => {
   }
 
   return <>
-        <div className='w-full px-2 py-3 border rounded-xl text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
+        <div className='select-none w-full px-2 py-2 border rounded-xl text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
             {!hasSubMenu && <Link
                 href={link?.to}
                 className="font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
@@ -36,7 +36,7 @@ export const MenuItemCollapse = ({ link }) => {
                 onClick={hasSubMenu ? toggleOpenSubMenu : null}
                 className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
                 <span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
-                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
+                <i className={`select-none px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
             </div>}
         </div>
 
diff --git a/themes/heo/components/NoticeBar.js b/themes/heo/components/NoticeBar.js
index 302c28b1..c7453036 100644
--- a/themes/heo/components/NoticeBar.js
+++ b/themes/heo/components/NoticeBar.js
@@ -15,7 +15,7 @@ export function NoticeBar() {
 
   return (
         <notice className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
-            <div className="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">
+            <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} />
diff --git a/themes/heo/components/TagGroups.js b/themes/heo/components/TagGroups.js
index 820c802f..7c8ae0e6 100644
--- a/themes/heo/components/TagGroups.js
+++ b/themes/heo/components/TagGroups.js
@@ -12,17 +12,16 @@ const TagGroups = ({ tags, className }) => {
   return (
         <div id='tags-group' className='dark:border-gray-700 space-y-2'>
             {
-                tags.map(tag => {
-                  return <>
-                        <Link passHref
-                            key={tag}
-                            href={`/tag/${encodeURIComponent(tag.name)}`}
-                            className={'cursor-pointer inline-block  whitespace-nowrap'}>
-                            <div className={`${className || ''}  flex items-center 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>
+                tags.map((tag, index) => {
+                  return <Link passHref
+                        key={index}
+                        href={`/tag/${encodeURIComponent(tag.name)}`}
+                        className={'cursor-pointer inline-block  whitespace-nowrap'}>
+                        <div className={`${className || ''}  flex items-center 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></>
+                    </Link>
                 })
             }
         </div>
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 49237526..27cf51aa 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -31,7 +31,6 @@ import { NoticeBar } from './components/NoticeBar'
 import { HashTag } from '@/components/HeroIcons'
 import LatestPostsGroup from './components/LatestPostsGroup'
 import FloatTocButton from './components/FloatTocButton'
-import CustomContextMenu from './components/CustomContextMenu'
 
 /**
  * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -71,7 +70,7 @@ const LayoutBase = props => {
                         leave="transition ease-in-out duration-300 transform"
                         leaveFrom="opacity-100"
                         leaveTo="opacity-0 -translate-y-16"
-                        className={`w-full h-auto px-5 lg:px-0 ${className || ''}`}
+                        className={`w-full h-auto ${className || ''}`}
                         unmount={false}
                     >
                         {/* 主区上部嵌入 */}
@@ -98,9 +97,6 @@ const LayoutBase = props => {
                 </div>
             </main>
 
-            {/* 自定义右键菜单 */}
-            <CustomContextMenu {...props}/>
-
             {/* 页脚 */}
             <Footer title={siteInfo?.title || BLOG.TITLE} />
         </div>
@@ -126,9 +122,11 @@ const LayoutIndex = (props) => {
   const slotRight = <SideRight {...props} />
 
   return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
-        {/* 文章分类条 */}
-        <CategoryBar {...props} />
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        <div id='post-outer-wrapper' className='px-5 lg:px-0'>
+            {/* 文章分类条 */}
+            <CategoryBar {...props} />
+            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        </div>
     </LayoutBase>
 }
 
@@ -146,9 +144,11 @@ const LayoutPostList = (props) => {
     </header>
 
   return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
-        {/* 文章分类条 */}
-        <CategoryBar {...props} />
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        <div id='post-outer-wrapper' className='px-5  lg:px-0'>
+            {/* 文章分类条 */}
+            <CategoryBar {...props} />
+            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        </div>
     </LayoutBase>
 }
 
@@ -187,9 +187,11 @@ const LayoutSearch = props => {
 
   return (
         <LayoutBase {...props} currentSearch={currentSearch} headerSlot={headerSlot}>
-            {!currentSearch
-              ? <SearchNav {...props} />
-              : <div id="posts-wrapper"> {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}  </div>}
+            <div id='post-outer-wrapper' className='px-5  lg:px-0'>
+                {!currentSearch
+                  ? <SearchNav {...props} />
+                  : <div id="posts-wrapper"> {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}  </div>}
+            </div>
         </LayoutBase>
   )
 }
@@ -261,7 +263,7 @@ const LayoutSlug = props => {
 
                         {/* 分享 */}
                         <ShareBar post={post} />
-                        {post?.type === 'Post' && <>
+                        {post?.type === 'Post' && <div className='px-5'>
 
                             {/* 版权 */}
                             <ArticleCopyright {...props} />
@@ -269,20 +271,20 @@ const LayoutSlug = props => {
                             <ArticleRecommend {...props} />
                             {/* 上一篇\下一篇文章 */}
                             <ArticleAdjacent {...props} />
-                        </>}
+                        </div>}
 
                     </article>
 
-                    <div className='pt-4 border-dashed'></div>
+                    <hr className='my-4 border-dashed' />
 
                     {/* 评论互动 */}
-                    <div className="duration-200 overflow-x-auto px-3">
+                    <div className="duration-200 overflow-x-auto px-5">
                         <div className='text-2xl dark:text-white'><i className='fas fa-comment mr-1' />{locale.COMMON.COMMENTS}</div>
                         <Comment frontMatter={post} className='' />
                     </div>
                 </div>}
             </div>
-            <FloatTocButton {...props}/>
+            <FloatTocButton {...props} />
 
         </LayoutBase>
   )
@@ -326,7 +328,7 @@ const Layout404 = props => {
                     >
 
                         {/* 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 border rounded-2xl'>
+                        <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 border rounded-3xl'>
                             {/* 左侧动图 */}
                             {/* eslint-disable-next-line @next/next/no-img-element */}
                             <img className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></img>
@@ -350,8 +352,6 @@ const Layout404 = props => {
                 </div>
             </main>
 
-            {/* 自定义右键菜单 */}
-            <CustomContextMenu {...props}/>
         </div>
   )
 }
@@ -371,23 +371,25 @@ const LayoutCategoryIndex = props => {
 
   return (
         <LayoutBase {...props} className='mt-8' headerSlot={headerSlot}>
-            <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 space-x-5 m-10 justify-center">
-                {categoryOptions.map(category => {
-                  return (
-                        <Link key={category.name} href={`/category/${category.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'} />
-                                {category.name}
-                                <div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
-                                    {category.count}
+            <div id='category-outer-wrapper' className='px-5 lg: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>
-                            </div>
-                        </Link>
-                  )
-                })}
+                            </Link>
+                      )
+                    })}
+                </div>
             </div>
         </LayoutBase>
   )
@@ -403,23 +405,25 @@ const LayoutTagIndex = props => {
   const { locale } = useGlobal()
   return (
         <LayoutBase {...props} className='mt-8'>
-            <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 id='tag-outer-wrapper' className='px-5  lg: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>
-                            </div>
-                        </Link>
-                  )
-                })}
+                            </Link>
+                      )
+                    })}
+                </div>
             </div>
         </LayoutBase>
   )
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
index d42831eb..26bb631b 100644
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -69,7 +69,7 @@ const LayoutBase = props => {
             </Transition>
 
             {/* 主区块 */}
-            <main id="wrapper" className={`${CONFIG.HOME_BANNER_ENABLE ? '' : 'pt-16'} bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative`}>
+            <main id="wrapper" className={`${CONFIG.HOME_BANNER_ENABLE ? '' : 'pt-16'} overflow-x-hidden bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative`}>
                 <div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
                     <div className={`${className || ''} w-full max-w-4xl h-full `}>