refactor

lib/db/getSiteData.js

@@ -192,7 +192,7 @@ function getCustomMenu({ collectionData }) {
   if (menuPages && menuPages.length > 0) {
     menuPages.forEach(e => {
       e.show = true
-      if (e?.slug?.indexOf('http') === 0) {
+      if (e?.slug?.indexOf('http') === 0 && e?.slug?.indexOf(BLOG.LINK) < 0) {
         e.target = '_blank'
         e.to = e.slug
       } else {

themes/commerce/components/MenuGroupCard.js

@@ -1,18 +1,35 @@
-import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
 import CONFIG from '../config'
 
-const MenuGroupCard = (props) => {
+const MenuGroupCard = props => {
   const { postCount, categoryOptions, tagOptions } = props
   const { locale } = useGlobal()
   const archiveSlot = <div className='text-center'>{postCount}</div>
-  const categorySlot = <div className='text-center'>{categoryOptions?.length}</div>
+  const categorySlot = (
+    <div className='text-center'>{categoryOptions?.length}</div>
+  )
   const tagSlot = <div className='text-center'>{tagOptions?.length}</div>
 
   const links = [
-    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE },
-    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG }
+    {
+      name: locale.COMMON.ARTICLE,
+      to: '/archive',
+      slot: archiveSlot,
+      show: CONFIG.MENU_ARCHIVE
+    },
+    {
+      name: locale.COMMON.CATEGORY,
+      to: '/category',
+      slot: categorySlot,
+      show: CONFIG.MENU_CATEGORY
+    },
+    {
+      name: locale.COMMON.TAGS,
+      to: '/tag',
+      slot: tagSlot,
+      show: CONFIG.MENU_TAG
+    }
   ]
 
   for (let i = 0; i < links.length; i++) {
@@ -22,29 +39,31 @@ const MenuGroupCard = (props) => {
   }
 
   return (
-    <nav id='nav' className='leading-8 flex justify-center  dark:text-gray-200 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-2 duration-300 text-base justify-center items-center cursor-pointer'}>
-
-                <div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-red-400 hover:text-red-600'>
-                  <div className='text-center'>{link.name}</div>
-                  <div className='text-center font-semibold'>{link.slot}</div>
-                </div>
-
-              </Link>
-            )
-          } else {
-            return null
-          }
-        })}
-      </nav>
+    <nav
+      id='nav'
+      className='leading-8 flex justify-center  dark:text-gray-200 w-full'>
+      {links.map(link => {
+        if (link.show) {
+          return (
+            <Link
+              key={`${link.to}`}
+              title={link.to}
+              href={link.to}
+              target={link?.target}
+              className={
+                'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'
+              }>
+              <div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-red-400 hover:text-red-600'>
+                <div className='text-center'>{link.name}</div>
+                <div className='text-center font-semibold'>{link.slot}</div>
+              </div>
+            </Link>
+          )
+        } else {
+          return null
+        }
+      })}
+    </nav>
   )
 }
 export default MenuGroupCard

themes/commerce/components/MenuItemCollapse.js

@@ -7,7 +7,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -26,30 +26,55 @@ export const MenuItemCollapse = (props) => {
     return null
   }
 
-  return <>
-        <div className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
-            {!hasSubMenu && <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                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'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
-            </Link>}
-            {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="hover:text-[#D2232A]  font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
-                <span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
-                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
-            </div>}
-        </div>
+  return (
+    <>
+      <div
+        className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray'
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            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'>
+              {link?.icon && <i className={link.icon + ' mr-4'} />}
+              {link?.name}
+            </span>
+          </Link>
+        )}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='hover:text-[#D2232A]  font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <span className='transition-all items-center duration-200'>
+              {link?.icon && <i className={link.icon + ' mr-4'} />}
+              {link?.name}
+            </span>
+            <i
+              className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
+          </div>
+        )}
+      </div>
 
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-sm ml-4 whitespace-nowrap'>
+                    {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/commerce/components/MenuItemDrop.js

@@ -11,33 +11,51 @@ export const MenuItemDrop = ({ link }) => {
     return null
   }
 
-  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} className='h-full'>
+  return (
+    <div
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}
+      className='h-full'>
+      {!hasSubMenu && (
+        <Link
+          href={link?.to}
+          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>
+          {/* {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>} */}
+        </Link>
+      )}
 
-        {!hasSubMenu &&
-            <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                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>
-                {/* {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>} */}
-            </Link>}
-
-        {hasSubMenu && <>
-            <div className='h-full flex space-x-1 whitespace-nowrap items-center cursor-pointer 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>
-                {/* <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i> */}
-            </div>
-        </>}
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 shadow-lg' : 'invisible opacity-0'} overflow-hidden bg-white transition-all duration-300 z-20 absolute block  `}>
-            {link.subMenus.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
+      {hasSubMenu && (
+        <>
+          <div className='h-full flex space-x-1 whitespace-nowrap items-center cursor-pointer 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>
+            {/* <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i> */}
+          </div>
+        </>
+      )}
 
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          style={{ backdropFilter: 'blur(3px)' }}
+          className={`${show ? 'visible opacity-100 shadow-lg' : 'invisible opacity-0'} overflow-hidden bg-white transition-all duration-300 z-20 absolute block  `}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-sm text-nowrap font-extralight'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </div>
+  )
 }

themes/example/components/MenuItemDrop.js

