Merge branch 'main' into original-fix

themes/nav/components/Catalog.js

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useState } from 'react'
+import { isBrowser } from '@/lib/utils'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
-import { isBrowser } from '@/lib/utils'
+import { useCallback, useEffect, useState } from 'react'
 
 /**
  * 目录导航组件
@@ -24,66 +24,76 @@ const Catalog = ({ post }) => {
   }, [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 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
       }
-      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
+      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' })
+        }
       }
-      // 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))
+    }, 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={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}
-              >
-                {tocItem.text}
-              </span>
-            </a>
-          )
-        })}
-      </nav>
-    </div>
-  </>
+  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} catalog-item `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
+    </>
+  )
 }
 
 export default Catalog

themes/nav/components/Footer.js

@@ -1,33 +1,60 @@
+import { BeiAnGongAn } from '@/components/BeiAnGongAn'
 import { siteConfig } from '@/lib/config'
 
 const Footer = ({ siteInfo }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
   const since = siteConfig('SINCE')
-  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+  const copyrightDate =
+    parseInt(since) < currentYear ? since + '-' + currentYear : 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' /> */}
+    <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={siteConfig('LINK')} className='underline font-bold text-gray-500 dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br /></div>
-                © {`${copyrightDate}`}
-            </div>
+      <div className='flex justify-center'>
+        <div>
+          <i className='text-xs mx-1 animate-pulse fas fa-heart' />
+          <a
+            href={siteConfig('LINK')}
+            className='underline font-bold text-gray-500 dark:text-gray-300 '>
+            {siteConfig('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 {siteConfig('VERSION')}</a></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 {siteConfig('VERSION')}
+        </a>
+      </div>
 
-            {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br /></>}
+      {siteConfig('BEI_AN') && (
+        <>
+          <i className='fas fa-shield-alt' />{' '}
+          <a href='https://beian.miit.gov.cn/' className='mr-2'>
+            {siteConfig('BEI_AN')}
+          </a>
+          <br />
+        </>
+      )}
+      <BeiAnGongAn />
 
-            <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'>{siteConfig('TITLE')}</h1> */}
-
-        </footer>
+      <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'>{siteConfig('TITLE')}</h1> */}
+    </footer>
   )
 }
 

themes/nav/components/MenuItemCollapse.js

@@ -20,7 +20,9 @@ export const MenuItemCollapse = props => {
   if (!link || !link.show) {
     return null
   }
-
+  // #号加标题  快速跳转到指定锚点
+  const isAnchor = link?.href === '#'
+  const url = isAnchor ? `#${link.name}` : link.href
   const selected = router.pathname === link.href || router.asPath === link.href
 
   const toggleShow = () => {
@@ -42,7 +44,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.href}
+            href={url}
             target={link?.target}
             className='py-2 w-full my-auto items-center justify-between flex  '>
             <div>
@@ -72,21 +74,24 @@ export const MenuItemCollapse = props => {
       {hasSubMenu && (
         <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
           {link?.subMenus?.map((sLink, index) => {
+            // #号加标题  快速跳转到指定锚点
+            const sIsAnchor = sLink?.href === '#'
+            const sUrl = sIsAnchor ? `#${sLink.name}` : sLink.href
+
             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.href} target={link?.target}> */}
-                <a href={`/#${sLink.title}`} target={'_self'}>
+                <Link href={sUrl} target={'_self'}>
                   <div>
                     <div
                       className={`${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'} text-center w-3 mr-2 text-xs`}
                     />
                     {sLink.title}
                   </div>
-                </a>
+                </Link>
               </div>
             )
           })}

themes/nav/components/TopNavBar.js

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
 import Collapse from '@/components/Collapse'
-import { MenuBarMobile } from './MenuBarMobile'
-import throttle from 'lodash.throttle'
-import SearchInput from './SearchInput'
 import DarkModeButton from '@/components/DarkModeButton'
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import LogoBar from './LogoBar'
+import { MenuBarMobile } from './MenuBarMobile'
+import SearchInput from './SearchInput'
 
 /**
  * 顶部导航栏 + 菜单
@@ -29,20 +29,22 @@ export default function TopNavBar(props) {
 
   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 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 toggleMenuOpen = () => {
@@ -50,42 +52,61 @@ export default function TopNavBar(props) {
   }
 
   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}>
-            {/* 图标Logo */}
-            <div className='fixed block md:hidden top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
-                <LogoBar {...props} />
+    <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
+      }>
+      {/* 图标Logo */}
+      <div className='fixed block md:hidden top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
+        <LogoBar {...props} />
+      </div>
+
+      {/* 导航栏菜单 */}
+      <div className='h-18 px-5'>
+        <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>
-
-            {/* 移动端折叠菜单 */}
-            <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'>
-
-              <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>
+            <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>
+
+      {/* 移动端折叠菜单 */}
+      <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>
   )
 }

themes/nav/index.js

@@ -255,13 +255,14 @@ const LayoutPostList = props => {
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const router = useRouter()
+  const waiting404 = siteConfig('POST_WAITING_TIME_FOR_404') * 1000
   useEffect(() => {
     // 404
     if (!post) {
       setTimeout(
         () => {
           if (isBrowser) {
-            const article = document.getElementById('notion-article')
+            const article = document.querySelector('#article-wrapper #notion-article')
             if (!article) {
               router.push('/404').then(() => {
                 console.warn('找不到页面', router.asPath)
@@ -269,7 +270,7 @@ const LayoutSlug = props => {
             }
           }
         },
-        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+        waiting404
       )
     }
   }, [post])
@@ -290,8 +291,10 @@ const LayoutSlug = props => {
 
           {/* Notion文章主体 */}
           {post && (
-            <section id='article-wrapper' className='px-1'>
-              <NotionPage post={post} />
+            <section className='px-1'>
+              <div id='article-wrapper'>
+                <NotionPage post={post} />
+              </div>
 
               {/* 分享 */}
               {/* <ShareBar post={post} /> */}