slug 调整兼容已有主题

themes/nav/components/ArticleAround.js

@@ -5,27 +5,25 @@ import Link from 'next/link'
  * @param {prev,next} param0
  * @returns
  */
-export default function ArticleAround ({ prev, next }) {
+export default function ArticleAround({ prev, next }) {
   if (!prev || !next) {
     return <></>
   }
   return (
     <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
       <Link
-        href={`/${prev.slug}`}
+        href={prev.href}
         passHref
         className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
-
-        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
-
+        <i className='mr-1 fas fa-angle-double-left' />
+        {prev.title}
       </Link>
       <Link
-        href={`/${next.slug}`}
+        href={next.href}
         passHref
         className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
         {next.title}
         <i className='ml-1 my-1 fas fa-angle-double-right' />
-
       </Link>
     </section>
   )

themes/nav/components/MenuBarMobile.js

@@ -1,6 +1,6 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
 /**
@@ -8,16 +8,28 @@ import { MenuItemCollapse } from './MenuItemCollapse'
  * @param {*} props
  * @returns
  */
-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('NAV_MENU_CATEGORY', null, CONFIG) },
-    { name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NAV_MENU_TAG', null, CONFIG) },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NAV_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('NAV_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('NAV_MENU_TAG', null, CONFIG)
+    },
+    {
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('NAV_MENU_ARCHIVE', null, CONFIG)
+    }
+    // { name: locale.NAV.SEARCH, href: '/search', show: siteConfig('MENU_SEARCH', null, CONFIG) }
   ]
 
   if (customNav) {
@@ -35,7 +47,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/nav/components/MenuItem.js

@@ -21,52 +21,61 @@ export const MenuItem = ({ link }) => {
   }
 
   // #号加标题  快速跳转到指定锚点
-  const isAnchor = link?.to === '#'
-  const url = isAnchor ? `#${link.name}` : link.to
+  const isAnchor = link?.href === '#'
+  const url = isAnchor ? `#${link.name}` : link.href
 
-  return <>
-        {/* 菜单 */}
-        <div
-            onClick={toggleOpenSubMenu}
-            className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 pt-2 font-light select-none flex justify-between cursor-pointer' key={link?.to}>
-
-            {link?.subMenus
-              ? (<>
-                    <span className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
-                        <i className={`text-base ${link?.icon ? link?.icon : ''} mr-1`} />{link?.title}
-                    </span>
-                    <div className='inline-flex items-center select-none pointer-events-none '>
-                        <i className={`${isOpen ? '-rotate-90' : ''} text-xs dark:text-neutral-500 text-gray-300 hover:text-black dark:hover:text-white-400 px-2 fas fa-chevron-left transition-all duration-200`}></i>
-                    </div>
-                </>)
-              : (
-                    <Link href={url} className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
-                         <i className={`text-base ${link?.icon ? link?.icon : (isAnchor ? 'fas fa-hashtag' : '')} mr-1`} />{link?.title}
-                    </Link>
-                )
-
-            }
-        </div>
-
-        {/* 子菜单按钮 */}
-        {link?.subMenus && (
-            <Collapse isOpen={isOpen} key='collapse'>
-                {
-                    link?.subMenus?.map((sLink, index) => {
-                      // #号加标题  快速跳转到指定锚点
-                      const sIsAnchor = sLink?.to === '#'
-                      const sUrl = sIsAnchor ? `#${sLink.name}` : sLink.to
-                      return <div key={index} className='nav-submenu'>
-                        <Link href={sUrl}>
-                            <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'>
-                                <i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : (sIsAnchor ? 'fas fa-hashtag' : '')}`} />{sLink.title}</span>
-                        </Link>
-                    </div>
-                    })
-                }
-
-            </Collapse>
+  return (
+    <>
+      {/* 菜单 */}
+      <div
+        onClick={toggleOpenSubMenu}
+        className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 pt-2 font-light select-none flex justify-between cursor-pointer'
+        key={link?.href}>
+        {link?.subMenus ? (
+          <>
+            <span className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
+              <i className={`text-base ${link?.icon ? link?.icon : ''} mr-1`} />
+              {link?.title}
+            </span>
+            <div className='inline-flex items-center select-none pointer-events-none '>
+              <i
+                className={`${isOpen ? '-rotate-90' : ''} text-xs dark:text-neutral-500 text-gray-300 hover:text-black dark:hover:text-white-400 px-2 fas fa-chevron-left transition-all duration-200`}></i>
+            </div>
+          </>
+        ) : (
+          <Link
+            href={url}
+            className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
+            <i
+              className={`text-base ${link?.icon ? link?.icon : isAnchor ? 'fas fa-hashtag' : ''} mr-1`}
+            />
+            {link?.title}
+          </Link>
         )}
+      </div>
 
+      {/* 子菜单按钮 */}
+      {link?.subMenus && (
+        <Collapse isOpen={isOpen} key='collapse'>
+          {link?.subMenus?.map((sLink, index) => {
+            // #号加标题  快速跳转到指定锚点
+            const sIsAnchor = sLink?.href === '#'
+            const sUrl = sIsAnchor ? `#${sLink.name}` : sLink.href
+            return (
+              <div key={index} className='nav-submenu'>
+                <Link href={sUrl}>
+                  <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'>
+                    <i
+                      className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : sIsAnchor ? 'fas fa-hashtag' : ''}`}
+                    />
+                    {sLink.title}
+                  </span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/nav/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)
@@ -42,7 +42,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>
@@ -78,7 +78,7 @@ export const MenuItemCollapse = props => {
                 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?.target}> */}
+                {/* <Link href={sLink.href} target={link?.target}> */}
                 <a href={`/#${sLink.title}`} target={'_self'}>
                   <div>
                     <div

themes/nav/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={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}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-xs font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}

themes/nav/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/nav/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/nav/components/SearchInput.js

@@ -1,12 +1,12 @@
-import { useImperativeHandle, useRef, useState } from 'react'
 import { deepClone } from '@/lib/utils'
 import { useNavGlobal } from '@/themes/nav'
+import { useImperativeHandle, useRef, useState } from 'react'
 let lock = false
 
 const SearchInput = ({ currentSearch, cRef, className }) => {
   const searchInputRef = useRef()
   const { setFilteredNavPages, allNavPages } = useNavGlobal()
-  const [filteredNavPages] = useState(allNavPages)
+  //   const [filteredNavPages] = useState(allNavPages)
 
   useImperativeHandle(cRef, () => {
     return {
@@ -56,10 +56,12 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
    * 回车键
    * @param {*} e
    */
-  const handleKeyUp = (e) => {
-    if (e.keyCode === 13) { // 回车
+  const handleKeyUp = e => {
+    if (e.keyCode === 13) {
+      // 回车
       handleSearch(searchInputRef.current.value)
-    } else if (e.keyCode === 27) { // ESC
+    } else if (e.keyCode === 27) {
+      // ESC
       cleanSearch()
     }
   }
@@ -74,7 +76,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
   }
 
   const [showClean, setShowClean] = useState(false)
-  const updateSearchKey = (val) => {
+  const updateSearchKey = val => {
     if (lock) {
       return
     }
@@ -86,38 +88,51 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
       setShowClean(false)
     }
   }
-  function lockSearchInput () {
+  function lockSearchInput() {
     lock = true
   }
 
-  function unLockSearchInput () {
+  function unLockSearchInput() {
     lock = false
   }
 
-  return <div className={'flex w-36 hover:w-36 md:hover:w-56 md:w-56 transition md:mr-5'}>
-    <input
-      ref={searchInputRef}
-      type='text'
-      className={`${className} outline-none w-full text-sm pl-4 transition-all duration-200 ease-in focus:shadow-lg font-light leading-10 text-black bg-opacity-50 md:bg-opacity-100 bg-neutral-100 md:hover:bg-neutral-200 md:focus:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-white`}
-      onKeyUp={handleKeyUp}
-      onCompositionStart={lockSearchInput}
-      onCompositionUpdate={lockSearchInput}
-      onCompositionEnd={unLockSearchInput}
-      onChange={e => updateSearchKey(e.target.value)}
-      defaultValue={currentSearch}
-    />
+  return (
+    <div
+      className={
+        'flex w-36 hover:w-36 md:hover:w-56 md:w-56 transition md:mr-5'
+      }>
+      <input
+        ref={searchInputRef}
+        type='text'
+        className={`${className} outline-none w-full text-sm pl-4 transition-all duration-200 ease-in focus:shadow-lg font-light leading-10 text-black bg-opacity-50 md:bg-opacity-100 bg-neutral-100 md:hover:bg-neutral-200 md:focus:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-white`}
+        onKeyUp={handleKeyUp}
+        onCompositionStart={lockSearchInput}
+        onCompositionUpdate={lockSearchInput}
+        onCompositionEnd={unLockSearchInput}
+        onChange={e => updateSearchKey(e.target.value)}
+        defaultValue={currentSearch}
+      />
 
-    <div className='flex -ml-6 cursor-pointer float-right items-center justify-center py-2'
-      onClick={handleSearch}>
-        <i className={'hover:text-black transform duration-200 text-neutral-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'} />
-    </div>
-
-    {(showClean &&
-      <div className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'>
-        <i className='fas fa-times hover:text-black transform duration-200 text-neutral-400 cursor-pointer dark:hover:text-gray-300' onClick={cleanSearch} />
+      <div
+        className='flex -ml-6 cursor-pointer float-right items-center justify-center py-2'
+        onClick={handleSearch}>
+        <i
+          className={
+            'hover:text-black transform duration-200 text-neutral-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'
+          }
+        />
       </div>
+
+      {showClean && (
+        <div className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'>
+          <i
+            className='fas fa-times hover:text-black transform duration-200 text-neutral-400 cursor-pointer dark:hover:text-gray-300'
+            onClick={cleanSearch}
+          />
+        </div>
       )}
-  </div>
+    </div>
+  )
 }
 
 export default SearchInput

themes/nav/index.js

@@ -6,36 +6,36 @@
  * 开启方式 在blog.config.js 将主题配置为 `NAV`
  */
 
-import CONFIG from './config'
-import { useEffect, useState, createContext, useContext } from 'react'
-import Footer from './components/Footer'
-import TopNavBar from './components/TopNavBar'
-import { useGlobal } from '@/lib/global'
-import Announcement from './components/Announcement'
-import PageNavDrawer from './components/PageNavDrawer'
-import FloatTocButton from './components/FloatTocButton'
-import { AdSlot } from '@/components/GoogleAdsense'
-import JumpToTopButton from './components/JumpToTopButton'
-import CategoryItem from './components/CategoryItem'
-import TagItemMini from './components/TagItemMini'
 import Comment from '@/components/Comment'
-import TocDrawer from './components/TocDrawer'
-import NotionPage from '@/components/NotionPage'
-import { ArticleLock } from './components/ArticleLock'
-import { Transition } from '@headlessui/react'
-import { Style } from './style'
-import BlogPostListAll from './components/BlogPostListAll'
-import BlogPostCard from './components/BlogPostCard'
-import Link from 'next/link'
-import dynamic from 'next/dynamic'
-import { MenuItem } from './components/MenuItem'
-import LogoBar from './components/LogoBar'
-import { siteConfig } from '@/lib/config'
+import { AdSlot } from '@/components/GoogleAdsense'
 import Live2D from '@/components/Live2D'
-import BlogArchiveItem from './components/BlogArchiveItem'
 import NotionIcon from '@/components/NotionIcon'
-import { useRouter } from 'next/router'
+import NotionPage from '@/components/NotionPage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useState } from 'react'
+import Announcement from './components/Announcement'
+import { ArticleLock } from './components/ArticleLock'
+import BlogArchiveItem from './components/BlogArchiveItem'
+import BlogPostCard from './components/BlogPostCard'
+import BlogPostListAll from './components/BlogPostListAll'
+import CategoryItem from './components/CategoryItem'
+import FloatTocButton from './components/FloatTocButton'
+import Footer from './components/Footer'
+import JumpToTopButton from './components/JumpToTopButton'
+import LogoBar from './components/LogoBar'
+import { MenuItem } from './components/MenuItem'
+import PageNavDrawer from './components/PageNavDrawer'
+import TagItemMini from './components/TagItemMini'
+import TocDrawer from './components/TocDrawer'
+import TopNavBar from './components/TopNavBar'
+import CONFIG from './config'
+import { Style } from './style'
 
 const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
 
@@ -49,8 +49,16 @@ export const useNavGlobal = () => useContext(ThemeGlobalNav)
  * @returns {JSX.Element}
  * @constructor
  */
-const LayoutBase = (props) => {
-  const { customMenu, children, post, allNavPages, categoryOptions, slotLeft, slotTop } = props
+const LayoutBase = props => {
+  const {
+    customMenu,
+    children,
+    post,
+    allNavPages,
+    categoryOptions,
+    slotLeft,
+    slotTop
+  } = props
   const { onLoading } = useGlobal()
   const [tocVisible, changeTocVisible] = useState(false)
   const [pageNavVisible, changePageNavVisible] = useState(false)
@@ -66,99 +74,127 @@ const LayoutBase = (props) => {
 
   // 默认使用自定义菜单，否则将遍历所有的category生成菜单
   if (!siteConfig('NAV_USE_CUSTOM_MENU', null, CONFIG)) {
-    links = categoryOptions && categoryOptions?.map(c => {
-      return { id: c.name, title: `# ${c.name}`, to: `/category/${c.name}`, show: true }
-    })
+    links =
+      categoryOptions &&
+      categoryOptions?.map(c => {
+        return {
+          id: c.name,
+          title: `# ${c.name}`,
+          href: `/category/${c.name}`,
+          show: true
+        }
+      })
   }
 
   return (
-        <ThemeGlobalNav.Provider value={{ tocVisible, changeTocVisible, filteredNavPages, setFilteredNavPages, allNavPages, pageNavVisible, changePageNavVisible, categoryOptions }}>
-            {/* 样式 */}
-            <Style/>
+    <ThemeGlobalNav.Provider
+      value={{
+        tocVisible,
+        changeTocVisible,
+        filteredNavPages,
+        setFilteredNavPages,
+        allNavPages,
+        pageNavVisible,
+        changePageNavVisible,
+        categoryOptions
+      }}>
+      {/* 样式 */}
+      <Style />
 
-            {/* 主题样式根基 */}
-            <div id='theme-onenav' className={`${siteConfig('FONT_STYLE')} dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300 scroll-smooth`}>
-
-                {/* 端顶部导航栏 */}
-                <TopNavBar {...props} />
-
-                {/* 左右布局区块 */}
-                <main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' relative flex justify-between w-full h-screen mx-auto'}>
-
-                    {/* 左侧推拉抽屉 */}
-                    <div className={' hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'}>
-
-                        {/* 图标Logo */}
-                        <div className='hidden md:block w-full top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
-                            <LogoBar {...props} />
-                        </div>
-                        <div className='main-menu z-20 pl-9 pr-7 pb-5 sticky pt-1 top-20 overflow-y-scroll h-fit max-h-full scroll-hidden bg-white dark:bg-neutral-800 rounded-xl '>
-
-                           {/* 嵌入 */}
-                            {slotLeft}
-
-                            <div className='grid pt-2'>
-                                {/* 显示菜单 */}
-                                {links && links?.map((link, index) => <MenuItem key={index} link={link} />)}
-                            </div>
-
-                        </div>
-
-                        {/* 页脚站点信息 */}
-                        <div className='w-56 fixed left-0 bottom-0 z-0'>
-                            <Live2D />
-                            <Footer {...props} />
-                        </div>
-                    </div>
-
-                    {/* 右侧主要内容区块 */}
-                    <div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-20 md:pt-5 pb-8 min-h-screen overflow-y-auto'>
-
-                        <div id='container-inner' className='w-full px-6 pb-6 md:pb-20 max-w-8xl justify-center mx-auto'>
-                            {slotTop}
-                            {/* 广告植入 */}
-                            <WWAds className='w-full' orientation='horizontal'/>
-
-                            <Transition
-                                show={!onLoading}
-                                appear={true}
-                                enter="transition ease-in-out duration-700 transform order-first"
-                                enterFrom="opacity-0 translate-y-16"
-                                enterTo="opacity-100"
-                                leave="transition ease-in-out duration-300 transform"
-                                leaveFrom="opacity-100 translate-y-0"
-                                leaveTo="opacity-0 -translate-y-16"
-                                unmount={false}
-                            >
-                                {children}
-                            </Transition>
-
-                            {/* Google广告 */}
-                            <AdSlot type='in-article' />
-                            <WWAds className='w-full' orientation='horizontal'/>
-
-                            {/* 回顶按钮 */}
-                            <JumpToTopButton />
-                        </div>
-
-                        {/* 底部 */}
-                        <div className='md:hidden'>
-                            <Footer {...props} />
-                        </div>
-                    </div>
-
-                </main>
-
-                {/* 移动端悬浮目录按钮 */}
-                {showTocButton && !tocVisible && <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-neutral-800 rounded'>
-                    <FloatTocButton {...props} />
-                </div>}
-
-                {/* 移动端导航抽屉 */}
-                <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
+      {/* 主题样式根基 */}
+      <div
+        id='theme-onenav'
+        className={`${siteConfig('FONT_STYLE')} dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300 scroll-smooth`}>
+        {/* 端顶部导航栏 */}
+        <TopNavBar {...props} />
 
+        {/* 左右布局区块 */}
+        <main
+          id='wrapper'
+          className={
+            (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
+              ? 'flex-row-reverse'
+              : '') + ' relative flex justify-between w-full h-screen mx-auto'
+          }>
+          {/* 左侧推拉抽屉 */}
+          <div
+            className={
+              ' hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'
+            }>
+            {/* 图标Logo */}
+            <div className='hidden md:block w-full top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
+              <LogoBar {...props} />
             </div>
-        </ThemeGlobalNav.Provider>
+            <div className='main-menu z-20 pl-9 pr-7 pb-5 sticky pt-1 top-20 overflow-y-scroll h-fit max-h-full scroll-hidden bg-white dark:bg-neutral-800 rounded-xl '>
+              {/* 嵌入 */}
+              {slotLeft}
+
+              <div className='grid pt-2'>
+                {/* 显示菜单 */}
+                {links &&
+                  links?.map((link, index) => (
+                    <MenuItem key={index} link={link} />
+                  ))}
+              </div>
+            </div>
+
+            {/* 页脚站点信息 */}
+            <div className='w-56 fixed left-0 bottom-0 z-0'>
+              <Live2D />
+              <Footer {...props} />
+            </div>
+          </div>
+
+          {/* 右侧主要内容区块 */}
+          <div
+            id='center-wrapper'
+            className='flex flex-col justify-between w-full relative z-10 pt-20 md:pt-5 pb-8 min-h-screen overflow-y-auto'>
+            <div
+              id='container-inner'
+              className='w-full px-6 pb-6 md:pb-20 max-w-8xl justify-center mx-auto'>
+              {slotTop}
+              {/* 广告植入 */}
+              <WWAds className='w-full' orientation='horizontal' />
+
+              <Transition
+                show={!onLoading}
+                appear={true}
+                enter='transition ease-in-out duration-700 transform order-first'
+                enterFrom='opacity-0 translate-y-16'
+                enterTo='opacity-100'
+                leave='transition ease-in-out duration-300 transform'
+                leaveFrom='opacity-100 translate-y-0'
+                leaveTo='opacity-0 -translate-y-16'
+                unmount={false}>
+                {children}
+              </Transition>
+
+              {/* Google广告 */}
+              <AdSlot type='in-article' />
+              <WWAds className='w-full' orientation='horizontal' />
+
+              {/* 回顶按钮 */}
+              <JumpToTopButton />
+            </div>
+
+            {/* 底部 */}
+            <div className='md:hidden'>
+              <Footer {...props} />
+            </div>
+          </div>
+        </main>
+
+        {/* 移动端悬浮目录按钮 */}
+        {showTocButton && !tocVisible && (
+          <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-neutral-800 rounded'>
+            <FloatTocButton {...props} />
+          </div>
+        )}
+
+        {/* 移动端导航抽屉 */}
+        <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
+      </div>
+    </ThemeGlobalNav.Provider>
   )
 }
 
@@ -181,8 +217,8 @@ const LayoutPostListIndex = props => {
   // const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
   return (
     <>
-        <Announcement {...props} />
-        <BlogPostListAll { ...props } />
+      <Announcement {...props} />
+      <BlogPostListAll {...props} />
     </>
   )
 }
@@ -198,13 +234,15 @@ const LayoutPostList = props => {
   // 如果是搜索，则列表顶部嵌入 搜索框
   return (
     <>
-        <div className='w-full max-w-7xl mx-auto justify-center mt-8'>
-            <div id='posts-wrapper' class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
-                {posts?.map(post => (
-                    <BlogPostCard key={post.id} post = {post} className='card' />
-                ))}
-            </div>
+      <div className='w-full max-w-7xl mx-auto justify-center mt-8'>
+        <div
+          id='posts-wrapper'
+          class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
+          {posts?.map(post => (
+            <BlogPostCard key={post.id} post={post} className='card' />
+          ))}
         </div>
+      </div>
     </>
   )
 }
@@ -214,60 +252,76 @@ const LayoutPostList = props => {
  * @param {*} props
  * @returns
  */
-const LayoutSlug = (props) => {
+const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const router = useRouter()
   useEffect(() => {
     // 404
     if (!post) {
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
+      setTimeout(
+        () => {
+          if (isBrowser) {
+            const article = document.getElementById('notion-article')
+            if (!article) {
+              router.push('/404').then(() => {
+                console.warn('找不到页面', router.asPath)
+              })
+            }
           }
-        }
-      }, siteConfig('POST_WAITING_TIME_FOR_404') * 1000)
+        },
+        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+      )
     }
   }, [post])
   return (
-        <>
-            {/* 文章锁 */}
-            {lock && <ArticleLock validPassword={validPassword} />}
+    <>
+      {/* 文章锁 */}
+      {lock && <ArticleLock validPassword={validPassword} />}
 
-              {!lock && <div id='container'>
+      {!lock && (
+        <div id='container'>
+          {/* title */}
+          <h1 className='text-3xl pt-4 md:pt-12  dark:text-gray-300'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post?.pageIcon} />
+            )}
+            {post?.title}
+          </h1>
 
-                  {/* title */}
-                  <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}</h1>
+          {/* Notion文章主体 */}
+          {post && (
+            <section id='article-wrapper' className='px-1'>
+              <NotionPage post={post} />
 
-                  {/* Notion文章主体 */}
-                  {post && (<section id="article-wrapper" className="px-1">
-                      <NotionPage post={post} />
+              {/* 分享 */}
+              {/* <ShareBar post={post} /> */}
+              {/* 文章分类和标签信息 */}
+              <div className='flex justify-between'>
+                {CONFIG.POST_DETAIL_CATEGORY && post?.category && (
+                  <CategoryItem category={post.category} />
+                )}
+                <div>
+                  {CONFIG.POST_DETAIL_TAG &&
+                    post?.tagItems?.map(tag => (
+                      <TagItemMini key={tag.name} tag={tag} />
+                    ))}
+                </div>
+              </div>
 
-                    {/* 分享 */}
-                    {/* <ShareBar post={post} /> */}
-                    {/* 文章分类和标签信息 */}
-                    <div className='flex justify-between'>
-                        {CONFIG.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
-                        <div>
-                            {CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
-                        </div>
-                    </div>
+              {/* 上一篇、下一篇文章 */}
+              {/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
 
-                      {/* 上一篇、下一篇文章 */}
-                      {/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
+              <AdSlot />
+              <WWAds className='w-full' orientation='horizontal' />
 
-                      <AdSlot />
-                      <WWAds className='w-full' orientation='horizontal'/>
+              <Comment frontMatter={post} />
+            </section>
+          )}
 
-                      <Comment frontMatter={post} />
-                  </section>)}
-
-                <TocDrawer {...props} />
-            </div>}
-        </>
+          <TocDrawer {...props} />
+        </div>
+      )}
+    </>
   )
 }
 
@@ -277,7 +331,7 @@ const LayoutSlug = (props) => {
  * @param {*} props
  * @returns
  */
-const LayoutSearch = (props) => {
+const LayoutSearch = props => {
   return <></>
 }
 
@@ -287,73 +341,89 @@ const LayoutSearch = (props) => {
  * @param {*} props
  * @returns
  */
-const LayoutArchive = (props) => {
+const LayoutArchive = props => {
   const { archivePosts } = props
-  return (<>
-            <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
-                {Object.keys(archivePosts).map(archiveTitle => (
-                    <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
-                ))}
-            </div>
-        </>)
+  return (
+    <>
+      <div className='mb-10 pb-20 md:py-12 p-3  min-h-screen w-full'>
+        {Object.keys(archivePosts).map(archiveTitle => (
+          <BlogArchiveItem
+            key={archiveTitle}
+            archiveTitle={archiveTitle}
+            archivePosts={archivePosts}
+          />
+        ))}
+      </div>
+    </>
+  )
 }
 
 /**
  * 404
  */
 const Layout404 = props => {
-  return <>
-        <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
+  return (
+    <>
+      <div className='w-full h-96 py-80 flex justify-center items-center'>
+        404 Not found.
+      </div>
     </>
+  )
 }
 
 /**
  * 分类列表
  */
-const LayoutCategoryIndex = (props) => {
+const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
-  return <>
-     <div className='bg-white dark:bg-gray-700 py-10'>
-                <div className='dark:text-gray-200 mb-5'>
-                    <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
+  return (
+    <>
+      <div className='bg-white dark:bg-gray-700 py-10'>
+        <div className='dark:text-gray-200 mb-5'>
+          <i className='mr-4 fas fa-th' />
+          {locale.COMMON.CATEGORY}:
+        </div>
+        <div id='category-list' className='duration-200 flex flex-wrap'>
+          {categoryOptions?.map(category => {
+            return (
+              <Link
+                key={category.name}
+                href={`/category/${category.name}`}
+                passHref
+                legacyBehavior>
+                <div
+                  className={
+                    'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'
+                  }>
+                  <i className='mr-4 fas fa-folder' />
+                  {category.name}({category.count})
                 </div>
-                <div id='category-list' className='duration-200 flex flex-wrap'>
-                    {categoryOptions?.map(category => {
-                      return (
-                            <Link
-                                key={category.name}
-                                href={`/category/${category.name}`}
-                                passHref
-                                legacyBehavior>
-                                <div
-                                    className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-                                    <i className='mr-4 fas fa-folder' />{category.name}({category.count})
-                                </div>
-                            </Link>
-                      )
-                    })}
-                </div>
-            </div>
-  </>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </>
+  )
 }
 
 /**
  * 标签列表
  */
-const LayoutTagIndex = (props) => {
+const LayoutTagIndex = props => {
   return <></>
 }
 
 export {
-  CONFIG as THEME_CONFIG,
-  LayoutBase,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
   Layout404,
+  LayoutArchive,
+  LayoutBase,
   LayoutCategoryIndex,
+  LayoutIndex,
   LayoutPostList,
-  LayoutTagIndex
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }