Merge branch 'main' into webmention

blog.config.js

@@ -28,8 +28,8 @@ const BLOG = {
   FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
   FONT_URL: [// 字体CSS 例如 https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css
     'https://fonts.googleapis.com/css?family=Bitter&display=swap',
-    'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500&display=swap',
+    'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap',
-    'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&display=swap'
+    'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap'
   ],
   FONT_SANS: [// 无衬线字体 例如'LXGW WenKai'
     'Bitter', '"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"',
@@ -111,7 +111,7 @@ const BLOG = {
   MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件
   MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停
   MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）
-  MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效）
+  MUSIC_PLAYER_LRC_TYPE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_LRC_TYPE || '0', // 歌词显示类型，可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）（前提是有配置歌词路径，对 meting 无效）
   MUSIC_PLAYER_CDN_URL: process.env.NEXT_PUBLIC_MUSIC_PLAYER_CDN_URL || 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js',
   MUSIC_PLAYER_ORDER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_ORDER || 'list', // 默认播放方式，顺序 list，随机 random
   MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/

components/Collapse.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useImperativeHandle } from 'react'
 
 /**
  * 折叠面板组件，支持水平折叠、垂直折叠
@@ -6,12 +6,27 @@ import React from 'react'
  * @returns
  */
 const Collapse = props => {
-  const collapseRef = React.useRef(null)
+  const { collapseRef } = props
+  const ref = React.useRef(null)
   const type = props.type || 'vertical'
+
+  useImperativeHandle(collapseRef, () => {
+    return {
+      /**
+       * 当子元素高度变化时，可调用此方法更新折叠组件的高度
+       * @param {*} param0
+       */
+      updateCollapseHeight: ({ height, increase }) => {
+        ref.current.style.height = ref.current.scrollHeight
+        ref.current.style.height = 'auto'
+      }
+    }
+  })
+
   /**
-   * 折叠
+     * 折叠
-   * @param {*} element
+     * @param {*} element
-   */
+     */
   const collapseSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth
@@ -34,9 +49,9 @@ const Collapse = props => {
   }
 
   /**
-   * 展开
+     * 展开
-   * @param {*} element
+     * @param {*} element
-   */
+     */
   const expandSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth
@@ -58,22 +73,20 @@ const Collapse = props => {
     clearTimeout(clearTime)
   }
 
-  const updateHeight = () => {
+  useEffect(() => {
-    collapseRef.current.style.height = 'auto'
-  }
-
-  React.useEffect(() => {
     if (props.isOpen) {
-      expandSection(collapseRef.current)
+      expandSection(ref.current)
     } else {
-      collapseSection(collapseRef.current)
+      collapseSection(ref.current)
     }
+    // 通知父组件高度变化
+    props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen })
   }, [props.isOpen])
 
   return (
-    <div ref={collapseRef} onClick={updateHeight} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className }>
+        <div ref={ref} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className}>
-      {props.children}
+            {props.children}
-    </div>
+        </div>
   )
 }
 Collapse.defaultProps = { isOpen: false }

components/DarkModeButton.js

@@ -13,7 +13,7 @@ const DarkModeButton = (props) => {
     htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
-  return <div className={'text-white z-10 duration-200 text-xl py-2 ' + props.className}>
+  return <div className={'dark:text-gray-200 z-10 duration-200 text-xl py-2 ' + props.className}>
     <i id='darkModeButton' className={`hover:scale-125 cursor-pointer transform duration-200 fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`}
        onClick={handleChangeDarkMode} />
   </div>

components/FlutteringRibbon.js

@@ -1,10 +1,21 @@
 /* eslint-disable */
 import React from 'react'
-
+const  id = 'canvasFlutteringRibbon'
 export const FlutteringRibbon = () => {
+     const destroyRibbon = ()=>{
+    const ribbon = document.getElementById(id)
+      if(ribbon && ribbon.parentNode){
+        ribbon.parentNode.removeChild(ribbon)
+      }
+  }
+  
   React.useEffect(() => {
     createFlutteringRibbon()
+        return () => destroyRibbon()
+
   }, [])
+    return <></>
+
 }
 
 /**
@@ -125,6 +136,7 @@ function createFlutteringRibbon() {
           init: function () {
             try {
               ;(this._canvas = document.createElement('canvas')),
+                (this._canvas.id = id),
                 (this._canvas.style.display = 'block'),
                 (this._canvas.style.position = 'fixed'),
                 (this._canvas.style.margin = '0'),

components/Nest.js

@@ -1,10 +1,19 @@
 /* eslint-disable */
-import React from 'react'
+import { useEffect } from 'react'
-
+const id = 'canvasNestCreated'
 export const Nest = () => {
-  React.useEffect(() => {
+  const destroyNest = ()=>{
+      const nest = document.getElementById(id)
+      if(nest && nest.parentNode){
+        nest.parentNode.removeChild(nest)
+      }
+  }
+
+  useEffect(() => {
     createNest()
+    return () => destroyNest()
   }, [])
+  return <></>
 }
 
 /**
@@ -65,7 +74,7 @@ function createNest() {
       m(o)
   }
   var i = document.createElement('canvas')
-  i.id = 'canvasNestCreated'
+  i.id = id
   var a = (function () {
       const t = e
       return {

components/NotionPage.js

@@ -1,7 +1,7 @@
 import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
-import mediumZoom from '@fisch0920/medium-zoom'
+// import mediumZoom from '@fisch0920/medium-zoom'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { isBrowser } from '@/lib/utils'
 import { Code } from 'react-notion-x/build/third-party/code'
 import TweetEmbed from 'react-tweet-embed'
@@ -42,16 +42,16 @@ const Tweet = ({ id }) => {
 }
 
 const NotionPage = ({ post, className }) => {
-  const zoom = isBrowser() && mediumZoom({
+//   const zoom = isBrowser() && mediumZoom({
-    container: '.notion-viewport',
+//     container: '.notion-viewport',
-    background: 'rgba(0, 0, 0, 0.2)',
+//     background: 'rgba(0, 0, 0, 0.2)',
-    scrollOffset: 200,
+//     scrollOffset: 200,
-    margin: getMediumZoomMargin()
+//     margin: getMediumZoomMargin()
-  })
+//   })
 
-  const zoomRef = React.useRef(zoom ? zoom.clone() : null)
+  //   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTimeout(() => {
       if (window.location.hash) {
         const tocNode = document.getElementById(window.location.hash.substring(1))
@@ -64,18 +64,18 @@ const NotionPage = ({ post, className }) => {
     setTimeout(() => {
       if (isBrowser()) {
         // 将相册gallery下的图片加入放大功能
-        const imgList = document.querySelectorAll('.notion-collection-card-cover img')
+        // const imgList = document.querySelectorAll('.notion-collection-card-cover img')
-        if (imgList && zoomRef.current) {
+        // if (imgList && zoomRef.current) {
-          for (let i = 0; i < imgList.length; i++) {
+        //   for (let i = 0; i < imgList.length; i++) {
-            (zoomRef.current).attach(imgList[i])
+        //     (zoomRef.current).attach(imgList[i])
-          }
+        //   }
-        }
+        // }
 
-        // 相册图片点击不跳转
+        // 相册图片禁止跳转页面，改为放大图片功能功能
-        const cards = document.getElementsByClassName('notion-collection-card')
+        // const cards = document.getElementsByClassName('notion-collection-card')
-        for (const e of cards) {
+        // for (const e of cards) {
-          e.removeAttribute('href')
+        //   e.removeAttribute('href')
-        }
+        // }
       }
     }, 800)
   }, [])
@@ -84,7 +84,7 @@ const NotionPage = ({ post, className }) => {
     return <>{post?.summary || ''}</>
   }
 
-  return <div id='container' className={`font-medium mx-auto ${className}`}>
+  return <div id='container' className={`mx-auto ${className}`}>
     <NotionRenderer
       recordMap={post.blockMap}
       mapPageUrl={mapPageUrl}
@@ -113,22 +113,22 @@ const mapPageUrl = id => {
   return '/' + id.replace(/-/g, '')
 }
 
-function getMediumZoomMargin() {
+// function getMediumZoomMargin() {
-  const width = window.innerWidth
+//   const width = window.innerWidth
 
-  if (width < 500) {
+//   if (width < 500) {
-    return 8
+//     return 8
-  } else if (width < 800) {
+//   } else if (width < 800) {
-    return 20
+//     return 20
-  } else if (width < 1280) {
+//   } else if (width < 1280) {
-    return 30
+//     return 30
-  } else if (width < 1600) {
+//   } else if (width < 1600) {
-    return 40
+//     return 40
-  } else if (width < 1920) {
+//   } else if (width < 1920) {
-    return 48
+//     return 48
-  } else {
+//   } else {
-    return 72
+//     return 72
-  }
+//   }
-}
+// }
 
 export default NotionPage

components/Player.js

@@ -5,7 +5,7 @@ const Player = () => {
   const [player, setPlayer] = React.useState()
   const ref = React.useRef(null)
 
-  const showLrc = JSON.parse(BLOG.MUSIC_PLAYER_SHOW_LRC)
+  const lrcType = JSON.parse(BLOG.MUSIC_PLAYER_LRC_TYPE)
   const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE)
   const autoPlay = JSON.parse(BLOG.MUSIC_PLAYER_AUTO_PLAY)
 
@@ -16,7 +16,7 @@ const Player = () => {
       setPlayer(new window.APlayer({
         container: ref.current,
         fixed: true,
-        showlrc: showLrc,
+        lrcType: lrcType,
         autoplay: autoPlay,
         order: BLOG.MUSIC_PLAYER_ORDER,
         audio: BLOG.MUSIC_PLAYER_AUDIO_LIST

components/Ribbon.js

@@ -1,10 +1,20 @@
 /* eslint-disable */
-import React from 'react'
+import { useEffect } from 'react'
+const id = 'canvasRibbon'
 
 export const Ribbon = () => {
-  React.useEffect(() => {
+ const destroyRibbon = ()=>{
+    const ribbon = document.getElementById(id)
+      if(ribbon && ribbon.parentNode){
+        ribbon.parentNode.removeChild(ribbon)
+      }
+  }
+  
+  useEffect(() => {
     createRibbon()
+    return () => destroyRibbon()
   }, [])
+  return <></>
 }
 
 /**
@@ -29,6 +39,7 @@ function createRibbon() {
       a = window.innerWidth,
       l = window.innerHeight,
       d = e.s
+    i.id= id
     let r, s
     const u = Math
     let h = 0

components/Sakura.js

@@ -1,10 +1,19 @@
 /* eslint-disable */
-import React from 'react'
+import { useEffect } from 'react'
-
+const id = 'canvas_sakura'
 export const Sakura = () => {
-  React.useEffect(() => {
+  const destroySakura = ()=>{
+    const sakura = document.getElementById(id)
+    if(sakura && sakura.parentNode){
+      sakura.parentNode.removeChild(sakura)
+    }
+  }
+      
+  useEffect(() => {
     createSakura({})
+    return () => destroySakura()
   }, [])
+  return <></>
 }
 
 /**
@@ -129,7 +138,7 @@ function createSakura() {
       'style',
       'position: fixed;left: 0;top: 0;pointer-events: none;'
     )
-    canvas.setAttribute('id', 'canvas_sakura')
+    canvas.setAttribute('id', id)
     document.getElementsByTagName('body')[0].appendChild(canvas)
     cxt = canvas.getContext('2d')
     var sakuraList = new SakuraList()
@@ -165,15 +174,12 @@ function createSakura() {
       stop = requestAnimationFrame(asd)
     }
   }
-  window.onresize = function () {
-    var canvasSnow = document.getElementById('canvas_snow')
-  }
   img.onload = function () {
     startSakura()
   }
   function stopp() {
     if (staticx) {
-      var child = document.getElementById('canvas_sakura')
+      var child = document.getElementById(id)
       child.parentNode.removeChild(child)
       window.cancelAnimationFrame(stop)
       staticx = false

components/SideBarDrawer.js

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import React from 'react'
+import { useEffect } from 'react'
 
 /**
  * 侧边栏抽屉面板，可以从侧面拉出
@@ -8,7 +8,7 @@ import React from 'react'
  */
 const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
   const router = useRouter()
-  React.useEffect(() => {
+  useEffect(() => {
     const sideBarDrawerRouteListener = () => {
       switchSideDrawerVisible(false)
     }
@@ -37,8 +37,8 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     }
   }
 
-  return <div id='sidebar-wrapper' className={' block md:hidden ' + className }>
+  return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
-    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-60 max-w-side'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+    <div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-60 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
       {children}
     </div>
 

components/StarrySky.js

@@ -7,7 +7,7 @@ export const StarrySky = () => {
   }, [])
   return (
     <div className="relative">
-      <canvas id="starry-sky-vixcity" className="fixed pointer-events-none"></canvas>
+      <canvas id="starry-sky-vixcity" style={{zIndex:1}} className="top-0 fixed pointer-events-none"></canvas>
     </div>
   )
 }

components/ThemeSwitch.js

@@ -16,7 +16,7 @@ export function ThemeSwitch() {
   return (<>
         <Draggable>
             <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
-                <div className="p-2 flex items-center">
+                <div className="py-2 flex items-center text-sm">
                     <i className='fas fa-arrows cursor-move px-2' />
                     {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}
                     <select value={theme} onChange={onSelectChange} name="cars" className='text-white bg-black uppercase cursor-pointer'>

lib/global.js

@@ -1,9 +1,10 @@
 import { generateLocaleDict, initLocale } from './lang'
 import { createContext, useContext, useEffect, useState } from 'react'
-import Router from 'next/router'
+import Router, { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
 import { initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
 import { ALL_THEME } from '@/themes'
+import NProgress from 'nprogress'
 
 const GlobalContext = createContext()
 
@@ -19,6 +20,7 @@ export function GlobalContextProvider({ children }) {
   const [theme, setTheme] = useState(BLOG.THEME)
   const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark')
   const [onLoading, changeLoadingState] = useState(false)
+  const router = useRouter()
 
   useEffect(() => {
     initLocale(lang, locale, updateLang, updateLocale)
@@ -26,13 +28,25 @@ export function GlobalContextProvider({ children }) {
     initTheme(theme, changeTheme)
   }, [])
 
-  Router.events.on('routeChangeStart', (...args) => {
+  useEffect(() => {
-    changeLoadingState(true)
+    const handleStart = (url) => {
-  })
+      NProgress.start()
+      changeLoadingState(true)
+    }
+    const handleStop = () => {
+      NProgress.done()
+      changeLoadingState(false)
+    }
 
-  Router.events.on('routeChangeComplete', (...args) => {
+    router.events.on('routeChangeStart', handleStart)
-    changeLoadingState(false)
+    router.events.on('routeChangeError', handleStop)
-  })
+    router.events.on('routeChangeComplete', handleStop)
+    return () => {
+      router.events.off('routeChangeStart', handleStart)
+      router.events.off('routeChangeComplete', handleStop)
+      router.events.off('routeChangeError', handleStop)
+    }
+  }, [router])
 
   function switchTheme() {
     const currentIndex = ALL_THEME.indexOf(theme)

lib/notion/getNotionData.js

@@ -95,6 +95,11 @@ function getCustomNav({ allPages }) {
   return customNav
 }
 
+/**
+ * 获取自定义菜单
+ * @param {*} allPages
+ * @returns
+ */
 function getCustomMenu({ collectionData }) {
   const menuPages = collectionData.filter(post => (post.type === BLOG.NOTION_PROPERTY_NAME.type_menu || post.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) && post.status === 'Published')
   const menus = []
@@ -215,15 +220,14 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
 
   // 文章计数
   let postCount = 0
+  // 查找所有的Post和Page
   const allPages = collectionData.filter(post => {
-    if (post.type === 'Post' && post.status === 'Published') {
+    if (post.type === BLOG.NOTION_PROPERTY_NAME.type_post && post.status === BLOG.NOTION_PROPERTY_NAME.status_publish) {
       postCount++
     }
-    return post &&
+    return post && post?.slug &&
-            post.type &&
+     (!post?.slug?.startsWith('http')) &&
-            (post.type === 'Post' || post.type === 'Page') &&
+     (post?.status === 'Invisible' || post?.status === 'Published')
-            (post.status === 'Published' || post.status === 'Invisible') &&
-            (!post.slug.startsWith('http'))
   })
 
   // Sort by date
@@ -241,7 +245,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
   const siteInfo = getBlogInfo({ collection, block })
   const customNav = getCustomNav({ allPages: collectionData.filter(post => post.type === 'Page' && post.status === 'Published') })
   // 新的菜单
-  const customMenu = getCustomMenu({ collectionData })
+  const customMenu = await getCustomMenu({ collectionData })
   const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })
 
   return {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "3.12.4",
+  "version": "3.13.2",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {
@@ -41,6 +41,7 @@
     "next": "^13.1.1",
     "notion-client": "6.15.6",
     "notion-utils": "6.15.6",
+    "nprogress": "^0.2.0",
     "preact": "^10.5.15",
     "prism-themes": "1.9.0",
     "qrcode.react": "^1.0.1",

pages/[...slug].js

@@ -49,7 +49,7 @@ const Slug = props => {
           })
         }
       }
-    }, 8 * 1000) // 404时长
+    }, 8 * 1000) // 404时长 8秒
     const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading`, image: siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE }
     return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
   }

pages/_app.js

@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic'
 
 import 'animate.css'
 import '@/styles/globals.css'
+import '@/styles/nprogress.css'
 
 // core styles shared by all of react-notion-x (required)
 import 'react-notion-x/src/styles.css'

pages/_document.js

@@ -11,13 +11,13 @@ class MyDocument extends Document {
 
   render() {
     return (
-      <Html lang={BLOG.LANG} className='test'>
+      <Html lang={BLOG.LANG}>
         <Head>
           <link rel='icon' href='/favicon.ico' />
           <CommonScript />
         </Head>
 
-        <body className={`${BLOG.FONT_STYLE} tracking-wider bg-day dark:bg-night`}>
+        <body className={`${BLOG.FONT_STYLE} font-light bg-day dark:bg-night`}>
             <Main />
             <NextScript />
         </body>

public/css/theme-hexo.css

@@ -0,0 +1,25 @@
+/*  菜单下划线动画 */
+#theme-hexo .menu-link {
+    text-decoration: none;
+    background-image: linear-gradient(#928CEE, #928CEE);
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: 0 2px;
+    transition: background-size 100ms ease-in-out;
+}
+ 
+#theme-hexo .menu-link:hover {
+    background-size: 100% 2px;
+    color: #928CEE;
+}
+
+/* 设置了从上到下的渐变黑色 */
+#theme-hexo .header-cover::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
+}

public/css/theme-matery.css

@@ -0,0 +1,11 @@
+
+/* 设置了从上到下的渐变黑色 */
+#theme-matery .header-cover::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
+}

public/css/theme-simple.css

@@ -17,7 +17,7 @@
 
 
 /*  菜单下划线动画 */
-.menu-link {
+#theme-simple .menu-link {
     text-decoration: none;
     background-image: linear-gradient(#dd3333, #dd3333);
     background-repeat: no-repeat;
@@ -26,7 +26,7 @@
     transition: background-size 100ms ease-in-out;
 }
  
-.menu-link:hover {
+#theme-simple .menu-link:hover {
     background-size: 100% 2px;
     color: #dd3333;
 }

styles/globals.css

@@ -215,7 +215,7 @@ nav {
 }
 
 .next #announcement-content *{
- font-size:10px !important;
+ font-size:12px !important;
  line-height:1.5 !important;
 }
 
@@ -308,4 +308,11 @@ a.avatar-wrapper {
 
 .reply-author-name {
   font-weight: 500;
+/* 最多显示4行文字 */
+.p-4-lines {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

styles/notion.css

@@ -68,7 +68,7 @@
 }
 
 .notion {
-  font-size: 17px;
+  font-size: 16px;
   line-height: 1.5;
   color: var(--fg-color);
   caret-color: var(--fg-color);
@@ -584,12 +584,12 @@ summary > .notion-h {
 .notion-page-link {
   display: flex;
   color: var(--fg-color);
-  text-decoration: none;
+  text-decoration: underline;
   width: 100%;
   height: 30px;
   margin: 1px 0;
   transition: background 120ms ease-in 0s;
-  pointer-events: none;
+  /* pointer-events: none; */
 }
 
 .notion-page-link:hover {
@@ -655,10 +655,11 @@ svg.notion-page-icon {
 
 .notion-list-disc {
   list-style-type: disc;
-  padding-inline-start: 1.7em;
+  padding-inline-start: 1.4em;
   margin-top: 0;
   margin-bottom: 0;
 }
+
 .notion-list-numbered {
   list-style-type: decimal;
   padding-inline-start: 1.6em;
@@ -709,7 +710,7 @@ svg.notion-page-icon {
 }
 
 .notion-asset-wrapper img {
-  width: 100%;
+  width: 90%;
   /* height: 100%; */
   height: auto !important;
   max-height: 100%;
@@ -723,6 +724,7 @@ svg.notion-page-icon {
 .notion-text {
   width: 100%;
   white-space: pre-wrap;
+  line-height: 1.5rem !important;
   word-break: break-word;
   padding: 3px 2px !important;
   margin: 1px 0 !important;
@@ -1408,7 +1410,7 @@ code[class*='language-'] {
 }
 
 .notion-collection-card{
-  cursor: default !important;
+  /* cursor: default !important; */
 }
 
 .notion-collection-card-property .notion-link {
@@ -1623,6 +1625,7 @@ code[class*='language-'] {
 
 .notion-collection-card-cover .lazy-image-wrapper {
   padding: 0 !important;
+  z-index: 20;
   height: 100%;
 }
 

styles/nprogress.css

@@ -0,0 +1,84 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

themes/example/LayoutBase.js

@@ -7,6 +7,7 @@ import { Title } from './components/Title'
 import { SideBar } from './components/SideBar'
 import JumpToTopButton from './components/JumpToTopButton'
 import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
 
@@ -15,6 +16,14 @@ import BLOG from '@/blog.config'
  */
 const LayoutBase = props => {
   const { children, meta } = props
+  const { onLoading } = useGlobal()
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+
   return (
         <div id='theme-example' className='dark:text-gray-300  bg-white dark:bg-black'>
             <CommonHead meta={meta} />
@@ -31,7 +40,7 @@ const LayoutBase = props => {
 
                 <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>
 
-                    <div className='w-full max-w-3xl xl:px-14 lg:px-4 '>{children}</div>
+                    <div className='w-full max-w-3xl xl:px-14 lg:px-4 '> {onLoading ? LoadingCover : children}</div>
 
                     <SideBar {...props} />
 

themes/example/components/BlogListPage.js

@@ -42,7 +42,7 @@ export const BlogListPage = props => {
                         </p>
                             {/* 搜索结果 */}
                         {p.results && (
-                            <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                            <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
                             {p.results.map(r => (
                                 <span key={r}>{r}</span>
                             ))}

themes/example/components/MenuItemDrop.js

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+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)} >
+
+        {!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} >
+                    {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?.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 => {
+              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-2'>
+                    <Link href={sLink.to}>
+                    <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </li>
+}

themes/example/components/Nav.js

@@ -1,6 +1,7 @@
+import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
 import CONFIG_EXAMPLE from '../config_example'
+import { MenuItemDrop } from './MenuItemDrop'
 
 /**
  * 菜单导航
@@ -8,8 +9,9 @@ import CONFIG_EXAMPLE from '../config_example'
  * @returns
  */
 export const Nav = (props) => {
-  const { customNav } = props
+  const { customNav, customMenu } = props
   const { locale } = useGlobal()
+
   let links = [
     { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_EXAMPLE.MENU_SEARCH },
     { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_EXAMPLE.MENU_ARCHIVE },
@@ -21,26 +23,25 @@ export const Nav = (props) => {
     links = links.concat(customNav)
   }
 
+  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
   return (
         <nav className="w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black">
             <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
-                <div className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
+                <ul className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
-                    {links.map(link => {
+                    {/* {links.map(link => <NormalMenuItem key={link?.id} link={link}/>)} */}
-                      if (link.show) {
+                    {links.map(link => <MenuItemDrop key={link?.id} link={link} />)}
-                        return link && <Link
+                </ul>
-                                href={link.to}
+                {/* <div className="w-full md:w-1/3 text-center md:text-right"> */}
-                                key={link.to}
-                                className="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.name}
-                            </Link>
-                      } else {
-                        return null
-                      }
-                    })}
-                </div>
-                <div className="w-full md:w-1/3 text-center md:text-right">
                     {/* <!-- extra links --> */}
-                </div>
+                {/* </div> */}
             </div>
         </nav>
   )

themes/example/components/NormalMenuItem.js

@@ -0,0 +1,14 @@
+import Link from 'next/link'
+
+/**
+ * 旧的普通菜单
+ * @param {*} props
+ * @returns
+ */
+export const NormalMenuItem = (props) => {
+  const { link } = props
+  return link?.show && <Link href={link.to} key={link.to}
+        className="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.name}
+    </Link>
+}

themes/fukasawa/LayoutBase.js

@@ -4,6 +4,7 @@ import AsideLeft from './components/AsideLeft'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -20,28 +21,35 @@ import { isBrowser, loadExternalResource } from '@/lib/utils'
  * @constructor
  */
 const LayoutBase = (props) => {
-  const {
+  const { children, headerSlot, meta } = props
-    children,
-    headerSlot,
-    meta
-  } = props
   const leftAreaSlot = <Live2D/>
 
   if (isBrowser()) {
     loadExternalResource('/css/theme-fukasawa.css', 'css')
   }
 
+  const { onLoading } = useGlobal()
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+
   return (<div id='theme-fukasawa' >
     <CommonHead meta={meta} />
     <TopNav {...props}/>
+
     <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
       <AsideLeft {...props} slot={leftAreaSlot}/>
-      <main id='wrapper' className='relative flex w-full py-8 justify-center'>
+
-        <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
+      <main id='wrapper' className='relative flex w-full py-8 justify-center z-10'>
+        <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative'>
           <div> {headerSlot} </div>
-          <div>{children}</div>
+          <div> {onLoading ? LoadingCover : children} </div>
         </div>
       </main>
+
     </div>
 
   </div>)

themes/fukasawa/components/AsideLeft.js

@@ -1,6 +1,6 @@
 import Logo from './Logo'
 import GroupCategory from './GroupCategory'
-import GroupMenu from './GroupMenu'
+import { MenuList } from './MenuList'
 import GroupTag from './GroupTag'
 import SearchInput from './SearchInput'
 import SiteInfo from './SiteInfo'
@@ -11,12 +11,12 @@ import DarkModeButton from '@/components/DarkModeButton'
 function AsideLeft (props) {
   const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo } = props
   const router = useRouter()
-  return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-10'>
+  return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-20'>
     <Logo {...props}/>
 
     <section className='flex flex-col text-gray-600'>
       <hr className='w-12 my-8' />
-      <GroupMenu {...props}/>
+      <MenuList {...props}/>
     </section>
 
     <section className='flex flex-col text-gray-600'>

themes/fukasawa/components/Catalog.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import { useGlobal } from '@/lib/global'
@@ -12,61 +12,60 @@ import { useGlobal } from '@/lib/global'
 const Catalog = ({ toc }) => {
   const { locale } = useGlobal()
 
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+
   // 监听滚动事件
-  React.useEffect(() => {
+  useEffect(() => {
-    window.addEventListener('scroll', actionSectionScrollSpy)
+    const throttleMs = 200
+    const actionSectionScrollSpy = throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
+      }
+      setActiveSection(currentSectionId)
+      const index = toc?.findIndex(obj => uuidToId(obj.id) === currentSectionId)
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+
     actionSectionScrollSpy()
+    window.addEventListener('scroll', actionSectionScrollSpy)
     return () => {
       window.removeEventListener('scroll', actionSectionScrollSpy)
     }
-  }, [])
+  }, [toc])
 
   // 目录自动滚动
   const tRef = useRef(null)
-  const tocIds = []
-
-  // 同步选中目录事件
-  const [activeSection, setActiveSection] = React.useState(null)
-  const throttleMs = 200
-  const actionSectionScrollSpy = React.useCallback(throttle(() => {
-    const sections = document.getElementsByClassName('notion-h')
-    let prevBBox = null
-    let currentSectionId = activeSection
-    for (let i = 0; i < sections.length; ++i) {
-      const section = sections[i]
-      if (!section || !(section instanceof Element)) continue
-      if (!currentSectionId) {
-        currentSectionId = section.getAttribute('data-id')
-      }
-      const bbox = section.getBoundingClientRect()
-      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
-      const offset = Math.max(150, prevHeight / 4)
-      // GetBoundingClientRect returns values relative to viewport
-      if (bbox.top - offset < 0) {
-        currentSectionId = section.getAttribute('data-id')
-        prevBBox = bbox
-        continue
-      }
-      // No need to continue loop, if last element has been detected
-      break
-    }
-    setActiveSection(currentSectionId)
-    const index = tocIds.indexOf(currentSectionId) || 0
-    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
-  }, throttleMs))
 
   // 无目录就直接返回空
-  if (!toc || toc.length < 1) {
+  if (!toc || toc?.length < 1) {
     return <></>
   }
 
-  return <div>
+  return <div id='catalog'>
     <div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
+    <div className='h-96'>
-      <nav className='h-full font-sans text-black'>
+      <nav ref={tRef} className='h-full overflow-y-auto overscroll-none scroll-hidden font-sans text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)
-          tocIds.push(id)
           return (
             <a
               key={id}

themes/fukasawa/components/GroupMenu.js

@@ -1,51 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useGlobal } from '@/lib/global'
-import CONFIG_FUKA from '../config_fuka'
-
-function GroupMenu ({ customNav }) {
-  const { locale } = useGlobal()
-  const router = useRouter()
-
-  let links = [
-    { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE },
-    { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_FUKA.MENU_SEARCH }
-  ]
-
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-
-  return (
-    <nav id='nav' className='font-sans text-sm'>
-        {links.map(link => {
-          if (link.show) {
-            const selected = (router.pathname === link.to) || (router.asPath === link.to)
-            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>
-            )
-          } else {
-            return null
-          }
-        })}
-      </nav>
-  )
-}
-
-export default GroupMenu

themes/fukasawa/components/MenuItemCollapse.js

@@ -0,0 +1,62 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = (props) => {
+  const { link } = props
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    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} >
+
+            {!hasSubMenu && <Link href={link?.to} 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 && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} 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}>
+                        <div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}

themes/fukasawa/components/MenuItemDrop.js

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+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 '>
+
+        {!hasSubMenu &&
+            <Link href={link?.to} 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'} 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 => {
+              return <li key={sLink.id}>
+                    <Link href={sLink.to} 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/fukasawa/components/MenuItemNormal.js

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const MenuItemNormal = props => {
+  const { link } = props
+  const router = useRouter()
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+  if (!link || !link.show) {
+    return null
+  }
+  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>
+}

themes/fukasawa/components/MenuList.js

@@ -0,0 +1,42 @@
+import { useGlobal } from '@/lib/global'
+import CONFIG_FUKA from '../config_fuka'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
+import { MenuItemCollapse } from './MenuItemCollapse'
+
+export const MenuList = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE },
+    { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_FUKA.MENU_SEARCH }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (<>
+        <nav id='nav-pc' className='hidden md:block font-sans text-sm z-20'>
+            {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+        </nav>
+        <nav id='nav-mobile' className='block md:hidden font-sans text-sm z-20 pb-1'>
+            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={props.onHeightChange}/>)}
+        </nav>
+    </>
+
+  )
+}

themes/fukasawa/components/TopNav.js

@@ -1,6 +1,6 @@
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import Collapse from '@/components/Collapse'
-import GroupMenu from './GroupMenu'
+import { MenuList } from './MenuList'
 import Logo from './Logo'
 import SearchInput from './SearchInput'
 
@@ -11,6 +11,7 @@ import SearchInput from './SearchInput'
  */
 const TopNav = props => {
   const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)
 
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
@@ -20,9 +21,9 @@ const TopNav = props => {
 
     {/* 导航栏 */}
     <div id='sticky-nav' className={'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
-      <Collapse type='vertical' isOpen={isOpen}>
+      <Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
         <div className='py-1 px-5'>
-          <GroupMenu {...props} />
+          <MenuList {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
           <SearchInput {...props} />
         </div>
       </Collapse>

themes/hexo/LayoutBase.js

@@ -11,6 +11,7 @@ import LoadingCover from './components/LoadingCover'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
 
 const FacebookPage = dynamic(
   () => {
@@ -61,6 +62,9 @@ const LayoutBase = props => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [])
 
+  if (isBrowser()) {
+    loadExternalResource('/css/theme-hexo.css', 'css')
+  }
   return (
     <div id='theme-hexo'>
       <CommonHead meta={meta} siteInfo={siteInfo}/>
@@ -70,10 +74,7 @@ const LayoutBase = props => {
       {headerSlot}
 
       <main id="wrapper" className="bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative">
-        <div
+        <div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
-          id="container-inner"
-          className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'}
-        >
           <div className="w-full max-w-4xl h-full">
             {onLoading ? <LoadingCover /> : children}
           </div>

themes/hexo/LayoutSlug.js

@@ -46,7 +46,7 @@ export const LayoutSlug = props => {
       showTag={false}
       floatSlot={floatSlot}
     >
-      <div className="w-full lg:hover:shadow lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
+      <div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
         {lock && <ArticleLock validPassword={validPassword} />}
 
         {!lock && <div id="container" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">

themes/hexo/components/BlogPostCard.js

@@ -15,6 +15,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
   return (
     <div
+        id='blog-post-card'
         data-aos="fade-up"
         data-aos-duration="200"
         data-aos-delay={delay}
@@ -30,7 +31,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
          {/* 图片封面 */}
         {showPageCover && !showPreview && post?.page_cover && (
-           <div className="h-auto md:w-5/12">
+           <div className="h-auto md:w-5/12 overflow-hidden">
                 <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     {/* <img
@@ -39,7 +40,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                         loading='lazy'
                         className="w-full relative cursor-pointer object-cover duration-200 hover:scale-125 "
                     /> */}
-                    <div className='bg-center bg-cover md:h-full h-52' style={{ backgroundImage: `url('${post?.page_cover}')` }}/>
+                    <div className='bg-center bg-cover md:h-full h-52 hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }}/>
 
                     {/* <div className='relative w-full h-full'>
                     <Image

themes/hexo/components/Card.js

@@ -1,7 +1,7 @@
 const Card = ({ children, headerSlot, className }) => {
   return <div className={className}>
     <>{headerSlot}</>
-    <section className="shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
+    <section className="card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
         {children}
     </section>
   </div>

themes/hexo/components/Collapse.js

@@ -1,43 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-
-const Collapse = props => {
-  const { id, className } = props
-  const collapseRef = useRef(null)
-  const collapseSection = element => {
-    const sectionHeight = element.scrollHeight
-    const currentHeight = element.style.height
-    if (currentHeight === '0px') {
-      return
-    }
-    requestAnimationFrame(function () {
-      element.style.height = sectionHeight + 'px'
-      requestAnimationFrame(function () {
-        element.style.height = 0 + 'px'
-      })
-    })
-  }
-  const expandSection = element => {
-    const sectionHeight = element.scrollHeight
-    element.style.height = sectionHeight + 'px'
-    const clearTime = setTimeout(() => {
-      element.style.height = 'auto'
-    }, 400)
-    clearTimeout(clearTime)
-  }
-  useEffect(() => {
-    const element = collapseRef.current
-    if (props.isOpen) {
-      expandSection(element)
-    } else {
-      collapseSection(element)
-    }
-  }, [props.isOpen])
-  return (
-    <div id={id} ref={collapseRef} style={{ height: '0px' }} className={'overflow-hidden duration-200 ' + className}>
-      {props.children}
-    </div>
-  )
-}
-Collapse.defaultProps = { isOpen: false }
-
-export default Collapse

themes/hexo/components/Header.js

@@ -83,23 +83,14 @@ const Header = props => {
   }, throttleMs))
 
   return (
-        <header
+        <header id="header" style={{ zIndex: 1 }} className="w-full h-screen relative" >
-            id="header"
-            className="w-full h-screen bg-black text-white relative"
-        >
-            <div className={`w-full h-full ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`}>
-                {/* <Image src={siteInfo.pageCover} fill
-                    style={{ objectFit: 'cover' }}
-                    className='opacity-70'
-                    placeholder='blur'
-                    blurDataURL='/bg_image.jpg' /> */}
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
-            </div>
 
-            <div className="absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
-                <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
+                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
-                <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
+
+            <div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
+                <div className='text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
+                <div className='mt-2 h-12 items-center text-center shadow-text text-lg'>
                     <span id='typed' />
                 </div>
 

themes/hexo/components/HeaderArticle.js

@@ -19,10 +19,16 @@ export default function HeaderArticle({ post, siteInfo }) {
   return (
     <div
       id="header"
-      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn"
+      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn z-10"
       style={{ backgroundImage: headerImage }}
     >
-      <header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
+      <header id='article-header-cover'
+            data-aos="fade-down"
+            data-aos-duration="300"
+            data-aos-once="true"
+            data-aos-anchor-placement="top-bottom"
+            className="bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
+
         <div className='mt-24'>
           {/* 文章Title */}
           <div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white ">

themes/hexo/components/MenuButtonGroupTop.js

@@ -1,48 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import CONFIG_HEXO from '../config_hexo'
-
-const MenuButtonGroupTop = (props) => {
-  const { customNav } = props
-  const { locale } = useGlobal()
-
-  let links = [
-    { icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG_HEXO.MENU_INDEX },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE }
-    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
-    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
-  ]
-
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-
-  return (
-    <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
-      {links.map(link => {
-        if (link.show) {
-          return (
-            <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
-              target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-              className={'py-1.5 my-1 px-3  text-base justify-center items-center cursor-pointer'}>
-
-              <div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
-                <i className={`${link.icon} mr-1`}/>
-                <div className='text-center'>{link.name}</div>
-              </div>
-
-            </Link>
-          )
-        } else {
-          return null
-        }
-      })}
-    </nav>
-  )
-}
-export default MenuButtonGroupTop

themes/hexo/components/MenuGroupCard.js

@@ -17,7 +17,7 @@ const MenuGroupCard = (props) => {
   ]
 
   return (
-    <nav id='nav' className='leading-8 flex justify-center   w-full'>
+    <nav id='nav' className='leading-8 flex justify-center  dark:text-gray-200 w-full'>
         {links.map(link => {
           if (link.show) {
             return (

themes/hexo/components/MenuItemCollapse.js

@@ -0,0 +1,54 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  if (!link || !link.show) {
+    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}
+                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}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} 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}>
+                        <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

@@ -0,0 +1,41 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+        {!hasSubMenu &&
+            <Link
+                href={link?.to}
+                className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 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 font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 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 => {
+              return <li key={sLink.id} 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-2'>
+                    <Link href={sLink.to}>
+                    <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/MenuList.js

@@ -1,52 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useGlobal } from '@/lib/global'
-import CONFIG_HEXO from '../config_hexo'
-
-const MenuList = (props) => {
-  const { postCount, customNav } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
-  const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
-
-  let links = [
-    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH }
-  ]
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-
-  return (
-    <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 '>
-      {links.map(link => {
-        if (link && link.show) {
-          const selected = (router.pathname === link.to) || (router.asPath === link.to)
-          return (
-            <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
-              className={'py-1.5 px-5 text-base justify-between hover:bg-indigo-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
-                (selected ? 'bg-gray-200 text-black' : ' ')}>
-
-              <div className='my-auto items-center justify-center flex '>
-                <i className={`${link.icon} w-4 text-center`} />
-                <div className={'ml-4'}>{link.name}</div>
-              </div>
-              {link.slot}
-
-            </Link>
-          );
-        } else {
-          return null
-        }
-      })}
-    </nav>
-  );
-}
-export default MenuList

themes/hexo/components/MenuListSide.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import CONFIG_HEXO from '../config_hexo'
+
+export const MenuListSide = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = customNav.concat(links)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+        <nav>
+            {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
+            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
+        </nav>
+  )
+}

themes/hexo/components/MenuListTop.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_HEXO from '../config_hexo'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
+
+export const MenuListTop = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG_HEXO.MENU_INDEX },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE }
+    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
+    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (<>
+        <nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
+            {links?.map(link => link && link.show && <MenuItemDrop key={link?.id} link={link} />)}
+        </nav>
+    </>)
+}

themes/hexo/components/SideBar.js

@@ -0,0 +1,34 @@
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import MenuGroupCard from './MenuGroupCard'
+import { MenuListSide } from './MenuListSide'
+
+/**
+ * 侧边抽屉
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBar = (props) => {
+  const { siteInfo } = props
+  const router = useRouter()
+  return (
+        <div id='side-bar'>
+            <div className="h-52 w-full flex justify-center">
+                <div>
+                    <div onClick={() => { router.push('/') }}
+                        className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
+                    </div>
+                    <MenuGroupCard {...props} />
+                </div>
+            </div>
+            <hr className=' border-dashed'/>
+            <MenuListSide {...props} />
+        </div>
+  )
+}
+
+export default SideBar

themes/hexo/components/SideBarDrawer.js

@@ -0,0 +1,51 @@
+import { useRouter } from 'next/router'
+import React from 'react'
+
+/**
+ * 侧边栏抽屉面板，可以从侧面拉出
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
+  const router = useRouter()
+  React.useEffect(() => {
+    const sideBarDrawerRouteListener = () => {
+      switchSideDrawerVisible(false)
+    }
+    router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+    return () => {
+      router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+    }
+  }, [router.events])
+
+  // 点击按钮更改侧边抽屉状态
+  const switchSideDrawerVisible = (showStatus) => {
+    if (showStatus) {
+      onOpen && onOpen()
+    } else {
+      onClose && onClose()
+    }
+    const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+    const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
+
+    if (showStatus) {
+      sideBarDrawer.classList.replace('-mr-72', 'mr-0')
+      sideBarDrawerBackground.classList.replace('hidden', 'block')
+    } else {
+      sideBarDrawer.classList.replace('mr-0', '-mr-72')
+      sideBarDrawerBackground.classList.replace('block', 'hidden')
+    }
+  }
+
+  return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
+
+    <div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
+      {children}
+    </div>
+
+    {/* 背景蒙版 */}
+    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
+      className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
+  </div>
+}
+export default SideBarDrawer

themes/hexo/components/SideRight.js

@@ -25,7 +25,7 @@ export default function SideRight(props) {
 
   const { locale } = useGlobal()
   return (
-    <div className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
+    <div id='sideRight' className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
       <InfoCard {...props} />
       {CONFIG_HEXO.WIDGET_ANALYTICS && <AnalyticsCard {...props} />}
 

themes/hexo/components/TopNav.js

@@ -2,14 +2,14 @@ import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import CategoryGroup from './CategoryGroup'
-import Collapse from './Collapse'
 import Logo from './Logo'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
-import MenuButtonGroupTop from './MenuButtonGroupTop'
+import { MenuListTop } from './MenuListTop'
-import MenuList from './MenuList'
 import { useRouter } from 'next/router'
 import throttle from 'lodash.throttle'
+import SideBar from './SideBar'
+import SideBarDrawer from './SideBarDrawer'
 
 let windowTop = 0
 
@@ -31,6 +31,10 @@ const TopNav = props => {
     changeShow(!isOpen)
   }
 
+  const toggleSideBarClose = () => {
+    changeShow(false)
+  }
+
   // 监听滚动
   useEffect(() => {
     scrollTrigger()
@@ -63,7 +67,7 @@ const TopNav = props => {
       nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
     }
 
-    const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight * 2)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
+    const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
     if (!showNav) {
       nav && nav.classList.replace('top-0', '-top-20')
       windowTop = scrollS
@@ -129,7 +133,7 @@ const TopNav = props => {
         <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
 
         {/* 导航栏 */}
-        <div id='sticky-nav' className={'top-0  duration-200 transition-all  shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'}>
+        <div id='sticky-nav' style={{ backdropFilter: 'blur(3px)' }} className={'top-0 duration-300 transition-all  shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'}>
             <div className='w-full flex justify-between items-center px-4 py-2'>
                 <div className='flex'>
                     <Logo {...props} />
@@ -137,19 +141,18 @@ const TopNav = props => {
 
                 {/* 右侧功能 */}
                 <div className='mr-1 justify-end items-center '>
-                    <div className='hidden lg:flex'> <MenuButtonGroupTop {...props} /></div>
+                    <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
                     <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
                         {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
                     </div>
                 </div>
             </div>
-
-            <Collapse type='vertical' isOpen={isOpen} className='shadow-xl'>
-                <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-5 lg:hidden '>
-                    <MenuList {...props} />
-                </div>
-            </Collapse>
         </div>
+
+        {/* 折叠侧边栏 */}
+        <SideBarDrawer isOpen={isOpen} onClose={toggleSideBarClose}>
+            <SideBar {...props} />
+        </SideBarDrawer>
     </div>)
 }
 

themes/matery/LayoutBase.js

@@ -10,6 +10,7 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import FloatDarkModeButton from './components/FloatDarkModeButton'
 import throttle from 'lodash.throttle'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -36,6 +37,10 @@ const LayoutBase = props => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [])
 
+  if (isBrowser()) {
+    loadExternalResource('/css/theme-matery.css', 'css')
+  }
+
   return (
         <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
 

themes/matery/components/BlogPostListPage.js

@@ -21,7 +21,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
       <div id="container" className='w-full'>
         <div className='pt-6'></div>
         {/* 文章列表 */}
-        <div className="px-4 pt-4 flex flex-wrap pb-24" >
+        <div className="pt-4 flex flex-wrap pb-24" >
           {posts.map(post => (
            <div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'> <BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} /></div>
           ))}

themes/matery/components/BlogPostListScroll.js

@@ -57,7 +57,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MA
     return <div id='container' ref={targetRef} className='w-full'>
 
       {/* 文章列表 */}
-      <div className="px-4 pt-4 flex flex-wrap pb-24" >
+      <div className="pt-4 flex flex-wrap pb-24" >
         {postsToShow.map(post => (
             <div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'>
             <BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} />

themes/matery/components/Collapse.js

@@ -1,75 +0,0 @@
-import React from 'react'
-
-/**
- * 折叠面板组件，支持水平折叠、垂直折叠
- * @param {type:['horizontal','vertical'],isOpen} props
- * @returns
- */
-const Collapse = props => {
-  const collapseRef = React.useRef(null)
-  const type = props.type || 'vertical'
-  const collapseSection = element => {
-    const sectionHeight = element.scrollHeight
-    const sectionWidth = element.scrollWidth
-
-    requestAnimationFrame(function () {
-      switch (type) {
-        case 'horizontal':
-          element.style.width = sectionWidth + 'px'
-          requestAnimationFrame(function () {
-            element.style.width = 0 + 'px'
-          })
-          break
-        case 'vertical':
-          element.style.height = sectionHeight + 'px'
-          requestAnimationFrame(function () {
-            element.style.height = 0 + 'px'
-          })
-      }
-    })
-  }
-
-  /**
-   * 展开
-   * @param {*} element
-   */
-  const expandSection = element => {
-    const sectionHeight = element.scrollHeight
-    const sectionWidth = element.scrollWidth
-    let clearTime = 0
-    switch (type) {
-      case 'horizontal':
-        element.style.width = sectionWidth + 'px'
-        clearTime = setTimeout(() => {
-          element.style.width = 'auto'
-        }, 400)
-        break
-      case 'vertical':
-        element.style.height = sectionHeight + 'px'
-        clearTime = setTimeout(() => {
-          element.style.height = 'auto'
-        }, 400)
-    }
-
-    clearTimeout(clearTime)
-  }
-
-  React.useEffect(() => {
-    const element = collapseRef.current
-    if (props.isOpen) {
-      expandSection(element)
-    } else {
-      collapseSection(element)
-    }
-  }, [props.isOpen])
-
-  return (
-    <div ref={collapseRef} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }}
-       className={'overflow-hidden duration-200 fixed z-50 ' + props.className }>
-      {props.children}
-    </div>
-  )
-}
-Collapse.defaultProps = { isOpen: false }
-
-export default Collapse

themes/matery/components/Header.js

@@ -86,18 +86,9 @@ const Header = props => {
 
   return (
         <header
-            id="header"
+            id="header" style={{ zIndex: 1 }}
-            className="md:bg-fixed w-full h-screen bg-black text-white relative"
+            className=" w-full h-screen bg-black text-white relative"
         >
-            <div className='w-full h-full absolute'>
-                {/* <Image src={siteInfo.pageCover} fill
-                    style={{ objectFit: 'cover' }}
-                    className='opacity-70'
-                    placeholder='blur'
-                    blurDataURL='/bg_image.jpg' /> */}
-                     {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
-            </div>
 
             <div className="absolute flex flex-col h-full items-center justify-center w-full ">
                 <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
@@ -110,6 +101,9 @@ const Header = props => {
                 </div>
             </div>
 
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
+                className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_MATERY.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
+
         </header>
   )
 }

themes/matery/components/HeaderArticle.js

@@ -21,7 +21,7 @@ export default function HeaderArticle({ post, siteInfo }) {
                     className='opacity-50'
                     placeholder='blur'
                     blurDataURL='/bg_image.jpg' />
-            <span className='absolute text-white p-6 text-3xl'>{title}</span>
+            <span className='absolute text-white p-6 text-3xl shadow-text'>{title}</span>
         </div>
   )
 }

themes/matery/components/MenuButtonGroupTop.js

@@ -1,47 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import CONFIG_MATERY from '../config_matery'
-
-const MenuButtonGroupTop = (props) => {
-  const { customNav } = props
-  const { locale } = useGlobal()
-
-  let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
-  ]
-
-  if (customNav) {
-    links = customNav.concat(links)
-  }
-
-  return (
-    <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
-      {links.map(link => {
-        if (link.show) {
-          return (
-            <Link
-              key={`${link.to}`}
-              title={link.to}
-              href={link.to}
-              target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-              className={'py-1.5 my-1 px-3  text-base justify-center items-center cursor-pointer'}>
-
-              <div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
-                <i className={`${link.icon} mr-1`}/>
-                <div className='text-center'>{link.name}</div>
-              </div>
-
-            </Link>
-          )
-        } else {
-          return null
-        }
-      })}
-    </nav>
-  )
-}
-export default MenuButtonGroupTop

themes/matery/components/MenuItemCollapse.js

@@ -0,0 +1,61 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+  const router = useRouter()
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  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 ')}>
+
+            {!hasSubMenu && <Link href={link?.to}>
+                <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 && <Collapse isOpen={isOpen}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} 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}>
+                        <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

@@ -0,0 +1,41 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+        {!hasSubMenu &&
+            <Link
+                href={link?.to}
+                className="font-sans 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 font-sans 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 => {
+              return <li key={sLink.id} 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-2'>
+                    <Link href={sLink.to}>
+                        <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/MenuItemNormal.js

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const MenuItemNormal = props => {
+  const router = useRouter()
+
+  const { link } = props
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+
+  return <Link
+    key={link.to}
+    title={link.to}
+    href={link.to}
+    className={'py-2 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 ' +
+     (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
+
+    <div className='my-auto items-center justify-between flex '>
+        <i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
+        <div >{link.name}</div>
+    </div>
+    {link.slot}
+
+</Link>
+}

themes/matery/components/MenuListSide.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MATERY from '../config_matery'
+import BLOG from '@/blog.config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+
+export const MenuListSide = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = customNav.concat(links)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+        <nav>
+            {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
+            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
+        </nav>
+  )
+}

themes/matery/components/MenuListTop.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MATERY from '../config_matery'
+import { MenuItemDrop } from './MenuItemDrop'
+import BLOG from '@/blog.config'
+
+export const MenuListTop = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = customNav.concat(links)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+    <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
+      {links?.map(link => <MenuItemDrop key={link?.id} link={link}/>)}
+    </nav>
+  )
+}

themes/matery/components/SideBar.js

@@ -1,34 +1,18 @@
 import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
+import { MenuListSide } from './MenuListSide'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import CONFIG_MATERY from '../config_matery'
 
 /**
- * 标签组
+ * 侧边抽屉
  * @param tags
  * @param currentTag
  * @returns {JSX.Element}
  * @constructor
  */
 const SideBar = (props) => {
-  const { siteInfo, customNav } = props
+  const { siteInfo } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
-
-  const defaultLinks = [
-    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
-  ]
-  let links = [].concat(defaultLinks)
-  if (customNav) {
-    links = defaultLinks.concat(customNav)
-  }
 
   return (
-      <div id='side-bar' className=''>
+      <div id='side-bar'>
           <div className="mh-48 w-full bg-indigo-700">
               <div className='mx-5 pt-6 pb-2'>
                   {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -37,32 +21,7 @@ const SideBar = (props) => {
                   <div className='text-xs my-1 text-gray-300'>{siteInfo?.description}</div>
               </div>
           </div>
-          <nav>
+          <MenuListSide {...props} />
-              {links.map(link => {
-                if (link && link.show) {
-                  const selected = (router.pathname === link.to) || (router.asPath === link.to)
-                  return (
-                      <Link
-                          key={link.to}
-                          title={link.to}
-                          href={link.to}
-                          target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-                          className={'py-2 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 ' +
-                           (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
-
-                          <div className='my-auto items-center justify-between flex '>
-                              <i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
-                              <div >{link.name}</div>
-                          </div>
-                          {link.slot}
-
-                      </Link>
-                  )
-                } else {
-                  return <></>
-                }
-              })}
-          </nav>
       </div>
   )
 }

themes/matery/components/TopNav.js

@@ -5,7 +5,7 @@ import CategoryGroup from './CategoryGroup'
 import Logo from './Logo'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
-import MenuButtonGroupTop from './MenuButtonGroupTop'
+import { MenuListTop } from './MenuListTop'
 import SideBarDrawer from '@/components/SideBarDrawer'
 import SideBar from './SideBar'
 import throttle from 'lodash.throttle'
@@ -144,7 +144,7 @@ const TopNav = props => {
 
                     {/* 右侧功能 */}
                     <div className='mr-1 justify-end items-center '>
-                        <div className='hidden lg:flex'> <MenuButtonGroupTop {...props} /></div>
+                        <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
                         <div className='block lg:hidden'><Link href={'/search'} passHref>
                             <i className='fas fa-search' />
                         </Link></div>

themes/matery/config_matery.js

@@ -3,6 +3,7 @@ const CONFIG_MATERY = {
   HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
 
   HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
+  HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂； false则随鼠标滚动
 
   // 菜单配置
   MENU_CATEGORY: true, // 显示分类

themes/medium/LayoutArchive.js

@@ -8,7 +8,7 @@ export const LayoutArchive = props => {
   return (
     <LayoutBase {...props}>
       <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
-        {Object.keys(archivePosts).map(archiveTitle => (
+        {Object.keys(archivePosts)?.map(archiveTitle => (
           <div key={archiveTitle}>
             <div
               className="pt-16 pb-4 text-3xl dark:text-gray-300"
@@ -17,7 +17,7 @@ export const LayoutArchive = props => {
               {archiveTitle}
             </div>
             <ul>
-              {archivePosts[archiveTitle].map(post => (
+              {archivePosts[archiveTitle]?.map(post => (
                 <li
                   key={post.id}
                   className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"

themes/medium/LayoutBase.js

@@ -25,31 +25,41 @@ const LayoutBase = props => {
   const { locale } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
+  const { onLoading } = useGlobal()
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
 
   return (
         <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
+            <CommonHead meta={meta} />
+
             <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
-                <CommonHead meta={meta} />
 
                 <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
                     {/* 桌面端左侧菜单 */}
                     {/* <LeftMenuBar/> */}
 
                     <div id='container-inner' className='w-full relative z-10'>
-                        {/* 移动端顶部菜单 */}
+                        {/* 顶部导航栏 */}
                         <TopNavBar {...props} />
-                        <div className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
+
+                        <div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
                             {slotTop}
-                            {children}
+
+                            {onLoading ? LoadingCover : children}
 
                             {/* 回顶按钮 */}
                             <div
-                              data-aos="fade-up"
+                                data-aos="fade-up"
-                              data-aos-duration="300"
+                                data-aos-duration="300"
-                              data-aos-once="false"
+                                data-aos-once="false"
-                              data-aos-anchor-placement="top-center"
+                                data-aos-anchor-placement="top-center"
-                              className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20'>
+                                className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20'>
-                              <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }}/>
+                                <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
                             </div>
                         </div>
 
@@ -73,6 +83,7 @@ const LayoutBase = props => {
                     </div>
                 </main>
 
+                {/* 移动端底部导航栏 */}
                 <BottomMenuBar {...props} className='block md:hidden' />
             </div>
         </ThemeGlobalMedium.Provider>

themes/medium/LayoutTagIndex.js

@@ -13,7 +13,7 @@ export const LayoutTagIndex = props => {
           {locale.COMMON.TAGS}:
         </div>
         <div id="tags-list" className="duration-200 flex flex-wrap">
-          {tagOptions.map(tag => {
+          {tagOptions?.map(tag => {
             return (
               <div key={tag.name} className="p-2">
                 <TagItemMini key={tag.name} tag={tag} />

themes/medium/components/ArticleAround.js

@@ -28,5 +28,5 @@ export default function ArticleAround ({ prev, next }) {
 
       </Link>
     </section>
-  );
+  )
 }

themes/medium/components/BlogPostListPage.js

@@ -16,8 +16,9 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
-  } else {
+  }
-    return (
+
+  return (
       <div className='w-full justify-center'>
         <div id='container'>
         {/* 文章列表 */}
@@ -27,8 +28,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
         </div>
         <PaginationSimple page={page} totalPage={totalPage} />
       </div>
-    )
+  )
-  }
 }
 
 export default BlogPostListPage

themes/medium/components/Catalog.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
@@ -15,10 +15,10 @@ const Catalog = ({ toc }) => {
   // 目录自动滚动
   const tRef = useRef(null)
   // 同步选中目录事件
-  const [activeSection, setActiveSection] = React.useState(null)
+  const [activeSection, setActiveSection] = useState(null)
 
   // 监听滚动事件
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', actionSectionScrollSpy)
     actionSectionScrollSpy()
     return () => {
@@ -27,7 +27,7 @@ const Catalog = ({ toc }) => {
   }, [])
 
   const throttleMs = 200
-  const actionSectionScrollSpy = React.useCallback(throttle(() => {
+  const actionSectionScrollSpy = useCallback(throttle(() => {
     const sections = document.getElementsByClassName('notion-h')
     let prevBBox = null
     let currentSectionId = activeSection

themes/medium/components/Footer.js

@@ -14,7 +14,7 @@ const Footer = ({ title }) => {
 
   return (
     <footer
-      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6 relative'
+      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 relative'
     >
        <DarkModeButton/>
       <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>

themes/medium/components/GroupMenu.js

@@ -1,51 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useGlobal } from '@/lib/global'
-import CONFIG_MEDIUM from '../config_medium'
-
-function GroupMenu ({ customMenu, customNav }) {
-  const { locale } = useGlobal()
-  const router = useRouter()
-
-  let links = [
-    // { name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
-    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE }
-    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
-  ]
-
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-
-  return (
-    <nav id='nav' className=' text-md'>
-        {links.map(link => {
-          if (link.show) {
-            const selected = (router.pathname === link.to) || (router.asPath === link.to)
-            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>
-            )
-          } else {
-            return null
-          }
-        })}
-      </nav>
-  )
-}
-
-export default GroupMenu

themes/medium/components/MenuBarMobile.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MEDIUM from '../config_medium'
+import BLOG from '@/blog.config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+
+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: CONFIG_MEDIUM.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE }
+    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  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>
+  )
+}

themes/medium/components/MenuItemCollapse.js

@@ -0,0 +1,62 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = (props) => {
+  const { link } = props
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    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} >
+
+            {!hasSubMenu && <Link href={link?.to} 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 && <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}>
+                        <div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}

themes/medium/components/MenuItemDrop.js

@@ -0,0 +1,50 @@
+import Link from 'next/link'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  //   const show = true
+  //   const changeShow = () => {}
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    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)} >
+
+        {hasSubMenu &&
+            <div className={'px-1 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-1 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}>
+                    {link?.icon && <i className={link?.icon} />} {link?.name}
+                </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-2'>
+                    <Link href={sLink.to}>
+                        <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </li>
+}

themes/medium/components/MenuItemMobileNormal.js

@@ -0,0 +1,27 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const NormalMenu = props => {
+  const { link } = props
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+
+  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>
+}

themes/medium/components/MenuItemPCNormal.js

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+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)
+  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}
+    </Link>
+}

themes/medium/components/TopNavBar.js

@@ -1,11 +1,11 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
 import LogoBar from './LogoBar'
-import React from 'react'
+import { useRef, useState } from 'react'
 import Collapse from '@/components/Collapse'
-import GroupMenu from './GroupMenu'
+import { MenuBarMobile } from './MenuBarMobile'
 import { useGlobal } from '@/lib/global'
 import CONFIG_MEDIUM from '../config_medium'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
 
 /**
  * 顶部导航栏 + 菜单
@@ -13,9 +13,9 @@ import CONFIG_MEDIUM from '../config_medium'
  * @returns
  */
 export default function TopNavBar(props) {
-  const { className, customNav } = props
+  const { className, customNav, customMenu } = props
-  const router = useRouter()
+  const [isOpen, changeShow] = useState(false)
-  const [isOpen, changeShow] = React.useState(false)
+  const collapseRef = useRef(null)
 
   const { locale } = useGlobal()
 
@@ -26,59 +26,47 @@ export default function TopNavBar(props) {
     { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
   ]
 
-  const navs = defaultLinks.concat(customNav)
+  let links = defaultLinks.concat(customNav)
 
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
   }
 
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
   return (
       <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
-            {/* 折叠菜单 */}
+
-            <Collapse type='vertical' isOpen={isOpen} className='md:hidden'>
+            {/* 移动端折叠菜单 */}
-                <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-7 lg:hidden '>
+            <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
-                    <GroupMenu {...props} />
+                <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 */}
+                {/* 左侧图标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'>
-                    {navs && navs.map(link => {
+                    {links && links?.map(link => <MenuItemDrop key={link?.id} link={link}/>)}
-                      if (link?.show) {
-                        const selected = (router.pathname === link.to) || (router.asPath === link.to)
-                        return (
-                            <Link
-                                key={`${link.id}-${link.to}`}
-                                title={link.to}
-                                href={link.to}
-                                target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-                                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>
-                        )
-                      } else {
-                        return null
-                      }
-                    })}
                 </div>
             </div>
         </div>

themes/next/components/ArticleDetail.js

@@ -26,18 +26,17 @@ export default function ArticleDetail(props) {
   const date = formatDate(post?.date?.start_date || post?.createdTime, locale.LOCALE)
 
   return (
-      <div id="container"
+        <div id="container"
-            data-aos="fade-down"
-            data-aos-duration="300"
-            data-aos-once="true"
-            data-aos-anchor-placement="top-bottom"
-
             className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
             <div itemScope itemType="https://schema.org/Movie"
+                data-aos="fade-down"
+                data-aos-duration="300"
+                data-aos-once="true"
+                data-aos-anchor-placement="top-bottom"
                 className="subpixel-antialiased overflow-y-hidden py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
             >
 
-                {showArticleInfo && <header className='animate__slideInDown animate__animated'>
+                {showArticleInfo && <header>
                     {/* 头图 */}
                     {CONFIG_NEXT.POST_HEADER_IMAGE_VISIBLE && post?.type && !post?.type !== 'Page' && post?.page_cover && (
                         <div className="w-full relative md:flex-shrink-0 overflow-hidden">
@@ -79,7 +78,7 @@ export default function ArticleDetail(props) {
                 </header>}
 
                 {/* Notion内容主体 */}
-                <article id='notion-article' className='px-1'>
+                <article id='notion-article' className='px-1 max-w-3xl mx-auto'>
                     {post && (<NotionPage post={post} />)}
                 </article>
 

themes/next/components/BlogPostCard.js

@@ -75,7 +75,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
           {/* 搜索结果 */}
           {post.results && (
-            <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+            <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
               {post.results.map(r => (
                 <span key={r}>{r}</span>
               ))}

themes/next/components/Collapse.js

@@ -1,38 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-
-const Collapse = props => {
-  const collapseRef = useRef(null)
-  const collapseSection = element => {
-    const sectionHeight = element.scrollHeight
-    requestAnimationFrame(function () {
-      element.style.height = sectionHeight + 'px'
-      requestAnimationFrame(function () {
-        element.style.height = 0 + 'px'
-      })
-    })
-  }
-  const expandSection = element => {
-    const sectionHeight = element.scrollHeight
-    element.style.height = sectionHeight + 'px'
-    const clearTime = setTimeout(() => {
-      element.style.height = 'auto'
-    }, 400)
-    clearTimeout(clearTime)
-  }
-  useEffect(() => {
-    const element = collapseRef.current
-    if (props.isOpen) {
-      expandSection(element)
-    } else {
-      collapseSection(element)
-    }
-  }, [props.isOpen])
-  return (
-    <div ref={collapseRef} style={{ height: '0px' }} className='overflow-hidden duration-200'>
-      {props.children}
-    </div>
-  )
-}
-Collapse.defaultProps = { isOpen: false }
-
-export default Collapse

themes/next/components/MenuButtonGroup.js

@@ -1,53 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useGlobal } from '@/lib/global'
-import CONFIG_NEXT from '../config_next'
-
-const MenuButtonGroup = (props) => {
-  const { postCount, customNav } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
-  const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
-
-  const defaultLinks = [
-    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_NEXT.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_NEXT.MENU_TAG },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_NEXT.MENU_ARCHIVE }
-  ]
-  let links = [].concat(defaultLinks)
-  if (customNav) {
-    links = defaultLinks.concat(customNav)
-  }
-
-  return (
-    <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans'>
-        {links.map(link => {
-          if (link && link.show) {
-            const selected = (router.pathname === link.to) || (router.asPath === link.to)
-            return (
-              <Link
-                key={link.to}
-                title={link.to}
-                href={link.to}
-                target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-                className={'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 ' +
-                    (selected ? 'bg-gray-200 text-black' : ' ')}>
-
-                <div className='my-auto items-center justify-center flex '>
-                  <i className={`${link.icon} w-4 text-center`} />
-                  <div className={'ml-4'}>{link.name}</div>
-                </div>
-                {link.slot}
-
-              </Link>
-            )
-          } else {
-            return <></>
-          }
-        })}
-      </nav>
-  )
-}
-export default MenuButtonGroup

themes/next/components/MenuItemCollapse.js

@@ -0,0 +1,54 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = (props) => {
+  const { link } = props
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    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}
+                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 && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} 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}>
+                        <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

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+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 '>
+
+        {!hasSubMenu &&
+            <Link href={link?.to} 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} 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/next/components/MenuList.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_NEXT from '../config_next'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
+import { MenuItemCollapse } from './MenuItemCollapse'
+
+export const MenuList = (props) => {
+  const { postCount, customNav, customMenu } = props
+  const { locale } = useGlobal()
+  const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
+
+  const defaultLinks = [
+    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_NEXT.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_NEXT.MENU_TAG },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_NEXT.MENU_ARCHIVE }
+  ]
+
+  let links = [].concat(defaultLinks)
+  if (customNav) {
+    links = defaultLinks.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+        <>
+            {/* 大屏模式菜单 */}
+            <nav id='nav' className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
+                {links.map(link => link && link.show && <MenuItemDrop key={link?.to} link={link} />)}
+            </nav>
+
+            {/* 移动端菜单 */}
+            <div id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
+                {links?.map(link => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.to} link={link} />)}
+            </div>
+        </>
+  )
+}

themes/next/components/SideAreaLeft.js

@@ -1,5 +1,5 @@
 import InfoCard from './InfoCard'
-import MenuButtonGroup from './MenuButtonGroup'
+import { MenuList } from './MenuList'
 import SearchInput from './SearchInput'
 import Toc from './Toc'
 import { useGlobal } from '@/lib/global'
@@ -23,7 +23,7 @@ const SideAreaLeft = props => {
   const { post, slot, postCount } = props
   const { locale } = useGlobal()
   const showToc = post && post.toc && post.toc.length > 1
-  return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-10 relative'}>
+  return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-20 relative'}>
 
         <section
             data-aos="fade-down"
@@ -35,7 +35,7 @@ const SideAreaLeft = props => {
             <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
                 <Logo {...props} className='h-32' />
                 <div className='pt-2 px-2 font-sans'>
-                    <MenuButtonGroup allowCollapse={true} {...props} />
+                    <MenuList allowCollapse={true} {...props} />
                 </div>
                 {CONFIG_NEXT.MENU_SEARCH && <div className='px-2 pt-2 font-sans'>
                     <SearchInput {...props} />

themes/next/components/SideAreaRight.js

@@ -25,7 +25,9 @@ const SideAreaRight = (props) => {
   const { tagOptions, currentTag, slot, categoryOptions, currentCategory, notice } = props
   const { locale } = useGlobal()
   const router = useRouter()
-  return (<aside id='right' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'mr-4' : 'ml-4') + ' space-y-4 hidden 2xl:block flex-col w-60 relative z-10'}>
+  const announcementVisible = notice && Object.keys(notice).length > 0
+
+  return (<aside id='right' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'mr-4' : 'ml-4') + ' space-y-4 hidden xl:block flex-col w-60 relative z-10'}>
 
         {CONFIG_NEXT.RIGHT_AD && <Card className='mb-2'>
             {/* 展示广告  */}
@@ -40,12 +42,10 @@ const SideAreaRight = (props) => {
             />
         </Card>}
 
-        <div className="sticky top-0 space-y-4">
+        <div className="sticky top-0 space-y-4 w-full">
-            <div>
+            {announcementVisible && <Card>
-                {notice && <Card>
+                <Announcement post={notice} />
-                    <Announcement post={notice} />
+            </Card>}
-                </Card>}
-            </div>
 
             {slot}
 

themes/next/components/TopNav.js

@@ -3,9 +3,9 @@ import throttle from 'lodash.throttle'
 import Link from 'next/link'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import CategoryGroup from './CategoryGroup'
-import Collapse from './Collapse'
+import Collapse from '@/components/Collapse'
 import Logo from './Logo'
-import MenuButtonGroup from './MenuButtonGroup'
+import { MenuList } from './MenuList'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
 import CONFIG_NEXT from '../config_next'
@@ -21,6 +21,7 @@ const TopNav = (props) => {
   const { tags, currentTag, categories, currentCategory } = props
   const { locale } = useGlobal()
   const searchDrawer = useRef()
+  const collapseRef = useRef(null)
 
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
@@ -53,76 +54,74 @@ const TopNav = (props) => {
   }
 
   const searchDrawerSlot = <>
-    { categories && (
+        {categories && (
-        <section className='mt-8'>
+            <section className='mt-8'>
-          <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
+                <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
-            <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
+                    <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
-            <Link
+                    <Link
-              href={'/category'}
+                        href={'/category'}
-              passHref
+                        passHref
-              className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+                        className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
 
-              {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
+                        {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
 
-            </Link>
+                    </Link>
-          </div>
+                </div>
-          <CategoryGroup currentCategory={currentCategory} categories={categories} />
+                <CategoryGroup currentCategory={currentCategory} categories={categories} />
-        </section>
+            </section>
-    ) }
+        )}
 
-    { tags && (
+        {tags && (
-        <section className='mt-4'>
+            <section className='mt-4'>
-          <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
+                <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
-            <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag'/>{locale.COMMON.TAGS}</div>
+                    <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag' />{locale.COMMON.TAGS}</div>
-            <Link
+                    <Link
-              href={'/tag'}
+                        href={'/tag'}
-              passHref
+                        passHref
-              className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
+                        className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
 
-              {locale.COMMON.MORE} <i className='fas fa-angle-double-right'/>
+                        {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
 
-            </Link>
+                    </Link>
-          </div>
+                </div>
-          <div className='p-2'>
+                <div className='p-2'>
-            <TagGroups tags={tags} currentTag={currentTag} />
+                    <TagGroups tags={tags} currentTag={currentTag} />
-          </div>
+                </div>
-        </section>
+            </section>
-    ) }
+        )}
     </>
 
   return (<div id='top-nav' className='block lg:hidden'>
-    <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
+        <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
 
-    {/* 导航栏 */}
+        {/* 导航栏 */}
-    <div id='sticky-nav' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'fixed' : 'relative'} lg:relative w-full top-0 z-20 transform duration-500`}>
+        <div id='sticky-nav' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'fixed' : 'relative'} lg:relative w-full top-0 z-20 transform duration-500`}>
-      <div className='w-full flex justify-between items-center p-4 bg-black dark:bg-gray-800 text-white'>
+            <div className='w-full flex justify-between items-center p-4 bg-black dark:bg-gray-800 text-white'>
-        {/* 左侧LOGO 标题 */}
+                {/* 左侧LOGO 标题 */}
-        <div className='flex flex-none flex-grow-0'>
+                <div className='flex flex-none flex-grow-0'>
-          <div onClick={toggleMenuOpen} className='w-8 cursor-pointer'>
+                    <div onClick={toggleMenuOpen} className='w-8 cursor-pointer'>
-          { isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> }
+                        {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
-          </div>
+                    </div>
+                </div>
+
+                <div className='flex'>
+                    <Logo {...props} />
+                </div>
+
+                {/* 右侧功能 */}
+                <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
+                    <div className="cursor-pointer block lg:hidden" onClick={() => { searchDrawer?.current?.show() }}>
+                        <i className="mr-2 fas fa-search" />{locale.NAV.SEARCH}
+                    </div>
+                </div>
+            </div>
+
+            <Collapse collapseRef={collapseRef} type='vertical' isOpen={isOpen}>
+                <MenuList onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} {...props} from='top' />
+            </Collapse>
         </div>
 
-        <div className='flex'>
+    </div>)
-         <Logo {...props}/>
-        </div>
-
-        {/* 右侧功能 */}
-        <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-          <div className="cursor-pointer block lg:hidden" onClick={() => { searchDrawer?.current?.show() }}>
-            <i className="mr-2 fas fa-search" />{locale.NAV.SEARCH}
-          </div>
-        </div>
-      </div>
-
-      <Collapse type='vertical' isOpen={isOpen}>
-        <div className='bg-white py-1 px-5'>
-          <MenuButtonGroup {...props} from='top'/>
-          </div>
-      </Collapse>
-    </div>
-
-  </div>)
 }
 
 export default TopNav

themes/nobelium/LayoutBase.js

@@ -4,6 +4,7 @@ import Nav from './components/Nav'
 import { Footer } from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
 import Live2D from '@/components/Live2D'
+import { useGlobal } from '@/lib/global'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
 
@@ -14,7 +15,13 @@ const LayoutBase = props => {
   const { children, meta, post } = props
 
   const fullWidth = post?.fullWidth ?? false
+  const { onLoading } = useGlobal()
 
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
   return (
         <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen'>
             <CommonHead meta={meta} />
@@ -22,11 +29,9 @@ const LayoutBase = props => {
             {/* 顶部导航栏 */}
             <Nav {...props} />
 
-            <main className={`relative m-auto flex-grow w-full transition-all ${
+            <main className={`relative m-auto flex-grow w-full transition-all ${!fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'}`}>
-                !fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'
-                }`}>
 
-                {children}
+                {onLoading ? LoadingCover : children}
 
             </main>
 

themes/nobelium/components/MenuItemCollapse.js

@@ -7,7 +7,8 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const CollapseMenu = ({ link }) => {
+export const MenuItemCollapse = (props) => {
+  const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
@@ -21,25 +22,29 @@ export const CollapseMenu = ({ link }) => {
     changeIsOpen(!isOpen)
   }
 
+  if (!link || !link.show) {
+    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} >
+        <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}
                 className="font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
-                <span className='text-blue-400 hover:text-red-400 transition-all items-center duration-200'>{link?.name}</span>
+                <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='text-blue-400 hover:text-red-400 transition-all items-center duration-200'>{link?.name}</span>
+                <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}>
+        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
             {link.subMenus.map(sLink => {
-              return <div key={sLink.id} className='font-extralight dark:bg-black text-left px-10 justify-start text-blue-400 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'>
+              return <div key={sLink.id} 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}>
                         <span className='text-xs'>{sLink.title}</span>
                     </Link>

themes/nobelium/components/MenuItemDrop.js

@@ -0,0 +1,45 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  //   const show = true
+  //   const changeShow = () => {}
+  if (!link || !link.show) {
+    return null
+  }
+
+  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} >
+                        {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 => {
+                  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-2'>
+                        <Link href={sLink.to}>
+                            <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+                        </Link>
+                    </li>
+                })}
+            </ul>}
+
+        </div>
+
+    </li>
+}

themes/nobelium/components/Nav.js

@@ -1,9 +1,12 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import CONFIG_NOBELIUM from '../config_nobelium'
 import { SvgIcon } from './SvgIcon'
+import { MenuItemDrop } from './MenuItemDrop'
+import Collapse from '@/components/Collapse'
+import { MenuItemCollapse } from './MenuItemCollapse'
 
 const Nav = props => {
   const { navBarTitle, fullWidth, siteInfo } = props
@@ -31,47 +34,51 @@ const Nav = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sentinalRef])
   return <>
-    <div className="observer-element h-4 md:h-12" ref={sentinalRef}></div>
+        <div className="observer-element h-4 md:h-12" ref={sentinalRef}></div>
-    <div
+        <div
-      className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8 bg-opacity-60 ${
+            className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8 bg-opacity-60 ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
-        !fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
+                }`}
-      }`}
+            id="sticky-nav"
-      id="sticky-nav"
+            ref={navRef}
-      ref={navRef}
+        >
-    >
+            <div className="flex items-center">
-      <div className="flex items-center">
+                <Link href="/" aria-label={BLOG.title}>
-        <Link href="/" aria-label={BLOG.title}>
 
-          <div className="h-6">
+                    <div className="h-6">
-            {/* <SvgIcon/> */}
+                        {/* <SvgIcon/> */}
-            {CONFIG_NOBELIUM.NAV_NOTION_ICON
+                        {CONFIG_NOBELIUM.NAV_NOTION_ICON
-            /* eslint-disable-next-line @next/next/no-img-element */
+                        /* eslint-disable-next-line @next/next/no-img-element */
-              ? <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR}/>
+                          ? <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
-              : <SvgIcon/>}
+                          : <SvgIcon />}
 
-          </div>
+                    </div>
 
-        </Link>
+                </Link>
-        {navBarTitle
+                {navBarTitle
-          ? (
+                  ? (
-          <p className="ml-2 font-medium text-day dark:text-night header-name">
+                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-            {navBarTitle}
+                            {navBarTitle}
-          </p>
+                        </p>
-            )
+                    )
-          : (
+                  : (
-          <p className="ml-2 font-medium text-day dark:text-night header-name">
+                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-            {siteInfo?.title}
+                            {siteInfo?.title}
-            {/* ,{' '}<span className="font-normal">{siteInfo?.description}</span> */}
+                            {/* ,{' '}<span className="font-normal">{siteInfo?.description}</span> */}
-          </p>
+                        </p>
-            )}
+                    )}
-      </div>
+            </div>
-      <NavBar {...props}/>
+            <NavBar {...props} />
-    </div>
+        </div>
-  </>
+    </>
 }
 
 const NavBar = props => {
-  const { customNav } = props
+  const { customMenu, customNav } = props
+  const [isOpen, changeOpen] = useState(false)
+  const toggleOpen = () => {
+    changeOpen(!isOpen)
+  }
+  const collapseRef = useRef(null)
 
   const { locale } = useGlobal()
   let links = [
@@ -84,24 +91,29 @@ const NavBar = props => {
   if (customNav) {
     links = links.concat(customNav)
   }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
   return (
-    <div className="flex-shrink-0">
+        <div className="flex-shrink-0">
-      <ul className="flex flex-row">
+            <ul className=" hidden md:flex flex-row">
-        {links.map(
+                {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
-          link =>
+            </ul>
-            link.show && (
+            <div className='md:hidden'><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5 block md:hidden'></i>
-              <li
+                <Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
-                key={link.id}
+                    <div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
-                className="block ml-4 text-black dark:text-gray-50 nav"
+                        {links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
-              >
+                    </div>
-                <Link href={link.to} target={link.target}>
+                </Collapse>
-                  {link.name}
+            </div>
-                </Link>
+        </div>
-              </li>
-            )
-        )}
-      </ul>
-    </div>
   )
 }
 

themes/simple/LayoutBase.js

@@ -35,7 +35,7 @@ const LayoutBase = props => {
     loadExternalResource('/css/theme-simple.css', 'css')
   }
   return (
-        <div id='theme-simple' className='dark:text-gray-300  bg-white dark:bg-black'>
+        <div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black'>
             <CommonHead meta={meta} />
 
             {CONFIG_SIMPLE.TOP_BAR && <TopBar {...props} />}
@@ -47,12 +47,12 @@ const LayoutBase = props => {
             <NavBar {...props} />
 
             {/* 主体 */}
-            <div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex items-start max-w-9/10 mx-auto pt-12'}>
+            <div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
                 <div id='container-inner ' className='w-full flex-grow'>
                     {onLoading ? LoadingCover : children}
                 </div>
 
-                <div className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
+                <div id='right-sidebar' className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
                     <SideBar {...props} />
                 </div>