add theme nav & add pageIcon support of @lib/getNotionData

2026-05-13 23:16:47 +00:00 · 2023-10-13 03:14:03 +00:00
parent 8e01d0713e
commit a4d9007a2a
48 changed files with 2483 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -29,6 +29,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env

 # vercel
 .vercel
--- a/lib/notion/getNotionData.js
+++ b/lib/notion/getNotionData.js
@@ -184,7 +184,7 @@ export function getNavPages({ allPages }) {
    return post && post?.slug && (!post?.slug?.startsWith('http')) && post?.type === 'Post' && post?.status === 'Published'
  })

-  return allNavPages.map(item => ({ id: item.id, title: item.title || '', pageCoverThumbnail: item.pageCoverThumbnail || '', category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug, lastEditedDate: item.lastEditedDate }))
+  return allNavPages.map(item => ({ id: item.id, title: item.title || '', pageCoverThumbnail: item.pageCoverThumbnail || '', category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug, pageIcon: item.pageIcon || '', lastEditedDate: item.lastEditedDate }))
 }

 /**
--- a/themes/nav/components/Announcement.js
+++ b/themes/nav/components/Announcement.js
@@ -0,0 +1,21 @@
+// import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ notice, className }) => {
+//   const { locale } = useGlobal()
+  if (notice?.blockMap) {
+    return <div className={className}>
+        <section id='announcement-wrapper' className="dark:text-gray-300">
+            {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
+            {notice && (<div id="announcement-content">
+            <NotionPage post={notice} />
+        </div>)}
+        </section>
+    </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement
--- a/themes/nav/components/ArticleAround.js
+++ b/themes/nav/components/ArticleAround.js
@@ -0,0 +1,32 @@
+import Link from 'next/link'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAround ({ prev, next }) {
+  if (!prev || !next) {
+    return <></>
+  }
+  return (
+    <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
+      <Link
+        href={`/${prev.slug}`}
+        passHref
+        className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
+
+        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
+
+      </Link>
+      <Link
+        href={`/${next.slug}`}
+        passHref
+        className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
+        {next.title}
+        <i className='ml-1 my-1 fas fa-angle-double-right' />
+
+      </Link>
+    </section>
+  )
+}
--- a/themes/nav/components/ArticleInfo.js
+++ b/themes/nav/components/ArticleInfo.js
@@ -0,0 +1,9 @@
+export default function ArticleInfo({ post }) {
+  if (!post) {
+    return null
+  }
+  return <div className="pt-10 pb-6 text-gray-400 text-sm border-b">
+        <i className="fa-regular fa-clock mr-1" />
+        Last update:  { post.date?.start_date}
+    </div>
+}
--- a/themes/nav/components/ArticleLock.js
+++ b/themes/nav/components/ArticleLock.js
@@ -0,0 +1,53 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { validPassword } = props
+  const { locale } = useGlobal()
+
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    if (!validPassword(p?.value)) {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = `<div class='text-red-500 animate__shakeX animate__animated'>${locale.COMMON.PASSWORD_ERROR}</div>`
+      }
+    }
+  }
+
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
+  return <div id='container' className='w-full flex justify-center items-center h-96 '>
+    <div className='text-center space-y-3'>
+      <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+      <div className='flex mx-4'>
+        <input id="password" type='password'
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                submitPassword()
+              }
+            }}
+            ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'>
+        </input>
+        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300" >
+          <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
+        </div>
+      </div>
+      <div id='tips'>
+      </div>
+    </div>
+  </div>
+}
--- a/themes/nav/components/BlogArchiveItem.js
+++ b/themes/nav/components/BlogArchiveItem.js
@@ -0,0 +1,36 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+/**
+ * 归档分组
+ * @param {*} param0
+ * @returns
+ */
+export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
+  return (
+        <div key={archiveTitle}>
+            <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
+                {archiveTitle}
+            </div>
+            <ul>
+                {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"
+                    >
+                        <div id={post?.publishDay}>
+                            <span className="text-gray-400">
+                                {post.date?.start_date}
+                            </span>{' '}
+                            &nbsp;
+
+                            <Link passHref href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+                                {post.title}
+                            </Link>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+  )
+}
--- a/themes/nav/components/BlogPostCard.js
+++ b/themes/nav/components/BlogPostCard.js
@@ -0,0 +1,49 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+import NotionIcon from './NotionIcon'
+import { useRouter } from 'next/router'
+import React from 'react'
+
+const BlogPostCard = ({ post, className }) => {
+  const router = useRouter()
+  const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
+  return (
+    <Link href={`${removeHttp(post.slug)}`} target={(checkRemoveHttp(post.slug) ? '_blank' : '_self')} passHref>
+        <div key={post.id} className={`${className} h-full rounded-lg p-4 dark:bg-neutral-800 cursor-pointer bg-white hover:bg-white rounded-2xl dark:hover:bg-gray-800 ${currentSelected ? 'bg-green-50 text-green-500' : ''}`}>
+                <div className="stack-entry w-full flex space-x-3 select-none dark:text-neutral-200">
+                    <NotionIcon icon={post.pageIcon} size='10' className='text-6xl w-11 h-11 mx-1 my-0 flex-none' />
+                    <div className="stack-comment flex-auto">
+                        <p className="title font-bold">{post.title}</p>
+                        <p className="description font-normal">{post.summary ? post.summary : '暂无简介'}</p>
+                    </div>
+                </div>
+        </div>
+    </Link>
+  )
+  function removeHttp(str) {
+    // 检查字符串是否包含http
+    if (str.includes("http")) {
+      // 如果包含，找到http的位置
+      let index = str.indexOf("http");
+      // 返回http之后的部分
+      return str.slice(index, str.length);
+    } else {
+      // 如果不包含，返回原字符串
+      return str;
+    }
+  }
+  function checkRemoveHttp(str) {
+    // 检查字符串是否包含http
+    if (str.includes("http")) {
+      // 如果包含，找到http的位置
+      let index = str.indexOf("http");
+      // 包含
+      return true;
+    } else {
+      // 不包含
+      return false;
+    }
+  }
+}
+
+export default BlogPostCard
--- a/themes/nav/components/BlogPostItem.js
+++ b/themes/nav/components/BlogPostItem.js
@@ -0,0 +1,49 @@
+import BlogPostCard from './BlogPostCard'
+import React, { useState } from 'react'
+import NotionIcon from './NotionIcon'
+// import Collapse from '@/components/Collapse'
+
+/**
+ * 导航列表
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostItem = (props) => {
+  const { group, filterLinks } = props
+//   const [isOpen, changeIsOpen] = useState(group?.selected)
+
+//   const toggleOpenSubMenu = () => {
+//     changeIsOpen(!isOpen)
+//   }
+
+  console.log('####### group')
+  console.log(group)
+  
+  if (group?.category) {
+    return <>
+            <div id={group?.category} className='category  text-lg font-normal pt-9 pb-4 first:pt-4 select-none flex justify-between font-sans text-neutral-800 dark:text-neutral-400 p-2' key={group?.category}>
+                <h3><i className={`text-base mr-2 ${group?.icon ? group?.icon : 'fas fa-hashtag'}`} />{group?.category}</h3>
+            </div>
+            <div id='posts-wrapper' className='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5' >
+            {group?.items?.map(post => (
+                <BlogPostCard key={post.id} className='card' post={post} />
+            ))}
+            </div>
+        </>
+  } else {
+    return <>
+            <div id='uncategory' className='category text-lg font-normal pt-9 pb-4 first:pt-4 font-bold select-none flex justify-between font-sans text-neutral-800 dark:text-neutral-400 p-2' key='uncategory'>
+                <span><i className={`text-base mr-2 ${group?.icon ? group?.icon : 'fas fa-hashtag'}`} />未分类</span>
+            </div>
+            <div class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
+            {group?.items?.map(post => (
+                <BlogPostCard key={post.id} className='card' post={post} />
+            ))}
+            </div>
+        </>
+  }
+}
+
+export default BlogPostItem
--- a/themes/nav/components/BlogPostListAll.js
+++ b/themes/nav/components/BlogPostListAll.js
@@ -0,0 +1,139 @@
+import BlogPostListEmpty from './BlogPostListEmpty'
+import { useRouter } from 'next/router'
+import BlogPostItem from './BlogPostItem'
+import { useNavGlobal } from '@/themes/nav'
+import CONFIG from '../config'
+import { deepClone } from '@/lib/utils'
+import { useEffect, useState, createContext, useContext } from 'react'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListAll = (props) => {
+  // const { customMenu, posts, category, tag, allNavPages, categoryOptions } = props
+  // const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
+  const { customMenu } = props
+
+  // const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
+  const { filteredNavPages, setFilteredNavPages, allNavPages } = useNavGlobal()
+  // const [filteredNavPages] = useState(allNavPages)
+  
+  // const router = useRouter()
+  // 对自定义分类格式化，方便后续使用分类名称做索引，检索同步图标信息
+  // 目前只支持二级分类
+  let links = customMenu
+  let filterLinks = {}
+  // for循环遍历数组
+  links?.map((link, i) => {
+    let linkTitle = link.title + ''
+    // console.log('####### link')
+    // console.log(link)
+    // filterLinks[linkTitle] = link
+    filterLinks[linkTitle] = { title: link.title, icon: link.icon, pageIcon: link.pageIcon  }
+    if(link?.subMenus){
+      link.subMenus?.map((group, index) => {
+        let subMenuTitle = group?.title + ''
+        // 自定义分类图标与post的category共用
+        // 判断自定义分类与Post中category同名的项，将icon的值传递给post
+        // filterLinks[subMenuTitle] = group
+        filterLinks[subMenuTitle] = { title: group.title, icon: group.icon, pageIcon: group.pageIcon }
+      })
+    }
+  })
+  
+  console.log('####### filterLinks')
+  console.log(filterLinks)
+
+
+  // console.log('####### filterLinks')
+  // console.log(filterLinks)
+
+  let selectedSth = false
+  const groupedArray = filteredNavPages?.reduce((groups, item) => {
+    let categoryName = item?.category ? item?.category : '' // 将category转换为字符串
+    let categoryIcon = filterLinks[categoryName]?.icon ? filterLinks[categoryName]?.icon : '' // 将pageIcon转换为字符串
+
+    // console.log('####### categoryName')
+    // console.log(categoryName)
+    // console.log('####### categoryIcon')
+    // console.log(categoryIcon)
+
+    let existingGroup = null
+    // 开启自动分组排序
+    if (JSON.parse(CONFIG.AUTO_SORT)) {
+      existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
+    } else {
+      existingGroup = groups[groups.length - 1] // 获取最后一个分组
+    }
+
+    // 添加数据
+    if (existingGroup && existingGroup.category === categoryName) {
+      existingGroup.items.push(item)
+    } else {
+      groups.push({ category: categoryName, icon: categoryIcon, items: [item] })
+    }
+    return groups
+  }, [])
+
+  // 处理是否选中
+  groupedArray?.map((group) => {
+    // 自定义分类图标与post的category共用
+    // 判断自定义分类与Post中category同名的项，将icon的值传递给post
+    // let groupTitle = group?.category
+    // item.icon = filterLinks[categoryName]?.icon ? filterLinks[categoryName]?.icon : ''
+    // console.log('####### item')
+    // console.log(item)
+    let groupSelected = false
+    // for (const post of group?.items) {
+    //   if (router.asPath.split('?')[0] === '/' + post.slug) {
+    //     groupSelected = true
+    //     selectedSth = true
+    //   }
+    // }
+    group.selected = groupSelected
+    return null
+  })
+
+  // 如果都没有选中默认打开第一个
+  if (!selectedSth && groupedArray && groupedArray?.length > 0) {
+    groupedArray[0].selected = true
+  }
+
+  if (!groupedArray || groupedArray.length === 0) {
+    return <BlogPostListEmpty />
+  } else {
+    return <div id='posts-wrapper' className='stack-list w-full mx-auto justify-center'>
+            {/* 文章列表 */}
+            {groupedArray?.map((group, index) => <BlogPostItem key={index} group={group} filterLinks={filterLinks} onHeightChange={props.onHeightChange}/>)}
+        </div>
+  }
+
+  // 处理自定义导航菜单项
+  // let keyword = searchInputRef.current.value
+  // if (keyword) {
+  //   keyword = keyword.trim()
+  // } else {
+  //   setFilteredNavPages(allNavPages)
+  // }
+  // for (const filterGroup of filterAllNavPages) {
+  //   for (let i = filterGroup.items.length - 1; i >= 0; i--) {
+  //     const post = filterGroup.items[i]
+  //     const articleInfo = post.title + ''
+  //     const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1
+  //     if (!hit) {
+  //       // 删除
+  //       filterGroup.items.splice(i, 1)
+  //     }
+  //   }
+  //   if (filterGroup.items && filterGroup.items.length > 0) {
+  //     filterPosts.push(filterGroup)
+  //   }
+  // }
+  
+}
+
+export default BlogPostListAll
--- a/themes/nav/components/BlogPostListEmpty.js
+++ b/themes/nav/components/BlogPostListEmpty.js
@@ -0,0 +1,12 @@
+
+/**
+ * 空白博客 列表
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListEmpty = ({ currentSearch }) => {
+  return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
+        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+  </div>
+}
+export default BlogPostListEmpty
--- a/themes/nav/components/BlogPostListPage.js
+++ b/themes/nav/components/BlogPostListPage.js
@@ -0,0 +1,34 @@
+import BlogPostCard from './BlogPostCard'
+import BLOG from '@/blog.config'
+import NavPostListEmpty from './NavPostListEmpty'
+import PaginationSimple from './PaginationSimple'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
+  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+
+  if (!posts || posts.length === 0) {
+    return <NavPostListEmpty />
+  }
+
+  return (
+      <div className='w-full justify-center'>
+        <div id='posts-wrapper'>
+        {/* 文章列表 */}
+        {posts?.map(post => (
+          <BlogPostCard key={post.id} post={post} />
+        ))}
+        </div>
+        <PaginationSimple page={page} totalPage={totalPage} />
+      </div>
+  )
+}
+
+export default BlogPostListPage
--- a/themes/nav/components/BottomMenuBar.js
+++ b/themes/nav/components/BottomMenuBar.js
@@ -0,0 +1,24 @@
+import { useNavGlobal } from '@/themes/nav'
+import React from 'react'
+import JumpToTopButton from './JumpToTopButton'
+
+export default function BottomMenuBar({ post, className }) {
+  const { pageNavVisible, changePageNavVisible } = useNavGlobal()
+
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  return (
+        <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
+            <div className='flex justify-between h-full shadow-card'>
+                <div onClick={togglePageNavVisible} className='flex w-full items-center justify-center cursor-pointer'>
+                <i className="fa-solid fa-book"></i>
+                </div>
+                <div className='flex w-full items-center justify-center cursor-pointer'>
+                    <JumpToTopButton />
+                </div>
+            </div>
+        </div>
+  )
+}
--- a/themes/nav/components/Card.js
+++ b/themes/nav/components/Card.js
@@ -0,0 +1,9 @@
+const Card = ({ children, headerSlot, className }) => {
+  return <div className={className}>
+    <>{headerSlot}</>
+    <section className="shadow px-2 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+        {children}
+    </section>
+  </div>
+}
+export default Card
--- a/themes/nav/components/Catalog.js
+++ b/themes/nav/components/Catalog.js
@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useState } from 'react'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import { isBrowser } from '@/lib/utils'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ post }) => {
+  const toc = post?.toc
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+
+  // 监听滚动事件
+  useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [post])
+
+  const throttleMs = 200
+  const actionSectionScrollSpy = useCallback(throttle(() => {
+    const sections = document.getElementsByClassName('notion-h')
+    let prevBBox = null
+    let currentSectionId = null
+    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 tocIds = post?.toc?.map((t) => uuidToId(t.id)) || []
+    const index = tocIds.indexOf(currentSectionId) || 0
+    if (isBrowser && tocIds?.length > 0) {
+      for (const tocWrapper of document?.getElementsByClassName('toc-wrapper')) {
+        tocWrapper?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+      }
+    }
+  }, throttleMs))
+
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return null
+  }
+
+  return <>
+    <div id='toc-wrapper' className='toc-wrapper overflow-y-auto my-2 max-h-80 overscroll-none scroll-hidden'>
+      <nav className='h-full  text-black'>
+        {toc.map((tocItem) => {
+          const id = uuidToId(tocItem.id)
+          return (
+            <a
+              key={id}
+              href={`#${id}`}
+              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
+              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
+            >
+              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
+                className={`${activeSection === id && ' font-bold text-gray-500 underline'}`}
+              >
+                {tocItem.text}
+              </span>
+            </a>
+          )
+        })}
+      </nav>
+    </div>
+  </>
+}
+
+export default Catalog
--- a/themes/nav/components/CategoryGroup.js
+++ b/themes/nav/components/CategoryGroup.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import CategoryItem from './CategoryItem'
+
+const CategoryGroup = ({ currentCategory, categoryOptions }) => {
+  if (!categoryOptions) {
+    return <></>
+  }
+  return <div id='category-list' className='pt-4'>
+    <div className='mb-2'><i className='mr-2 fas fa-th' />分类</div>
+    <div className='flex flex-wrap'>
+      {categoryOptions?.map(category => {
+        const selected = currentCategory === category.name
+        return <CategoryItem key={category.name} selected={selected} category={category.name} categoryCount={category.count} />
+      })}
+    </div>
+  </div>
+}
+
+export default CategoryGroup
--- a/themes/nav/components/CategoryItem.js
+++ b/themes/nav/components/CategoryItem.js
@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+export default function CategoryItem ({ selected, category, categoryCount }) {
+  return (
+    <Link
+      href={`/category/${category}`}
+      passHref
+      className={(selected
+        ? 'hover:text-white dark:hover:text-white bg-green-600 text-white '
+        : 'dark:text-green-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-green-600') +
+      ' flex text-sm items-center duration-300 cursor-pointer py-1 font-light px-2 whitespace-nowrap'}>
+
+      <div><i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category} {categoryCount && `(${categoryCount})`}
+      </div>
+
+    </Link>
+  );
+}
--- a/themes/nav/components/Collapse.js
+++ b/themes/nav/components/Collapse.js
@@ -0,0 +1,94 @@
+import React, { useEffect, useImperativeHandle } from 'react'
+
+/**
+ * 折叠面板组件，支持水平折叠、垂直折叠
+ * @param {type:['horizontal','vertical'],isOpen} props
+ * @returns
+ */
+const Collapse = props => {
+  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
+     */
+  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 + 8
+    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)
+  }
+
+  useEffect(() => {
+    if (props.isOpen) {
+      expandSection(ref.current)
+    } else {
+      collapseSection(ref.current)
+    }
+    // 通知父组件高度变化
+    props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen })
+  }, [props.isOpen])
+
+  return (
+        <div ref={ref} style={type === 'vertical' ? { height: '0px', willChange: 'height' } : { width: '0px', willChange: 'width' }} className={`${props.className || ''} overflow-hidden duration-200 `}>
+            {props.children}
+        </div>
+  )
+}
+Collapse.defaultProps = { isOpen: false }
+
+export default Collapse
--- a/themes/nav/components/FloatTocButton.js
+++ b/themes/nav/components/FloatTocButton.js
@@ -0,0 +1,25 @@
+import { useNavGlobal } from '@/themes/nav'
+
+/**
+ * 移动端悬浮目录按钮
+ */
+export default function FloatTocButton () {
+  const { tocVisible, changeTocVisible } = useNavGlobal()
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  return (
+    <div
+      onClick={toggleToc}
+      className={ 'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }
+    >
+      <a
+        id="toc-button"
+        className={'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'}
+      />
+    </div>
+  )
+}
--- a/themes/nav/components/Footer.js
+++ b/themes/nav/components/Footer.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+
+const Footer = ({ siteInfo }) => {
+  const d = new Date()
+  const currentYear = d.getFullYear()
+  const copyrightDate = (function () {
+    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
+      return BLOG.SINCE + '-' + currentYear
+    }
+    return currentYear
+  })()
+
+  return (
+        <footer
+            className='z-20 pt-2 pb-5 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-xs relative'
+        >
+            {/* <hr className='pb-2' /> */}
+
+            <div className='flex justify-center'>
+                <div><i className='text-xs 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 /></div>
+                © {`${copyrightDate}`}
+            </div>
+
+            <div className='text-xs font-serif py-1'>Powered By <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext</a></div>
+
+            {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br /></>}
+
+            <span className='hidden busuanzi_container_site_pv'>
+                <i className='text-xs fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
+            <span className='pl-2 hidden busuanzi_container_site_uv'>
+                <i className='text-xs fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
+            {/*<h1 className='pt-1'>{siteInfo?.title}</h1>*/}
+
+        </footer>
+  )
+}
+
+export default Footer
--- a/themes/nav/components/InfoCard.js
+++ b/themes/nav/components/InfoCard.js
@@ -0,0 +1,21 @@
+import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
+import Router from 'next/router'
+import React from 'react'
+import SocialButton from './SocialButton'
+
+const InfoCard = (props) => {
+  const { siteInfo } = props
+  return <div id='info-card' className='py-4'>
+    <div className='items-center justify-center'>
+        <div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
+            <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+         </div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
+        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
+        <SocialButton/>
+    </div>
+  </div>
+}
+
+export default InfoCard
--- a/themes/nav/components/JumpToTopButton.js
+++ b/themes/nav/components/JumpToTopButton.js
@@ -0,0 +1,24 @@
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = false, percent, className }) => {
+  return (
+          <div
+              id="jump-to-top"
+              data-aos="fade-up"
+              data-aos-duration="300"
+              data-aos-once="false"
+              data-aos-anchor-placement="top-center"
+              className='fixed xl:right-4 right-2 mr-4 bottom-16 z-20'>
+              <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
+          </div>
+  )
+}
+
+export default JumpToTopButton
--- a/themes/nav/components/LeftMenuBar.js
+++ b/themes/nav/components/LeftMenuBar.js
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import React from 'react'
+
+export default function LeftMenuBar () {
+  return (
+    <div className='w-20  border-r hidden lg:block pt-12'>
+      <section>
+        <Link href='/' legacyBehavior>
+          <div className='text-center cursor-pointer  hover:text-black'>
+            <i className='fas fa-home text-gray-500'/>
+          </div>
+        </Link>
+      </section>
+    </div>
+  );
+}
--- a/themes/nav/components/LoadingCover.js
+++ b/themes/nav/components/LoadingCover.js
@@ -0,0 +1,7 @@
+export default function LoadingCover() {
+  return <div id='cover-loading' className={'z-50 opacity-50pointer-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>
+}
--- a/themes/nav/components/LogoBar.js
+++ b/themes/nav/components/LogoBar.js
@@ -0,0 +1,32 @@
+import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
+import { useNavGlobal } from '@/themes/nav'
+import Link from 'next/link'
+import CONFIG from '../config'
+
+/**
+ * Logo区域
+ * @param {*} props
+ * @returns
+ */
+export default function LogoBar(props) {
+  const { siteInfo } = props
+  const { pageNavVisible, changePageNavVisible } = useNavGlobal()
+
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+  return (
+        <div id='top-wrapper' className='w-full flex items-center'>
+            {/* <div onClick={togglePageNavVisible} className='cursor-pointer md:hidden text-xl pr-3 hover:scale-110 duration-150'>
+                <i className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
+            </div> */}
+            <div className='md:w-48'>
+              <a href='/' className='grid justify-items-center text-md md:text-xl dark:text-gray-200'>
+                  <LazyImage src={siteInfo?.icon} height='44px' alt={BLOG.AUTHOR} className='md:block' placeholderSrc=''/>
+                  {CONFIG.SHOW_TITLE_TEXT && siteInfo?.title}
+              </a>
+            </div>
+        </div>
+  )
+}
--- a/themes/nav/components/MenuBarMobile.js
+++ b/themes/nav/components/MenuBarMobile.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+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.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
+    // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG.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, index) => <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link}/>)}
+
+    </nav>
+  )
+}
--- a/themes/nav/components/MenuItem.js
+++ b/themes/nav/components/MenuItem.js
@@ -0,0 +1,84 @@
+import Link from 'next/link'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+import Collapse from './Collapse'
+
+export const MenuItem = ({ 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)
+
+  link.selected = true
+
+//   const { group } = props
+  const [isOpen, changeIsOpen] = useState(link?.selected)
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+  console.log('link::')
+  console.log(link)
+
+    return <>
+            <div
+                onClick={toggleOpenSubMenu}
+                className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 cursor-pointer pt-2 font-light select-none flex justify-between cursor-pointer' key={link?.name}>
+                <span className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>{link?.icon && <i className={`text-base ${link?.icon}`} />}{link?.name}</span>
+                <div className='inline-flex items-center select-none pointer-events-none '><i className={`text-xs dark:text-neutral-500 text-gray-300 hover:text-black dark:hover:text-white-400 px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
+            </div>
+            <Collapse isOpen={isOpen} key='collapse'>
+            {link?.subMenus?.map((sLink, index) => (
+                <div key={index} className='nav-submenu'>
+                    {/* <BlogPostCard className='text-sm ml-3' post={post} /></div> */}
+                    <a href={`/#${sLink.title}`}>
+                        <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-2 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
+                    </a>
+                </div>
+                ))
+                }git fetch origin
+            </Collapse>
+        </>
+
+
+
+//   return <li className='cursor-pointer list-none items-center flex mx-2' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+//         {hasSubMenu &&
+//             <div className={'px-2 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+//                 (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
+//                 <div>
+//                     {link?.icon && <i className={link?.icon} />} {link?.name}
+//                     {hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
+//                 </div>
+//             </div>
+//         }
+
+//         {!hasSubMenu &&
+//             <div className={'px-2 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+//                 (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
+//                 <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
+//                     {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 block drop-shadow-lg `}>
+//             {link?.subMenus?.map((sLink, index) => {
+//               return <li key={index} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
+//                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
+//                         <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+//                     </Link>
+//                 </li>
+//             })}
+//         </ul>}
+
+//     </li>
+}
--- a/themes/nav/components/MenuItemCollapse.js
+++ b/themes/nav/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={ 'text-black' + (selected ? 'text-white hover:text-white' : 'hover:text-gray-600') + ' px-7 w-full text-left duration-200 dark:border-black'} onClick={toggleShow} >
+
+            {!hasSubMenu && <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='py-2 w-full my-auto items-center justify-between flex  '>
+                <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
+            </Link>}
+
+            {hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null}
+                className="py-2 flex justify-between cursor-pointer  dark:text-gray-400 dark:hover:text-white font-bold  no-underline tracking-widest">
+                <div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
+                <div className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
+            </div>}
+        </div>
+
+        {/* 折叠子菜单 */}
+        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+            {link?.subMenus?.map((sLink, index) => {
+              return <div key={index} className='
+              py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white font-bold 
+              dark:bg-black text-left justify-start text-gray-600 bg-gray-50 bg-opacity-20 dark:hover:bg-gray-600 tracking-widest transition-all duration-200'>
+                    {/* <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}> */}
+                    <a href={`/#${sLink.title}`} target={'_self'}>
+                        <div><div className={`${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'} text-center w-3 mr-2 text-xs`} />{sLink.title}</div>
+                    </a>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}
--- a/themes/nav/components/MenuItemDrop.js
+++ b/themes/nav/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-2 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
+                <div>
+                    {link?.icon && <i className={link?.icon} />} {link?.name}
+                    {hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
+                </div>
+            </div>
+        }
+
+        {!hasSubMenu &&
+            <div className={'px-2 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
+                <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
+                    {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, index) => {
+              return <li key={index} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
+                    <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
+                        <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </li>
+}
--- a/themes/nav/components/MenuItemMobileNormal.js
+++ b/themes/nav/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>
+}
--- a/themes/nav/components/MenuItemPCNormal.js
+++ b/themes/nav/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>
+}
--- a/themes/nav/components/NavPostItem.js
+++ b/themes/nav/components/NavPostItem.js
@@ -0,0 +1,45 @@
+import BlogPostCard from './BlogPostCard'
+import React, { useState } from 'react'
+import Collapse from '@/components/Collapse'
+
+/**
+ * 导航列表
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NavPostItem = (props) => {
+  const { group } = props
+  const [isOpen, changeIsOpen] = useState(group?.selected)
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+  console.log('group::')
+  console.log(group)
+
+  if (group?.category) {
+    return <>
+            <div
+                onClick={toggleOpenSubMenu}
+                className='select-none flex justify-between text-sm font-sans cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
+                <span>{group?.category}</span>
+                <div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
+            </div>
+            <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+                {group?.items?.map(post => (<div key={post.id} className='ml-3 border-l'>
+                    <BlogPostCard className='text-sm ml-3' post={post} /></div>))
+                }
+            </Collapse>
+        </>
+  } else {
+    return <>
+            {group?.items?.map(post => (<div key={post.id} >
+                <BlogPostCard className='text-sm py-2' post={post} /></div>))
+            }
+        </>
+  }
+}
+
+export default NavPostItem
--- a/themes/nav/components/NavPostList.js
+++ b/themes/nav/components/NavPostList.js
@@ -0,0 +1,102 @@
+import NavPostListEmpty from './NavPostListEmpty'
+import { useRouter } from 'next/router'
+import NavPostItem from './NavPostItem'
+import CONFIG from '../config'
+import Link from 'next/link'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NavPostList = (props) => {
+  const { customMenu, categoryOptions } = props
+  // let groupedArray = categoryOptions
+  // const { filteredNavPages, categoryOptions, categories } = props
+  // const router = useRouter()
+  // let selectedSth = false
+
+  // let groupedArray = categoryOptions?.map(item) => {
+  //   // let groups = [];
+  //   groupedArray.push({ category: item.name, id: item.id, count: item.count, selected: false,items: [] })
+  //   return groups
+  // })
+
+  // const groupedArray = categoryOptions?.reduce((groups, item) => {
+  //   const categoryName = item?.name ? item?.name : '' // 将category转换为字符串
+  //   // let existingGroup = null
+  //   console.log('categoryOptions => item::')
+  //   console.log(item)
+  //   // 添加数据
+  //   groups.push({ category: item.name, id: item.id, count: item.count, selected: false, items: [] })
+  //   return groups
+  // }, [])
+
+  // 处理是否选中
+  // groupedArray?.map((group) => {
+  //   let groupSelected = false
+  //   for (const post of group?.items) {
+  //     if (router.asPath.split('?')[0] === '/' + post.slug) {
+  //       groupSelected = true
+  //       selectedSth = true
+  //     }
+  //   }
+  //   group.selected = groupSelected
+  //   return null
+  // })
+
+  // 如果都没有选中默认打开第一个
+  // if (!selectedSth && groupedArray && groupedArray?.length > 0) {
+  //   groupedArray[0].selected = true
+  // }
+
+  
+  
+  // console.log('groupedArray::')
+  // console.log(groupedArray)
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  // if (BLOG.CUSTOM_MENU) {
+  //   links = customMenu
+  // }
+  let links = customMenu
+  return 
+    {links && links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
+  
+
+  console.log('categoryOptions::')
+  console.log(categoryOptions)
+  if (!categoryOptions) {
+    return <NavPostListEmpty />
+  } else {
+    return 
+    
+    <div id='category-list' className='dark:border-gray-700 flex flex-wrap  mx-4'>
+    {categoryOptions.map(category => {
+      // const selected = currentCategory === category.name
+      let selected = false
+      return (
+        <Link
+          key={category.name}
+          href={`/category/${category.name}`}
+          passHref
+          className={(selected
+            ? 'hover:text-black dark:hover:text-gray bg-indigo-600 text-black '
+            : 'dark:text-gray-400 text-gray-500 hover:text-black dark:hover:text-white hover:bg-indigo-600') +
+            '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
+
+          <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
+
+        </Link>
+        )
+      })}
+    </div>
+  }
+
+
+
+}
+
+export default NavPostList
--- a/themes/nav/components/NavPostListEmpty.js
+++ b/themes/nav/components/NavPostListEmpty.js
@@ -0,0 +1,12 @@
+
+/**
+ * 空白博客 列表
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NavPostListEmpty = ({ currentSearch }) => {
+  return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
+        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+  </div>
+}
+export default NavPostListEmpty
--- a/themes/nav/components/NotionIcon.js
+++ b/themes/nav/components/NotionIcon.js
@@ -0,0 +1,22 @@
+import LazyImage from '@/components/LazyImage'
+
+/**
+ * notion的图标icon
+ * 可能是emoji 可能是 svg 也可能是 图片
+ * @returns
+ */
+const NotionIcon = ({ icon }) => {
+  let imgSize = 8
+  let fontSize = ''
+  if (!icon) {
+    return <></>
+  }
+  fontSize = (Math.round(imgSize / 2) - 1) > 0 ? (Math.round(imgSize / 2) - 1) : ''
+  if (icon.startsWith('http') || icon.startsWith('data:')) {
+    return <LazyImage src={icon} className={`w-10 h-10 inline`}/>
+  }
+
+  return <span className={`mr-1 text-4xl`}>{icon}</span>
+}
+
+export default NotionIcon
--- a/themes/nav/components/PageNavDrawer.js
+++ b/themes/nav/components/PageNavDrawer.js
@@ -0,0 +1,36 @@
+import { useNavGlobal } from '@/themes/nav'
+import NavPostList from './NavPostList'
+
+/**
+ * 悬浮抽屉 页面内导航
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PageNavDrawer = (props) => {
+  const { pageNavVisible, changePageNavVisible } = useNavGlobal()
+  const { filteredNavPages } = props
+
+  const switchVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  return <>
+        <div id='gitbook-left-float' className='fixed top-0 left-0 z-40 md:hidden'>
+            {/* 侧边菜单 */}
+            <div
+                className={(pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft') +
+                    ' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-gray-600'}>
+                <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
+                    {/* 所有文章列表 */}
+                    <NavPostList filteredNavPages={filteredNavPages} />
+                </div>
+            </div>
+        </div>
+        {/* 背景蒙版 */}
+        <div id='left-drawer-background' className={(pageNavVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
+            onClick={switchVisible} />
+    </>
+}
+export default PageNavDrawer
--- a/themes/nav/components/PaginationSimple.js
+++ b/themes/nav/components/PaginationSimple.js
@@ -0,0 +1,54 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 简易翻页插件
+ * @param page 当前页码
+ * @param totalPage 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PaginationSimple = ({ page, totalPage }) => {
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const currentPage = +page
+  const showNext = currentPage < totalPage
+  const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+
+  return (
+    <div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
+      <Link
+        href={{
+          pathname:
+            currentPage === 2
+              ? `${pagePrefix}/`
+              : `${pagePrefix}/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        rel="prev"
+        className={`${
+          currentPage === 1 ? 'invisible' : 'block'
+        } text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}>
+        ←{locale.PAGINATION.PREV}
+
+      </Link>
+      <Link
+        href={{
+          pathname: `${pagePrefix}/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        rel="next"
+        className={`${
+          +showNext ? 'block' : 'invisible'
+        } text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}>
+
+        {locale.PAGINATION.NEXT}→
+      </Link>
+    </div>
+  )
+}
+
+export default PaginationSimple
--- a/themes/nav/components/Progress.js
+++ b/themes/nav/components/Progress.js
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import { isBrowser } from '@/lib/utils'
+
+/**
+ * 顶部页面阅读进度条
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Progress = ({ targetRef, showPercent = true }) => {
+  const currentRef = targetRef?.current || targetRef
+  const [percent, changePercent] = useState(0)
+  const scrollListener = () => {
+    const target = currentRef || (isBrowser && document.getElementById('posts-wrapper'))
+    if (target) {
+      const clientHeight = target.clientHeight
+      const scrollY = window.pageYOffset
+      const fullHeight = clientHeight - window.outerHeight
+      let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+      if (per > 100) per = 100
+      if (per < 0) per = 0
+      changePercent(per)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [])
+
+  return (
+    <div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black">
+      <div
+        className="h-4 bg-gray-600 duration-200"
+        style={{ width: `${percent}%` }}
+      >
+        {showPercent && (
+          <div className="text-right text-white text-xs">{percent}%</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Progress
--- a/themes/nav/components/RevolverMaps.js
+++ b/themes/nav/components/RevolverMaps.js
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+
+export default function RevolverMaps () {
+  const [load, changeLoad] = useState(false)
+  useEffect(() => {
+    if (!load) {
+      initRevolverMaps()
+      changeLoad(true)
+    }
+  }, [])
+  return <div id="revolvermaps" className='p-4'/>
+}
+
+function initRevolverMaps () {
+  if (screen.width >= 768) {
+    Promise.all([
+      loadExternalResource('https://rf.revolvermaps.com/0/0/8.js?i=5jnp1havmh9&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=33')
+    ]).then(() => {
+      console.log('地图加载完成')
+    })
+  }
+}
+
+// 封装异步加载资源的方法
+function loadExternalResource (url) {
+  return new Promise((resolve, reject) => {
+    const container = document.getElementById('revolvermaps')
+    const tag = document.createElement('script')
+    tag.src = url
+    if (tag) {
+      tag.onload = () => resolve(url)
+      tag.onerror = () => reject(url)
+      container.appendChild(tag)
+    }
+  })
+}
--- a/themes/nav/components/SearchInput.js
+++ b/themes/nav/components/SearchInput.js
@@ -0,0 +1,123 @@
+import { useImperativeHandle, useRef, useState } from 'react'
+import { deepClone } from '@/lib/utils'
+import { useNavGlobal } from '@/themes/nav'
+let lock = false
+
+const SearchInput = ({ currentSearch, cRef, className }) => {
+  const searchInputRef = useRef()
+  const { setFilteredNavPages, allNavPages } = useNavGlobal()
+  const [filteredNavPages] = useState(allNavPages)
+
+  useImperativeHandle(cRef, () => {
+    return {
+      focus: () => {
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+
+  const handleSearch = () => {
+    let keyword = searchInputRef.current.value
+    if (keyword) {
+      keyword = keyword.trim()
+    } else {
+      setFilteredNavPages(allNavPages)
+    }
+    const filterAllNavPages = deepClone(allNavPages)
+    // for (const filterGroup of filterAllNavPages) {
+    //   for (let i = filterGroup.items.length - 1; i >= 0; i--) {
+    //     const post = filterGroup.items[i]
+    //     const articleInfo = post.title + ''
+    //     const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1
+    //     if (!hit) {
+    //       // 删除
+    //       filterGroup.items.splice(i, 1)
+    //     }
+    //   }
+    //   if (filterGroup.items && filterGroup.items.length > 0) {
+    //     filterPosts.push(filterGroup)
+    //   }
+    // }
+    for (let i = filterAllNavPages.length - 1; i >= 0; i--) {
+      const post = filterAllNavPages[i]
+      const articleInfo = post.title + ''
+      const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1
+      if (!hit) {
+        // 删除
+        filterAllNavPages.splice(i, 1)
+      }
+    }
+
+    // 更新完
+    setFilteredNavPages(filterAllNavPages)
+  }
+
+  /**
+   * 回车键
+   * @param {*} e
+   */
+  const handleKeyUp = (e) => {
+    if (e.keyCode === 13) { // 回车
+      handleSearch(searchInputRef.current.value)
+    } else if (e.keyCode === 27) { // ESC
+      cleanSearch()
+    }
+  }
+
+  /**
+   * 清理搜索
+   */
+  const cleanSearch = () => {
+    searchInputRef.current.value = ''
+    handleSearch()
+    setShowClean(false)
+  }
+
+  const [showClean, setShowClean] = useState(false)
+  const updateSearchKey = (val) => {
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
+    }
+  }
+  function lockSearchInput () {
+    lock = true
+  }
+
+  function unLockSearchInput () {
+    lock = false
+  }
+
+  return <div className={'flex w-36 hover:w-36 md:hover:w-56 md:w-56 transition md:mr-5'}>
+    <input
+      ref={searchInputRef}
+      type='text'
+      className={`${className} outline-none w-full text-sm pl-4 transition-all duration-200 ease-in focus:shadow-lg font-light leading-10 text-black bg-opacity-50 md:bg-opacity-100 bg-neutral-100 md:hover:bg-neutral-200 md:focus:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-white`}
+      onKeyUp={handleKeyUp}
+      onCompositionStart={lockSearchInput}
+      onCompositionUpdate={lockSearchInput}
+      onCompositionEnd={unLockSearchInput}
+      onChange={e => updateSearchKey(e.target.value)}
+      defaultValue={currentSearch}
+    />
+
+    <div className='flex -ml-6 cursor-pointer float-right items-center justify-center py-2'
+      onClick={handleSearch}>
+        <i className={'hover:text-black transform duration-200 text-neutral-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'} />
+    </div>
+
+    {(showClean &&
+      <div className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'>
+        <i className='fas fa-times hover:text-black transform duration-200 text-neutral-400 cursor-pointer dark:hover:text-gray-300' onClick={cleanSearch} />
+      </div>
+      )}
+  </div>
+}
+
+export default SearchInput
--- a/themes/nav/components/SocialButton.js
+++ b/themes/nav/components/SocialButton.js
@@ -0,0 +1,37 @@
+import BLOG from '@/blog.config'
+import React from 'react'
+
+/**
+ * 社交联系方式按钮组
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SocialButton = () => {
+  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
+      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+        <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+        <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+        <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
+        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+        <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+        <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+        <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+        <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+    </div>
+}
+export default SocialButton
--- a/themes/nav/components/TagGroups.js
+++ b/themes/nav/components/TagGroups.js
@@ -0,0 +1,27 @@
+import TagItemMini from './TagItemMini'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TagGroups = ({ tagOptions, currentTag }) => {
+  if (!tagOptions) return <></>
+  return (
+    <div id='tags-group' className='dark:border-gray-600 py-4'>
+      <div className='mb-2'><i className='mr-2 fas fa-tag' />标签</div>
+      <div className='space-y-2'>
+        {
+          tagOptions?.map(tag => {
+            const selected = tag.name === currentTag
+            return <TagItemMini key={tag.name} tag={tag} selected={selected} />
+          })
+        }
+      </div>
+    </div>
+  )
+}
+
+export default TagGroups
--- a/themes/nav/components/TagItemMini.js
+++ b/themes/nav/components/TagItemMini.js
@@ -0,0 +1,21 @@
+import Link from 'next/link'
+
+const TagItemMini = ({ tag, selected = false }) => {
+  return (
+    <Link
+      key={tag}
+      href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
+      passHref
+      className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
+        mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white
+         ${selected
+        ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
+        : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}` }>
+
+      <div className='font-light dark:text-gray-400'>{selected && <i className='mr-1 fas fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+
+    </Link>
+  )
+}
+
+export default TagItemMini
--- a/themes/nav/components/TocDrawer.js
+++ b/themes/nav/components/TocDrawer.js
@@ -0,0 +1,34 @@
+import { useNavGlobal } from '@/themes/nav'
+import Catalog from './Catalog'
+
+/**
+ * 悬浮抽屉目录
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TocDrawer = ({ post, cRef }) => {
+  const { tocVisible, changeTocVisible } = useNavGlobal()
+  const switchVisible = () => {
+    changeTocVisible(!tocVisible)
+  }
+  return <>
+    <div id='gitbook-toc-float' className='fixed top-0 right-0 z-40 md:hidden'>
+      {/* 侧边菜单 */}
+      <div
+        className={(tocVisible ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
+        ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'}>
+          {post && <>
+           <div className='dark:text-gray-400 text-gray-600 h-96 p-3'>
+             <Catalog post={post}/>
+           </div>
+          </>}
+      </div>
+    </div>
+    {/* 背景蒙版 */}
+    <div id='right-drawer-background' className={(tocVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
+         onClick={switchVisible} />
+  </>
+}
+export default TocDrawer
--- a/themes/nav/components/TopNavBar.js
+++ b/themes/nav/components/TopNavBar.js
@@ -0,0 +1,115 @@
+import LogoBar from './LogoBar'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import Collapse from '@/components/Collapse'
+import { MenuBarMobile } from './MenuBarMobile'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
+import { MenuItemDrop } from './MenuItemDrop'
+import SearchInput from './SearchInput'
+import DarkModeButton from '@/components/DarkModeButton'
+
+/**
+ * 顶部导航栏 + 菜单
+ * @param {} param0
+ * @returns
+ */
+export default function TopNavBar(props) {
+  const { className, customNav, customMenu } = props
+  const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)
+
+  const { locale } = useGlobal()
+
+
+  let windowTop = 0
+
+  // 监听滚动
+  useEffect(() => {
+    scrollTrigger()
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
+  const throttleMs = 200
+
+  const scrollTrigger = useCallback(throttle(() => {
+    const scrollS = window.scrollY
+    const nav = document.querySelector('#nav-bg')
+    // const header = document.querySelector('#top-nav')
+    const header = document.querySelector('#container-inner')
+    const showNav = scrollS <= windowTop || scrollS < 5 || (scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
+    if (!showNav) {
+      nav && nav.classList.replace('-top-20', 'top-0')
+      windowTop = scrollS
+    } else {
+      nav && nav.classList.replace('top-0', '-top-20')
+      windowTop = scrollS
+    }
+  }, throttleMs)
+  )
+
+
+
+  const defaultLinks = [
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
+  ]
+
+  let links = defaultLinks.concat(customNav)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  return (
+        <div id='top-nav' className={'fixed top-0 w-full z-40 bg-white dark:bg-neutral-900 shadow bg-opacity-70 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg  md:shadow-none pb-2 md:pb-0 ' + className}>
+
+            {/* 移动端折叠菜单 */}
+            <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden mt-16'>
+                <div className='pt-1 py-3 lg:hidden '>
+                    <MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
+                </div>
+            </Collapse>
+
+            {/* 导航栏菜单 */}
+            <div className='h-18 px-5'>
+
+              {/* 左侧图标Logo */}
+              {/* <div className='absolute top-0 left-5 md:left-4 z-40 pt-3 md:pt-4 md:pt-0'>
+                <LogoBar {...props} />
+              </div> */}
+              <div className='absolute top-0 right-5'>
+                {/* 搜索框、折叠按钮、仅移动端显示 */}
+                <div className='pt-1 flex md:hidden justify-end items-center space-x-3 font-serif dark:text-gray-200 '>
+                <div className='relative md:hidden top-0 right-0'>
+                  <SearchInput className='my-3 rounded-full' />
+                </div>
+                    <DarkModeButton className='flex text-md items-center h-full' />
+                    <div onClick={toggleMenuOpen} className='w-4 text-center cursor-pointer text-lg hover:scale-110 duration-150'>
+                        {isOpen ? <i className='fas fa-times' /> : <i className="fa-solid fa-ellipsis-vertical"/>}
+                    </div>
+                </div>
+
+                {/* 桌面端顶部菜单 */}
+                <div className='hidden md:flex'>
+                    {/* {links && links?.map((link, index) => <MenuItemDrop key={index} link={link} />)} */}
+                    <SearchInput className='my-3 rounded-full' />
+                    <DarkModeButton className='my-5 mr-6 text-sm flex items-center h-full pt-px' />
+                </div>
+              </div>
+            </div>
+        </div>
+  )
+}
--- a/themes/nav/config.js
+++ b/themes/nav/config.js
@@ -0,0 +1,20 @@
+const CONFIG = {
+
+  INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中
+
+  AUTO_SORT: process.env.NEXT_PUBLIC_GITBOOK_AUTO_SORT || true, // 是否自动按分类名 归组排序文章；自动归组可能会打乱您Notion中的文章顺序
+
+  SHOW_TITLE_TEXT: false, // 标题栏显示文本
+  USE_CUSTEM_MENU: true, // 使用自定义分组菜单（可支持子菜单，支持自定义分类图标）
+
+  // 菜单
+  MENU_CATEGORY: true, // 显示分类
+  MENU_TAG: true, // 显示标签
+  MENU_ARCHIVE: true, // 显示归档
+  MENU_SEARCH: true, // 显示搜索
+
+  // Widget
+  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
+  WIDGET_TO_TOP: true // 跳回顶部
+}
+export default CONFIG
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -0,0 +1,512 @@
+'use client'
+
+import CONFIG from './config'
+import { useRouter } from 'next/router'
+import { useEffect, useState, createContext, useContext } from 'react'
+import { isBrowser } from '@/lib/utils'
+import Footer from './components/Footer'
+import InfoCard from './components/InfoCard'
+import RevolverMaps from './components/RevolverMaps'
+import TopNavBar from './components/TopNavBar'
+import SearchInput from './components/SearchInput'
+import { useGlobal } from '@/lib/global'
+import Live2D from '@/components/Live2D'
+import BLOG from '@/blog.config'
+import NavPostList from './components/NavPostList'
+import ArticleInfo from './components/ArticleInfo'
+import Catalog from './components/Catalog'
+import Announcement from './components/Announcement'
+import PageNavDrawer from './components/PageNavDrawer'
+import FloatTocButton from './components/FloatTocButton'
+import { AdSlot } from '@/components/GoogleAdsense'
+import JumpToTopButton from './components/JumpToTopButton'
+import ShareBar from '@/components/ShareBar'
+import CategoryItem from './components/CategoryItem'
+import TagItemMini from './components/TagItemMini'
+import ArticleAround from './components/ArticleAround'
+import Comment from '@/components/Comment'
+import TocDrawer from './components/TocDrawer'
+import NotionPage from '@/components/NotionPage'
+import { ArticleLock } from './components/ArticleLock'
+import { Transition } from '@headlessui/react'
+import { Style } from './style'
+import CommonHead from '@/components/CommonHead'
+import BlogArchiveItem from './components/BlogArchiveItem'
+import BlogPostListAll from './components/BlogPostListAll'
+import BlogPostListPage from './components/BlogPostListPage'
+import BlogPostCard from './components/BlogPostCard'
+import LogoBar from './components/LogoBar'
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
+
+import { MenuItem } from './components/MenuItem'
+
+// 主题全局变量
+const ThemeGlobalNav = createContext()
+export const useNavGlobal = () => useContext(ThemeGlobalNav)
+
+/**
+ * 基础布局
+ * 采用左右两侧布局，移动端使用顶部导航栏
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = (props) => {
+  const { customMenu, children, post, allNavPages, categoryOptions, slotLeft, slotRight, slotTop, meta } = props
+  const { onLoading } = useGlobal()
+  const router = useRouter()
+  const [tocVisible, changeTocVisible] = useState(false)
+  const [pageNavVisible, changePageNavVisible] = useState(false)
+  const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
+
+  const showTocButton = post?.toc?.length > 1
+
+  useEffect(() => {
+    setFilteredNavPages(allNavPages)
+  }, [post])
+
+  let links = customMenu
+  // let categoryOptions = filteredNavPages
+
+  return (
+        <ThemeGlobalNav.Provider value={{ tocVisible, changeTocVisible, filteredNavPages, setFilteredNavPages, allNavPages, pageNavVisible, changePageNavVisible, categoryOptions }}>
+            <CommonHead meta={meta}/>
+            <script>
+              // Stack - 自动将数据库卡片视图下的卡片链接替换为网址
+              // 获取所有的notion-collection-card元素
+              document.addEventListener("DOMContentLoaded", function() {
+                console.log("DOM content loaded!");
+                updateHref();
+              });
+                
+              // 创建一个MutationObserver对象，用于监听body元素的变化
+              let observer = new MutationObserver(function(mutations) {
+                // 遍历每个变化记录
+                for (let mutation of mutations) {
+                  // 如果变化类型是子节点变化
+                  if (mutation.type === "childList") {
+                    // 调用一个函数，用于更新notion-collection-card元素的href属性
+                    updateHref();
+                  }
+                }
+              });
+
+              // 定义一个函数，用于更新notion-collection-card元素的href属性
+              function updateHref() {
+                let cards = document.querySelectorAll(".notion-collection-card");;
+                // 遍历每个元素
+                for (let card of cards) {
+                  // 获取该元素下的最后一个notion-property元素
+                  let lastProperty = card.querySelector(".notion-collection-card-property:last-child");
+                  // 如果该元素存在，并且包含一个网址
+                  if (lastProperty && lastProperty.textContent.startsWith("http")) {
+                    // 获取该网址
+                    let url = lastProperty.textContent;
+                    // 将该元素的href属性设置为该网址
+                    if(card.href == url) continue;
+                    card.href = url;
+                    // 将该元素的target属性设置为"_blank"，使链接在新窗口或标签页中打开
+                    card.target = "_blank";
+                  }
+                }
+              }
+
+              //   console.log("load");
+              // 在页面载入时，调用一次updateHref函数，并将isLoaded设为true
+              window.addEventListener("load", function() {
+                console.log("window load");
+                updateHref();
+              });
+
+              // 在页面大小改变时，调用一次updateHref函数
+              // window.addEventListener("resize", updateHref);
+
+              // 开始监听body元素的变化，配置选项为子节点变化和子孙节点变化
+              observer.observe(document.body, {childList: true, subtree: true});
+
+              // 在每个变化记录之后，检查isLoaded是否为true，如果是，则执行updateHref函数
+              // observer.disconnect(); // 停止监听body元素的变化
+              // observer.observe(document.body, {childList: true, subtree: true}); // 重新开始监听body元素的变化
+            </script>
+            <Style/>
+
+            <div id='theme-onenav' className=' dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300'>
+                {/* 顶部导航栏 */}
+                <TopNavBar {...props} />
+                <div id='nav-bg' className=' fixed -top-20 w-full h-14 z-20 shadow glassmorphism duration-300 transition-all '
+                data-aos="fade-up"
+                data-aos-duration="300"
+                data-aos-once="false"
+                data-aos-anchor-placement="top-center"
+                >a</div>
+
+                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-screen mx-auto'}>
+
+                        {/* 左侧图标Logo */}
+                        <div className='absolute top-0 left-5 md:left-4 z-40 pt-3 md:pt-4 md:pt-0'>
+                          <LogoBar {...props} />
+                        </div>
+                    {/* 左侧推拉抽屉 */}
+                    <div className={'font-sans hidden md:block dark:border-transparent relative z-10 pb-24 ml-4 h-screen'}>
+
+                        <div className='main-menu w-48 mt-20 pl-9 pr-7 pb-5 sticky pt-1 top-0 overflow-y-scroll h-fit max-h-full scroll-hidden bg-white dark:bg-neutral-800 rounded-xl '>
+                            {slotLeft}
+                            <div className='grid pt-2'>
+                                {/* 所有文章列表 */}
+                                {CONFIG.USE_CUSTEM_MENU && links && links?.map((link, index) => <MenuItem key={index} link={link} />)}
+                                {/* {!CONFIG.USE_CUSTEM_MENU && <NavPostList {...props}/>} */}
+                                {/* {links && links?.map((link, index) => {
+
+                                })} */}
+                                
+                                {/* href={`/category/${category.name}`} */}
+                                {!CONFIG.USE_CUSTEM_MENU && categoryOptions && categoryOptions?.map(category => {
+                                  // let selected = currentCategory === category.name
+                                  let selected = false;
+                                  return (
+                                    <Link
+                                      key={category.name}
+                                      href={`#${category.name}`}
+                                      passHref
+                                      className={(selected
+                                        ? 'hover:text-black dark:hover:text-neutral text-black '
+                                        : 'dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white ') +
+                                        '  text-sm text-gray w-full items-center duration-300 px-2  cursor-pointer py-1 font-light pt-2 pb-2'}>
+
+                                      <div className='font-bold '> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-hashtag'}`} />{category.name}({category.count})</div>
+
+                                    </Link>
+                                  )
+                                })}
+                            </div>
+
+                        </div>
+
+                        <div className='w-56 fixed left-0 bottom-0 z-20'>
+                            <Footer {...props} />
+                        </div>
+                    </div>
+
+                    <div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-16 md:pt-5 pb-8 min-h-screen overflow-y-auto'>
+
+                        <div id='container-inner' className='w-full px-6 max-w-8xl justify-center mx-auto'>
+                            {slotTop}
+                            <WWAds className='w-full' orientation='horizontal'/>
+
+                            <Transition
+                                show={!onLoading}
+                                appear={true}
+                                enter="transition ease-in-out duration-700 transform order-first"
+                                enterFrom="opacity-0 translate-y-16"
+                                enterTo="opacity-100"
+                                leave="transition ease-in-out duration-300 transform"
+                                leaveFrom="opacity-100 translate-y-0"
+                                leaveTo="opacity-0 -translate-y-16"
+                                unmount={false}
+                            >
+                                {children}
+                            </Transition>
+
+                            {/* Google广告 */}
+                            <AdSlot type='in-article' />
+                            <WWAds className='w-full' orientation='horizontal'/>
+
+                            {/* 回顶按钮 */}
+                            <JumpToTopButton />
+                        </div>
+
+                        {/* 底部 */}
+                        <div className='md:hidden'>
+                            <Footer {...props} />
+                        </div>
+                    </div>
+
+                    {/*  右侧侧推拉抽屉 */}
+                    {/*<div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}>
+                        <div className='py-14 px-6 sticky top-0'>
+                            <ArticleInfo post={props?.post ? props?.post : props.notice} />
+
+                            <div className='py-4'>
+                                <Catalog {...props} />
+                                {slotRight}
+                                {router.route === '/' && <>
+                                    <InfoCard {...props} />
+                                    {CONFIG.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
+                                    <Live2D />
+                                </>}*/}
+                                {/* onenav主题首页只显示公告 */}
+                                {/*<Announcement {...props} />
+                            </div>
+
+                            <AdSlot type='in-article' />
+                            <Live2D />
+
+                        </div>
+                    </div>*/}
+
+                </main>
+
+                {/* 移动端悬浮目录按钮 */}
+                {showTocButton && !tocVisible && <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-neutral-800 rounded'>
+                    <FloatTocButton {...props} />
+                </div>}
+
+                {/* 移动端导航抽屉 */}
+                <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
+
+                {/* 移动端底部导航栏 */}
+                {/* <BottomMenuBar {...props} className='block md:hidden' /> */}
+
+            </div>
+        </ThemeGlobalNav.Provider>
+  )
+}
+
+
+/**
+ * 首页
+ * @param {*} props
+ * @returns 此主题首页就是列表
+ */
+const LayoutIndex = props => {
+  return <LayoutPostListIndex {...props} />
+}
+
+/**
+ * 首页列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostListIndex = props => {
+  // const { customMenu, children, post, allNavPages, categoryOptions, slotLeft, slotRight, slotTop, meta } = props
+  // const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
+  return (
+    <LayoutBase {...props} >
+        <Announcement {...props} />
+        <BlogPostListAll { ...props } />
+    </LayoutBase>
+  )
+}
+
+/**
+ * 首页
+ * @param {*} props
+ * @returns 此主题首页就是列表
+ */
+const LayoutIndexNew = props => {
+  return <LayoutPostList props={customMenu, filteredNavPages} />
+}
+
+/**
+ * 文章列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = props => {
+  const { posts, category, tag } = props
+  // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
+  // 如果是搜索，则列表顶部嵌入 搜索框
+  return (
+    <LayoutBase {...props} >
+        <div className='w-full max-w-7xl mx-auto justify-center mt-8'>
+            <div id='posts-wrapper' class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
+                {posts?.map(post => (
+                    <BlogPostCard key={post.id} post = {post} className='card' />
+                ))}
+            </div>
+        </div>
+    </LayoutBase>
+  )
+}
+
+/**
+ * 首页
+ * 重定向到某个文章详情页
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndexCustemPage = (props) => {
+  const router = useRouter()
+  useEffect(() => {
+    router.push(CONFIG.INDEX_PAGE).then(() => {
+      // console.log('跳转到指定首页', CONFIG.INDEX_PAGE)
+      setTimeout(() => {
+        if (isBrowser) {
+          const article = document.getElementById('notion-article')
+          if (!article) {
+            console.log('请检查您的Notion数据库中是否包含此slug页面： ', CONFIG.INDEX_PAGE)
+            const containerInner = document.querySelector('#theme-onenav #container-inner')
+            const newHTML = `<h1 class="text-3xl pt-12  dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${CONFIG.INDEX_PAGE}的文章</div></blockquote>`
+            containerInner?.insertAdjacentHTML('afterbegin', newHTML)
+          }
+        }
+      }, 7 * 1000)
+    })
+  }, [])
+
+  return <LayoutBase {...props} />
+}
+
+/**
+ * 文章列表 无
+ * 全靠页面导航
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostListOld = (props) => {
+  return <LayoutBase {...props} >
+            <div className='mt-10'><BlogPostListPage {...props} /></div>
+    </LayoutBase>
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = (props) => {
+  const { post, prev, next, lock, validPassword } = props
+
+  return (
+        <LayoutBase {...props} >
+            {/* 文章锁 */}
+            {lock && <ArticleLock validPassword={validPassword} />}
+
+            {!lock && <div id='container'>
+
+                {/* title */}
+                <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300">{post?.title}</h1>
+
+                {/* Notion文章主体 */}
+                {post && (<section id="article-wrapper" className="px-1">
+                    <NotionPage post={post} />
+
+                    {/* 分享 */}
+                    {/* <ShareBar post={post} /> */}
+                    {/* 文章分类和标签信息 */}
+                    <div className='flex justify-between'>
+                        {CONFIG.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
+                        <div>
+                            {CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                        </div>
+                    </div>
+
+                    {/* 上一篇、下一篇文章 */}
+                    {/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
+
+                    <AdSlot />
+                    <WWAds className='w-full' orientation='horizontal'/>
+
+                    <Comment frontMatter={post} />
+                </section>)}
+
+                <TocDrawer {...props} />
+            </div>}
+        </LayoutBase>
+  )
+}
+
+/**
+ * 没有搜索
+ * 全靠页面导航
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = (props) => {
+  return <LayoutBase {...props}></LayoutBase>
+}
+
+/**
+ * 归档页面基本不会用到
+ * 全靠页面导航
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = (props) => {
+  const { archivePosts } = props
+
+  return <LayoutBase {...props}>
+        <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
+            {Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
+        </div>
+  </LayoutBase>
+}
+
+/**
+ * 404
+ */
+const Layout404 = props => {
+  return <LayoutBase {...props}>
+        <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
+    </LayoutBase>
+}
+
+/**
+ * 分类列表
+ */
+const LayoutCategoryIndex = (props) => {
+  const { categoryOptions } = props
+  const { locale } = useGlobal()
+  return <LayoutBase {...props}>
+     <div className='bg-white dark:bg-gray-700 py-10'>
+                <div className='dark:text-gray-200 mb-5'>
+                    <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
+                </div>
+                <div id='category-list' className='duration-200 flex flex-wrap'>
+                    {categoryOptions?.map(category => {
+                      return (
+                            <Link
+                                key={category.name}
+                                href={`/category/${category.name}`}
+                                passHref
+                                legacyBehavior>
+                                <div
+                                    className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
+                                    <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+                                </div>
+                            </Link>
+                      )
+                    })}
+                </div>
+            </div>
+  </LayoutBase>
+}
+
+/**
+ * 标签列表
+ */
+const LayoutTagIndex = (props) => {
+  const { tagOptions } = props
+  const { locale } = useGlobal()
+
+  return <LayoutBase {...props}>
+     <div className="bg-white dark:bg-gray-700 py-10">
+                <div className="dark:text-gray-200 mb-5">
+                    <i className="mr-4 fas fa-tag" />
+                    {locale.COMMON.TAGS}:
+                </div>
+                <div id="tags-list" className="duration-200 flex flex-wrap">
+                    {tagOptions?.map(tag => {
+                      return (
+                            <div key={tag.name} className="p-2">
+                                <TagItemMini key={tag.name} tag={tag} />
+                            </div>
+                      )
+                    })}
+                </div>
+            </div>
+  </LayoutBase>
+}
+
+export {
+  CONFIG as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategoryIndex,
+  LayoutPostList,
+  LayoutTagIndex
+}
--- a/themes/nav/style.js
+++ b/themes/nav/style.js
@@ -0,0 +1,104 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    body {
+        background-color: #fbfbfb;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        -webkit-font-smoothing: antialiased;
+    }
+    #theme-onenav {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        font-size: 13px;
+    }
+    #top-wrapper img {
+        height: 44px;
+    }
+    /*#top-nav {
+        background-color: rgb(251 251 251 / 70%);
+    }*/
+    .main-menu {
+        box-shadow: 0 1px 4px rgb(0 0 0/8%);
+    }
+    .nav-menu {
+        padding: 8px 0px 4px 0px;
+    }
+    .nav-menu span{
+        font-size: 15px;
+        font-weight: 600;
+        line-height: 2;
+        color: #8c8c8c;
+    }
+    .nav-menu span:hover{
+        color: #000000;
+    }
+    .nav-menu span>i{
+        width: 18px;
+        margin-right: 4px;
+    }
+    .nav-submenu {
+        padding: 4px 0px 4px 2px;
+    }
+    .nav-submenu a>span{
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 1.3;
+        color: rgb(153, 153, 153);
+        text-align: left;
+    }
+    .nav-submenu a>span>i{
+        margin-right: 10px;
+    }
+    .card-list {
+        /*display: flex;
+        flex-wrap: wrap;
+        margin: 0;
+        padding: 0;
+        list-style: none;*/
+    }
+    .stack-list > .category:first-child {
+        /*padding-top: 16px !important;*/
+    }
+    .card {
+        cursor: pointer;
+        transition: box-shadow 0.1s ease-in-out;
+        box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
+        /*background-color: #fff;
+        height: calc(100% - 16px);
+        overflow: visible;
+        padding: 15px;
+        border-radius: 0.75rem;
+        /*border-radius: 8px;*/
+        margin-bottom: 16px !important;
+        box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
+        cursor: pointer;
+        display: flow-root;
+        position: relative;
+        box-sizing: border-box;
+        transition: box-shadow 0.1s ease-in-out;*/
+    }
+    .card:hover {
+        box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
+    }
+    .notion-gallery-grid {
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+    
+    .notion-collection-card-cover {
+        display: none;
+    }
+    
+    // 底色
+    .dark body{
+        background-color: black;
+    }
+
+  `}</style>
+}
+
+export { Style }