@@ -5,34 +5,48 @@ export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
-  return <li className='cursor-pointer' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+  return (
+    <li
+      className='cursor-pointer'
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {!hasSubMenu && (
+        <div className='rounded 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 href={link?.to} target={link?.target}>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+            {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+          </Link>
+        </div>
+      )}
 
-        {!hasSubMenu &&
-            <div className="rounded 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 href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                    {link?.icon && <i className={link?.icon} />} {link?.name}
-                    {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+      {hasSubMenu && (
+        <div className='rounded 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?.icon && <i className={link?.icon} />} {link?.name}
+          <i
+            className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+        </div>
+      )}
+
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          className={`${show ? 'visible opacity-100  top-12' : 'invisible opacity-0 top-10'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-sm text-nowrap font-extralight'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
                 </Link>
-            </div>
-        }
-
-        {hasSubMenu &&
-            <div className='rounded 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?.icon && <i className={link?.icon} />} {link?.name}
-                <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
-            </div>
-        }
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100  top-12' : 'invisible opacity-0 top-10'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-            {link.subMenus.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                    <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
-
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </li>
+  )
 }

themes/fukasawa/components/MenuItemCollapse.js

@@ -8,7 +8,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -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.to || router.asPath === link.to
 
   const toggleShow = () => {
     changeShow(!show)
@@ -31,32 +31,67 @@ export const MenuItemCollapse = (props) => {
     changeIsOpen(!isOpen)
   }
 
-  return <>
-        <div className={ (selected ? 'bg-gray-600 text-white hover:text-white' : 'hover:text-gray-600') + ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
+  return (
+    <>
+      <div
+        className={
+          (selected
+            ? 'bg-gray-600 text-white hover:text-white'
+            : 'hover:text-gray-600') +
+          ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'
+        }
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            target={link?.target}
+            className='dark:text-gray-200 py-2 w-full my-auto items-center justify-between flex  '>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+          </Link>
+        )}
 
-            {!hasSubMenu && <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='dark:text-gray-200 py-2 w-full my-auto items-center justify-between flex  '>
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-            </Link>}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='py-2 font-extralight flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest'>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+            <div className='inline-flex items-center '>
+              <i
+                className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i>
+            </div>
+          </div>
+        )}
+      </div>
 
-            {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="py-2 font-extralight flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest">
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-                <div className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
-            </div>}
-        </div>
-
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map((sLink, index) => {
-              return <div key={index} className='whitespace-nowrap dark:text-gray-200
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <div
+                key={index}
+                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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+                <Link href={sLink.to} target={link?.target}>
+                  <div>
+                    <div
+                      className={`${sLink.icon} text-center w-3 mr-3 text-xs`}
+                    />
+                    {sLink.title}
+                  </div>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/fukasawa/components/MenuItemDrop.js

@@ -5,34 +5,62 @@ export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
-  return <li onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)}
-        className='relative py-1 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '>
+  return (
+    <li
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}
+      className='relative py-1 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '>
+      {!hasSubMenu && (
+        <Link
+          href={link?.to}
+          target={link?.target}
+          className='w-full my-auto items-center justify-between flex '>
+          <div>
+            <div className={`${link.icon} text-center w-4 mr-2`} />
+            {link.name}
+          </div>
+          {link.slot}
+        </Link>
+      )}
 
-        {!hasSubMenu &&
-            <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='w-full my-auto items-center justify-between flex ' >
-                <div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
-                {link.slot}
-            </Link>}
-
-        {hasSubMenu &&
-            <div className='w-full my-auto items-center justify-between flex '>
-                <div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
-                {link.slot}
-                {hasSubMenu && <div className='text-right'><i className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i></div>}
-            </div>}
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} z-20 py-1 absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
-            {link?.subMenus?.map((sLink, index) => {
-              return <li key={index}>
-                    <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='my-auto py-1 px-2 items-center justify-start flex text-gray-500 dark:text-gray-300 hover:text-black  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
-                        {sLink.icon && <i className={`${sLink.icon} w-4 text-center `} />}
-                        <div className={'ml-2 whitespace-nowrap'}>{sLink.name}</div>
-                        {sLink.slot}
-                    </Link>
-                </li>
-            })}
-        </ul>}
+      {hasSubMenu && (
+        <div className='w-full my-auto items-center justify-between flex '>
+          <div>
+            <div className={`${link.icon} text-center w-4 mr-2`} />
+            {link.name}
+          </div>
+          {link.slot}
+          {hasSubMenu && (
+            <div className='text-right'>
+              <i
+                className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+            </div>
+          )}
+        </div>
+      )}
 
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} z-20 py-1 absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
+          {link?.subMenus?.map((sLink, index) => {
+            return (
+              <li key={index}>
+                <Link
+                  href={sLink.to}
+                  target={link?.target}
+                  className='my-auto py-1 px-2 items-center justify-start flex text-gray-500 dark:text-gray-300 hover:text-black  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
+                  {sLink.icon && (
+                    <i className={`${sLink.icon} w-4 text-center `} />
+                  )}
+                  <div className={'ml-2 whitespace-nowrap'}>{sLink.name}</div>
+                  {sLink.slot}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </li>
+  )
 }

themes/game/components/MenuItemCollapse.js

@@ -7,7 +7,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -26,30 +26,59 @@ export const MenuItemCollapse = (props) => {
     return null
   }
 
-  return <>
-        <div className='w-full px-4 py-2 text-left dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
-            {!hasSubMenu && <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                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'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
-            </Link>}
-             {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="font-extralight flex justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
-                <span className=' hover:text-red-400 transition-all items-center duration-200'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
-               <i className='px-2 fa fa-plus text-gray-400'></i>
-            </div>}
-        </div>
+  return (
+    <>
+      <div
+        className='w-full px-4 py-2 text-left dark:bg-hexo-black-gray dark:border-black'
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            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'>
+              {link?.icon && (
+                <span className='mr-2'>
+                  <i className={link.icon} />
+                </span>
+              )}
+              {link?.name}
+            </span>
+          </Link>
+        )}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='font-extralight flex justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <span className=' hover:text-red-400 transition-all items-center duration-200'>
+              {link?.icon && (
+                <span className='mr-2'>
+                  <i className={link.icon} />
+                </span>
+              )}
+              {link?.name}
+            </span>
+            <i className='px-2 fa fa-plus text-gray-400'></i>
+          </div>
+        )}
+      </div>
 
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-xs'>{sLink.title}</span>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-xs'>{sLink.title}</span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/game/components/MenuItemDrop.js

@@ -20,7 +20,7 @@ export const MenuItemDrop = ({ link }) => {
             <Link
               href={link?.to}
               className='flex flex-nowrap'
-              target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
+              target={link?.target}>
               <div className='w-6 mr-2 text-center'>
                 {link?.icon && <i className={link?.icon} />}
               </div>
@@ -47,11 +47,7 @@ export const MenuItemDrop = ({ link }) => {
                 <div
                   key={index}
                   className='text-gray-700 dark:text-gray-200  tracking-widest transition-all duration-200 '>
-                  <Link
-                    href={sLink.to}
-                    target={
-                      link?.to?.indexOf('http') === 0 ? '_blank' : '_self'
-                    }>
+                  <Link href={sLink.to} target={link?.target}>
                     <span className='text-sm text-nowrap font-extralight'>
                       {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                       {sLink.title}

themes/gitbook/components/MenuItemCollapse.js

@@ -8,7 +8,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -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.to || router.asPath === link.to
 
   const toggleShow = () => {
     changeShow(!show)
@@ -31,31 +31,67 @@ export const MenuItemCollapse = (props) => {
     changeIsOpen(!isOpen)
   }
 
-  return <>
-        <div className={ (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600') + ' px-7 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
+  return (
+    <>
+      <div
+        className={
+          (selected
+            ? 'bg-green-600 text-white hover:text-white'
+            : 'hover:text-green-600') +
+          ' px-7 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'
+        }
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            target={link?.target}
+            className='py-2 w-full my-auto items-center justify-between flex  '>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+          </Link>
+        )}
 
-            {!hasSubMenu && <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='py-2 w-full my-auto items-center justify-between flex  '>
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-            </Link>}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='py-2 font-extralight flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest'>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+            <div className='inline-flex items-center '>
+              <i
+                className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i>
+            </div>
+          </div>
+        )}
+      </div>
 
-            {hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="py-2 font-extralight flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest">
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-                <div className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
-            </div>}
-        </div>
-
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link?.subMenus?.map((sLink, index) => {
-              return <div key={index} className='
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link?.subMenus?.map((sLink, index) => {
+            return (
+              <div
+                key={index}
+                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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+                <Link href={sLink.to} target={link?.target}>
+                  <div>
+                    <div
+                      className={`${sLink.icon} text-center w-3 mr-3 text-xs`}
+                    />
+                    {sLink.title}
+                  </div>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/gitbook/components/MenuItemDrop.js

@@ -1,6 +1,6 @@
 import Link from 'next/link'
-import { useState } from 'react'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 
 export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
@@ -10,38 +10,64 @@ export const MenuItemDrop = ({ link }) => {
     return null
   }
   const hasSubMenu = link?.subMenus?.length > 0
-  const selected = (router.pathname === link.to) || (router.asPath === link.to)
-  return <li className='cursor-pointer list-none items-center flex mx-2' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+  const selected = router.pathname === link.to || router.asPath === link.to
+  return (
+    <li
+      className='cursor-pointer list-none items-center flex mx-2'
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {hasSubMenu && (
+        <div
+          className={
+            'px-2 h-full whitespace-nowrap 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>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+            {hasSubMenu && (
+              <i
+                className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+            )}
+          </div>
+        </div>
+      )}
 
-        {hasSubMenu &&
-            <div className={'px-2 h-full whitespace-nowrap 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>
-                    {link?.icon && <i className={link?.icon} />} {link?.name}
-                    {hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
-                </div>
-            </div>
-        }
+      {!hasSubMenu && (
+        <div
+          className={
+            'px-2 h-full whitespace-nowrap 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')
+          }>
+          <Link href={link?.to} target={link?.target}>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+          </Link>
+        </div>
+      )}
 
-        {!hasSubMenu &&
-            <div className={'px-2 h-full whitespace-nowrap 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')}>
-                <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                    {link?.icon && <i className={link?.icon} />} {link?.name}
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
+          {link?.subMenus?.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-xs font-extralight'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
                 </Link>
-            </div>
-        }
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-            {link?.subMenus?.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
-
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </li>
+  )
 }

themes/heo/components/MenuGroupCard.js

@@ -1,44 +1,63 @@
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import CONFIG from '../config'
 
-const MenuGroupCard = (props) => {
+const MenuGroupCard = props => {
   const { postCount, categoryOptions, tagOptions } = props
   const { locale } = useGlobal()
   const archiveSlot = <div className='text-center'>{postCount}</div>
-  const categorySlot = <div className='text-center'>{categoryOptions?.length}</div>
+  const categorySlot = (
+    <div className='text-center'>{categoryOptions?.length}</div>
+  )
   const tagSlot = <div className='text-center'>{tagOptions?.length}</div>
 
   const links = [
-    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) },
-    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG) },
-    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: siteConfig('HEO_MENU_TAG', null, CONFIG) }
+    {
+      name: locale.COMMON.ARTICLE,
+      to: '/archive',
+      slot: archiveSlot,
+      show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      name: locale.COMMON.CATEGORY,
+      to: '/category',
+      slot: categorySlot,
+      show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      name: locale.COMMON.TAGS,
+      to: '/tag',
+      slot: tagSlot,
+      show: siteConfig('HEO_MENU_TAG', null, CONFIG)
+    }
   ]
 
   return (
-        <nav id='nav' className='dark:text-gray-200 w-full px-5'>
-            {links.map((link, index) => {
-              if (link.show) {
-                return (
-                        <div key={index} className=''>
-                            <Link title={link.to}
-                                href={link.to}
-                                target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                                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'}>
-                                <>
-                                    <div>{link.name} :</div>
-                                    <div className='font-semibold'>{link.slot}</div>
-                                </>
-                            </Link>
-                        </div>
-
-                )
-              } else {
-                return null
-              }
-            })}
-        </nav>
+    <nav id='nav' className='dark:text-gray-200 w-full px-5'>
+      {links.map((link, index) => {
+        if (link.show) {
+          return (
+            <div key={index} className=''>
+              <Link
+                title={link.to}
+                href={link.to}
+                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'
+                }>
+                <>
+                  <div>{link.name} :</div>
+                  <div className='font-semibold'>{link.slot}</div>
+                </>
+              </Link>
+            </div>
+          )
+        } else {
+          return null
+        }
+      })}
+    </nav>
   )
 }
 export default MenuGroupCard

themes/heo/components/MenuItemCollapse.js

@@ -25,30 +25,55 @@ export const MenuItemCollapse = ({ link }) => {
     return null
   }
 
-  return <>
-        <div className='select-none w-full px-2 py-2 border rounded-xl text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
-            {!hasSubMenu && <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                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'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
-            </Link>}
-            {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest">
-                <span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
-                <i className={`select-none px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
-            </div>}
-        </div>
+  return (
+    <>
+      <div
+        className='select-none w-full px-2 py-2 border rounded-xl text-left dark:bg-hexo-black-gray'
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            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'>
+              {link?.icon && <i className={link.icon + ' mr-4'} />}
+              {link?.name}
+            </span>
+          </Link>
+        )}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest'>
+            <span className='transition-all items-center duration-200'>
+              {link?.icon && <i className={link.icon + ' mr-4'} />}
+              {link?.name}
+            </span>
+            <i
+              className={`select-none px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
+          </div>
+        )}
+      </div>
 
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} className='rounded-xl'>
-            {link.subMenus.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} className='rounded-xl'>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-sm ml-4 whitespace-nowrap'>
+                    {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/heo/components/MenuItemDrop.js

@@ -9,34 +9,50 @@ export const MenuItemDrop = ({ link }) => {
     return null
   }
 
-  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+  return (
+    <div
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {/* 不含子菜单 */}
+      {!hasSubMenu && (
+        <Link
+          target={link?.target}
+          href={link?.to}
+          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>
+      )}
 
-        {/* 不含子菜单 */}
-        {!hasSubMenu &&
-            <Link
-                target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                href={link?.to}
-                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>}
-
-        {/* 含子菜单的按钮 */}
-        {hasSubMenu && <>
-            <div className='cursor-pointer  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}
-            </div>
-        </>}
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white transition-all duration-300 z-20 absolute`}>
-            {link.subMenus.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
+      {/* 含子菜单的按钮 */}
+      {hasSubMenu && (
+        <>
+          <div className='cursor-pointer  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}
+          </div>
+        </>
+      )}
 
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          style={{ backdropFilter: 'blur(3px)' }}
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white transition-all duration-300 z-20 absolute`}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-sm text-nowrap font-extralight'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </div>
+  )
 }

themes/hexo/components/MenuGroupCard.js

@@ -1,19 +1,36 @@
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import CONFIG from '../config'
 
-const MenuGroupCard = (props) => {
+const MenuGroupCard = props => {
   const { postCount, categoryOptions, tagOptions } = props
   const { locale } = useGlobal()
   const archiveSlot = <div className='text-center'>{postCount}</div>
-  const categorySlot = <div className='text-center'>{categoryOptions?.length}</div>
+  const categorySlot = (
+    <div className='text-center'>{categoryOptions?.length}</div>
+  )
   const tagSlot = <div className='text-center'>{tagOptions?.length}</div>
 
   const links = [
-    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG) },
-    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG) },
-    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: siteConfig('HEXO_MENU_TAG', null, CONFIG) }
+    {
+      name: locale.COMMON.ARTICLE,
+      to: '/archive',
+      slot: archiveSlot,
+      show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      name: locale.COMMON.CATEGORY,
+      to: '/category',
+      slot: categorySlot,
+      show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      name: locale.COMMON.TAGS,
+      to: '/tag',
+      slot: tagSlot,
+      show: siteConfig('HEXO_MENU_TAG', null, CONFIG)
+    }
   ]
 
   for (let i = 0; i < links.length; i++) {
@@ -23,29 +40,31 @@ const MenuGroupCard = (props) => {
   }
 
   return (
-    <nav id='nav' className='leading-8 flex justify-center  dark:text-gray-200 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-2 duration-300 text-base justify-center items-center cursor-pointer'}>
-
-                <div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-indigo-400 hover:text-indigo-600'>
-                  <div className='text-center'>{link.name}</div>
-                  <div className='text-center font-semibold'>{link.slot}</div>
-                </div>
-
-              </Link>
-            )
-          } else {
-            return null
-          }
-        })}
-      </nav>
+    <nav
+      id='nav'
+      className='leading-8 flex justify-center  dark:text-gray-200 w-full'>
+      {links.map(link => {
+        if (link.show) {
+          return (
+            <Link
+              key={`${link.to}`}
+              title={link.to}
+              href={link.to}
+              target={link?.target}
+              className={
+                'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'
+              }>
+              <div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-indigo-400 hover:text-indigo-600'>
+                <div className='text-center'>{link.name}</div>
+                <div className='text-center font-semibold'>{link.slot}</div>
+              </div>
+            </Link>
+          )
+        } else {
+          return null
+        }
+      })}
+    </nav>
   )
 }
 export default MenuGroupCard

themes/hexo/components/MenuItemCollapse.js

@@ -7,7 +7,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -26,30 +26,55 @@ export const MenuItemCollapse = (props) => {
     return null
   }
 
-  return <>
-        <div className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
-            {!hasSubMenu && <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                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'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
-            </Link>}
-            {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
-                <span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
-                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
-            </div>}
-        </div>
+  return (
+    <>
+      <div
+        className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray'
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            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'>
+              {link?.icon && <i className={link.icon + ' mr-4'} />}
+              {link?.name}
+            </span>
+          </Link>
+        )}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <span className='transition-all items-center duration-200'>
+              {link?.icon && <i className={link.icon + ' mr-4'} />}
+              {link?.name}
+            </span>
+            <i
+              className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
+          </div>
+        )}
+      </div>
 
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-sm ml-4 whitespace-nowrap'>
+                    {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/hexo/components/MenuItemDrop.js

@@ -9,33 +9,51 @@ export const MenuItemDrop = ({ link }) => {
     return null
   }
 
-  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+  return (
+    <div
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {!hasSubMenu && (
+        <Link
+          href={link?.to}
+          target={link?.target}
+          className=' menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
+          {link?.icon && <i className={link?.icon} />} {link?.name}
+          {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+        </Link>
+      )}
 
-        {!hasSubMenu &&
-            <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className=" menu-link pl-2 pr-4 no-underline tracking-widest pb-1">
-                {link?.icon && <i className={link?.icon}/>} {link?.name}
-                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
-            </Link>}
-
-        {hasSubMenu && <>
-            <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
-                {link?.icon && <i className={link?.icon}/>} {link?.name}
-                <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
-            </div>
-        </>}
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-20 absolute block  `}>
-            {link.subMenus.map((sLink, index) => {
-              return <li key={index} className='cursor-pointer hover:bg-indigo-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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
+      {hasSubMenu && (
+        <>
+          <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+            <i
+              className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
+          </div>
+        </>
+      )}
 
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          style={{ backdropFilter: 'blur(3px)' }}
+          className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-20 absolute block  `}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <li
+                key={index}
+                className='cursor-pointer hover:bg-indigo-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}>
+                  <span className='text-sm text-nowrap font-extralight'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </div>
+  )
 }

themes/matery/components/MenuGroupCard.js

@@ -1,9 +1,9 @@
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import CONFIG from '../config'
 
-const MenuGroupCard = (props) => {
+const MenuGroupCard = props => {
   const { postCount, categories, tags } = props
   const { locale } = useGlobal()
   const archiveSlot = <div className='text-center'>{postCount}</div>
@@ -11,35 +11,50 @@ const MenuGroupCard = (props) => {
   const tagSlot = <div className='text-center'>{tags?.length}</div>
 
   const links = [
-    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
-    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
-    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: siteConfig('MATERY_MENU_TAG', null, CONFIG) }
+    {
+      name: locale.COMMON.ARTICLE,
+      to: '/archive',
+      slot: archiveSlot,
+      show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      name: locale.COMMON.CATEGORY,
+      to: '/category',
+      slot: categorySlot,
+      show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      name: locale.COMMON.TAGS,
+      to: '/tag',
+      slot: tagSlot,
+      show: siteConfig('MATERY_MENU_TAG', null, CONFIG)
+    }
   ]
 
   return (
     <nav id='nav' className='leading-8 flex justify-center   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-2 duration-300 text-base justify-center items-center cursor-pointer'}>
-
-                <div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-indigo-400 hover:text-indigo-600'>
-                  <div className='text-center'>{link.name}</div>
-                  <div className='text-center font-semibold'>{link.slot}</div>
-                </div>
-
-              </Link>
-            )
-          } else {
-            return null
-          }
-        })}
-      </nav>
+      {links.map(link => {
+        if (link.show) {
+          return (
+            <Link
+              key={`${link.to}`}
+              title={link.to}
+              href={link.to}
+              target={link?.target}
+              className={
+                'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'
+              }>
+              <div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-indigo-400 hover:text-indigo-600'>
+                <div className='text-center'>{link.name}</div>
+                <div className='text-center font-semibold'>{link.slot}</div>
+              </div>
+            </Link>
+          )
+        } else {
+          return null
+        }
+      })}
+    </nav>
   )
 }
 export default MenuGroupCard

themes/matery/components/MenuItemCollapse.js

@@ -27,35 +27,63 @@ export const MenuItemCollapse = ({ link }) => {
     return null
   }
 
-  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+  const selected = router.pathname === link.to || router.asPath === link.to
 
-  return <>
-        <div onClick={toggleShow} className={'py-2 px-5 duration-300 text-base justify-between hover:bg-indigo-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 ')}>
+  return (
+    <>
+      <div
+        onClick={toggleShow}
+        className={
+          'py-2 px-5 duration-300 text-base justify-between hover:bg-indigo-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 ')
+        }>
+        {!hasSubMenu && (
+          <Link href={link?.to} target={link?.target}>
+            <div className='my-auto items-center justify-between flex '>
+              {link.icon && (
+                <i className={`${link.icon} w-4 mr-6 text-center`} />
+              )}
+              <div>{link.name}</div>
+            </div>
+            {link.slot}
+          </Link>
+        )}
 
-            {!hasSubMenu && <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                <div className='my-auto items-center justify-between flex '>
-                    {link.icon && <i className={`${link.icon} w-4 mr-6 text-center`} />}
-                    <div >{link.name}</div>
-                </div>
-                {link.slot}
-            </Link>}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='my-auto items-center w-full justify-between flex '>
+            <div className=''>
+              <i className={`${link.icon} w-4 mr-6 text-center`} />
+              {link?.name}
+            </div>
+            <i
+              className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i>
+          </div>
+        )}
+      </div>
 
-            {hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null} className='my-auto items-center w-full justify-between flex '>
-                <div className=''><i className={`${link.icon} w-4 mr-6 text-center`} />{link?.name}</div>
-                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i>
-            </div>}
-        </div>
-
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen}>
-            {link.subMenus.map((sLink, index) => {
-              return <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-700 hover:text-white 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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm'><i className={`${sLink.icon} w-4 mr-3 text-center`} />{sLink.title}</span>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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-700 hover:text-white 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}>
+                  <span className='text-sm'>
+                    <i className={`${sLink.icon} w-4 mr-3 text-center`} />
+                    {sLink.title}
+                  </span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/matery/components/MenuItemDrop.js

@@ -9,33 +9,51 @@ export const MenuItemDrop = ({ link }) => {
     return null
   }
 
-  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+  return (
+    <div
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {!hasSubMenu && (
+        <Link
+          href={link?.to}
+          target={link?.target}
+          className=' menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+          {link?.icon && <i className={link?.icon} />} {link?.name}
+          {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+        </Link>
+      )}
 
-        {!hasSubMenu &&
-            <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className=" menu-link pl-2 pr-4  no-underline tracking-widest pb-1">
-                {link?.icon && <i className={link?.icon} />} {link?.name}
-                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
-            </Link>}
-
-        {hasSubMenu && <>
-            <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
-                {link?.icon && <i className={link?.icon} />} {link?.name}
-                <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
-            </div>
-        </>}
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block  `}>
-            {link.subMenus.map((sLink, index) => {
-              return <li key={index} className='cursor-pointer hover:bg-indigo-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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
+      {hasSubMenu && (
+        <>
+          <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+            <i
+              className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
+          </div>
+        </>
+      )}
 
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          style={{ backdropFilter: 'blur(3px)' }}
+          className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block  `}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <li
+                key={index}
+                className='cursor-pointer hover:bg-indigo-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}>
+                  <span className='text-sm text-nowrap font-extralight'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </div>
+  )
 }

themes/medium/components/MenuItemCollapse.js

@@ -8,7 +8,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -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.to || router.asPath === link.to
 
   const toggleShow = () => {
     changeShow(!show)
@@ -31,32 +31,67 @@ export const MenuItemCollapse = (props) => {
     changeIsOpen(!isOpen)
   }
 
-  return <>
-        <div className={ (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600') + ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
+  return (
+    <>
+      <div
+        className={
+          (selected
+            ? 'bg-green-600 text-white hover:text-white'
+            : 'hover:text-green-600') +
+          ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'
+        }
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            target={link?.target}
+            className='py-2 w-full my-auto items-center justify-between flex  '>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+          </Link>
+        )}
 
-            {!hasSubMenu && <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='py-2 w-full my-auto items-center justify-between flex  '>
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-            </Link>}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='py-2 font-extralight flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest'>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+            <div className='inline-flex items-center '>
+              <i
+                className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i>
+            </div>
+          </div>
+        )}
+      </div>
 
-            {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="py-2 font-extralight flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest">
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-                <div className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
-            </div>}
-        </div>
-
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link?.subMenus?.map(sLink => {
-              return <div key={sLink.id} className='
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link?.subMenus?.map(sLink => {
+            return (
+              <div
+                key={sLink.id}
+                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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+                <Link href={sLink.to} target={link?.target}>
+                  <div>
+                    <div
+                      className={`${sLink.icon} text-center w-3 mr-3 text-xs`}
+                    />
+                    {sLink.title}
+                  </div>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/medium/components/MenuItemDrop.js

@@ -1,6 +1,6 @@
 import Link from 'next/link'
-import { useState } from 'react'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 
 export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
@@ -12,39 +12,65 @@ 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.to || router.asPath === link.to
 
-  return <li className='cursor-pointer list-none items-center flex mx-2' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+  return (
+    <li
+      className='cursor-pointer list-none items-center flex mx-2'
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {hasSubMenu && (
+        <div
+          className={
+            'px-3 h-full whitespace-nowrap 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>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+            {hasSubMenu && (
+              <i
+                className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+            )}
+          </div>
+        </div>
+      )}
 
-        {hasSubMenu &&
-            <div className={'px-3 h-full whitespace-nowrap 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>
-                    {link?.icon && <i className={link?.icon} />} {link?.name}
-                    {hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
-                </div>
-            </div>
-        }
+      {!hasSubMenu && (
+        <div
+          className={
+            'px-3 h-full whitespace-nowrap 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')
+          }>
+          <Link href={link?.to} target={link?.target}>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+          </Link>
+        </div>
+      )}
 
-        {!hasSubMenu &&
-            <div className={'px-3 h-full whitespace-nowrap 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')}>
-                <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                    {link?.icon && <i className={link?.icon} />} {link?.name}
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
+          {link?.subMenus?.map(sLink => {
+            return (
+              <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}>
+                  <span className='text-xs font-extralight'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
                 </Link>
-            </div>
-        }
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-            {link?.subMenus?.map(sLink => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
-
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </li>
+  )
 }

themes/movie/components/MenuItemCollapse.js

@@ -28,11 +28,13 @@ export const MenuItemCollapse = props => {
 
   return (
     <>
-      <div className='select-none w-full px-6 py-2  text-left ' onClick={toggleShow}>
+      <div
+        className='select-none w-full px-6 py-2  text-left '
+        onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
             href={link?.to}
-            target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
+            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'>
               {link?.icon && <i className={link.icon + ' mr-4'} />}
@@ -56,15 +58,19 @@ export const MenuItemCollapse = props => {
 
       {/* 折叠子菜单 */}
       {hasSubMenu && (
-        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange} className='rounded-xl'>
+        <Collapse
+          isOpen={isOpen}
+          onHeightChange={props.onHeightChange}
+          className='rounded-xl'>
           {link.subMenus.map((sLink, index) => {
             return (
               <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
+                <Link href={sLink.to} target={link?.target}>
                   <span className='text-sm ml-4 whitespace-nowrap'>
-                    {link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}
+                    {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
+                    {sLink.title}
                   </span>
                 </Link>
               </div>

themes/movie/components/MenuItemDrop.js

@@ -12,26 +12,23 @@ export const MenuItemDrop = ({ link }) => {
   return (
     <div
       onMouseOver={() => changeShow(true)}
-      onMouseOut={() => changeShow(false)}
-    >
+      onMouseOut={() => changeShow(false)}>
       {!hasSubMenu && (
         <Link
           href={link?.to}
-          target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-          className="select-none menu-link pl-2 pr-4 no-underline tracking-widest pb-1"
-        >
+          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}
-          {hasSubMenu && <i className="px-2 fa fa-angle-down"></i>}
+          {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
         </Link>
       )}
 
       {hasSubMenu && (
         <>
-          <div className="cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1">
+          <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
             {link?.icon && <i className={link?.icon} />} {link?.name}
             <i
-              className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}
-            ></i>
+              className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
           </div>
         </>
       )}
@@ -40,19 +37,14 @@ export const MenuItemDrop = ({ link }) => {
       {hasSubMenu && (
         <ul
           style={{ backdropFilter: 'blur(3px)' }}
-          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-30 absolute block  `}
-        >
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-30 absolute block  `}>
           {link.subMenus.map((sLink, index) => {
             return (
               <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                >
-                  <span className="text-sm">
+                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}>
+                  <span className='text-sm'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
                   </span>

themes/nav/components/MenuItemCollapse.js

@@ -8,7 +8,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -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.to || router.asPath === link.to
 
   const toggleShow = () => {
     changeShow(!show)
@@ -31,32 +31,67 @@ export const MenuItemCollapse = (props) => {
     changeIsOpen(!isOpen)
   }
 
-  return <>
-        <div className={ 'text-black' + (selected ? 'text-white hover:text-white' : 'hover:text-gray-600') + ' px-7 w-full text-left duration-200 dark:border-black'} onClick={toggleShow} >
+  return (
+    <>
+      <div
+        className={
+          'text-black' +
+          (selected ? 'text-white hover:text-white' : 'hover:text-gray-600') +
+          ' px-7 w-full text-left duration-200 dark:border-black'
+        }
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            target={link?.target}
+            className='py-2 w-full my-auto items-center justify-between flex  '>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+          </Link>
+        )}
 
-            {!hasSubMenu && <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='py-2 w-full my-auto items-center justify-between flex  '>
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-            </Link>}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='py-2 flex justify-between cursor-pointer  dark:text-gray-400 dark:hover:text-white font-bold  no-underline tracking-widest'>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-2`} />
+              {link.name}
+            </div>
+            <div className='inline-flex items-center '>
+              <i
+                className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i>
+            </div>
+          </div>
+        )}
+      </div>
 
-            {hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="py-2 flex justify-between cursor-pointer  dark:text-gray-400 dark:hover:text-white font-bold  no-underline tracking-widest">
-                <div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
-                <div className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
-            </div>}
-        </div>
-
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link?.subMenus?.map((sLink, index) => {
-              return <div key={index} className='
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link?.subMenus?.map((sLink, index) => {
+            return (
+              <div
+                key={index}
+                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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}> */}
-                    <a href={`/#${sLink.title}`} target={'_self'}>
-                        <div><div className={`${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'} text-center w-3 mr-2 text-xs`} />{sLink.title}</div>
-                    </a>
-                </div>
-            })}
-        </Collapse>}
+                {/* <Link href={sLink.to} target={link?.target}> */}
+                <a href={`/#${sLink.title}`} target={'_self'}>
+                  <div>
+                    <div
+                      className={`${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'} text-center w-3 mr-2 text-xs`}
+                    />
+                    {sLink.title}
+                  </div>
+                </a>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/nav/components/MenuItemDrop.js

@@ -1,6 +1,6 @@
 import Link from 'next/link'
-import { useState } from 'react'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 
 export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
@@ -12,39 +12,65 @@ 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.to || router.asPath === link.to
 
-  return <li className='cursor-pointer list-none items-center flex mx-2' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+  return (
+    <li
+      className='cursor-pointer list-none items-center flex mx-2'
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {hasSubMenu && (
+        <div
+          className={
+            'px-2 h-full whitespace-nowrap 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>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+            {hasSubMenu && (
+              <i
+                className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+            )}
+          </div>
+        </div>
+      )}
 
-        {hasSubMenu &&
-            <div className={'px-2 h-full whitespace-nowrap 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>
-                    {link?.icon && <i className={link?.icon} />} {link?.name}
-                    {hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
-                </div>
-            </div>
-        }
+      {!hasSubMenu && (
+        <div
+          className={
+            'px-2 h-full whitespace-nowrap 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')
+          }>
+          <Link href={link?.to} target={link?.target}>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+          </Link>
+        </div>
+      )}
 
-        {!hasSubMenu &&
-            <div className={'px-2 h-full whitespace-nowrap 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')}>
-                <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                    {link?.icon && <i className={link?.icon} />} {link?.name}
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
+          {link?.subMenus?.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-xs font-extralight'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
                 </Link>
-            </div>
-        }
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-            {link?.subMenus?.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
-
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </li>
+  )
 }

themes/next/components/MenuItemCollapse.js

@@ -7,7 +7,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -22,32 +22,64 @@ export const MenuItemCollapse = (props) => {
     changeIsOpen(!isOpen)
   }
 
-  return <>
-        <div className='px-5 py-2 w-full text-left duration-200  hover:bg-gray-700 hover:text-white not:last-child:border-b-0 border-b dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
-            {!hasSubMenu && <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className='w-full my-auto items-center justify-between flex   dark:text-gray-200 '>
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-            </Link>}
+  return (
+    <>
+      <div
+        className='px-5 py-2 w-full text-left duration-200  hover:bg-gray-700 hover:text-white not:last-child:border-b-0 border-b dark:bg-hexo-black-gray dark:border-black'
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            target={link?.target}
+            className='w-full my-auto items-center justify-between flex   dark:text-gray-200 '>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+          </Link>
+        )}
 
-            {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="font-extralight flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest">
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-                <div className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
-            </div>}
-        </div>
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='font-extralight flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest'>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+            <div className='inline-flex items-center '>
+              <i
+                className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i>
+            </div>
+          </div>
+        )}
+      </div>
 
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map((sLink, index) => {
-              return <div key={index} className='whitespace-nowrap   dark:text-gray-200
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <div
+                key={index}
+                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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <div>{sLink.icon && <div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />}{sLink.title}</div>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+                <Link href={sLink.to} target={link?.target}>
+                  <div>
+                    {sLink.icon && (
+                      <div
+                        className={`${sLink.icon} text-center w-3 mr-3 text-xs`}
+                      />
+                    )}
+                    {sLink.title}
+                  </div>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/next/components/MenuItemDrop.js

@@ -5,34 +5,62 @@ export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
-  return <li onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)}
-        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 '>
+  return (
+    <li
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}
+      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}
+          target={link?.target}
+          className='w-full my-auto items-center justify-between flex '>
+          <div>
+            <div className={`${link.icon} text-center w-4 mr-4`} />
+            {link.name}
+          </div>
+          {link.slot}
+        </Link>
+      )}
 
