折叠菜单配置化

2026-05-14 15:09:22 +00:00 · 2023-11-03 17:43:07 +08:00
parent f145d8b28c
commit 8425de5bad
28 changed files with 123 additions and 170 deletions
--- a/themes/commerce/components/Footer.js
+++ b/themes/commerce/components/Footer.js
@@ -14,12 +14,12 @@ const Footer = (props) => {
  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
  const { categoryOptions, customMenu } = props

-  return <footer id="footer-wrapper" className='relative  bg-[#2A2A2A] justify-center text-center m-auto w-full leading-6 text-gray-300 text-sm p-10'>
+  return <footer id="footer-wrapper" className='relative  bg-[#2A2A2A] justify-center m-auto w-full leading-6 text-gray-300 text-sm p-10'>

        <div id='footer-container' className='w-full mx-auto max-w-screen-xl'>

            <div className='flex'>
-                <div className='flex flex-grow my-6 space-x-20 text-lg'>
+                <div className='hidden md:flex flex-grow my-6 space-x-20 text-lg  '>

                    {/* 分类菜单  */}
                    <div>
@@ -66,7 +66,7 @@ const Footer = (props) => {
            </div>

            {/* 底部版权相关 */}
-            <div id='footer-copyright-wrapper' className='flex justify-between border-t border-gray-600 pt-8'>
+            <div id='footer-copyright-wrapper' className='flex-col md:flex justify-between border-t border-gray-600 pt-8'>
                <div className='text-start space-y-1'>

                    {/* 网站所有者 */}
@@ -85,7 +85,7 @@ const Footer = (props) => {
                </div>

                {/* 右边公司名字 */}
-                <div className='text-right'>
+                <div className='md:text-right'>
                    <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{siteConfig('TITLE')} {siteConfig('BIO')}</h1>
                    <h2> {siteConfig('DESCRIPTION')}</h2>
                    {/* 可选备案信息 */}
--- a/themes/commerce/components/MenuBarMobile.js
+++ b/themes/commerce/components/MenuBarMobile.js
@@ -1,8 +1,7 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
 import { MenuItemCollapse } from './MenuItemCollapse'
+import { siteConfig } from '@/lib/config'

 export const MenuBarMobile = (props) => {
  const { customMenu, customNav } = props
@@ -21,7 +20,7 @@ export const MenuBarMobile = (props) => {
  }

  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

@@ -31,9 +30,7 @@ export const MenuBarMobile = (props) => {

  return (
    <nav id='nav' className=' text-md'>
-        {/* {links.map(link => <NormalMenu key={link?.id} link={link}/>)} */}
        {links?.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.id} link={link}/>)}
-
    </nav>
  )
 }
--- a/themes/commerce/components/MenuItemCollapse.js
+++ b/themes/commerce/components/MenuItemCollapse.js
@@ -7,7 +7,8 @@ import { useState } from 'react'
 * @param {*} param0
 * @returns
 */
-export const MenuItemCollapse = ({ link }) => {
+export const MenuItemCollapse = (props) => {
+  const { link } = props
  const [show, changeShow] = useState(false)
  const hasSubMenu = link?.subMenus?.length > 0

@@ -29,19 +30,19 @@ export const MenuItemCollapse = ({ link }) => {
        <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">
+                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="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
+                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}>
+        {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'}>
--- a/themes/commerce/components/MenuListSide.js
+++ b/themes/commerce/components/MenuListSide.js
@@ -1,6 +1,5 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 import CONFIG from '../config'

@@ -26,7 +25,7 @@ export const MenuListSide = (props) => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/commerce/components/MenuListTop.js
+++ b/themes/commerce/components/MenuListTop.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { MenuItemDrop } from './MenuItemDrop'
--- a/themes/commerce/components/ProductCenter.js
+++ b/themes/commerce/components/ProductCenter.js
@@ -0,0 +1,41 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+/**
+ * 产品中心
+ * @param {*} props
+ * @returns
+ */
+export default function ProductCenter(props) {
+  const { categoryOptions } = props
+
+  return <div className='w-full my-4 mx-4'>
+        <div className='w-full text-center text-4xl font-bold'>{siteConfig('TEXT_HOME_PRODUCT_CENTER', 'Product Center')}</div>
+
+        <div className='flex'>
+
+            <div className='hidden md:block w-72 bg-white p-4 mx-2'>
+                {/* 分类菜单  */}
+                <div>
+                    <div className='font-bold mb-4 border-b-2 p-2 border-[#D2232A]'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Center')}</div>
+                    <nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
+                        {categoryOptions.map(category => {
+                          return (
+                                <Link
+                                    key={`${category.name}`}
+                                    title={`${category.name}`}
+                                    href={`/category/${category.name}`}
+                                    className='hover:text-[#D2232A]'
+                                    passHref>
+                                    {category.name}
+                                </Link>
+                          )
+                        })}
+                    </nav>
+                </div>
+            </div>
+
+            <div className='w-full border'>右侧产品列表</div>
+        </div>
+    </div>
+}
--- a/themes/commerce/components/TopNavBar.js
+++ b/themes/commerce/components/TopNavBar.js
@@ -67,21 +67,14 @@ export default function TopNavBar(props) {

  return <div id='top-navbar-wrapper' className={'sticky top-0 w-full z-40 shadow bg-white dark:bg-hexo-black-gray '}>

-        {/* 移动端折叠菜单 */}
-        <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 id="top-navbar" className='flex w-full mx-auto max-w-screen-xl h-24 transition-all duration-200 items-between'>
+        <div id="top-navbar" className='px-4 flex w-full mx-auto max-w-screen-xl h-24 transition-all duration-200 items-between'>

            {/* 左侧图标Logo */}
            <LogoBar {...props} />

            {/* 移动端折叠按钮 */}
-            <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
+            <div className='mr-1 flex md:hidden justify-end items-center text-lg space-x-4 font-serif dark:text-gray-200'>
                <div onClick={toggleMenuOpen} className='cursor-pointer'>
                    {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
                </div>
@@ -92,5 +85,12 @@ export default function TopNavBar(props) {
                {links && links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
            </div>
        </div>
+
+          {/* 移动端折叠菜单 */}
+          <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
+            <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
+                <MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
+            </div>
+        </Collapse>
    </div>
 }
--- a/themes/commerce/index.js
+++ b/themes/commerce/index.js
@@ -33,6 +33,7 @@ import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import { siteConfig } from '@/lib/config'
 import TopNavBar from './components/TopNavBar'
+import ProductCenter from './components/ProductCenter'

 /**
 * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -123,17 +124,10 @@ const LayoutIndex = (props) => {
  return <LayoutBase headerSlot={headerSlot} {...props}>

        {/* 产品中心 */}
-        <div className='w-full my-4'>
-            <div className='w-full text-center text-4xl font-bold'>{siteConfig('TEXT_HOME_PRODUCT_CENTER', 'Product Center')}</div>
-
-            <div className='flex'>
-                <div className='hidden md:block w-72 border'> 左侧导航</div>
-                <div className='w-full border'>右侧产品列表</div>
-            </div>
-        </div>
+        <ProductCenter {...props}/>

        {/* 企业介绍  + 联系 */}
-        {notice && <div className='w-full my-4'>
+        {notice && <div className='w-full my-4 mx-4'>
            <div className='w-full text-center text-4xl font-bold'>{siteConfig('TEXT_HOME_ABOUT_US', notice.title)}</div>
            <NotionPage post={notice} />
        </div>}
--- a/themes/example/components/Nav.js
+++ b/themes/example/components/Nav.js
@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { MenuItemDrop } from './MenuItemDrop'
@@ -24,7 +24,7 @@ export const Nav = (props) => {
  }

  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/fukasawa/components/MenuList.js
+++ b/themes/fukasawa/components/MenuList.js
@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
 import CONFIG_FUKA from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 import { MenuItemCollapse } from './MenuItemCollapse'

@@ -21,7 +21,7 @@ export const MenuList = (props) => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/gitbook/components/MenuBarMobile.js
+++ b/themes/gitbook/components/MenuBarMobile.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'

 export const MenuBarMobile = (props) => {
@@ -21,7 +20,7 @@ export const MenuBarMobile = (props) => {
  }

  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/gitbook/components/TopNavBar.js
+++ b/themes/gitbook/components/TopNavBar.js
@@ -4,7 +4,7 @@ import Collapse from '@/components/Collapse'
 import { MenuBarMobile } from './MenuBarMobile'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 import DarkModeButton from '@/components/DarkModeButton'

@@ -34,7 +34,7 @@ export default function TopNavBar(props) {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/heo/components/MenuListSide.js
+++ b/themes/heo/components/MenuListSide.js
@@ -1,6 +1,5 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 import CONFIG from '../config'

@@ -20,7 +19,7 @@ export const MenuListSide = (props) => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/heo/components/MenuListTop.js
+++ b/themes/heo/components/MenuListTop.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'

 export const MenuListTop = (props) => {
@@ -19,7 +18,7 @@ export const MenuListTop = (props) => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/hexo/components/MenuItemCollapse.js
+++ b/themes/hexo/components/MenuItemCollapse.js
@@ -7,7 +7,8 @@ import { useState } from 'react'
 * @param {*} param0
 * @returns
 */
-export const MenuItemCollapse = ({ link }) => {
+export const MenuItemCollapse = (props) => {
+  const { link } = props
  const [show, changeShow] = useState(false)
  const hasSubMenu = link?.subMenus?.length > 0

@@ -41,7 +42,7 @@ export const MenuItemCollapse = ({ link }) => {
        </div>

        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen}>
+        {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'}>
--- a/themes/hexo/components/MenuListSide.js
+++ b/themes/hexo/components/MenuListSide.js
@@ -1,6 +1,5 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 import CONFIG from '../config'

@@ -18,7 +17,7 @@ export const MenuListSide = (props) => {
  if (customNav) {
    links = customNav.concat(links)
  }
-  
+
  for (let i = 0; i < links.length; i++) {
    if (links[i].id !== i) {
      links[i].id = i
@@ -26,7 +25,7 @@ export const MenuListSide = (props) => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/hexo/components/MenuListTop.js
+++ b/themes/hexo/components/MenuListTop.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'

 export const MenuListTop = (props) => {
@@ -27,7 +26,7 @@ export const MenuListTop = (props) => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/matery/components/MenuListSide.js
+++ b/themes/matery/components/MenuListSide.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'

 export const MenuListSide = (props) => {
@@ -20,7 +19,7 @@ export const MenuListSide = (props) => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/matery/components/MenuListTop.js
+++ b/themes/matery/components/MenuListTop.js
@@ -1,8 +1,7 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { MenuItemDrop } from './MenuItemDrop'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'

 export const MenuListTop = (props) => {
  const { customNav, customMenu } = props
@@ -20,7 +19,7 @@ export const MenuListTop = (props) => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/medium/components/MenuBarMobile.js
+++ b/themes/medium/components/MenuBarMobile.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'

 export const MenuBarMobile = (props) => {
@@ -21,7 +20,7 @@ export const MenuBarMobile = (props) => {
  }

  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/medium/components/TopNavBar.js
+++ b/themes/medium/components/TopNavBar.js
@@ -4,7 +4,7 @@ import Collapse from '@/components/Collapse'
 import { MenuBarMobile } from './MenuBarMobile'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'

 /**
@@ -33,7 +33,7 @@ export default function TopNavBar(props) {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/nav/components/MenuBarMobile.js
+++ b/themes/nav/components/MenuBarMobile.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemCollapse } from './MenuItemCollapse'

 /**
@@ -26,7 +25,7 @@ export const MenuBarMobile = (props) => {
  }

  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/nav/components/NavPostList.js
+++ b/themes/nav/components/NavPostList.js
@@ -1,7 +1,4 @@
 import NavPostListEmpty from './NavPostListEmpty'
-import { useRouter } from 'next/router'
-import NavPostItem from './NavPostItem'
-import CONFIG from '../config'
 import Link from 'next/link'

 /**
@@ -12,91 +9,31 @@ import Link from 'next/link'
 * @constructor
 */
 const NavPostList = (props) => {
-  const { customMenu, categoryOptions } = props
-  // let groupedArray = categoryOptions
-  // const { filteredNavPages, categoryOptions, categories } = props
-  // const router = useRouter()
-  // let selectedSth = false
-
-  // let groupedArray = categoryOptions?.map(item) => {
-  //   // let groups = [];
-  //   groupedArray.push({ category: item.name, id: item.id, count: item.count, selected: false,items: [] })
-  //   return groups
-  // })
-
-  // const groupedArray = categoryOptions?.reduce((groups, item) => {
-  //   const categoryName = item?.name ? item?.name : '' // 将category转换为字符串
-  //   // let existingGroup = null
-  //   console.log('categoryOptions => item::')
-  //   console.log(item)
-  //   // 添加数据
-  //   groups.push({ category: item.name, id: item.id, count: item.count, selected: false, items: [] })
-  //   return groups
-  // }, [])
-
-  // 处理是否选中
-  // groupedArray?.map((group) => {
-  //   let groupSelected = false
-  //   for (const post of group?.items) {
-  //     if (router.asPath.split('?')[0] === '/' + post.slug) {
-  //       groupSelected = true
-  //       selectedSth = true
-  //     }
-  //   }
-  //   group.selected = groupSelected
-  //   return null
-  // })
-
-  // 如果都没有选中默认打开第一个
-  // if (!selectedSth && groupedArray && groupedArray?.length > 0) {
-  //   groupedArray[0].selected = true
-  // }
-
-  
-  
-  // console.log('groupedArray::')
-  // console.log(groupedArray)
-
-  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  // if (BLOG.CUSTOM_MENU) {
-  //   links = customMenu
-  // }
-  let links = customMenu
-  return 
-    {links && links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
-  
-
-  console.log('categoryOptions::')
-  console.log(categoryOptions)
+  const { categoryOptions } = props
  if (!categoryOptions) {
    return <NavPostListEmpty />
  } else {
-    return 
-    
-    <div id='category-list' className='dark:border-gray-700 flex flex-wrap  mx-4'>
-    {categoryOptions.map(category => {
-      // const selected = currentCategory === category.name
-      let selected = false
-      return (
-        <Link
-          key={category.name}
-          href={`/category/${category.name}`}
-          passHref
-          className={(selected
-            ? 'hover:text-black dark:hover:text-gray bg-indigo-600 text-black '
-            : 'dark:text-gray-400 text-gray-500 hover:text-black dark:hover:text-white hover:bg-indigo-600') +
-            '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
+    return <div id='category-list' className='dark:border-gray-700 flex flex-wrap  mx-4'>
+            {categoryOptions.map(category => {
+              // const selected = currentCategory === category.name
+              const selected = false
+              return (
+                    <Link
+                        key={category.name}
+                        href={`/category/${category.name}`}
+                        passHref
+                        className={(selected
+                          ? 'hover:text-black dark:hover:text-gray bg-indigo-600 text-black '
+                          : 'dark:text-gray-400 text-gray-500 hover:text-black dark:hover:text-white hover:bg-indigo-600') +
+                            '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>

-          <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
+                        <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>

-        </Link>
-        )
-      })}
-    </div>
+                    </Link>
+              )
+            })}
+        </div>
  }
-
-
-
 }

 export default NavPostList
--- a/themes/next/components/MenuList.js
+++ b/themes/next/components/MenuList.js
@@ -1,7 +1,6 @@
-import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 import { MenuItemCollapse } from './MenuItemCollapse'

@@ -23,7 +22,7 @@ export const MenuList = (props) => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/nobelium/components/Nav.js
+++ b/themes/nobelium/components/Nav.js
@@ -94,7 +94,7 @@ const NavBar = props => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

@@ -123,10 +123,3 @@ const NavBar = props => {
 }

 export default Nav
-
-/**
- *
-                    {!JSON.parse(BLOG.THEME_SWITCH) && <div className='hidden md:block'><DarkModeButton {...props} /></div>}
-                    <ReadingProgress />
-
- */
--- a/themes/plog/components/BottomNav.js
+++ b/themes/plog/components/BottomNav.js
@@ -5,6 +5,7 @@ import { MenuItemDrop } from './MenuItemDrop'
 import FullScreenButton from '@/components/FullScreenButton'
 import InformationButton from './InformationButton'
 import LogoBar from './LogoBar'
+import { siteConfig } from '@/lib/config'

 /**
 * 桌面端底部导航
@@ -43,7 +44,7 @@ const MenuList = props => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/plog/components/Nav.js
+++ b/themes/plog/components/Nav.js
@@ -60,7 +60,7 @@ const NavBar = props => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

--- a/themes/simple/components/MenuList.js
+++ b/themes/simple/components/MenuList.js
@@ -1,5 +1,5 @@
-import BLOG from '@/blog.config'
 import Collapse from '@/components/Collapse'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
@@ -40,7 +40,7 @@ export const MenuList = ({ customNav, customMenu }) => {
  }

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
+  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }