slug 调整兼容已有主题

themes/medium/components/MenuBarMobile.js

@@ -1,18 +1,30 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
-export const MenuBarMobile = (props) => {
+export const MenuBarMobile = props => {
   const { customMenu, customNav } = props
   const { locale } = useGlobal()
 
   let links = [
-    // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MEDIUM_MENU_CATEGORY', null, CONFIG) },
-    { name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MEDIUM_MENU_TAG', null, CONFIG) },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MEDIUM_MENU_ARCHIVE', null, CONFIG) }
-    // { name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MENU_SEARCH', null, CONFIG) }
+    // { name: locale.NAV.INDEX, href: '/' || '/', show: true },
+    {
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('MEDIUM_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('MEDIUM_MENU_TAG', null, CONFIG)
+    },
+    {
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('MEDIUM_MENU_ARCHIVE', null, CONFIG)
+    }
+    // { name: locale.NAV.SEARCH, href: '/search', show: siteConfig('MENU_SEARCH', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -30,8 +42,13 @@ export const MenuBarMobile = (props) => {
 
   return (
     <nav id='nav' className=' text-md'>
-        {links?.map((link, index) => <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link}/>)}
-
+      {links?.map((link, index) => (
+        <MenuItemCollapse
+          onHeightChange={props.onHeightChange}
+          key={index}
+          link={link}
+        />
+      ))}
     </nav>
   )
 }

themes/medium/components/MenuItemCollapse.js

@@ -21,7 +21,7 @@ export const MenuItemCollapse = props => {
     return null
   }
 
-  const selected = router.pathname === link.to || router.asPath === link.to
+  const selected = router.pathname === link.href || router.asPath === link.href
 
   const toggleShow = () => {
     changeShow(!show)
@@ -43,7 +43,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className='py-2 w-full my-auto items-center justify-between flex  '>
             <div>
@@ -79,7 +79,7 @@ export const MenuItemCollapse = props => {
                 className='
               not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-200
               font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <div>
                     <div
                       className={`${sLink.icon} text-center w-3 mr-3 text-xs`}

themes/medium/components/MenuItemDrop.js

@@ -12,7 +12,7 @@ export const MenuItemDrop = ({ link }) => {
     return null
   }
   const hasSubMenu = link?.subMenus?.length > 0
-  const selected = router.pathname === link.to || router.asPath === link.to
+  const selected = router.pathname === link.href || router.asPath === link.href
 
   return (
     <li
@@ -45,7 +45,7 @@ export const MenuItemDrop = ({ link }) => {
               ? 'bg-green-600 text-white hover:text-white'
               : 'hover:text-green-600')
           }>
-          <Link href={link?.to} target={link?.target}>
+          <Link href={link?.href} target={link?.target}>
             {link?.icon && <i className={link?.icon} />} {link?.name}
           </Link>
         </div>
@@ -60,7 +60,7 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={sLink.id}
                 className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-xs font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}

themes/medium/components/MenuItemMobileNormal.js

@@ -9,19 +9,21 @@ export const NormalMenu = props => {
     return null
   }
 
-  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+  const selected = router.pathname === link.href || router.asPath === link.href
 
-  return <Link
-    key={`${link.to}`}
-    title={link.to}
-    href={link.to}
-    className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
-        (selected ? 'text-black' : ' ')}>
-
-    <div className='my-auto items-center justify-center flex '>
-      <div className={ 'hover:text-black'}>{link.name}</div>
-    </div>
-    {link.slot}
-
-  </Link>
+  return (
+    <Link
+      key={`${link.href}`}
+      title={link.href}
+      href={link.href}
+      className={
+        'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
+        (selected ? 'text-black' : ' ')
+      }>
+      <div className='my-auto items-center justify-center flex '>
+        <div className={'hover:text-black'}>{link.name}</div>
+      </div>
+      {link.slot}
+    </Link>
+  )
 }

themes/medium/components/MenuItemPCNormal.js

@@ -4,21 +4,27 @@ import { useRouter } from 'next/router'
 export const MenuItemPCNormal = props => {
   const { link } = props
   const router = useRouter()
-  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+  const selected = router.pathname === link.href || router.asPath === link.href
   if (!link || !link.show) {
     return null
   }
 
-  return <Link
-        key={`${link.id}-${link.to}`}
-        title={link.to}
-        href={link.to}
-        className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
-            (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
-        <div className='items-center justify-center flex '>
-            <i className={link.icon} />
-            <div className='ml-2 whitespace-nowrap'>{link.name}</div>
-        </div>
-        {link.slot}
+  return (
+    <Link
+      key={`${link.id}-${link.href}`}
+      title={link.href}
+      href={link.href}
+      className={
+        'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+        (selected
+          ? 'bg-green-600 text-white hover:text-white'
+          : 'hover:text-green-600')
+      }>
+      <div className='items-center justify-center flex '>
+        <i className={link.icon} />
+        <div className='ml-2 whitespace-nowrap'>{link.name}</div>
+      </div>
+      {link.slot}
     </Link>
+  )
 }

themes/medium/components/TopNavBar.js

@@ -1,10 +1,10 @@
-import LogoBar from './LogoBar'
-import { useRef, useState } from 'react'
 import Collapse from '@/components/Collapse'
-import { MenuBarMobile } from './MenuBarMobile'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRef, useState } from 'react'
+import CONFIG from '../config'
+import LogoBar from './LogoBar'
+import { MenuBarMobile } from './MenuBarMobile'
 import { MenuItemDrop } from './MenuItemDrop'
 
 /**
@@ -20,10 +20,30 @@ export default function TopNavBar(props) {
   const { locale } = useGlobal()
 
   const defaultLinks = [
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MEDIUM_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MEDIUM_MENU_TAG', null, CONFIG) },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MEDIUM_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MEDIUM_MENU_SEARCH', null, CONFIG) }
+    {
+      icon: 'fas fa-th',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('MEDIUM_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('MEDIUM_MENU_TAG', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('MEDIUM_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('MEDIUM_MENU_SEARCH', null, CONFIG)
+    }
   ]
 
   let links = defaultLinks.concat(customNav)
@@ -42,33 +62,49 @@ export default function TopNavBar(props) {
   }
 
   return (
-      <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
-
-            {/* 移动端折叠菜单 */}
-            <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
-                <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
-                    <MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
-                </div>
-            </Collapse>
-
-            {/* 导航栏菜单 */}
-            <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
-
-                {/* 左侧图标Logo */}
-                <LogoBar {...props} />
-
-                {/* 折叠按钮、仅移动端显示 */}
-                <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-                    <div onClick={toggleMenuOpen} className='cursor-pointer'>
-                        {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
-                    </div>
-                </div>
-
-                {/* 桌面端顶部菜单 */}
-                <div className='hidden md:flex'>
-                    {links && links?.map((link, index) => <MenuItemDrop key={index} link={link}/>)}
-                </div>
-            </div>
+    <div
+      id='top-nav'
+      className={'sticky top-0 lg:relative w-full z-40 ' + className}>
+      {/* 移动端折叠菜单 */}
+      <Collapse
+        type='vertical'
+        collapseRef={collapseRef}
+        isOpen={isOpen}
+        className='md:hidden'>
+        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
+          <MenuBarMobile
+            {...props}
+            onHeightChange={param =>
+              collapseRef.current?.updateCollapseHeight(param)
+            }
+          />
         </div>
+      </Collapse>
+
+      {/* 导航栏菜单 */}
+      <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
+        {/* 左侧图标Logo */}
+        <LogoBar {...props} />
+
+        {/* 折叠按钮、仅移动端显示 */}
+        <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
+          <div onClick={toggleMenuOpen} className='cursor-pointer'>
+            {isOpen ? (
+              <i className='fas fa-times' />
+            ) : (
+              <i className='fas fa-bars' />
+            )}
+          </div>
+        </div>
+
+        {/* 桌面端顶部菜单 */}
+        <div className='hidden md:flex'>
+          {links &&
+            links?.map((link, index) => (
+              <MenuItemDrop key={index} link={link} />
+            ))}
+        </div>
+      </div>
+    </div>
   )
 }