-        {!hasSubMenu &&
-            <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='w-full my-auto items-center justify-between flex ' >
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-                {link.slot}
-            </Link>}
-
-        {hasSubMenu &&
-            <div className='w-full my-auto items-center justify-between flex '>
-                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
-                {link.slot}
-                {hasSubMenu && <div className='text-right'><i className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i></div>}
-            </div>}
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} whitespace-nowrap absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
-            {link?.subMenus?.map(sLink => {
-              return <li key={sLink.id} >
-                    <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} 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 && <i className={`${sLink.icon} w-4 text-center`} />}
-                        <div className={'ml-4'}>{sLink.name}</div>
-                        {sLink.slot}
-                    </Link>
-                </li>
-            })}
-        </ul>}
+      {hasSubMenu && (
+        <div className='w-full my-auto items-center justify-between flex '>
+          <div>
+            <div className={`${link.icon} text-center w-4 mr-4`} />
+            {link.name}
+          </div>
+          {link.slot}
+          {hasSubMenu && (
+            <div className='text-right'>
+              <i
+                className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+            </div>
+          )}
+        </div>
+      )}
 
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} whitespace-nowrap absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
+          {link?.subMenus?.map(sLink => {
+            return (
+              <li key={sLink.id}>
+                <Link
+                  href={sLink.to}
+                  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 && (
+                    <i className={`${sLink.icon} w-4 text-center`} />
+                  )}
+                  <div className={'ml-4'}>{sLink.name}</div>
+                  {sLink.slot}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </li>
+  )
 }

themes/nobelium/components/MenuItemCollapse.js

@@ -7,7 +7,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -26,30 +26,59 @@ export const MenuItemCollapse = (props) => {
     return null
   }
 
-  return <>
-        <div className='w-full px-4 py-2 text-left dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
-            {!hasSubMenu && <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                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'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
-            </Link>}
-             {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="font-extralight flex justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
-                <span className=' hover:text-red-400 transition-all items-center duration-200'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
-               <i className='px-2 fa fa-plus text-gray-400'></i>
-            </div>}
-        </div>
+  return (
+    <>
+      <div
+        className='w-full px-4 py-2 text-left dark:bg-hexo-black-gray dark:border-black'
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            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'>
+              {link?.icon && (
+                <span className='mr-2'>
+                  <i className={link.icon} />
+                </span>
+              )}
+              {link?.name}
+            </span>
+          </Link>
+        )}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='font-extralight flex justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <span className=' hover:text-red-400 transition-all items-center duration-200'>
+              {link?.icon && (
+                <span className='mr-2'>
+                  <i className={link.icon} />
+                </span>
+              )}
+              {link?.name}
+            </span>
+            <i className='px-2 fa fa-plus text-gray-400'></i>
+          </div>
+        )}
+      </div>
 
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-xs'>{sLink.title}</span>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-xs'>{sLink.title}</span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/nobelium/components/MenuItemDrop.js

