diff --git a/themes/commerce/components/Footer.js b/themes/commerce/components/Footer.js
index 5aab31e4..27a558df 100644
--- a/themes/commerce/components/Footer.js
+++ b/themes/commerce/components/Footer.js
@@ -62,7 +62,7 @@ const Footer = props => {
                     <Link
                       key={`${menu.name}`}
                       title={`${menu.name}`}
-                      href={`${menu.to}`}
+                      href={`${menu.href}`}
                       passHref>
                       {menu.name}
                     </Link>
diff --git a/themes/commerce/components/Header.js b/themes/commerce/components/Header.js
index af963564..39f77627 100644
--- a/themes/commerce/components/Header.js
+++ b/themes/commerce/components/Header.js
@@ -1,12 +1,12 @@
-import LogoBar from './LogoBar'
-import { useEffect, useRef, useState } from 'react'
 import Collapse from '@/components/Collapse'
-import { MenuBarMobile } from './MenuBarMobile'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
-import { MenuItemDrop } from './MenuItemDrop'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
+import { useEffect, useRef, useState } from 'react'
+import CONFIG from '../config'
+import LogoBar from './LogoBar'
+import { MenuBarMobile } from './MenuBarMobile'
+import { MenuItemDrop } from './MenuItemDrop'
 
 /**
  * 顶部导航栏 + 菜单
@@ -21,10 +21,30 @@ export default function Header(props) {
   const { locale } = useGlobal()
 
   const defaultLinks = [
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
+    {
+      icon: 'fas fa-th',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: CONFIG.MENU_CATEGORY
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: CONFIG.MENU_TAG
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: CONFIG.MENU_ARCHIVE
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: CONFIG.MENU_SEARCH
+    }
   ]
 
   let links = defaultLinks.concat(customNav)
@@ -65,32 +85,52 @@ export default function Header(props) {
     return null
   }
 
-  return <div id='top-navbar-wrapper' className={'sticky top-0 w-full z-40 shadow bg-white dark:bg-hexo-black-gray '}>
+  return (
+    <div
+      id='top-navbar-wrapper'
+      className={
+        'sticky top-0 w-full z-40 shadow bg-white dark:bg-hexo-black-gray '
+      }>
+      {/* 导航栏菜单内容 */}
+      <div
+        id='top-navbar'
+        className='px-4 flex w-full mx-auto max-w-screen-xl h-24 transition-all duration-200 items-between'>
+        {/* 左侧图标Logo */}
+        <LogoBar {...props} />
 
-        {/* 导航栏菜单内容 */}
-        <div id="top-navbar" className='px-4 flex w-full mx-auto max-w-screen-xl h-24 transition-all duration-200 items-between'>
-
-            {/* 左侧图标Logo */}
-            <LogoBar {...props} />
-
-            {/* 移动端折叠按钮 */}
-            <div className='mr-1 flex md:hidden justify-end items-center text-lg 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 items-center'>
-                {links && links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
-            </div>
+        {/* 移动端折叠按钮 */}
+        <div className='mr-1 flex md:hidden justify-end items-center text-lg 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>
 
-          {/* 移动端折叠菜单 */}
-          <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='hidden md:flex items-center'>
+          {links &&
+            links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+        </div>
+      </div>
+
+      {/* 移动端折叠菜单 */}
+      <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>
+  )
 }
diff --git a/themes/commerce/components/MenuBarMobile.js b/themes/commerce/components/MenuBarMobile.js
index a8ba0f12..829c44c6 100644
--- a/themes/commerce/components/MenuBarMobile.js
+++ b/themes/commerce/components/MenuBarMobile.js
@@ -1,18 +1,22 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { MenuItemCollapse } from './MenuItemCollapse'
-import { siteConfig } from '@/lib/config'
 
-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: CONFIG.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
-    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
+    // { name: locale.NAV.INDEX, href: '/' || '/', show: true },
+    {
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: CONFIG.MENU_CATEGORY
+    },
+    { name: locale.COMMON.TAGS, href: '/tag', show: CONFIG.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, href: '/archive', show: CONFIG.MENU_ARCHIVE }
+    // { name: locale.NAV.SEARCH, href: '/search', show: CONFIG.MENU_SEARCH }
   ]
 
   if (customNav) {
@@ -30,7 +34,13 @@ export const MenuBarMobile = (props) => {
 
   return (
     <nav id='nav' className=' text-md'>
-        {links?.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.id} link={link}/>)}
+      {links?.map(link => (
+        <MenuItemCollapse
+          onHeightChange={props.onHeightChange}
+          key={link?.id}
+          link={link}
+        />
+      ))}
     </nav>
   )
 }
