hexo-custom-menu-apart

themes/hexo/components/MenuButtonGroupTop.js

@@ -1,10 +1,11 @@
 import React from 'react'
-import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import CONFIG_HEXO from '../config_hexo'
+import { DropMenu } from './DropMenu'
+import BLOG from '@/blog.config'
 
 const MenuButtonGroupTop = (props) => {
-  const { customNav } = props
+  const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
@@ -19,30 +20,15 @@ const MenuButtonGroupTop = (props) => {
     links = links.concat(customNav)
   }
 
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
   return (
-    <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
-      {links.map(link => {
-        if (link.show) {
-          return (
-            <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
-              target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-              className={'py-1.5 my-1 px-3  text-base justify-center items-center cursor-pointer'}>
-
-              <div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
-                <i className={`${link.icon} mr-1`}/>
-                <div className='text-center'>{link.name}</div>
-              </div>
-
-            </Link>
-          )
-        } else {
-          return null
-        }
-      })}
-    </nav>
+        <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
+            {links.map(link => link && link.show && <DropMenu key={link.id} link={link} />)}
+        </nav>
   )
 }
 export default MenuButtonGroupTop