@@ -11,35 +11,49 @@ export const MenuItemDrop = ({ link }) => {
 
   const hasSubMenu = link?.subMenus?.length > 0
 
-  return <li className='mx-3 my-2' >
-        <div className='cursor-pointer ' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)}>
-            {!hasSubMenu &&
-                <div className="block text-black dark:text-gray-50 nav" >
-                    <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} >
-                        {link?.icon && <i className={link?.icon} />} {link?.name}
-                    </Link>
+  return (
+    <li className='mx-3 my-2'>
+      <div
+        className='cursor-pointer '
+        onMouseOver={() => changeShow(true)}
+        onMouseOut={() => changeShow(false)}>
+        {!hasSubMenu && (
+          <div className='block text-black dark:text-gray-50 nav'>
+            <Link href={link?.to} target={link?.target}>
+              {link?.icon && <i className={link?.icon} />} {link?.name}
+            </Link>
+          </div>
+        )}
+
+        {hasSubMenu && (
+          <div className='block text-black dark:text-gray-50 nav'>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+            <i
+              className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+          </div>
+        )}
+
+        {/* 子菜单 */}
+        {hasSubMenu && (
+          <ul
+            className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
+            {link.subMenus.map((sLink, index) => {
+              return (
+                <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}>
+                    <span className='text-sm text-nowrap font-extralight'>
+                      {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                      {sLink.title}
+                    </span>
+                  </Link>
                 </div>
-            }
-
-            {hasSubMenu &&
-                <div className='block text-black dark:text-gray-50 nav'>
-                    {link?.icon && <i className={link?.icon} />} {link?.name}
-                    <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
-                </div>
-            }
-
-            {/* 子菜单 */}
-            {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-                {link.subMenus.map((sLink, index) => {
-                  return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'} >
-                            <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                        </Link>
-                    </div>
-                })}
-            </ul>}
-
-        </div>
-
+              )
+            })}
+          </ul>
+        )}
+      </div>
     </li>