diff --git a/themes/commerce/components/MenuGroupCard.js b/themes/commerce/components/MenuGroupCard.js
index 99c94626..63f0f48e 100644
--- a/themes/commerce/components/MenuGroupCard.js
+++ b/themes/commerce/components/MenuGroupCard.js
@@ -14,19 +14,19 @@ const MenuGroupCard = props => {
   const links = [
     {
       name: locale.COMMON.ARTICLE,
-      to: '/archive',
+      href: '/archive',
       slot: archiveSlot,
       show: CONFIG.MENU_ARCHIVE
     },
     {
       name: locale.COMMON.CATEGORY,
-      to: '/category',
+      href: '/category',
       slot: categorySlot,
       show: CONFIG.MENU_CATEGORY
     },
     {
       name: locale.COMMON.TAGS,
-      to: '/tag',
+      href: '/tag',
       slot: tagSlot,
       show: CONFIG.MENU_TAG
     }
@@ -46,9 +46,9 @@ const MenuGroupCard = props => {
         if (link.show) {
           return (
             <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
+              key={`${link.slug}`}
+              title={link.name}
+              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/commerce/components/MenuItemCollapse.js b/themes/commerce/components/MenuItemCollapse.js
index 3251b9fb..ad8f4b93 100644
--- a/themes/commerce/components/MenuItemCollapse.js
+++ b/themes/commerce/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='hover:text-[#D2232A] 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:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
-                <Link href={sLink.to} target={link?.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/commerce/components/MenuItemDrop.js b/themes/commerce/components/MenuItemDrop.js
index fabd6c10..d5b80449 100644
--- a/themes/commerce/components/MenuItemDrop.js
+++ b/themes/commerce/components/MenuItemDrop.js
@@ -2,10 +2,15 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 
+/**
+ * 下拉菜单
+ * @param {*} param0
+ * @returns
+ */
 export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
-  const selected = useRouter().asPath === link?.to
+  const selected = useRouter().asPath === link?.href
 
   if (!link || !link.show) {
     return null
@@ -18,7 +23,7 @@ export const MenuItemDrop = ({ link }) => {
       className='h-full'>
       {!hasSubMenu && (
         <Link
-          href={link?.to}
+          href={link?.href}
           target={link?.target}
           className={`${selected && 'border-b-2 border-[#D2232A]'} h-full flex space-x-1 whitespace-nowrap items-center font-sans menu-link pl-2 pr-4  dark:text-gray-200 no-underline tracking-widest pb-1`}>
           {link?.icon && <i className={link?.icon} />} <div>{link?.name}</div>
@@ -45,7 +50,7 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='cursor-pointer hover:bg-red-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
-                <Link href={sLink.to} target={link?.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/commerce/components/MenuListSide.js b/themes/commerce/components/MenuListSide.js
index 89133256..0cd2c4a9 100644
--- a/themes/commerce/components/MenuListSide.js
+++ b/themes/commerce/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: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: CONFIG.MENU_ARCHIVE
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: CONFIG.MENU_SEARCH
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: CONFIG.MENU_CATEGORY
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: CONFIG.MENU_TAG
+    }
   ]
 
   if (customNav) {
@@ -34,9 +54,11 @@ export const MenuListSide = (props) => {
   }
 
   return (
-        <nav>
-            {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
-            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
-        </nav>
+    <nav>
+      {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
+      {links?.map(link => (
+        <MenuItemCollapse key={link?.id} link={link} />
+      ))}
+    </nav>
   )
 }
diff --git a/themes/commerce/components/MenuListTop.js b/themes/commerce/components/MenuListTop.js
index c4a10085..054ef5bf 100644
--- a/themes/commerce/components/MenuListTop.js
+++ b/themes/commerce/components/MenuListTop.js
@@ -1,18 +1,36 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { MenuItemDrop } from './MenuItemDrop'
-import { siteConfig } from '@/lib/config'
 
-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: CONFIG.MENU_INDEX },
-    { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
-    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
-    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+    {
+      id: 1,
+      icon: 'fa-solid fa-house',
+      name: locale.NAV.INDEX,
+      href: '/',
+      show: CONFIG.MENU_INDEX
+    },
+    {
+      id: 2,
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: CONFIG.MENU_SEARCH
+    },
+    {
+      id: 3,
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: CONFIG.MENU_ARCHIVE
+    }
+    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, href: '/category', show: CONFIG.MENU_CATEGORY },
+    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, href: '/tag', show: CONFIG.MENU_TAG }
   ]
 
   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 => link && link.show && <MenuItemDrop key={link?.id} link={link} />)}
-        </nav>
-    </>)
+  return (
+    <>
+      <nav
+        id='nav-mobile'
+        className='leading-8 justify-center font-light w-full flex'>
+        {links?.map(
+          link =>
+            link && link.show && <MenuItemDrop key={link?.id} link={link} />
+        )}
+      </nav>
+    </>
+  )
 }