diff --git a/lib/db/getSiteData.js b/lib/db/getSiteData.js
index 6834a61d..37bd6d45 100755
--- a/lib/db/getSiteData.js
+++ b/lib/db/getSiteData.js
@@ -295,6 +295,7 @@ export function getNavPages({ allPages }) {
     tags: item.tags || null,
     summary: item.summary || null,
     slug: item.slug,
+    href: item.href,
     pageIcon: item.pageIcon || '',
     lastEditedDate: item.lastEditedDate,
     publishDate: item.publishDate,
diff --git a/themes/gitbook/components/ArticleAround.js b/themes/gitbook/components/ArticleAround.js
index 95b6f83f..58069682 100644
--- a/themes/gitbook/components/ArticleAround.js
+++ b/themes/gitbook/components/ArticleAround.js
@@ -5,27 +5,25 @@ import Link from 'next/link'
  * @param {prev,next} param0
  * @returns
  */
-export default function ArticleAround ({ prev, next }) {
+export default function ArticleAround({ prev, next }) {
   if (!prev || !next) {
     return <></>
   }
   return (
     <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
       <Link
-        href={`/${prev.slug}`}
+        href={prev.href}
         passHref
         className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
-
-        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
-
+        <i className='mr-1 fas fa-angle-double-left' />
+        {prev.title}
       </Link>
       <Link
-        href={`/${next.slug}`}
+        href={next.href}
         passHref
         className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
         {next.title}
         <i className='ml-1 my-1 fas fa-angle-double-right' />
-
       </Link>
     </section>
   )
diff --git a/themes/gitbook/components/BlogArchiveItem.js b/themes/gitbook/components/BlogArchiveItem.js
index ad9ac831..7d7b5a1c 100644
--- a/themes/gitbook/components/BlogArchiveItem.js
+++ b/themes/gitbook/components/BlogArchiveItem.js
@@ -1,6 +1,4 @@
-import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
 
 /**
  * 归档分组
@@ -9,31 +7,30 @@ import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
  */
 export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
   return (
-        <div key={archiveTitle}>
-            <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
-                {archiveTitle}
-            </div>
-            <ul>
-                {archivePosts[archiveTitle]?.map(post => {
-                  const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
-
-                  return <li key={post.id}
-                        className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
-                    >
-                        <div id={post?.publishDay}>
-                            <span className="text-gray-400">
-                                {post.date?.start_date}
-                            </span>{' '}
-                            &nbsp;
-
-                            <Link passHref href={url}
-                                className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
-                                {post.title}
-                            </Link>
-                        </div>
-                    </li>
-                })}
-            </ul>
-        </div>
+    <div key={archiveTitle}>
+      <div id={archiveTitle} className='pt-16 pb-4 text-3xl dark:text-gray-300'>
+        {archiveTitle}
+      </div>
+      <ul>
+        {archivePosts[archiveTitle]?.map(post => {
+          return (
+            <li
+              key={post.id}
+              className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500'>
+              <div id={post?.publishDay}>
+                <span className='text-gray-400'>{post.date?.start_date}</span>{' '}
+                &nbsp;
+                <Link
+                  passHref
+                  href={post?.href}
+                  className='dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>
+                  {post.title}
+                </Link>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
   )
 }
diff --git a/themes/gitbook/components/BlogPostCard.js b/themes/gitbook/components/BlogPostCard.js
index 7d288a57..3528512a 100644
--- a/themes/gitbook/components/BlogPostCard.js
+++ b/themes/gitbook/components/BlogPostCard.js
@@ -7,8 +7,7 @@ import CONFIG from '../config'
 
 const BlogPostCard = ({ post, className }) => {
   const router = useRouter()
-  const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
-
+  const currentSelected = router.asPath.split('?')[0] === post?.href
   return (
     <Link href={post?.href} passHref>
       <div
diff --git a/themes/gitbook/components/MenuItemMobileNormal.js b/themes/gitbook/components/MenuItemMobileNormal.js
index e7221365..de16827d 100644
--- a/themes/gitbook/components/MenuItemMobileNormal.js
+++ b/themes/gitbook/components/MenuItemMobileNormal.js
@@ -13,7 +13,7 @@ export const NormalMenu = props => {
 
   return (
     <Link
-      key={`${link.slug}`}
+      key={link?.href}
       title={link.name}
       href={link.href}
       className={
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index 68940b59..d70e152e 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -68,6 +68,7 @@ function getNavPagesWithLatest(allNavPages, latestPosts, post) {
       tags: item.tags || null,
       summary: item.summary || null,
       slug: item.slug,
+      href: item.href,
       pageIcon: item.pageIcon || '',
       lastEditedDate: item.lastEditedDate
     }
diff --git a/themes/heo/components/MenuGroupCard.js b/themes/heo/components/MenuGroupCard.js
index 8f5f37a4..e9810411 100644
--- a/themes/heo/components/MenuGroupCard.js
+++ b/themes/heo/components/MenuGroupCard.js
@@ -15,19 +15,19 @@ const MenuGroupCard = props => {
   const links = [
     {
       name: locale.COMMON.ARTICLE,
-      to: '/archive',
+      href: '/archive',
       slot: archiveSlot,
       show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG)
     },
     {
       name: locale.COMMON.CATEGORY,
-      to: '/category',
+      href: '/category',
       slot: categorySlot,
       show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG)
     },
     {
       name: locale.COMMON.TAGS,
-      to: '/tag',
+      href: '/tag',
       slot: tagSlot,
       show: siteConfig('HEO_MENU_TAG', null, CONFIG)
     }
@@ -40,8 +40,8 @@ const MenuGroupCard = props => {
           return (
             <div key={index} className=''>
               <Link
-                title={link.to}
-                href={link.to}
+                title={link.href}
+                href={link.href}
                 target={link?.target}
                 className={
                   'w-full flex items-center justify-between py-1 hover:scale-105 duration-200 transform dark:hover:text-indigo-400 hover:text-indigo-600 px-2 cursor-pointer'
diff --git a/themes/heo/components/MenuItemCollapse.js b/themes/heo/components/MenuItemCollapse.js
index 3de68ec6..f0f9486b 100644
--- a/themes/heo/components/MenuItemCollapse.js
+++ b/themes/heo/components/MenuItemCollapse.js
@@ -32,7 +32,7 @@ export const MenuItemCollapse = ({ link }) => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className='font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest'>
             <span className=' transition-all items-center duration-200'>
@@ -63,7 +63,7 @@ export const MenuItemCollapse = ({ link }) => {
               <div
                 key={index}
                 className='dark:bg-black dark:text-gray-200 text-left px-3 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm ml-4 whitespace-nowrap'>
                     {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
                     {sLink.title}
diff --git a/themes/heo/components/MenuItemDrop.js b/themes/heo/components/MenuItemDrop.js
index 076c22a2..2e6929a7 100644
--- a/themes/heo/components/MenuItemDrop.js
+++ b/themes/heo/components/MenuItemDrop.js
@@ -17,7 +17,7 @@ export const MenuItemDrop = ({ link }) => {
       {!hasSubMenu && (
         <Link
           target={link?.target}
-          href={link?.to}
+          href={link?.href}
           className=' hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest'>
           {link?.icon && <i className={link?.icon} />} {link?.name}
         </Link>
@@ -42,7 +42,7 @@ export const MenuItemDrop = ({ link }) => {
               <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'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
diff --git a/themes/heo/components/MenuListSide.js b/themes/heo/components/MenuListSide.js
index fa6d42a1..5716d5b8 100644
--- a/themes/heo/components/MenuListSide.js
+++ b/themes/heo/components/MenuListSide.js
@@ -1,17 +1,37 @@
-import { useGlobal } from '@/lib/global'
 import { siteConfig } from '@/lib/config'
-import { MenuItemCollapse } from './MenuItemCollapse'
+import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
+import { MenuItemCollapse } from './MenuItemCollapse'
 
-export const MenuListSide = (props) => {
+export const MenuListSide = props => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEO_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEO_MENU_TAG', null, CONFIG) }
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('HEO_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('HEO_MENU_TAG', null, CONFIG)
+    }
   ]
 
   if (customNav) {
@@ -28,8 +48,10 @@ export const MenuListSide = (props) => {
   }
 
   return (
-        <nav className='flex-col space-y-2'>
-            {links?.map((link, index) => <MenuItemCollapse key={index} link={link} />)}
-        </nav>
+    <nav className='flex-col space-y-2'>
+      {links?.map((link, index) => (
+        <MenuItemCollapse key={index} link={link} />
+      ))}
+    </nav>
   )
 }
diff --git a/themes/heo/components/MenuListTop.js b/themes/heo/components/MenuListTop.js
index 74d116a5..b8e36dee 100644
--- a/themes/heo/components/MenuListTop.js
+++ b/themes/heo/components/MenuListTop.js
@@ -1,16 +1,34 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 
-export const MenuListTop = (props) => {
+export const MenuListTop = props => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: siteConfig('HEO_MENU_INDEX', null, CONFIG) },
-    { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEO_MENU_SEARCH', null, CONFIG) },
-    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) }
+    {
+      id: 1,
+      icon: 'fa-solid fa-house',
+      name: locale.NAV.INDEX,
+      href: '/',
+      show: siteConfig('HEO_MENU_INDEX', null, CONFIG)
+    },
+    {
+      id: 2,
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('HEO_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      id: 3,
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG)
+    }
   ]
 
   if (customNav) {
@@ -26,9 +44,16 @@ export const MenuListTop = (props) => {
     return null
   }
 
-  return (<>
-        <nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
-            {links?.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
-        </nav>
-    </>)
+  return (
+    <>
+      <nav
+        id='nav-mobile'
+        className='leading-8 justify-center font-light w-full flex'>
+        {links?.map(
+          (link, index) =>
+            link && link.show && <MenuItemDrop key={index} link={link} />
+        )}
+      </nav>
+    </>
+  )
 }
diff --git a/themes/hexo/components/MenuGroupCard.js b/themes/hexo/components/MenuGroupCard.js
index 3753d31b..de0368e2 100644
--- a/themes/hexo/components/MenuGroupCard.js
+++ b/themes/hexo/components/MenuGroupCard.js
@@ -15,19 +15,19 @@ const MenuGroupCard = props => {
   const links = [
     {
       name: locale.COMMON.ARTICLE,
-      to: '/archive',
+      href: '/archive',
       slot: archiveSlot,
       show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG)
     },
     {
       name: locale.COMMON.CATEGORY,
-      to: '/category',
+      href: '/category',
       slot: categorySlot,
       show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG)
     },
     {
       name: locale.COMMON.TAGS,
-      to: '/tag',
+      href: '/tag',
       slot: tagSlot,
       show: siteConfig('HEXO_MENU_TAG', null, CONFIG)
     }
@@ -47,9 +47,9 @@ const MenuGroupCard = props => {
         if (link.show) {
           return (
             <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
+              key={`${link.href}`}
+              title={link.href}
+              href={link.href}
               target={link?.target}
               className={
                 'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'
diff --git a/themes/hexo/components/MenuItemCollapse.js b/themes/hexo/components/MenuItemCollapse.js
index 1782ce52..0281388f 100644
--- a/themes/hexo/components/MenuItemCollapse.js
+++ b/themes/hexo/components/MenuItemCollapse.js
@@ -33,7 +33,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className=' font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
             <span className=' transition-all items-center duration-200'>
@@ -64,7 +64,7 @@ export const MenuItemCollapse = props => {
               <div
                 key={index}
                 className='dark:hover:bg-indigo-500 hover:bg-indigo-500 hover:text-white dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 tracking-widest transition-all duration-200  py-3 pr-6'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm ml-4 whitespace-nowrap'>
                     {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
                     {sLink.title}
diff --git a/themes/hexo/components/MenuItemDrop.js b/themes/hexo/components/MenuItemDrop.js
index 18ea74b6..7e1896d7 100644
--- a/themes/hexo/components/MenuItemDrop.js
+++ b/themes/hexo/components/MenuItemDrop.js
@@ -19,7 +19,7 @@ export const MenuItemDrop = ({ link }) => {
       onMouseOut={() => changeShow(false)}>
       {!hasSubMenu && (
         <Link
-          href={link?.to}
+          href={link?.href}
           target={link?.target}
           className=' menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
           {link?.icon && <i className={link?.icon} />} {link?.name}
@@ -47,7 +47,7 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='cursor-pointer hover:bg-indigo-500 hover:text-white tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
diff --git a/themes/hexo/components/MenuListSide.js b/themes/hexo/components/MenuListSide.js
index ab0b4278..7d967d06 100644
--- a/themes/hexo/components/MenuListSide.js
+++ b/themes/hexo/components/MenuListSide.js
@@ -15,25 +15,25 @@ export const MenuListSide = props => {
     {
       icon: 'fas fa-archive',
       name: locale.NAV.ARCHIVE,
-      to: '/archive',
+      href: '/archive',
       show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG)
     },
     {
       icon: 'fas fa-search',
       name: locale.NAV.SEARCH,
-      to: '/search',
+      href: '/search',
       show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG)
     },
     {
       icon: 'fas fa-folder',
       name: locale.COMMON.CATEGORY,
-      to: '/category',
+      href: '/category',
       show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG)
     },
     {
       icon: 'fas fa-tag',
       name: locale.COMMON.TAGS,
-      to: '/tag',
+      href: '/tag',
       show: siteConfig('HEXO_MENU_TAG', null, CONFIG)
     }
   ]
diff --git a/themes/hexo/components/MenuListTop.js b/themes/hexo/components/MenuListTop.js
index f5d2c9cd..e52f097f 100644
--- a/themes/hexo/components/MenuListTop.js
+++ b/themes/hexo/components/MenuListTop.js
@@ -1,18 +1,36 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 
-export const MenuListTop = (props) => {
+export const MenuListTop = props => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: siteConfig('HEXO_MENU_INDEX', null, CONFIG) },
-    { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG) },
-    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG) }
-    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MENU_CATEGORY', null, CONFIG) },
-    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MENU_TAG', null, CONFIG) }
+    {
+      id: 1,
+      icon: 'fa-solid fa-house',
+      name: locale.NAV.INDEX,
+      href: '/',
+      show: siteConfig('HEXO_MENU_INDEX', null, CONFIG)
+    },
+    {
+      id: 2,
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      id: 3,
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG)
+    }
+    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, href: '/category', show: siteConfig('MENU_CATEGORY', null, CONFIG) },
+    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, href: '/tag', show: siteConfig('MENU_TAG', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -34,9 +52,16 @@ export const MenuListTop = (props) => {
     return null
   }
 
-  return (<>
-        <nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
-            {links?.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
-        </nav>
-    </>)
+  return (
+    <>
+      <nav
+        id='nav-mobile'
+        className='leading-8 justify-center font-light w-full flex'>
+        {links?.map(
+          (link, index) =>
+            link && link.show && <MenuItemDrop key={index} link={link} />
+        )}
+      </nav>
+    </>
+  )
 }
diff --git a/themes/matery/components/MenuGroupCard.js b/themes/matery/components/MenuGroupCard.js
index 8c6c43a2..4aafb5d9 100644
--- a/themes/matery/components/MenuGroupCard.js
+++ b/themes/matery/components/MenuGroupCard.js
@@ -13,19 +13,19 @@ const MenuGroupCard = props => {
   const links = [
     {
       name: locale.COMMON.ARTICLE,
-      to: '/archive',
+      href: '/archive',
       slot: archiveSlot,
       show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG)
     },
     {
       name: locale.COMMON.CATEGORY,
-      to: '/category',
+      href: '/category',
       slot: categorySlot,
       show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG)
     },
     {
       name: locale.COMMON.TAGS,
-      to: '/tag',
+      href: '/tag',
       slot: tagSlot,
       show: siteConfig('MATERY_MENU_TAG', null, CONFIG)
     }
@@ -37,9 +37,9 @@ const MenuGroupCard = props => {
         if (link.show) {
           return (
             <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
+              key={`${link.href}`}
+              title={link.href}
+              href={link.href}
               target={link?.target}
               className={
                 'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'
diff --git a/themes/matery/components/MenuItemCollapse.js b/themes/matery/components/MenuItemCollapse.js
index 0094fa86..d1f5017b 100644
--- a/themes/matery/components/MenuItemCollapse.js
+++ b/themes/matery/components/MenuItemCollapse.js
@@ -27,7 +27,7 @@ export const MenuItemCollapse = ({ link }) => {
     return null
   }
 
-  const selected = router.pathname === link.to || router.asPath === link.to
+  const selected = router.pathname === link.href || router.asPath === link.href
 
   return (
     <>
@@ -40,7 +40,7 @@ export const MenuItemCollapse = ({ link }) => {
             : ' text-black dark:text-white ')
         }>
         {!hasSubMenu && (
-          <Link href={link?.to} target={link?.target}>
+          <Link href={link?.href} target={link?.target}>
             <div className='my-auto items-center justify-between flex '>
               {link.icon && (
                 <i className={`${link.icon} w-4 mr-6 text-center`} />
@@ -73,7 +73,7 @@ export const MenuItemCollapse = ({ link }) => {
               <div
                 key={index}
                 className='cursor-pointer whitespace-nowrap dark:text-gray-200  w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100  hover:bg-indigo-500 dark:hover:bg-indigo-500 hover:text-white tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm'>
                     <i className={`${sLink.icon} w-4 mr-3 text-center`} />
                     {sLink.title}
diff --git a/themes/matery/components/MenuItemDrop.js b/themes/matery/components/MenuItemDrop.js
index 93dfe7c6..378b3b14 100644
--- a/themes/matery/components/MenuItemDrop.js
+++ b/themes/matery/components/MenuItemDrop.js
@@ -18,7 +18,7 @@ export const MenuItemDrop = ({ link }) => {
       onMouseOut={() => changeShow(false)}>
       {!hasSubMenu && (
         <Link
-          href={link?.to}
+          href={link?.href}
           target={link?.target}
           className=' menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
           {link?.icon && <i className={link?.icon} />} {link?.name}
@@ -46,7 +46,7 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='cursor-pointer hover:bg-indigo-500 text-gray-900 hover:text-white tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
diff --git a/themes/matery/components/MenuItemNormal.js b/themes/matery/components/MenuItemNormal.js
index b54324ac..0254089b 100644
--- a/themes/matery/components/MenuItemNormal.js
+++ b/themes/matery/components/MenuItemNormal.js
@@ -5,20 +5,24 @@ export const MenuItemNormal = props => {
   const router = useRouter()
 
   const { link } = props
-  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+  const selected = router.pathname === link.href || router.asPath === link.href
 
-  return <Link
-    key={link.to}
-    title={link.to}
-    href={link.to}
-    className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
-     (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
-
-    <div className='my-auto items-center justify-between flex '>
+  return (
+    <Link
+      key={link.href}
+      title={link.href}
+      href={link.href}
+      className={
+        'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+        (selected
+          ? 'bg-indigo-500 text-white '
+          : ' text-black dark:text-white ')
+      }>
+      <div className='my-auto items-center justify-between flex '>
         <i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
-        <div >{link.name}</div>
-    </div>
-    {link.slot}
-
-</Link>
+        <div>{link.name}</div>
+      </div>
+      {link.slot}
+    </Link>
+  )
 }
diff --git a/themes/matery/components/MenuList.js b/themes/matery/components/MenuList.js
index fb16873f..ecd306c1 100644
--- a/themes/matery/components/MenuList.js
+++ b/themes/matery/components/MenuList.js
@@ -1,21 +1,51 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 
-const MenuList = (props) => {
+const MenuList = props => {
   const { postCount, customNav } = props
   const { locale } = useGlobal()
   const router = useRouter()
-  const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
+  const archiveSlot = (
+    <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>
+      {postCount}
+    </div>
+  )
 
   let links = [
-    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MATERY_MENU_TAG', null, CONFIG) },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG) }
+    {
+      icon: 'fas fa-home',
+      name: locale.NAV.INDEX,
+      href: '/' || '/',
+      show: true
+    },
+    {
+      icon: 'fas fa-th',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('MATERY_MENU_TAG', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      slot: archiveSlot,
+      show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG)
+    }
   ]
   if (customNav) {
     links = links.concat(customNav)
@@ -25,21 +55,22 @@ const MenuList = (props) => {
     <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 '>
       {links.map(link => {
         if (link && link.show) {
-          const selected = (router.pathname === link.to) || (router.asPath === link.to)
+          const selected =
+            router.pathname === link.href || router.asPath === link.href
           return (
             <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
-              className={'py-1.5 px-5 text-base justify-between hover:bg-indigo-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
-                (selected ? 'bg-gray-200 text-black' : ' ')}>
-
+              key={`${link.href}`}
+              title={link.href}
+              href={link.href}
+              className={
+                'py-1.5 px-5 text-base justify-between hover:bg-indigo-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+                (selected ? 'bg-gray-200 text-black' : ' ')
+              }>
               <div className='my-auto items-center justify-center flex '>
                 <i className={`${link.icon} w-4 text-center`} />
                 <div className={'ml-4'}>{link.name}</div>
               </div>
               {link.slot}
-
             </Link>
           )
         } else {
diff --git a/themes/matery/components/MenuListSide.js b/themes/matery/components/MenuListSide.js
index 8d97afca..8407a5e8 100644
--- a/themes/matery/components/MenuListSide.js
+++ b/themes/matery/components/MenuListSide.js
@@ -1,17 +1,37 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
-export const MenuListSide = (props) => {
+export const MenuListSide = props => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MATERY_MENU_TAG', null, CONFIG) }
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('MATERY_MENU_TAG', null, CONFIG)
+    }
   ]
 
   if (customNav) {
@@ -28,8 +48,10 @@ export const MenuListSide = (props) => {
   }
 
   return (
-        <nav>
-            {links?.map((link, index) => <MenuItemCollapse key={index} link={link} />)}
-        </nav>
+    <nav>
+      {links?.map((link, index) => (
+        <MenuItemCollapse key={index} link={link} />
+      ))}
+    </nav>
   )
 }
diff --git a/themes/matery/components/MenuListTop.js b/themes/matery/components/MenuListTop.js
index 04897f7b..3cdb1d2a 100644
--- a/themes/matery/components/MenuListTop.js
+++ b/themes/matery/components/MenuListTop.js
@@ -16,25 +16,25 @@ export const MenuListTop = props => {
     {
       icon: 'fas fa-archive',
       name: locale.NAV.ARCHIVE,
-      to: '/archive',
+      href: '/archive',
       show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG)
     },
     {
       icon: 'fas fa-search',
       name: locale.NAV.SEARCH,
-      to: '/search',
+      href: '/search',
       show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG)
     },
     {
       icon: 'fas fa-folder',
       name: locale.COMMON.CATEGORY,
-      to: '/category',
+      href: '/category',
       show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG)
     },
     {
       icon: 'fas fa-tag',
       name: locale.COMMON.TAGS,
-      to: '/tag',
+      href: '/tag',
       show: siteConfig('MATERY_MENU_TAG', null, CONFIG)
     }
   ]
diff --git a/themes/medium/components/MenuBarMobile.js b/themes/medium/components/MenuBarMobile.js
index b5736e28..8e505130 100644
--- a/themes/medium/components/MenuBarMobile.js
+++ b/themes/medium/components/MenuBarMobile.js
@@ -1,18 +1,30 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
-export const MenuBarMobile = (props) => {
+export const MenuBarMobile = props => {
   const { customMenu, customNav } = props
   const { locale } = useGlobal()
 
   let links = [
-    // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MEDIUM_MENU_CATEGORY', null, CONFIG) },
-    { name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MEDIUM_MENU_TAG', null, CONFIG) },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MEDIUM_MENU_ARCHIVE', null, CONFIG) }
-    // { name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MENU_SEARCH', null, CONFIG) }
+    // { name: locale.NAV.INDEX, href: '/' || '/', show: true },
+    {
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('MEDIUM_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('MEDIUM_MENU_TAG', null, CONFIG)
+    },
+    {
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('MEDIUM_MENU_ARCHIVE', null, CONFIG)
+    }
+    // { name: locale.NAV.SEARCH, href: '/search', show: siteConfig('MENU_SEARCH', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -30,8 +42,13 @@ export const MenuBarMobile = (props) => {
 
   return (
     <nav id='nav' className=' text-md'>
-        {links?.map((link, index) => <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link}/>)}
-
+      {links?.map((link, index) => (
+        <MenuItemCollapse
+          onHeightChange={props.onHeightChange}
+          key={index}
+          link={link}
+        />
+      ))}
     </nav>
   )
 }
diff --git a/themes/medium/components/MenuItemCollapse.js b/themes/medium/components/MenuItemCollapse.js
index 3887b889..01d40f5d 100644
--- a/themes/medium/components/MenuItemCollapse.js
+++ b/themes/medium/components/MenuItemCollapse.js
@@ -21,7 +21,7 @@ export const MenuItemCollapse = props => {
     return null
   }
 
-  const selected = router.pathname === link.to || router.asPath === link.to
+  const selected = router.pathname === link.href || router.asPath === link.href
 
   const toggleShow = () => {
     changeShow(!show)
@@ -43,7 +43,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className='py-2 w-full my-auto items-center justify-between flex  '>
             <div>
@@ -79,7 +79,7 @@ export const MenuItemCollapse = props => {
                 className='
               not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-200
               font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <div>
                     <div
                       className={`${sLink.icon} text-center w-3 mr-3 text-xs`}
diff --git a/themes/medium/components/MenuItemDrop.js b/themes/medium/components/MenuItemDrop.js
index 4916a34e..b6c7a62c 100644
--- a/themes/medium/components/MenuItemDrop.js
+++ b/themes/medium/components/MenuItemDrop.js
@@ -12,7 +12,7 @@ export const MenuItemDrop = ({ link }) => {
     return null
   }
   const hasSubMenu = link?.subMenus?.length > 0
-  const selected = router.pathname === link.to || router.asPath === link.to
+  const selected = router.pathname === link.href || router.asPath === link.href
 
   return (
     <li
@@ -45,7 +45,7 @@ export const MenuItemDrop = ({ link }) => {
               ? 'bg-green-600 text-white hover:text-white'
               : 'hover:text-green-600')
           }>
-          <Link href={link?.to} target={link?.target}>
+          <Link href={link?.href} target={link?.target}>
             {link?.icon && <i className={link?.icon} />} {link?.name}
           </Link>
         </div>
@@ -60,7 +60,7 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={sLink.id}
                 className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-xs font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
diff --git a/themes/medium/components/MenuItemMobileNormal.js b/themes/medium/components/MenuItemMobileNormal.js
index 17f0d151..33569bfb 100644
--- a/themes/medium/components/MenuItemMobileNormal.js
+++ b/themes/medium/components/MenuItemMobileNormal.js
@@ -9,19 +9,21 @@ export const NormalMenu = props => {
     return null
   }
 
-  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+  const selected = router.pathname === link.href || router.asPath === link.href
 
-  return <Link
-    key={`${link.to}`}
-    title={link.to}
-    href={link.to}
-    className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
-        (selected ? 'text-black' : ' ')}>
-
-    <div className='my-auto items-center justify-center flex '>
-      <div className={ 'hover:text-black'}>{link.name}</div>
-    </div>
-    {link.slot}
-
-  </Link>
+  return (
+    <Link
+      key={`${link.href}`}
+      title={link.href}
+      href={link.href}
+      className={
+        'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
+        (selected ? 'text-black' : ' ')
+      }>
+      <div className='my-auto items-center justify-center flex '>
+        <div className={'hover:text-black'}>{link.name}</div>
+      </div>
+      {link.slot}
+    </Link>
+  )
 }
diff --git a/themes/medium/components/MenuItemPCNormal.js b/themes/medium/components/MenuItemPCNormal.js
index 809ae974..fad3307e 100644
--- a/themes/medium/components/MenuItemPCNormal.js
+++ b/themes/medium/components/MenuItemPCNormal.js
@@ -4,21 +4,27 @@ import { useRouter } from 'next/router'
 export const MenuItemPCNormal = props => {
   const { link } = props
   const router = useRouter()
-  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+  const selected = router.pathname === link.href || router.asPath === link.href
   if (!link || !link.show) {
     return null
   }
 
-  return <Link
-        key={`${link.id}-${link.to}`}
-        title={link.to}
-        href={link.to}
-        className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
-            (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
-        <div className='items-center justify-center flex '>
-            <i className={link.icon} />
-            <div className='ml-2 whitespace-nowrap'>{link.name}</div>
-        </div>
-        {link.slot}
+  return (
+    <Link
+      key={`${link.id}-${link.href}`}
+      title={link.href}
+      href={link.href}
+      className={
+        'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+        (selected
+          ? 'bg-green-600 text-white hover:text-white'
+          : 'hover:text-green-600')
+      }>
+      <div className='items-center justify-center flex '>
+        <i className={link.icon} />
+        <div className='ml-2 whitespace-nowrap'>{link.name}</div>
+      </div>
+      {link.slot}
     </Link>
+  )
 }
diff --git a/themes/medium/components/TopNavBar.js b/themes/medium/components/TopNavBar.js
index d22ab395..244a02d7 100644
--- a/themes/medium/components/TopNavBar.js
+++ b/themes/medium/components/TopNavBar.js
@@ -1,10 +1,10 @@
-import LogoBar from './LogoBar'
-import { useRef, useState } from 'react'
 import Collapse from '@/components/Collapse'
-import { MenuBarMobile } from './MenuBarMobile'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRef, useState } from 'react'
+import CONFIG from '../config'
+import LogoBar from './LogoBar'
+import { MenuBarMobile } from './MenuBarMobile'
 import { MenuItemDrop } from './MenuItemDrop'
 
 /**
@@ -20,10 +20,30 @@ export default function TopNavBar(props) {
   const { locale } = useGlobal()
 
   const defaultLinks = [
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MEDIUM_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MEDIUM_MENU_TAG', null, CONFIG) },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MEDIUM_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MEDIUM_MENU_SEARCH', null, CONFIG) }
+    {
+      icon: 'fas fa-th',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('MEDIUM_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('MEDIUM_MENU_TAG', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('MEDIUM_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('MEDIUM_MENU_SEARCH', null, CONFIG)
+    }
   ]
 
   let links = defaultLinks.concat(customNav)
@@ -42,33 +62,49 @@ export default function TopNavBar(props) {
   }
 
   return (
-      <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
-
-            {/* 移动端折叠菜单 */}
-            <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
-                <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
-                    <MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
-                </div>
-            </Collapse>
-
-            {/* 导航栏菜单 */}
-            <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
-
-                {/* 左侧图标Logo */}
-                <LogoBar {...props} />
-
-                {/* 折叠按钮、仅移动端显示 */}
-                <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-                    <div onClick={toggleMenuOpen} className='cursor-pointer'>
-                        {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
-                    </div>
-                </div>
-
-                {/* 桌面端顶部菜单 */}
-                <div className='hidden md:flex'>
-                    {links && links?.map((link, index) => <MenuItemDrop key={index} link={link}/>)}
-                </div>
-            </div>
+    <div
+      id='top-nav'
+      className={'sticky top-0 lg:relative w-full z-40 ' + className}>
+      {/* 移动端折叠菜单 */}
+      <Collapse
+        type='vertical'
+        collapseRef={collapseRef}
+        isOpen={isOpen}
+        className='md:hidden'>
+        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
+          <MenuBarMobile
+            {...props}
+            onHeightChange={param =>
+              collapseRef.current?.updateCollapseHeight(param)
+            }
+          />
         </div>
+      </Collapse>
+
+      {/* 导航栏菜单 */}
+      <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
+        {/* 左侧图标Logo */}
+        <LogoBar {...props} />
+
+        {/* 折叠按钮、仅移动端显示 */}
+        <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
+          <div onClick={toggleMenuOpen} className='cursor-pointer'>
+            {isOpen ? (
+              <i className='fas fa-times' />
+            ) : (
+              <i className='fas fa-bars' />
+            )}
+          </div>
+        </div>
+
+        {/* 桌面端顶部菜单 */}
+        <div className='hidden md:flex'>
+          {links &&
+            links?.map((link, index) => (
+              <MenuItemDrop key={index} link={link} />
+            ))}
+        </div>
+      </div>
+    </div>
   )
 }
diff --git a/themes/movie/components/Header.js b/themes/movie/components/Header.js
index a0f2d78c..c799d740 100644
--- a/themes/movie/components/Header.js
+++ b/themes/movie/components/Header.js
@@ -28,25 +28,25 @@ export const Header = props => {
       id: 1,
       icon: 'fa-solid fa-house',
       name: locale.NAV.INDEX,
-      to: '/',
+      href: '/',
       show: siteConfig('MOVIE_MENU_INDEX', null, CONFIG)
     },
     {
       id: 2,
       icon: 'fas fa-search',
       name: locale.NAV.SEARCH,
-      to: '/search',
+      href: '/search',
       show: siteConfig('MOVIE_MENU_SEARCH', null, CONFIG)
     },
     {
       id: 3,
       icon: 'fas fa-archive',
       name: locale.NAV.ARCHIVE,
-      to: '/archive',
+      href: '/archive',
       show: siteConfig('MOVIE_MENU_ARCHIVE', null, CONFIG)
     }
-    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MENU_CATEGORY', null, CONFIG) },
-    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MENU_TAG', null, CONFIG) }
+    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, href: '/category', show: siteConfig('MENU_CATEGORY', null, CONFIG) },
+    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, href: '/tag', show: siteConfig('MENU_TAG', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -109,11 +109,18 @@ export const Header = props => {
         <div className='md:w-auto text-center flex'>
           {/* 右侧菜单 */}
           <>
-            <nav id='nav-mobile' className='leading-8 justify-center w-full hidden md:flex'>
-              {links?.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
+            <nav
+              id='nav-mobile'
+              className='leading-8 justify-center w-full hidden md:flex'>
+              {links?.map(
+                (link, index) =>
+                  link && link.show && <MenuItemDrop key={index} link={link} />
+              )}
             </nav>
 
-            <div onClick={toggleShowSearchInput} className='flex items-center cursor-pointer'>
+            <div
+              onClick={toggleShowSearchInput}
+              className='flex items-center cursor-pointer'>
               <i className='fas fa-search dark:text-white'></i>
             </div>
             <div
@@ -130,7 +137,9 @@ export const Header = props => {
                 autoComplete='off'
                 placeholder='Type then hit enter to search...'
               />
-              <button onClick={handleSearch} className='w-full bg-[#383838] rounded py-2'>
+              <button
+                onClick={handleSearch}
+                className='w-full bg-[#383838] rounded py-2'>
                 {locale.COMMON.SEARCH} 搜索
               </button>
             </div>
@@ -138,7 +147,11 @@ export const Header = props => {
             {/* 移动端按钮 */}
             <div className='md:hidden'>
               <div onClick={toggleMenuOpen} className='w-8 cursor-pointer'>
-                {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
+                {isOpen ? (
+                  <i className='fas fa-times' />
+                ) : (
+                  <i className='fas fa-bars' />
+                )}
               </div>
             </div>
           </>
@@ -147,13 +160,17 @@ export const Header = props => {
 
       <Collapse collapseRef={collapseRef} type='vertical' isOpen={isOpen}>
         {/* 移动端菜单 */}
-        <menu id='nav-menu-mobile' className='block md:hidden my-auto justify-start'>
+        <menu
+          id='nav-menu-mobile'
+          className='block md:hidden my-auto justify-start'>
           {links?.map(
             (link, index) =>
               link &&
               link.show && (
                 <MenuItemCollapse
-                  onHeightChange={param => collapseRef.current?.updateCollapseHeight(param)}
+                  onHeightChange={param =>
+                    collapseRef.current?.updateCollapseHeight(param)
+                  }
                   key={index}
                   link={link}
                 />
diff --git a/themes/movie/components/MenuItemCollapse.js b/themes/movie/components/MenuItemCollapse.js
index 9f2fbd86..b11dbd57 100644
--- a/themes/movie/components/MenuItemCollapse.js
+++ b/themes/movie/components/MenuItemCollapse.js
@@ -33,7 +33,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className='flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest'>
             <span className=' transition-all items-center duration-200'>
@@ -67,7 +67,7 @@ export const MenuItemCollapse = props => {
               <div
                 key={index}
                 className='dark:text-gray-200 text-left px-3 justify-start  tracking-widest transition-all duration-200  py-3 pr-6'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm ml-4 whitespace-nowrap'>
                     {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
                     {sLink.title}
diff --git a/themes/movie/components/MenuItemDrop.js b/themes/movie/components/MenuItemDrop.js
index cef4d53d..0c07d771 100644
--- a/themes/movie/components/MenuItemDrop.js
+++ b/themes/movie/components/MenuItemDrop.js
@@ -15,7 +15,7 @@ export const MenuItemDrop = ({ link }) => {
       onMouseOut={() => changeShow(false)}>
       {!hasSubMenu && (
         <Link
-          href={link?.to}
+          href={link?.href}
           target={link?.target}
           className='select-none menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
           {link?.icon && <i className={link?.icon} />} {link?.name}
@@ -43,7 +43,7 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='cursor-pointer text-start dark:bg-hexo-black-gray dark:hover:bg-gray-300 hover:bg-gray-300 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
diff --git a/themes/movie/components/NormalMenuItem.js b/themes/movie/components/NormalMenuItem.js
index aec74837..2ed6f2e9 100644
--- a/themes/movie/components/NormalMenuItem.js
+++ b/themes/movie/components/NormalMenuItem.js
@@ -5,10 +5,16 @@ import Link from 'next/link'
  * @param {*} props
  * @returns
  */
-export const NormalMenuItem = (props) => {
+export const NormalMenuItem = props => {
   const { link } = props
-  return link?.show && <Link href={link.to} key={link.to}
-        className="px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
+  return (
+    link?.show && (
+      <Link
+        href={link.href}
+        key={link.href}
+        className='px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light'>
         {link.name}
-    </Link>
+      </Link>
+    )
+  )
 }
diff --git a/themes/nav/components/ArticleAround.js b/themes/nav/components/ArticleAround.js
index 95b6f83f..58069682 100755
--- a/themes/nav/components/ArticleAround.js
+++ b/themes/nav/components/ArticleAround.js
@@ -5,27 +5,25 @@ import Link from 'next/link'
  * @param {prev,next} param0
  * @returns
  */
-export default function ArticleAround ({ prev, next }) {
+export default function ArticleAround({ prev, next }) {
   if (!prev || !next) {
     return <></>
   }
   return (
     <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
       <Link
-        href={`/${prev.slug}`}
+        href={prev.href}
         passHref
         className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
-
-        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
-
+        <i className='mr-1 fas fa-angle-double-left' />
+        {prev.title}
       </Link>
       <Link
-        href={`/${next.slug}`}
+        href={next.href}
         passHref
         className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
         {next.title}
         <i className='ml-1 my-1 fas fa-angle-double-right' />
-
       </Link>
     </section>
   )
diff --git a/themes/nav/components/MenuBarMobile.js b/themes/nav/components/MenuBarMobile.js
index 754d2a36..da24a0e4 100755
--- a/themes/nav/components/MenuBarMobile.js
+++ b/themes/nav/components/MenuBarMobile.js
@@ -1,6 +1,6 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
 /**
@@ -8,16 +8,28 @@ import { MenuItemCollapse } from './MenuItemCollapse'
  * @param {*} props
  * @returns
  */
-export const MenuBarMobile = (props) => {
+export const MenuBarMobile = props => {
   const { customMenu, customNav } = props
   const { locale } = useGlobal()
 
   let links = [
-    // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NAV_MENU_CATEGORY', null, CONFIG) },
-    { name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NAV_MENU_TAG', null, CONFIG) },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NAV_MENU_ARCHIVE', null, CONFIG) }
-    // { name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MENU_SEARCH', null, CONFIG) }
+    // { name: locale.NAV.INDEX, href: '/' || '/', show: true },
+    {
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('NAV_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('NAV_MENU_TAG', null, CONFIG)
+    },
+    {
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('NAV_MENU_ARCHIVE', null, CONFIG)
+    }
+    // { name: locale.NAV.SEARCH, href: '/search', show: siteConfig('MENU_SEARCH', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -35,7 +47,13 @@ export const MenuBarMobile = (props) => {
 
   return (
     <nav id='nav' className=' text-md'>
-        {links?.map((link, index) => <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link}/>)}
+      {links?.map((link, index) => (
+        <MenuItemCollapse
+          onHeightChange={props.onHeightChange}
+          key={index}
+          link={link}
+        />
+      ))}
     </nav>
   )
 }
diff --git a/themes/nav/components/MenuItem.js b/themes/nav/components/MenuItem.js
index d44f8b17..eb51c879 100644
--- a/themes/nav/components/MenuItem.js
+++ b/themes/nav/components/MenuItem.js
@@ -21,52 +21,61 @@ export const MenuItem = ({ link }) => {
   }
 
   // #号加标题  快速跳转到指定锚点
-  const isAnchor = link?.to === '#'
-  const url = isAnchor ? `#${link.name}` : link.to
+  const isAnchor = link?.href === '#'
+  const url = isAnchor ? `#${link.name}` : link.href
 
-  return <>
-        {/* 菜单 */}
-        <div
-            onClick={toggleOpenSubMenu}
-            className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 pt-2 font-light select-none flex justify-between cursor-pointer' key={link?.to}>
-
-            {link?.subMenus
-              ? (<>
-                    <span className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
-                        <i className={`text-base ${link?.icon ? link?.icon : ''} mr-1`} />{link?.title}
-                    </span>
-                    <div className='inline-flex items-center select-none pointer-events-none '>
-                        <i className={`${isOpen ? '-rotate-90' : ''} text-xs dark:text-neutral-500 text-gray-300 hover:text-black dark:hover:text-white-400 px-2 fas fa-chevron-left transition-all duration-200`}></i>
-                    </div>
-                </>)
-              : (
-                    <Link href={url} className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
-                         <i className={`text-base ${link?.icon ? link?.icon : (isAnchor ? 'fas fa-hashtag' : '')} mr-1`} />{link?.title}
-                    </Link>
-                )
-
-            }
-        </div>
-
-        {/* 子菜单按钮 */}
-        {link?.subMenus && (
-            <Collapse isOpen={isOpen} key='collapse'>
-                {
-                    link?.subMenus?.map((sLink, index) => {
-                      // #号加标题  快速跳转到指定锚点
-                      const sIsAnchor = sLink?.to === '#'
-                      const sUrl = sIsAnchor ? `#${sLink.name}` : sLink.to
-                      return <div key={index} className='nav-submenu'>
-                        <Link href={sUrl}>
-                            <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'>
-                                <i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : (sIsAnchor ? 'fas fa-hashtag' : '')}`} />{sLink.title}</span>
-                        </Link>
-                    </div>
-                    })
-                }
-
-            </Collapse>
+  return (
+    <>
+      {/* 菜单 */}
+      <div
+        onClick={toggleOpenSubMenu}
+        className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 pt-2 font-light select-none flex justify-between cursor-pointer'
+        key={link?.href}>
+        {link?.subMenus ? (
+          <>
+            <span className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
+              <i className={`text-base ${link?.icon ? link?.icon : ''} mr-1`} />
+              {link?.title}
+            </span>
+            <div className='inline-flex items-center select-none pointer-events-none '>
+              <i
+                className={`${isOpen ? '-rotate-90' : ''} text-xs dark:text-neutral-500 text-gray-300 hover:text-black dark:hover:text-white-400 px-2 fas fa-chevron-left transition-all duration-200`}></i>
+            </div>
+          </>
+        ) : (
+          <Link
+            href={url}
+            className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
+            <i
+              className={`text-base ${link?.icon ? link?.icon : isAnchor ? 'fas fa-hashtag' : ''} mr-1`}
+            />
+            {link?.title}
+          </Link>
         )}
+      </div>
 
+      {/* 子菜单按钮 */}
+      {link?.subMenus && (
+        <Collapse isOpen={isOpen} key='collapse'>
+          {link?.subMenus?.map((sLink, index) => {
+            // #号加标题  快速跳转到指定锚点
+            const sIsAnchor = sLink?.href === '#'
+            const sUrl = sIsAnchor ? `#${sLink.name}` : sLink.href
+            return (
+              <div key={index} className='nav-submenu'>
+                <Link href={sUrl}>
+                  <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'>
+                    <i
+                      className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : sIsAnchor ? 'fas fa-hashtag' : ''}`}
+                    />
+                    {sLink.title}
+                  </span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }
diff --git a/themes/nav/components/MenuItemCollapse.js b/themes/nav/components/MenuItemCollapse.js
index 18ab3918..4f332337 100755
--- a/themes/nav/components/MenuItemCollapse.js
+++ b/themes/nav/components/MenuItemCollapse.js
@@ -21,7 +21,7 @@ export const MenuItemCollapse = props => {
     return null
   }
 
-  const selected = router.pathname === link.to || router.asPath === link.to
+  const selected = router.pathname === link.href || router.asPath === link.href
 
   const toggleShow = () => {
     changeShow(!show)
@@ -42,7 +42,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className='py-2 w-full my-auto items-center justify-between flex  '>
             <div>
@@ -78,7 +78,7 @@ export const MenuItemCollapse = props => {
                 className='
               py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white font-bold 
               dark:bg-black text-left justify-start text-gray-600 bg-gray-50 bg-opacity-20 dark:hover:bg-gray-600 tracking-widest transition-all duration-200'>
-                {/* <Link href={sLink.to} target={link?.target}> */}
+                {/* <Link href={sLink.href} target={link?.target}> */}
                 <a href={`/#${sLink.title}`} target={'_self'}>
                   <div>
                     <div
diff --git a/themes/nav/components/MenuItemDrop.js b/themes/nav/components/MenuItemDrop.js
index d6226480..ec5b37f0 100755
--- a/themes/nav/components/MenuItemDrop.js
+++ b/themes/nav/components/MenuItemDrop.js
@@ -12,7 +12,7 @@ export const MenuItemDrop = ({ link }) => {
     return null
   }
   const hasSubMenu = link?.subMenus?.length > 0
-  const selected = router.pathname === link.to || router.asPath === link.to
+  const selected = router.pathname === link.href || router.asPath === link.href
 
   return (
     <li
@@ -45,7 +45,7 @@ export const MenuItemDrop = ({ link }) => {
               ? 'bg-green-600 text-white hover:text-white'
               : 'hover:text-green-600')
           }>
-          <Link href={link?.to} target={link?.target}>
+          <Link href={link?.href} target={link?.target}>
             {link?.icon && <i className={link?.icon} />} {link?.name}
           </Link>
         </div>
@@ -60,7 +60,7 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-xs font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
diff --git a/themes/nav/components/MenuItemMobileNormal.js b/themes/nav/components/MenuItemMobileNormal.js
index 17f0d151..33569bfb 100755
--- a/themes/nav/components/MenuItemMobileNormal.js
+++ b/themes/nav/components/MenuItemMobileNormal.js
@@ -9,19 +9,21 @@ export const NormalMenu = props => {
     return null
   }
 
-  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+  const selected = router.pathname === link.href || router.asPath === link.href
 
-  return <Link
-    key={`${link.to}`}
-    title={link.to}
-    href={link.to}
-    className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
-        (selected ? 'text-black' : ' ')}>
-
-    <div className='my-auto items-center justify-center flex '>
-      <div className={ 'hover:text-black'}>{link.name}</div>
-    </div>
-    {link.slot}
-
-  </Link>
+  return (
+    <Link
+      key={`${link.href}`}
+      title={link.href}
+      href={link.href}
+      className={
+        'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
+        (selected ? 'text-black' : ' ')
+      }>
+      <div className='my-auto items-center justify-center flex '>
+        <div className={'hover:text-black'}>{link.name}</div>
+      </div>
+      {link.slot}
+    </Link>
+  )
 }
diff --git a/themes/nav/components/MenuItemPCNormal.js b/themes/nav/components/MenuItemPCNormal.js
index 809ae974..fad3307e 100755
--- a/themes/nav/components/MenuItemPCNormal.js
+++ b/themes/nav/components/MenuItemPCNormal.js
@@ -4,21 +4,27 @@ import { useRouter } from 'next/router'
 export const MenuItemPCNormal = props => {
   const { link } = props
   const router = useRouter()
-  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+  const selected = router.pathname === link.href || router.asPath === link.href
   if (!link || !link.show) {
     return null
   }
 
-  return <Link
-        key={`${link.id}-${link.to}`}
-        title={link.to}
-        href={link.to}
-        className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
-            (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
-        <div className='items-center justify-center flex '>
-            <i className={link.icon} />
-            <div className='ml-2 whitespace-nowrap'>{link.name}</div>
-        </div>
-        {link.slot}
+  return (
+    <Link
+      key={`${link.id}-${link.href}`}
+      title={link.href}
+      href={link.href}
+      className={
+        'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+        (selected
+          ? 'bg-green-600 text-white hover:text-white'
+          : 'hover:text-green-600')
+      }>
+      <div className='items-center justify-center flex '>
+        <i className={link.icon} />
+        <div className='ml-2 whitespace-nowrap'>{link.name}</div>
+      </div>
+      {link.slot}
     </Link>
+  )
 }
diff --git a/themes/nav/components/SearchInput.js b/themes/nav/components/SearchInput.js
index 2e8b640e..e47433ec 100755
--- a/themes/nav/components/SearchInput.js
+++ b/themes/nav/components/SearchInput.js
@@ -1,12 +1,12 @@
-import { useImperativeHandle, useRef, useState } from 'react'
 import { deepClone } from '@/lib/utils'
 import { useNavGlobal } from '@/themes/nav'
+import { useImperativeHandle, useRef, useState } from 'react'
 let lock = false
 
 const SearchInput = ({ currentSearch, cRef, className }) => {
   const searchInputRef = useRef()
   const { setFilteredNavPages, allNavPages } = useNavGlobal()
-  const [filteredNavPages] = useState(allNavPages)
+  //   const [filteredNavPages] = useState(allNavPages)
 
   useImperativeHandle(cRef, () => {
     return {
@@ -56,10 +56,12 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
    * 回车键
    * @param {*} e
    */
-  const handleKeyUp = (e) => {
-    if (e.keyCode === 13) { // 回车
+  const handleKeyUp = e => {
+    if (e.keyCode === 13) {
+      // 回车
       handleSearch(searchInputRef.current.value)
-    } else if (e.keyCode === 27) { // ESC
+    } else if (e.keyCode === 27) {
+      // ESC
       cleanSearch()
     }
   }
@@ -74,7 +76,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
   }
 
   const [showClean, setShowClean] = useState(false)
-  const updateSearchKey = (val) => {
+  const updateSearchKey = val => {
     if (lock) {
       return
     }
@@ -86,38 +88,51 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
       setShowClean(false)
     }
   }
-  function lockSearchInput () {
+  function lockSearchInput() {
     lock = true
   }
 
-  function unLockSearchInput () {
+  function unLockSearchInput() {
     lock = false
   }
 
-  return <div className={'flex w-36 hover:w-36 md:hover:w-56 md:w-56 transition md:mr-5'}>
-    <input
-      ref={searchInputRef}
-      type='text'
-      className={`${className} outline-none w-full text-sm pl-4 transition-all duration-200 ease-in focus:shadow-lg font-light leading-10 text-black bg-opacity-50 md:bg-opacity-100 bg-neutral-100 md:hover:bg-neutral-200 md:focus:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-white`}
-      onKeyUp={handleKeyUp}
-      onCompositionStart={lockSearchInput}
-      onCompositionUpdate={lockSearchInput}
-      onCompositionEnd={unLockSearchInput}
-      onChange={e => updateSearchKey(e.target.value)}
-      defaultValue={currentSearch}
-    />
+  return (
+    <div
+      className={
+        'flex w-36 hover:w-36 md:hover:w-56 md:w-56 transition md:mr-5'
+      }>
+      <input
+        ref={searchInputRef}
+        type='text'
+        className={`${className} outline-none w-full text-sm pl-4 transition-all duration-200 ease-in focus:shadow-lg font-light leading-10 text-black bg-opacity-50 md:bg-opacity-100 bg-neutral-100 md:hover:bg-neutral-200 md:focus:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-white`}
+        onKeyUp={handleKeyUp}
+        onCompositionStart={lockSearchInput}
+        onCompositionUpdate={lockSearchInput}
+        onCompositionEnd={unLockSearchInput}
+        onChange={e => updateSearchKey(e.target.value)}
+        defaultValue={currentSearch}
+      />
 
-    <div className='flex -ml-6 cursor-pointer float-right items-center justify-center py-2'
-      onClick={handleSearch}>
-        <i className={'hover:text-black transform duration-200 text-neutral-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'} />
-    </div>
-
-    {(showClean &&
-      <div className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'>
-        <i className='fas fa-times hover:text-black transform duration-200 text-neutral-400 cursor-pointer dark:hover:text-gray-300' onClick={cleanSearch} />
+      <div
+        className='flex -ml-6 cursor-pointer float-right items-center justify-center py-2'
+        onClick={handleSearch}>
+        <i
+          className={
+            'hover:text-black transform duration-200 text-neutral-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'
+          }
+        />
       </div>
+
+      {showClean && (
+        <div className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'>
+          <i
+            className='fas fa-times hover:text-black transform duration-200 text-neutral-400 cursor-pointer dark:hover:text-gray-300'
+            onClick={cleanSearch}
+          />
+        </div>
       )}
-  </div>
+    </div>
+  )
 }
 
 export default SearchInput
diff --git a/themes/nav/index.js b/themes/nav/index.js
index c2bf7426..54cea4b8 100755
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -6,36 +6,36 @@
  * 开启方式 在blog.config.js 将主题配置为 `NAV`
  */
 
-import CONFIG from './config'
-import { useEffect, useState, createContext, useContext } from 'react'
-import Footer from './components/Footer'
-import TopNavBar from './components/TopNavBar'
-import { useGlobal } from '@/lib/global'
-import Announcement from './components/Announcement'
-import PageNavDrawer from './components/PageNavDrawer'
-import FloatTocButton from './components/FloatTocButton'
-import { AdSlot } from '@/components/GoogleAdsense'
-import JumpToTopButton from './components/JumpToTopButton'
-import CategoryItem from './components/CategoryItem'
-import TagItemMini from './components/TagItemMini'
 import Comment from '@/components/Comment'
-import TocDrawer from './components/TocDrawer'
-import NotionPage from '@/components/NotionPage'
-import { ArticleLock } from './components/ArticleLock'
-import { Transition } from '@headlessui/react'
-import { Style } from './style'
-import BlogPostListAll from './components/BlogPostListAll'
-import BlogPostCard from './components/BlogPostCard'
-import Link from 'next/link'
-import dynamic from 'next/dynamic'
-import { MenuItem } from './components/MenuItem'
-import LogoBar from './components/LogoBar'
-import { siteConfig } from '@/lib/config'
+import { AdSlot } from '@/components/GoogleAdsense'
 import Live2D from '@/components/Live2D'
-import BlogArchiveItem from './components/BlogArchiveItem'
 import NotionIcon from '@/components/NotionIcon'
-import { useRouter } from 'next/router'
+import NotionPage from '@/components/NotionPage'
+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, useState } from 'react'
+import Announcement from './components/Announcement'
+import { ArticleLock } from './components/ArticleLock'
+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 Footer from './components/Footer'
+import JumpToTopButton from './components/JumpToTopButton'
+import LogoBar from './components/LogoBar'
+import { MenuItem } from './components/MenuItem'
+import PageNavDrawer from './components/PageNavDrawer'
+import TagItemMini from './components/TagItemMini'
+import TocDrawer from './components/TocDrawer'
+import TopNavBar from './components/TopNavBar'
+import CONFIG from './config'
+import { Style } from './style'
 
 const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
 
@@ -49,8 +49,16 @@ export const useNavGlobal = () => useContext(ThemeGlobalNav)
  * @returns {JSX.Element}
  * @constructor
  */
-const LayoutBase = (props) => {
-  const { customMenu, children, post, allNavPages, categoryOptions, slotLeft, slotTop } = props
+const LayoutBase = props => {
+  const {
+    customMenu,
+    children,
+    post,
+    allNavPages,
+    categoryOptions,
+    slotLeft,
+    slotTop
+  } = props
   const { onLoading } = useGlobal()
   const [tocVisible, changeTocVisible] = useState(false)
   const [pageNavVisible, changePageNavVisible] = useState(false)
@@ -66,99 +74,127 @@ const LayoutBase = (props) => {
 
   // 默认使用自定义菜单，否则将遍历所有的category生成菜单
   if (!siteConfig('NAV_USE_CUSTOM_MENU', null, CONFIG)) {
-    links = categoryOptions && categoryOptions?.map(c => {
-      return { id: c.name, title: `# ${c.name}`, to: `/category/${c.name}`, show: true }
-    })
+    links =
+      categoryOptions &&
+      categoryOptions?.map(c => {
+        return {
+          id: c.name,
+          title: `# ${c.name}`,
+          href: `/category/${c.name}`,
+          show: true
+        }
+      })
   }
 
   return (
-        <ThemeGlobalNav.Provider value={{ tocVisible, changeTocVisible, filteredNavPages, setFilteredNavPages, allNavPages, pageNavVisible, changePageNavVisible, categoryOptions }}>
-            {/* 样式 */}
-            <Style/>
+    <ThemeGlobalNav.Provider
+      value={{
+        tocVisible,
+        changeTocVisible,
+        filteredNavPages,
+        setFilteredNavPages,
+        allNavPages,
+        pageNavVisible,
+        changePageNavVisible,
+        categoryOptions
+      }}>
+      {/* 样式 */}
+      <Style />
 
-            {/* 主题样式根基 */}
-            <div id='theme-onenav' className={`${siteConfig('FONT_STYLE')} dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300 scroll-smooth`}>
-
-                {/* 端顶部导航栏 */}
-                <TopNavBar {...props} />
-
-                {/* 左右布局区块 */}
-                <main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' relative flex justify-between w-full h-screen mx-auto'}>
-
-                    {/* 左侧推拉抽屉 */}
-                    <div className={' hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'}>
-
-                        {/* 图标Logo */}
-                        <div className='hidden md:block w-full top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
-                            <LogoBar {...props} />
-                        </div>
-                        <div className='main-menu z-20 pl-9 pr-7 pb-5 sticky pt-1 top-20 overflow-y-scroll h-fit max-h-full scroll-hidden bg-white dark:bg-neutral-800 rounded-xl '>
-
-                           {/* 嵌入 */}
-                            {slotLeft}
-
-                            <div className='grid pt-2'>
-                                {/* 显示菜单 */}
-                                {links && links?.map((link, index) => <MenuItem key={index} link={link} />)}
-                            </div>
-
-                        </div>
-
-                        {/* 页脚站点信息 */}
-                        <div className='w-56 fixed left-0 bottom-0 z-0'>
-                            <Live2D />
-                            <Footer {...props} />
-                        </div>
-                    </div>
-
-                    {/* 右侧主要内容区块 */}
-                    <div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-20 md:pt-5 pb-8 min-h-screen overflow-y-auto'>
-
-                        <div id='container-inner' className='w-full px-6 pb-6 md:pb-20 max-w-8xl justify-center mx-auto'>
-                            {slotTop}
-                            {/* 广告植入 */}
-                            <WWAds className='w-full' orientation='horizontal'/>
-
-                            <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}
-                            >
-                                {children}
-                            </Transition>
-
-                            {/* Google广告 */}
-                            <AdSlot type='in-article' />
-                            <WWAds className='w-full' orientation='horizontal'/>
-
-                            {/* 回顶按钮 */}
-                            <JumpToTopButton />
-                        </div>
-
-                        {/* 底部 */}
-                        <div className='md:hidden'>
-                            <Footer {...props} />
-                        </div>
-                    </div>
-
-                </main>
-
-                {/* 移动端悬浮目录按钮 */}
-                {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} />
-                </div>}
-
-                {/* 移动端导航抽屉 */}
-                <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
+      {/* 主题样式根基 */}
+      <div
+        id='theme-onenav'
+        className={`${siteConfig('FONT_STYLE')} dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300 scroll-smooth`}>
+        {/* 端顶部导航栏 */}
+        <TopNavBar {...props} />
 
+        {/* 左右布局区块 */}
+        <main
+          id='wrapper'
+          className={
+            (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
+              ? 'flex-row-reverse'
+              : '') + ' relative flex justify-between w-full h-screen mx-auto'
+          }>
+          {/* 左侧推拉抽屉 */}
+          <div
+            className={
+              ' hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'
+            }>
+            {/* 图标Logo */}
+            <div className='hidden md:block w-full top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
+              <LogoBar {...props} />
             </div>
-        </ThemeGlobalNav.Provider>
+            <div className='main-menu z-20 pl-9 pr-7 pb-5 sticky pt-1 top-20 overflow-y-scroll h-fit max-h-full scroll-hidden bg-white dark:bg-neutral-800 rounded-xl '>
+              {/* 嵌入 */}
+              {slotLeft}
+
+              <div className='grid pt-2'>
+                {/* 显示菜单 */}
+                {links &&
+                  links?.map((link, index) => (
+                    <MenuItem key={index} link={link} />
+                  ))}
+              </div>
+            </div>
+
+            {/* 页脚站点信息 */}
+            <div className='w-56 fixed left-0 bottom-0 z-0'>
+              <Live2D />
+              <Footer {...props} />
+            </div>
+          </div>
+
+          {/* 右侧主要内容区块 */}
+          <div
+            id='center-wrapper'
+            className='flex flex-col justify-between w-full relative z-10 pt-20 md:pt-5 pb-8 min-h-screen overflow-y-auto'>
+            <div
+              id='container-inner'
+              className='w-full px-6 pb-6 md:pb-20 max-w-8xl justify-center mx-auto'>
+              {slotTop}
+              {/* 广告植入 */}
+              <WWAds className='w-full' orientation='horizontal' />
+
+              <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}>
+                {children}
+              </Transition>
+
+              {/* Google广告 */}
+              <AdSlot type='in-article' />
+              <WWAds className='w-full' orientation='horizontal' />
+
+              {/* 回顶按钮 */}
+              <JumpToTopButton />
+            </div>
+
+            {/* 底部 */}
+            <div className='md:hidden'>
+              <Footer {...props} />
+            </div>
+          </div>
+        </main>
+
+        {/* 移动端悬浮目录按钮 */}
+        {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} />
+          </div>
+        )}
+
+        {/* 移动端导航抽屉 */}
+        <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
+      </div>
+    </ThemeGlobalNav.Provider>
   )
 }
 
@@ -181,8 +217,8 @@ const LayoutPostListIndex = props => {
   // const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
   return (
     <>
-        <Announcement {...props} />
-        <BlogPostListAll { ...props } />
+      <Announcement {...props} />
+      <BlogPostListAll {...props} />
     </>
   )
 }
@@ -198,13 +234,15 @@ const LayoutPostList = props => {
   // 如果是搜索，则列表顶部嵌入 搜索框
   return (
     <>
-        <div className='w-full max-w-7xl mx-auto justify-center mt-8'>
-            <div id='posts-wrapper' class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
-                {posts?.map(post => (
-                    <BlogPostCard key={post.id} post = {post} className='card' />
-                ))}
-            </div>
+      <div className='w-full max-w-7xl mx-auto justify-center mt-8'>
+        <div
+          id='posts-wrapper'
+          class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
+          {posts?.map(post => (
+            <BlogPostCard key={post.id} post={post} className='card' />
+          ))}
         </div>
+      </div>
     </>
   )
 }
@@ -214,60 +252,76 @@ const LayoutPostList = props => {
  * @param {*} props
  * @returns
  */
-const LayoutSlug = (props) => {
+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} />}
+    <>
+      {/* 文章锁 */}
+      {lock && <ArticleLock validPassword={validPassword} />}
 
-              {!lock && <div id='container'>
+      {!lock && (
+        <div id='container'>
+          {/* title */}
+          <h1 className='text-3xl pt-4 md:pt-12  dark:text-gray-300'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post?.pageIcon} />
+            )}
+            {post?.title}
+          </h1>
 
-                  {/* title */}
-                  <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}</h1>
+          {/* Notion文章主体 */}
+          {post && (
+            <section id='article-wrapper' className='px-1'>
+              <NotionPage post={post} />
 
-                  {/* Notion文章主体 */}
-                  {post && (<section id="article-wrapper" className="px-1">
-                      <NotionPage post={post} />
+              {/* 分享 */}
+              {/* <ShareBar post={post} /> */}
+              {/* 文章分类和标签信息 */}
+              <div className='flex justify-between'>
+                {CONFIG.POST_DETAIL_CATEGORY && post?.category && (
+                  <CategoryItem category={post.category} />
+                )}
+                <div>
+                  {CONFIG.POST_DETAIL_TAG &&
+                    post?.tagItems?.map(tag => (
+                      <TagItemMini key={tag.name} tag={tag} />
+                    ))}
+                </div>
+              </div>
 
-                    {/* 分享 */}
-                    {/* <ShareBar post={post} /> */}
-                    {/* 文章分类和标签信息 */}
-                    <div className='flex justify-between'>
-                        {CONFIG.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
-                        <div>
-                            {CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
-                        </div>
-                    </div>
+              {/* 上一篇、下一篇文章 */}
+              {/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
 
-                      {/* 上一篇、下一篇文章 */}
-                      {/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
+              <AdSlot />
+              <WWAds className='w-full' orientation='horizontal' />
 
-                      <AdSlot />
-                      <WWAds className='w-full' orientation='horizontal'/>
+              <Comment frontMatter={post} />
+            </section>
+          )}
 
-                      <Comment frontMatter={post} />
-                  </section>)}
-
-                <TocDrawer {...props} />
-            </div>}
-        </>
+          <TocDrawer {...props} />
+        </div>
+      )}
+    </>
   )
 }
 
@@ -277,7 +331,7 @@ const LayoutSlug = (props) => {
  * @param {*} props
  * @returns
  */
-const LayoutSearch = (props) => {
+const LayoutSearch = props => {
   return <></>
 }
 
@@ -287,73 +341,89 @@ const LayoutSearch = (props) => {
  * @param {*} props
  * @returns
  */
-const LayoutArchive = (props) => {
+const LayoutArchive = props => {
   const { archivePosts } = props
-  return (<>
-            <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
-                {Object.keys(archivePosts).map(archiveTitle => (
-                    <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
-                ))}
-            </div>
-        </>)
+  return (
+    <>
+      <div className='mb-10 pb-20 md:py-12 p-3  min-h-screen w-full'>
+        {Object.keys(archivePosts).map(archiveTitle => (
+          <BlogArchiveItem
+            key={archiveTitle}
+            archiveTitle={archiveTitle}
+            archivePosts={archivePosts}
+          />
+        ))}
+      </div>
+    </>
+  )
 }
 
 /**
  * 404
  */
 const Layout404 = props => {
-  return <>
-        <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
+  return (
+    <>
+      <div className='w-full h-96 py-80 flex justify-center items-center'>
+        404 Not found.
+      </div>
     </>
+  )
 }
 
 /**
  * 分类列表
  */
-const LayoutCategoryIndex = (props) => {
+const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
-  return <>
-     <div className='bg-white dark:bg-gray-700 py-10'>
-                <div className='dark:text-gray-200 mb-5'>
-                    <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
+  return (
+    <>
+      <div className='bg-white dark:bg-gray-700 py-10'>
+        <div className='dark:text-gray-200 mb-5'>
+          <i className='mr-4 fas fa-th' />
+          {locale.COMMON.CATEGORY}:
+        </div>
+        <div id='category-list' className='duration-200 flex flex-wrap'>
+          {categoryOptions?.map(category => {
+            return (
+              <Link
+                key={category.name}
+                href={`/category/${category.name}`}
+                passHref
+                legacyBehavior>
+                <div
+                  className={
+                    'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'
+                  }>
+                  <i className='mr-4 fas fa-folder' />
+                  {category.name}({category.count})
                 </div>
-                <div id='category-list' className='duration-200 flex flex-wrap'>
-                    {categoryOptions?.map(category => {
-                      return (
-                            <Link
-                                key={category.name}
-                                href={`/category/${category.name}`}
-                                passHref
-                                legacyBehavior>
-                                <div
-                                    className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-                                    <i className='mr-4 fas fa-folder' />{category.name}({category.count})
-                                </div>
-                            </Link>
-                      )
-                    })}
-                </div>
-            </div>
-  </>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </>
+  )
 }
 
 /**
  * 标签列表
  */
-const LayoutTagIndex = (props) => {
+const LayoutTagIndex = props => {
   return <></>
 }
 
 export {
-  CONFIG as THEME_CONFIG,
-  LayoutBase,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
   Layout404,
+  LayoutArchive,
+  LayoutBase,
   LayoutCategoryIndex,
+  LayoutIndex,
   LayoutPostList,
-  LayoutTagIndex
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }
diff --git a/themes/next/components/MenuItemCollapse.js b/themes/next/components/MenuItemCollapse.js
index 162c0184..f0d079a5 100644
--- a/themes/next/components/MenuItemCollapse.js
+++ b/themes/next/components/MenuItemCollapse.js
@@ -29,7 +29,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className='w-full my-auto items-center justify-between flex   dark:text-gray-200 '>
             <div>
@@ -65,7 +65,7 @@ export const MenuItemCollapse = props => {
                 className='whitespace-nowrap   dark:text-gray-200
               not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
               font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <div>
                     {sLink.icon && (
                       <div
diff --git a/themes/next/components/MenuItemDrop.js b/themes/next/components/MenuItemDrop.js
index 580d5dc1..aec9212e 100644
--- a/themes/next/components/MenuItemDrop.js
+++ b/themes/next/components/MenuItemDrop.js
@@ -12,7 +12,7 @@ export const MenuItemDrop = ({ link }) => {
       className='relative py-1.5 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center '>
       {!hasSubMenu && (
         <Link
-          href={link?.to}
+          href={link?.href}
           target={link?.target}
           className='w-full my-auto items-center justify-between flex '>
           <div>
@@ -47,7 +47,7 @@ export const MenuItemDrop = ({ link }) => {
             return (
               <li key={sLink.id}>
                 <Link
-                  href={sLink.to}
+                  href={sLink.href}
                   target={link?.target}
                   className='my-auto h-9 px-2 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 '>
                   {sLink.icon && (
diff --git a/themes/next/components/MenuList.js b/themes/next/components/MenuList.js
index a041da89..257b6d46 100644
--- a/themes/next/components/MenuList.js
+++ b/themes/next/components/MenuList.js
@@ -1,19 +1,48 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
-import { MenuItemDrop } from './MenuItemDrop'
 import { MenuItemCollapse } from './MenuItemCollapse'
+import { MenuItemDrop } from './MenuItemDrop'
 
-export const MenuList = (props) => {
+export const MenuList = props => {
   const { postCount, customNav, customMenu } = props
   const { locale } = useGlobal()
-  const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
+  const archiveSlot = (
+    <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>
+      {postCount}
+    </div>
+  )
 
   const defaultLinks = [
-    { id: 1, icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 2, icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NEXT_MENU_CATEGORY', null, CONFIG) },
-    { id: 3, icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NEXT_MENU_TAG', null, CONFIG) },
-    { id: 4, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: siteConfig('NEXT_MENU_ARCHIVE', null, CONFIG) }
+    {
+      id: 1,
+      icon: 'fas fa-home',
+      name: locale.NAV.INDEX,
+      href: '/' || '/',
+      show: true
+    },
+    {
+      id: 2,
+      icon: 'fas fa-th',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('NEXT_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      id: 3,
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('NEXT_MENU_TAG', null, CONFIG)
+    },
+    {
+      id: 4,
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      slot: archiveSlot,
+      show: siteConfig('NEXT_MENU_ARCHIVE', null, CONFIG)
+    }
   ]
 
   let links = [].concat(defaultLinks)
@@ -31,21 +60,38 @@ export const MenuList = (props) => {
   }
 
   return (
-        <>
-            {/* 大屏模式菜单 */}
-            <menu id='nav' data-aos="fade-down"
-                data-aos-duration="500"
-                data-aos-delay="400"
-                data-aos-once="true"
-                data-aos-anchor-placement="top-bottom"
-                className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 '>
-                {links.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
-            </menu>
+    <>
+      {/* 大屏模式菜单 */}
+      <menu
+        id='nav'
+        data-aos='fade-down'
+        data-aos-duration='500'
+        data-aos-delay='400'
+        data-aos-once='true'
+        data-aos-anchor-placement='top-bottom'
+        className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 '>
+        {links.map(
+          (link, index) =>
+            link && link.show && <MenuItemDrop key={index} link={link} />
+        )}
+      </menu>
 
-            {/* 移动端菜单 */}
-            <menu id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
-                {links?.map((link, index) => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link} />)}
-            </menu>
-        </>
+      {/* 移动端菜单 */}
+      <menu
+        id='nav-menu-mobile'
+        className='block md:hidden my-auto justify-start bg-white'>
+        {links?.map(
+          (link, index) =>
+            link &&
+            link.show && (
+              <MenuItemCollapse
+                onHeightChange={props.onHeightChange}
+                key={index}
+                link={link}
+              />
+            )
+        )}
+      </menu>
+    </>
   )
 }
diff --git a/themes/next/components/SideAreaLeft.js b/themes/next/components/SideAreaLeft.js
index 3d5c6443..e2800a7c 100644
--- a/themes/next/components/SideAreaLeft.js
+++ b/themes/next/components/SideAreaLeft.js
@@ -1,14 +1,14 @@
+import Live2D from '@/components/Live2D'
+import Tabs from '@/components/Tabs'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import Card from './Card'
 import InfoCard from './InfoCard'
+import Logo from './Logo'
 import { MenuList } from './MenuList'
 import SearchInput from './SearchInput'
 import Toc from './Toc'
-import { useGlobal } from '@/lib/global'
-import Tabs from '@/components/Tabs'
-import Logo from './Logo'
-import Card from './Card'
-import CONFIG from '../config'
-import Live2D from '@/components/Live2D'
-import { siteConfig } from '@/lib/config'
 
 /**
  * 侧边平铺
@@ -23,55 +23,68 @@ const SideAreaLeft = props => {
   const { post, slot, postCount } = props
   const { locale } = useGlobal()
   const showToc = post && post.toc && post.toc.length > 1
-  return <aside id='left' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-20 relative'}>
-
-        <section
-            className='w-60'>
-            {/* 菜单 */}
-            <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
-                <Logo className='h-32' {...props} />
-                <div className='pt-2 px-2 '>
-                    <MenuList allowCollapse={true} {...props} />
-                </div>
-                {siteConfig('NEXT_MENU_SEARCH', null, CONFIG) && <div className='px-2 pt-2 '>
-                    <SearchInput {...props} />
-                </div>}
-
-            </section>
-
-        </section>
-
-        <div className='sticky top-4 hidden lg:block'>
-            <Card>
-                <Tabs>
-                    {showToc && (
-                        <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-hexo-black-gray duration-200'>
-                            <Toc toc={post.toc} />
-                        </div>
-                    )}
-
-                    <div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-hexo-black-gray duration-200 py-6'>
-                        <InfoCard {...props} />
-                        <>
-                            <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
-                                <span className='px-1 '>
-                                    <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
-                                <span className='px-1 busuanzi_container_site_uv hidden'>
-                                    | <strong className='pl-1 busuanzi_value_site_uv font-medium' />{locale.COMMON.VISITORS}</span>
-                                {/* <span className='px-1 busuanzi_container_site_pv hidden'>
-                | <strong className='pl-1 busuanzi_value_site_pv font-medium'/>{locale.COMMON.VIEWS}</span> */}
-                            </div>
-                        </>
-                    </div>
-                </Tabs>
-            </Card>
-
-            <div className='flex justify-center'>
-                {slot}
-                <Live2D />
+  return (
+    <aside
+      id='left'
+      className={
+        (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'ml-4' : 'mr-4') +
+        ' hidden lg:block flex-col w-60 z-20 relative'
+      }>
+      <section className='w-60'>
+        {/* 菜单 */}
+        <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
+          <Logo className='min-h-32 ' {...props} />
+          <div className='pt-2 px-2 '>
+            <MenuList allowCollapse={true} {...props} />
+          </div>
+          {siteConfig('NEXT_MENU_SEARCH', null, CONFIG) && (
+            <div className='px-2 pt-2 '>
+              <SearchInput {...props} />
             </div>
-        </div>
+          )}
+        </section>
+      </section>
 
+      <div className='sticky top-4 hidden lg:block'>
+        <Card>
+          <Tabs>
+            {showToc && (
+              <div
+                key={locale.COMMON.TABLE_OF_CONTENTS}
+                className='dark:text-gray-400 text-gray-600 bg-white dark:bg-hexo-black-gray duration-200'>
+                <Toc toc={post.toc} />
+              </div>
+            )}
+
+            <div
+              key={locale.NAV.ABOUT}
+              className='mb-5 bg-white dark:bg-hexo-black-gray duration-200 py-6'>
+              <InfoCard {...props} />
+              <>
+                <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
+                  <span className='px-1 '>
+                    <strong className='font-medium'>{postCount}</strong>
+                    {locale.COMMON.POSTS}
+                  </span>
+                  <span className='px-1 busuanzi_container_site_uv hidden'>
+                    |{' '}
+                    <strong className='pl-1 busuanzi_value_site_uv font-medium' />
+                    {locale.COMMON.VISITORS}
+                  </span>
+                  {/* <span className='px-1 busuanzi_container_site_pv hidden'>
+                | <strong className='pl-1 busuanzi_value_site_pv font-medium'/>{locale.COMMON.VIEWS}</span> */}
+                </div>
+              </>
+            </div>
+          </Tabs>
+        </Card>
+
+        <div className='flex justify-center'>
+          {slot}
+          <Live2D />
+        </div>
+      </div>
     </aside>
+  )
 }
 export default SideAreaLeft
diff --git a/themes/nobelium/components/MenuItemCollapse.js b/themes/nobelium/components/MenuItemCollapse.js
index c8a18d78..f70ed8d1 100644
--- a/themes/nobelium/components/MenuItemCollapse.js
+++ b/themes/nobelium/components/MenuItemCollapse.js
@@ -33,7 +33,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className='font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
             <span className=' hover:text-red-400 transition-all items-center duration-200'>
@@ -71,7 +71,7 @@ export const MenuItemCollapse = props => {
               <div
                 key={index}
                 className='font-extralight dark:bg-black text-left px-10 justify-start  bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-xs'>{sLink.title}</span>
                 </Link>
               </div>
diff --git a/themes/nobelium/components/MenuItemDrop.js b/themes/nobelium/components/MenuItemDrop.js
index bd2b3ae7..9099d8fd 100644
--- a/themes/nobelium/components/MenuItemDrop.js
+++ b/themes/nobelium/components/MenuItemDrop.js
@@ -19,7 +19,7 @@ export const MenuItemDrop = ({ link }) => {
         onMouseOut={() => changeShow(false)}>
         {!hasSubMenu && (
           <div className='block text-black dark:text-gray-50 nav'>
-            <Link href={link?.to} target={link?.target}>
+            <Link href={link?.href} target={link?.target}>
               {link?.icon && <i className={link?.icon} />} {link?.name}
             </Link>
           </div>
@@ -42,7 +42,7 @@ export const MenuItemDrop = ({ link }) => {
                 <div
                   key={index}
                   className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
-                  <Link href={sLink.to} target={link?.target}>
+                  <Link href={sLink.href} target={link?.target}>
                     <span className='text-sm text-nowrap font-extralight'>
                       {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                       {sLink.title}
diff --git a/themes/nobelium/components/Nav.js b/themes/nobelium/components/Nav.js
index a30618ed..7f699f97 100644
--- a/themes/nobelium/components/Nav.js
+++ b/themes/nobelium/components/Nav.js
@@ -96,7 +96,7 @@ const NavBar = props => {
     {
       id: 2,
       name: locale.NAV.RSS,
-      to: '/feed',
+      href: '/feed',
       show:
         siteConfig('ENABLE_RSS') &&
         siteConfig('NOBELIUM_MENU_RSS', null, CONFIG),
@@ -105,25 +105,25 @@ const NavBar = props => {
     {
       icon: 'fas fa-search',
       name: locale.NAV.SEARCH,
-      to: '/search',
+      href: '/search',
       show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG)
     },
     {
       icon: 'fas fa-archive',
       name: locale.NAV.ARCHIVE,
-      to: '/archive',
+      href: '/archive',
       show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG)
     },
     {
       icon: 'fas fa-folder',
       name: locale.COMMON.CATEGORY,
-      to: '/category',
+      href: '/category',
       show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG)
     },
     {
       icon: 'fas fa-tag',
       name: locale.COMMON.TAGS,
-      to: '/tag',
+      href: '/tag',
       show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG)
     }
   ]
diff --git a/themes/plog/components/BottomNav.js b/themes/plog/components/BottomNav.js
index 3a0fbb27..5f4209a4 100644
--- a/themes/plog/components/BottomNav.js
+++ b/themes/plog/components/BottomNav.js
@@ -1,10 +1,10 @@
+import FullScreenButton from '@/components/FullScreenButton'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { MenuItemDrop } from './MenuItemDrop'
-import FullScreenButton from '@/components/FullScreenButton'
 import InformationButton from './InformationButton'
 import LogoBar from './LogoBar'
-import { siteConfig } from '@/lib/config'
+import { MenuItemDrop } from './MenuItemDrop'
 
 /**
  * 桌面端底部导航
@@ -12,14 +12,20 @@ import { siteConfig } from '@/lib/config'
  * @returns
  */
 const BottomNav = props => {
-  return <>
-        <div id="bottom-nav" className={'dark:bg-black dark:bg-opacity-50z-20 px-4 hidden glassmorphism md:fixed bottom-0 w-screen py-4 md:flex flex-row justify-between items-center'}>
-            {/* 左侧logo文字栏 */}
-            <LogoBar {...props}/>
-            {/* 右下角菜单栏 */}
-            <MenuList {...props} />
-        </div>
+  return (
+    <>
+      <div
+        id='bottom-nav'
+        className={
+          'dark:bg-black dark:bg-opacity-50z-20 px-4 hidden glassmorphism md:fixed bottom-0 w-screen py-4 md:flex flex-row justify-between items-center'
+        }>
+        {/* 左侧logo文字栏 */}
+        <LogoBar {...props} />
+        {/* 右下角菜单栏 */}
+        <MenuList {...props} />
+      </div>
     </>
+  )
 }
 
 /**
@@ -32,11 +38,39 @@ const MenuList = props => {
 
   const { locale } = useGlobal()
   let links = [
-    { id: 2, name: locale.NAV.RSS, to: '/feed', show: siteConfig('ENABLE_RSS') && siteConfig('NOBELIUM_MENU_RSS', null, CONFIG), target: '_blank' },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG) }
+    {
+      id: 2,
+      name: locale.NAV.RSS,
+      href: '/feed',
+      show:
+        siteConfig('ENABLE_RSS') &&
+        siteConfig('NOBELIUM_MENU_RSS', null, CONFIG),
+      target: '_blank'
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG)
+    }
   ]
   if (customNav) {
     links = links.concat(customNav)
@@ -52,17 +86,19 @@ const MenuList = props => {
   }
 
   return (
-        <div className="flex-shrink-0">
-            <ul className="hidden md:flex flex-row">
-                {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
-                <li className='my-auto px-2'>
-                    <FullScreenButton />
-                </li>
-                <li className='my-auto px-2'>
-                    <InformationButton/>
-                </li>
-            </ul>
-        </div>
+    <div className='flex-shrink-0'>
+      <ul className='hidden md:flex flex-row'>
+        {links?.map((link, index) => (
+          <MenuItemDrop key={index} link={link} />
+        ))}
+        <li className='my-auto px-2'>
+          <FullScreenButton />
+        </li>
+        <li className='my-auto px-2'>
+          <InformationButton />
+        </li>
+      </ul>
+    </div>
   )
 }
 
diff --git a/themes/plog/components/MenuItemCollapse.js b/themes/plog/components/MenuItemCollapse.js
index c8a18d78..f70ed8d1 100644
--- a/themes/plog/components/MenuItemCollapse.js
+++ b/themes/plog/components/MenuItemCollapse.js
@@ -33,7 +33,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className='font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
             <span className=' hover:text-red-400 transition-all items-center duration-200'>
@@ -71,7 +71,7 @@ export const MenuItemCollapse = props => {
               <div
                 key={index}
                 className='font-extralight dark:bg-black text-left px-10 justify-start  bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-xs'>{sLink.title}</span>
                 </Link>
               </div>
diff --git a/themes/plog/components/MenuItemDrop.js b/themes/plog/components/MenuItemDrop.js
index 5d4fce15..8b2af918 100644
--- a/themes/plog/components/MenuItemDrop.js
+++ b/themes/plog/components/MenuItemDrop.js
@@ -16,7 +16,7 @@ export const MenuItemDrop = ({ link }) => {
       onMouseLeave={() => changeShow(false)}>
       {!hasSubMenu && (
         <div className='block text-black dark:text-gray-50 nav'>
-          <Link href={link?.to} target={link?.target}>
+          <Link href={link?.href} target={link?.target}>
             {link?.icon && <i className={link?.icon} />} {link?.name}
           </Link>
         </div>
@@ -39,7 +39,7 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
diff --git a/themes/plog/components/Modal.js b/themes/plog/components/Modal.js
index 71dba58c..68f66ca8 100644
--- a/themes/plog/components/Modal.js
+++ b/themes/plog/components/Modal.js
@@ -1,12 +1,10 @@
-import { Fragment, useRef, useState } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { usePlogGlobal } from '..'
 import { ArrowPath, ChevronLeft, ChevronRight } from '@/components/HeroIcons'
-import Link from 'next/link'
-import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
 import { compressImage } from '@/lib/notion/mapImage'
-import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import { Dialog, Transition } from '@headlessui/react'
+import Link from 'next/link'
+import { Fragment, useRef, useState } from 'react'
+import { usePlogGlobal } from '..'
 
 /**
  * 弹出框
@@ -24,10 +22,6 @@ export default function Modal(props) {
   )
   const imgRef = useRef(null)
 
-  const url = checkContainHttp(modalContent?.slug)
-    ? sliceUrlFromHttp(modalContent?.slug)
-    : `${siteConfig('SUB_PATH', '')}/${modalContent?.slug}`
-
   // 添加loading状态
   const [loading, setLoading] = useState(true)
 
@@ -66,48 +60,44 @@ export default function Modal(props) {
   return (
     <Transition.Root show={showModal} as={Fragment}>
       <Dialog
-        as="div"
-        className="relative z-20"
+        as='div'
+        className='relative z-20'
         initialFocus={cancelButtonRef}
-        onClose={handleClose}
-      >
+        onClose={handleClose}>
         {/* 遮罩 */}
         <Transition.Child
           as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
+          enter='ease-out duration-300'
+          enterFrom='opacity-0'
+          enterTo='opacity-100'
+          leave='ease-in duration-200'
+          leaveFrom='opacity-100'
+          leaveTo='opacity-0'>
           <div
             style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
-            className="fixed inset-0 glassmorphism transition-opacity"
+            className='fixed inset-0 glassmorphism transition-opacity'
           />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-30 overflow-y-auto">
-          <div className="flex min-h-full justify-center p-4 text-center items-center">
+        <div className='fixed inset-0 z-30 overflow-y-auto'>
+          <div className='flex min-h-full justify-center p-4 text-center items-center'>
             <Transition.Child
               as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 scale-50 w-0"
+              enter='ease-out duration-300'
+              enterFrom='opacity-0 translate-y-4 scale-50 w-0'
               enterTo={'opacity-100 translate-y-0 max-w-screen'}
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 scale-100  max-w-screen"
-              leaveTo="opacity-0 translate-y-4 scale-50 w-0"
-            >
-              <Dialog.Panel className="group relative transform overflow-hidden rounded-xl text-left shadow-xl transition-all ">
+              leave='ease-in duration-200'
+              leaveFrom='opacity-100 translate-y-0 scale-100  max-w-screen'
+              leaveTo='opacity-0 translate-y-4 scale-50 w-0'>
+              <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 ${loading ? '' : 'hidden'}`}
-                >
-                  <ArrowPath className="w-10 h-10 animate-spin text-gray-200" />
+                  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' />
                 </div>
 
-                <Link href={url}>
+                <Link href={modalContent?.href}>
                   <LazyImage
                     onLoad={handleImageLoad}
                     src={img}
@@ -119,12 +109,11 @@ export default function Modal(props) {
 
                 {!loading && (
                   <>
-                    <div className="absolute bottom-0 left-0 m-4 z-20">
-                      <div className="flex">
+                    <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"
-                        >
+                          className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>
                           {modalContent?.title}
                         </h2>
                       </div>
@@ -132,17 +121,15 @@ export default function Modal(props) {
                         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">
+                        <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"
-                          >
+                            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>
@@ -151,15 +138,13 @@ export default function Modal(props) {
                     {/* <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" />
+                      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" />
+                      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> */}
                   </>
diff --git a/themes/plog/components/Nav.js b/themes/plog/components/Nav.js
index b01fab10..854667d6 100644
--- a/themes/plog/components/Nav.js
+++ b/themes/plog/components/Nav.js
@@ -1,41 +1,55 @@
-import { useRef, useState } from 'react'
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
-import { SvgIcon } from './SvgIcon'
-import { MenuItemDrop } from './MenuItemDrop'
 import Collapse from '@/components/Collapse'
-import { MenuItemCollapse } from './MenuItemCollapse'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRef, useState } from 'react'
+import CONFIG from '../config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import { MenuItemDrop } from './MenuItemDrop'
+import { SvgIcon } from './SvgIcon'
 
 const Header = props => {
   const { fullWidth, siteInfo } = props
 
   const title = siteConfig('TITLE')
 
-  return <div className='md:hidden fixed top-0 w-full z-20'>
-        <div id="sticky-nav"
-            className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8  glassmorphism ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
-                }`} >
-                <Link href="/" aria-label={siteConfig('title')} className="flex items-center">
-                    <>
-                        <div className="h-6 w-6">
-                            {/* <SvgIcon/> */}
-                            {siteConfig('NOBELIUM_NAV_NOTION_ICON', null, CONFIG)
-                              ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={siteConfig('AUTHOR')} />
-                              : <SvgIcon />}
+  return (
+    <div className='md:hidden fixed top-0 w-full z-20'>
+      <div
+        id='sticky-nav'
+        className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8  glassmorphism ${
+          !fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
+        }`}>
+        <Link
+          href='/'
+          aria-label={siteConfig('title')}
+          className='flex items-center'>
+          <>
+            <div className='h-6 w-6'>
+              {/* <SvgIcon/> */}
+              {siteConfig('NOBELIUM_NAV_NOTION_ICON', null, CONFIG) ? (
+                <LazyImage
+                  src={siteInfo?.icon}
+                  width={24}
+                  height={24}
+                  alt={siteConfig('AUTHOR')}
+                />
+              ) : (
+                <SvgIcon />
+              )}
+            </div>
+            <p className='ml-2 font-medium text-gray-800 dark:text-gray-300 header-name'>
+              {title}{' '}
+              {/* ,{' '}<span className="font-normal">{siteConfig('HOME_BANNER_IMAGE')}</span> */}
+            </p>
+          </>
+        </Link>
 
-                        </div>
-                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-                            {title}  {/* ,{' '}<span className="font-normal">{siteConfig('HOME_BANNER_IMAGE')}</span> */}
-                        </p>
-                    </>
-                </Link>
-
-            <NavBar {...props} />
-        </div>
+        <NavBar {...props} />
+      </div>
     </div>
+  )
 }
 
 const NavBar = props => {
@@ -48,11 +62,39 @@ const NavBar = props => {
 
   const { locale } = useGlobal()
   let links = [
-    { id: 2, name: locale.NAV.RSS, to: '/feed', show: siteConfig('ENABLE_RSS') && siteConfig('NOBELIUM_MENU_RSS', null, CONFIG), target: '_blank' },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG) }
+    {
+      id: 2,
+      name: locale.NAV.RSS,
+      href: '/feed',
+      show:
+        siteConfig('ENABLE_RSS') &&
+        siteConfig('NOBELIUM_MENU_RSS', null, CONFIG),
+      target: '_blank'
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG)
+    }
   ]
   if (customNav) {
     links = links.concat(customNav)
@@ -68,18 +110,35 @@ const NavBar = props => {
   }
 
   return (
-        <div className="flex-shrink-0">
-            <ul className=" hidden md:flex flex-row">
-                {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
-            </ul>
-            <div className='md:hidden'><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5 block md:hidden'></i>
-                <Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
-                    <div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
-                        {links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />)}
-                    </div>
-                </Collapse>
-            </div>
-        </div>
+    <div className='flex-shrink-0'>
+      <ul className=' hidden md:flex flex-row'>
+        {links?.map((link, index) => (
+          <MenuItemDrop key={index} link={link} />
+        ))}
+      </ul>
+      <div className='md:hidden'>
+        <i
+          onClick={toggleOpen}
+          className='fas fa-bars cursor-pointer px-5 block md:hidden'></i>
+        <Collapse
+          collapseRef={collapseRef}
+          isOpen={isOpen}
+          type='vertical'
+          className='fixed top-16 right-6'>
+          <div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
+            {links?.map((link, index) => (
+              <MenuItemCollapse
+                key={index}
+                link={link}
+                onHeightChange={param =>
+                  collapseRef.current?.updateCollapseHeight(param)
+                }
+              />
+            ))}
+          </div>
+        </Collapse>
+      </div>
+    </div>
   )
 }
 
diff --git a/themes/starter/components/MenuItem.js b/themes/starter/components/MenuItem.js
index 49b71b0d..ec08aa28 100644
--- a/themes/starter/components/MenuItem.js
+++ b/themes/starter/components/MenuItem.js
@@ -10,7 +10,7 @@ export const MenuItem = ({ link }) => {
       {!hasSubMenu && (
         <li className='group relative whitespace-nowrap'>
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className={`ud-menu-scroll mx-8 flex py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 ${router.route === '/' ? 'lg:text-white lg:group-hover:text-white' : ''} lg:group-hover:opacity-70`}>
             {link?.icon && <i className={link.icon + ' mr-2 my-auto'} />}
@@ -43,7 +43,7 @@ export const MenuItem = ({ link }) => {
               return (
                 <Link
                   key={index}
-                  href={sLink.to}
+                  href={sLink.href}
                   target={link?.target}
                   className='block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary'>
                   {/* 子菜单SubMenuItem */}
diff --git a/themes/starter/components/MenuList.js b/themes/starter/components/MenuList.js
index 081e9933..38ec04f4 100644
--- a/themes/starter/components/MenuList.js
+++ b/themes/starter/components/MenuList.js
@@ -1,20 +1,40 @@
-import { siteConfig } from '@/lib/config';
-import { useGlobal } from '@/lib/global';
-import { useEffect } from 'react';
-import CONFIG from '../config';
-import { MenuItem } from './MenuItem';
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useEffect } from 'react'
+import CONFIG from '../config'
+import { MenuItem } from './MenuItem'
 /**
  * 响应式 折叠菜单
  */
-export const MenuList = (props) => {
+export const MenuList = props => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEO_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEO_MENU_TAG', null, CONFIG) }
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('HEO_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('HEO_MENU_TAG', null, CONFIG)
+    }
   ]
 
   if (customNav) {
@@ -23,32 +43,32 @@ export const MenuList = (props) => {
 
   useEffect(() => {
     // ===== responsive navbar
-    const navbarToggler = document.querySelector('#navbarToggler');
-    const navbarCollapse = document.querySelector('#navbarCollapse');
+    const navbarToggler = document.querySelector('#navbarToggler')
+    const navbarCollapse = document.querySelector('#navbarCollapse')
 
     // 点击弹出菜单
     navbarToggler?.addEventListener('click', () => {
-      navbarToggler?.classList.toggle('navbarTogglerActive');
-      navbarCollapse?.classList.toggle('hidden');
-    });
+      navbarToggler?.classList.toggle('navbarTogglerActive')
+      navbarCollapse?.classList.toggle('hidden')
+    })
 
     //= ==== close navbar-collapse when a  clicked
     document
       .querySelectorAll('#navbarCollapse ul li:not(.submenu-item) a')
-      .forEach((e) =>
+      .forEach(e =>
         e.addEventListener('click', () => {
-          navbarToggler?.classList.remove('navbarTogglerActive');
-          navbarCollapse?.classList.add('hidden');
+          navbarToggler?.classList.remove('navbarTogglerActive')
+          navbarCollapse?.classList.add('hidden')
         })
-      );
+      )
 
     // ===== Sub-menu
-    const submenuItems = document.querySelectorAll('.submenu-item');
-    submenuItems.forEach((el) => {
+    const submenuItems = document.querySelectorAll('.submenu-item')
+    submenuItems.forEach(el => {
       el.querySelector('a')?.addEventListener('click', () => {
-        el.querySelector('.submenu')?.classList.toggle('hidden');
-      });
-    });
+        el.querySelector('.submenu')?.classList.toggle('hidden')
+      })
+    })
   }, [])
 
   // 如果 开启自定义菜单，则覆盖Page生成的菜单
@@ -60,23 +80,29 @@ export const MenuList = (props) => {
   //     return null
   //   }
 
-  return <>
-            <div>
+  return (
+    <>
+      <div>
+        {/* 移动端菜单切换按钮 */}
+        <button
+          id='navbarToggler'
+          className='absolute right-4 top-1/2 block -translate-y-1/2 rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden'>
+          <span className='relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all'></span>
+          <span className='relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all'></span>
+          <span className='relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all'></span>
+        </button>
 
-              {/* 移动端菜单切换按钮 */}
-              <button id="navbarToggler" className="absolute right-4 top-1/2 block -translate-y-1/2 rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden">
-                <span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
-                <span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
-                <span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
-              </button>
-
-              {/* 响应式菜单 */}
-              <nav id="navbarCollapse" className="absolute right-4 top-full hidden w-full max-w-[250px] rounded-lg bg-white py-5 shadow-lg dark:bg-dark-2 lg:static lg:block lg:w-full lg:max-w-full lg:bg-transparent lg:px-4 lg:py-0 lg:shadow-none dark:lg:bg-transparent xl:px-6">
-                <ul className="blcok lg:flex 2xl:ml-20">
-                    {links?.map((link, index) => <MenuItem key={index} link={link} />)}
-                </ul>
-              </nav>
-            </div>
-
-          </>
+        {/* 响应式菜单 */}
+        <nav
+          id='navbarCollapse'
+          className='absolute right-4 top-full hidden w-full max-w-[250px] rounded-lg bg-white py-5 shadow-lg dark:bg-dark-2 lg:static lg:block lg:w-full lg:max-w-full lg:bg-transparent lg:px-4 lg:py-0 lg:shadow-none dark:lg:bg-transparent xl:px-6'>
+          <ul className='blcok lg:flex 2xl:ml-20'>
+            {links?.map((link, index) => (
+              <MenuItem key={index} link={link} />
+            ))}
+          </ul>
+        </nav>
+      </div>
+    </>
+  )
 }