+  )
 }

themes/plog/components/MenuItemCollapse.js

@@ -7,7 +7,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -26,30 +26,59 @@ export const MenuItemCollapse = (props) => {
     return null
   }
 
-  return <>
-        <div className='w-full px-4 py-2 text-left dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
-            {!hasSubMenu && <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                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'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
-            </Link>}
-             {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="font-extralight flex justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
-                <span className=' hover:text-red-400 transition-all items-center duration-200'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
-               <i className='px-2 fa fa-plus text-gray-400'></i>
-            </div>}
-        </div>
+  return (
+    <>
+      <div
+        className='w-full px-4 py-2 text-left dark:bg-hexo-black-gray dark:border-black'
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            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'>
+              {link?.icon && (
+                <span className='mr-2'>
+                  <i className={link.icon} />
+                </span>
+              )}
+              {link?.name}
+            </span>
+          </Link>
+        )}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='font-extralight flex justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <span className=' hover:text-red-400 transition-all items-center duration-200'>
+              {link?.icon && (
+                <span className='mr-2'>
+                  <i className={link.icon} />
+                </span>
+              )}
+              {link?.name}
+            </span>
+            <i className='px-2 fa fa-plus text-gray-400'></i>
+          </div>
+        )}
+      </div>
 
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map((sLink, index) => {
-              return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-xs'>{sLink.title}</span>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-xs'>{sLink.title}</span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/plog/components/MenuItemDrop.js

@@ -9,32 +9,47 @@ export const MenuItemDrop = ({ link }) => {
 
   const hasSubMenu = link?.subMenus?.length > 0
 
-  return <li className='cursor-pointer py-2 px-3' onMouseEnter={() => changeShow(true)} onMouseLeave={() => changeShow(false)}>
-            {!hasSubMenu &&
-                <div className="block text-black dark:text-gray-50 nav" >
-                    <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} >
-                        {link?.icon && <i className={link?.icon} />} {link?.name}
-                    </Link>
-                </div>
-            }
+  return (
+    <li
+      className='cursor-pointer py-2 px-3'
+      onMouseEnter={() => changeShow(true)}
+      onMouseLeave={() => changeShow(false)}>
+      {!hasSubMenu && (
+        <div className='block text-black dark:text-gray-50 nav'>
+          <Link href={link?.to} target={link?.target}>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+          </Link>
+        </div>
+      )}
 
-            {hasSubMenu &&
-                <div className='block text-black dark:text-gray-50 nav'>
-                    {link?.icon && <i className={link?.icon} />} {link?.name}
-                    <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
-                </div>
-            }
+      {hasSubMenu && (
+        <div className='block text-black dark:text-gray-50 nav'>
+          {link?.icon && <i className={link?.icon} />} {link?.name}
+          <i
+            className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+        </div>
+      )}
 
-            {/* 子菜单 */}
-            {hasSubMenu && <ul className={`${show ? 'visible opacity-100 bottom-16 ' : 'invisible opacity-0 bottom-14'} border-gray-100  bg-white rounded-lg overflow-hidden  dark:bg-black dark:border-gray-800 bg-opacity-60 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-                {link.subMenus.map((sLink, index) => {
-                  return <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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                            <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                        </Link>
-                    </li>
-                })}
-            </ul>}
-
-            </li>
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          className={`${show ? 'visible opacity-100 bottom-16 ' : 'invisible opacity-0 bottom-14'} border-gray-100  bg-white rounded-lg overflow-hidden  dark:bg-black dark:border-gray-800 bg-opacity-60 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <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}>
+                  <span className='text-sm text-nowrap font-extralight'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </li>
+  )
 }

themes/simple/components/MenuItemCollapse.js

@@ -7,7 +7,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = (props) => {
+export const MenuItemCollapse = props => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -26,30 +26,67 @@ export const MenuItemCollapse = (props) => {
     return null
   }
 
-  return <>
-        <div className='w-full px-8 py-3 text-left border-b dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
-            {!hasSubMenu && <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className="items-center flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
-                <span className='text-blue-600 dark:text-blue-300 hover:text-red-400 transition-all items-center duration-200'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
-            </Link>}
-             {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="items-center flex justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
-                <span className='text-blue-600 dark:text-blue-300 hover:text-red-400 transition-all items-center duration-200'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
-               <i className={`px-2 fa fa-plus transition-all duration-200 ${isOpen && 'rotate-45'} text-gray-400`}></i>
-            </div>}
-        </div>
+  return (
+    <>
+      <div
+        className='w-full px-8 py-3 text-left border-b dark:bg-hexo-black-gray dark:border-black'
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            target={link?.target}
+            className='items-center flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <span className='text-blue-600 dark:text-blue-300 hover:text-red-400 transition-all items-center duration-200'>
+              {link?.icon && (
+                <span className='mr-2'>
+                  <i className={link.icon} />
+                </span>
+              )}
+              {link?.name}
+            </span>
+          </Link>
+        )}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='items-center flex justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <span className='text-blue-600 dark:text-blue-300 hover:text-red-400 transition-all items-center duration-200'>
+              {link?.icon && (
+                <span className='mr-2'>
+                  <i className={link.icon} />
+                </span>
+              )}
+              {link?.name}
+            </span>
+            <i
+              className={`px-2 fa fa-plus transition-all duration-200 ${isOpen && 'rotate-45'} text-gray-400`}></i>
+          </div>
+        )}
+      </div>
 
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map((sLink, index) => {
-              return <div key={index} className='dark:bg-black text-left px-10 justify-start text-blue-600 dark:text-blue-300 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?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='ml-4 text-sm'>{sLink?.icon && <span className='mr-2 w-4'><i className={sLink.icon}/></span>}{sLink.title}</span>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <div
+                key={index}
+                className='dark:bg-black text-left px-10 justify-start text-blue-600 dark:text-blue-300 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}>
+                  <span className='ml-4 text-sm'>
+                    {sLink?.icon && (
+                      <span className='mr-2 w-4'>
+                        <i className={sLink.icon} />
+                      </span>
+                    )}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/simple/components/MenuItemDrop.js

@@ -9,33 +9,60 @@ export const MenuItemDrop = ({ link }) => {
     return null
   }
 
-  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+  return (
+    <div
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {!hasSubMenu && (
+        <Link
+          href={link?.to}
+          target={link?.target}
+          className=' menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
+          {link?.icon && (
+            <span className='mr-2'>
+              <i className={link.icon} />
+            </span>
+          )}
+          {link?.name}
+          {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+        </Link>
+      )}
 
-        {!hasSubMenu &&
-            <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className=" menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
-                {link?.icon && <span className='mr-2'><i className={link.icon} /></span>}{link?.name}
-                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
-            </Link>}
-
-        {hasSubMenu && <>
-            <div className='cursor-pointer  menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
-                {link?.icon && <span className='mr-2'><i className={link.icon} /></span>} {link?.name}
-                <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
-            </div>
-        </>}
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-10'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-            {link.subMenus.map((sLink, index) => {
-              return <li key={index} className='not:last-child:border-b-0 border-b text-blue-600 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800  py-3 pr-6 pl-2'>
-                    <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm text-nowrap'>{sLink?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
+      {hasSubMenu && (
+        <>
+          <div className='cursor-pointer  menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
+            {link?.icon && (
+              <span className='mr-2'>
+                <i className={link.icon} />
+              </span>
+            )}{' '}
+            {link?.name}
+            <i
+              className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+          </div>
+        </>
+      )}
 
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-10'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <li
+                key={index}
+                className='not:last-child:border-b-0 border-b text-blue-600 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800  py-3 pr-6 pl-2'>
+                <Link href={sLink.to} target={link?.target}>
+                  <span className='text-sm text-nowrap'>
+                    {sLink?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </div>
+  )
 }

themes/starter/components/Logo.js

@@ -1,10 +1,11 @@
+/* eslint-disable @next/next/no-img-element */
 /* eslint-disable @next/next/no-html-link-for-pages */
-import { siteConfig } from '@/lib/config';
-import { useGlobal } from '@/lib/global';
-import throttle from 'lodash.throttle';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import CONFIG from '../config';
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
 
 /**
  * 站点图标
@@ -21,10 +22,9 @@ export const Logo = ({ white }) => {
     // 滚动监听
     const throttleMs = 200
     const navBarScrollListener = throttle(() => {
-      const scrollY = window.scrollY;
+      const scrollY = window.scrollY
       // 何时显示浅色或白底的logo
       const homePageNavBar = router.route === '/' && scrollY < 10 // 在首页并且视窗在页面顶部
-      console.log('白色', homePageNavBar, router.route, scrollY < 10)
       if (white || isDarkMode || homePageNavBar) {
         setLogo(siteConfig('STARTER_LOGO_WHITE', null, CONFIG))
         setLogoTextColor('text-white')
@@ -41,21 +41,29 @@ export const Logo = ({ white }) => {
     }
   }, [isDarkMode, router])
 
-  return <div className="w-60 max-w-full px-4">
-        <div className="navbar-logo flex items-center w-full py-5 cursor-pointer">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            {logo && <img
-                onClick={() => {
-                  router.push('/')
-                }}
-                src={logo}
-                alt="logo"
-                className="header-logo w-full"
-            />}
-            {/* logo文字 */}
-            <span onClick={() => { router.push('/') }} className={`${logoTextColor} dark:text-white py-1.5 header-logo-text whitespace-nowrap text-2xl font-semibold`}>
-                {siteConfig('TITLE')}
-            </span>
-        </div>
+  return (
+    <div className='w-60 max-w-full px-4'>
+      <div className='navbar-logo flex items-center w-full py-5 cursor-pointer'>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        {logo && (
+          <img
+            onClick={() => {
+              router.push('/')
+            }}
+            src={logo}
+            alt='logo'
+            className='header-logo w-full'
+          />
+        )}
+        {/* logo文字 */}
+        <span
+          onClick={() => {
+            router.push('/')
+          }}
+          className={`${logoTextColor} dark:text-white py-1.5 header-logo-text whitespace-nowrap text-2xl font-semibold`}>
+          {siteConfig('TITLE')}
+        </span>
+      </div>
     </div>
+  )
 }

themes/starter/components/MenuItem.js

@@ -4,44 +4,61 @@ import { useRouter } from 'next/router'
 export const MenuItem = ({ link }) => {
   const hasSubMenu = link?.subMenus?.length > 0
   const router = useRouter()
-  return <>
-        {/* MenuItem */}
-        {!hasSubMenu && <li className="group relative whitespace-nowrap">
-            <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                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'} />}{link?.name}
-            </Link>
-        </li>}
+  return (
+    <>
+      {/* MenuItem */}
+      {!hasSubMenu && (
+        <li className='group relative whitespace-nowrap'>
+          <Link
+            href={link?.to}
+            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'} />}
+            {link?.name}
+          </Link>
+        </li>
+      )}
 
-        {hasSubMenu && <li className="submenu-item group relative whitespace-nowrap">
+      {hasSubMenu && (
+        <li className='submenu-item group relative whitespace-nowrap'>
+          {/* 有子菜单的MenuItem */}
+          <a
+            className={`relative mx-8 flex items-center justify-between py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-8 lg:mr-0 lg:inline-flex lg:py-6 lg:pl-0 lg:pr-4 ${router.route === '/' ? 'lg:text-white lg:group-hover:text-white' : ''} lg:group-hover:opacity-70 xl:ml-10`}>
+            {link?.icon && <i className={link.icon + ' mr-2 my-auto'} />}
+            {link?.name}
 
-            {/* 有子菜单的MenuItem */}
-            <a className={`relative mx-8 flex items-center justify-between py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-8 lg:mr-0 lg:inline-flex lg:py-6 lg:pl-0 lg:pr-4 ${router.route === '/' ? 'lg:text-white lg:group-hover:text-white' : ''} lg:group-hover:opacity-70 xl:ml-10`}>
-                {link?.icon && <i className={link.icon + ' mr-2 my-auto'} />}{link?.name}
+            <svg
+              className='ml-2 fill-current'
+              width='16'
+              height='20'
+              viewBox='0 0 16 20'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'>
+              <path d='M7.99999 14.9C7.84999 14.9 7.72499 14.85 7.59999 14.75L1.84999 9.10005C1.62499 8.87505 1.62499 8.52505 1.84999 8.30005C2.07499 8.07505 2.42499 8.07505 2.64999 8.30005L7.99999 13.525L13.35 8.25005C13.575 8.02505 13.925 8.02505 14.15 8.25005C14.375 8.47505 14.375 8.82505 14.15 9.05005L8.39999 14.7C8.27499 14.825 8.14999 14.9 7.99999 14.9Z' />
+            </svg>
+          </a>
 
-                <svg
-                className="ml-2 fill-current"
-                width="16"
-                height="20"
-                viewBox="0 0 16 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                >
-                <path
-                    d="M7.99999 14.9C7.84999 14.9 7.72499 14.85 7.59999 14.75L1.84999 9.10005C1.62499 8.87505 1.62499 8.52505 1.84999 8.30005C2.07499 8.07505 2.42499 8.07505 2.64999 8.30005L7.99999 13.525L13.35 8.25005C13.575 8.02505 13.925 8.02505 14.15 8.25005C14.375 8.47505 14.375 8.82505 14.15 9.05005L8.39999 14.7C8.27499 14.825 8.14999 14.9 7.99999 14.9Z"
-                />
-                </svg>
-            </a>
-
-            <div className="submenu relative left-0 top-full hidden w-[250px] rounded-sm bg-white p-4 transition-[top] duration-300 group-hover:opacity-100 dark:bg-dark-2 lg:invisible lg:absolute lg:top-[110%] lg:block lg:opacity-0 lg:shadow-lg lg:group-hover:visible lg:group-hover:top-full" >
-                {link.subMenus.map((sLink, index) => {
-                  return <Link key={index} href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className="block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary" >
-                     {/* 子菜单SubMenuItem */}
-                     <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2 my-auto'} />} {sLink.title}</span>
+          <div className='submenu relative left-0 top-full hidden w-[250px] rounded-sm bg-white p-4 transition-[top] duration-300 group-hover:opacity-100 dark:bg-dark-2 lg:invisible lg:absolute lg:top-[110%] lg:block lg:opacity-0 lg:shadow-lg lg:group-hover:visible lg:group-hover:top-full'>
+            {link.subMenus.map((sLink, index) => {
+              return (
+                <Link
+                  key={index}
+                  href={sLink.to}
+                  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 */}
+                  <span className='text-sm ml-4 whitespace-nowrap'>
+                    {link?.icon && (
+                      <i className={sLink.icon + ' mr-2 my-auto'} />
+                    )}{' '}
+                    {sLink.title}
+                  </span>
                 </Link>
-                })}
-            </div>
-        </li>}
+              )
+            })}
+          </div>
+        </li>
+      )}
     </>
+  )
 }