slug调整 兼容commerce主题

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>
+  )
 }