nobelium等主题catalog样式调整

themes/fukasawa/components/Catalog.js

@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
-import { useGlobal } from '@/lib/global'
+import { useEffect, useRef, useState } from 'react'
 
 /**
  * 目录导航组件
@@ -58,29 +58,37 @@ const Catalog = ({ toc }) => {
   if (!toc || toc?.length < 1) {
     return <></>
   }
-  return <div id='catalog' className='flex-1 flex-col flex overflow-hidden'>
-    <div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <nav ref={tRef} className='flex-1 overflow-auto  overscroll-none scroll-hidden   text-black mb-6'>
-      {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-red-400 underline' : ''}`}
-              title={tocItem.text}
-            >
-              {tocItem.text}
-            </span>
-          </a>
-        )
-      })}
-    </nav>
-  </div>
+  return (
+    <div id='catalog' className='flex-1 flex-col flex overflow-hidden'>
+      <div className='w-full dark:text-gray-300 mb-2'>
+        <i className='mr-1 fas fa-stream' />
+        {locale.COMMON.TABLE_OF_CONTENTS}
+      </div>
+      <nav
+        ref={tRef}
+        className='flex-1 overflow-auto  overscroll-none scroll-hidden   text-black mb-6'>
+        {toc.map(tocItem => {
+          const id = uuidToId(tocItem.id)
+          return (
+            <a
+              key={id}
+              href={`#${id}`}
+              className={`${activeSection === id && 'dark:border-white border-gray-800 text-gray-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-gray-800 border-lduration-300 transform dark:text-gray-400 dark:border-gray-400
+        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-black dark:text-white underline' : ''}`}>
+                {tocItem.text}
+              </span>
+            </a>
+          )
+        })}
+      </nav>
+    </div>
+  )
 }
 
 export default Catalog

themes/hexo/components/Catalog.js

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Progress from './Progress'
-import { useGlobal } from '@/lib/global'
 
 /**
  * 目录导航组件
@@ -29,67 +29,77 @@ const Catalog = ({ toc }) => {
   const [activeSection, setActiveSection] = useState(null)
 
   const throttleMs = 200
-  const actionSectionScrollSpy = useCallback(throttle(() => {
-    const sections = document.getElementsByClassName('notion-h')
-    let prevBBox = null
-    let currentSectionId = activeSection
-    for (let i = 0; i < sections.length; ++i) {
-      const section = sections[i]
-      if (!section || !(section instanceof Element)) continue
-      if (!currentSectionId) {
-        currentSectionId = section.getAttribute('data-id')
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
       }
-      const bbox = section.getBoundingClientRect()
-      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
-      const offset = Math.max(150, prevHeight / 4)
-      // GetBoundingClientRect returns values relative to viewport
-      if (bbox.top - offset < 0) {
-        currentSectionId = section.getAttribute('data-id')
-        prevBBox = bbox
-        continue
-      }
-      // No need to continue loop, if last element has been detected
-      break
-    }
-    setActiveSection(currentSectionId)
-    const index = tocIds.indexOf(currentSectionId) || 0
-    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
-  }, throttleMs))
+      setActiveSection(currentSectionId)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+  )
 
   // 无目录就直接返回空
   if (!toc || toc.length < 1) {
     return <></>
   }
 
-  return <div className='px-3 py-1'>
-    <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <div className='w-full py-3'>
-      <Progress />
+  return (
+    <div className='px-3 py-1'>
+      <div className='w-full'>
+        <i className='mr-1 fas fa-stream' />
+        {locale.COMMON.TABLE_OF_CONTENTS}
+      </div>
+      <div className='w-full py-3'>
+        <Progress />
+      </div>
+      <div
+        className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full  text-black'>
+          {toc.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`${activeSection === id && 'dark:border-white border-indigo-800 text-indigo-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-indigo-800 border-lduration-300 transform dark:text-indigo-400 dark:border-indigo-400
+        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-indigo-800 dark:text-white underline' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
     </div>
-    <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
-      <nav className='h-full  text-black'>
-        {toc.map((tocItem) => {
-          const id = uuidToId(tocItem.id)
-          tocIds.push(id)
-          return (
-            <a
-              key={id}
-              href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
-            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-indigo-600' : ''}`}
-              >
-                {tocItem.text}
-              </span>
-            </a>
-          )
-        })}
-      </nav>
-
-    </div>
-  </div>
+  )
 }
 
 export default Catalog

themes/magzine/components/Catalog.js

@@ -64,6 +64,7 @@ const Catalog = ({ post, toc, className }) => {
   return (
     <div className={className}>
       <div className='w-full mt-2 mb-4'>
+        {/* 阅读进度条 */}
         <Progress />
       </div>
       <div
@@ -77,14 +78,14 @@ const Catalog = ({ post, toc, className }) => {
               <a
                 key={id}
                 href={`#${id}`}
-                className={`notion-table-of-contents-item duration-300 transform  dark:text-gray-400
-              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+                className={`${activeSection === id && 'dark:border-white border-gray-800 text-gray-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-gray-800 border-lduration-300 transform dark:text-gray-400 dark:border-gray-400
+            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 dark:text-white underline' : ''}`}>
+                  className={`truncate ${activeSection === id ? ' font-bold text-black dark:text-white underline' : ''}`}>
                   {tocItem.text}
                 </span>
               </a>

themes/magzine/components/Header.js

@@ -1,4 +1,5 @@
 import Collapse from '@/components/Collapse'
+import DarkModeButton from '@/components/DarkModeButton'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { SignInButton, SignedOut, UserButton } from '@clerk/nextjs'
@@ -162,15 +163,21 @@ export default function Header(props) {
           {/* 搜索按钮 */}
           <div
             onClick={toggleShowSearchInput}
-            className='flex text-center items-center cursor-pointer p-2'>
+            className='flex text-center items-center cursor-pointer p-2.5 hover:bg-black hover:bg-opacity-10 rounded-full'>
             <i
               className={
                 showSearchInput
                   ? 'fa-regular fa-circle-xmark'
-                  : 'fa-solid fa-magnifying-glass' + ' align-middle'
+                  : 'fa-solid fa-magnifying-glass' +
+                    ' align-middle hover:scale-110 transform duration-200'
               }></i>
           </div>
 
+          {/* 深色模式切换 */}
+          <div className='p-2.5 hover:bg-black hover:bg-opacity-10 rounded-full'>
+            <DarkModeButton />
+          </div>
+
           {/* 移动端显示开关 */}
           <div className='mr-1 flex md:hidden justify-end items-center text-lg space-x-4 font-serif dark:text-gray-200'>
             <div onClick={toggleMenuOpen} className='cursor-pointer p-2'>

themes/magzine/components/Progress.js

@@ -31,7 +31,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   return (
     <div className='h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black'>
       <div
-        className='h-4 bg-gray-600 dark:bg-hexo-black-gray duration-200'
+        className='h-4 bg-black dark:bg-hexo-black-gray duration-200'
         style={{ width: `${percent}%` }}>
         {showPercent && (
           <div className='text-right text-white text-xs'>{percent}%</div>

themes/next/components/Toc.js

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Progress from './Progress'
 
 /**
- * 目录导航组件
+ * 目录导航组件 Table of Contents
  * @param toc
  * @returns {JSX.Element}
  * @constructor
@@ -26,63 +26,73 @@ const Toc = ({ toc }) => {
   // 同步选中目录事件
   const [activeSection, setActiveSection] = useState(null)
   const throttleMs = 200
-  const actionSectionScrollSpy = useCallback(throttle(() => {
-    const sections = document.getElementsByClassName('notion-h')
-    let prevBBox = null
-    let currentSectionId = activeSection
-    for (let i = 0; i < sections.length; ++i) {
-      const section = sections[i]
-      if (!section || !(section instanceof Element)) continue
-      if (!currentSectionId) {
-        currentSectionId = section.getAttribute('data-id')
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
       }
-      const bbox = section.getBoundingClientRect()
-      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
-      const offset = Math.max(150, prevHeight / 4)
-      // GetBoundingClientRect returns values relative to viewport
-      if (bbox.top - offset < 0) {
-        currentSectionId = section.getAttribute('data-id')
-        prevBBox = bbox
-        continue
-      }
-      // No need to continue loop, if last element has been detected
-      break
-    }
-    setActiveSection(currentSectionId)
-    const index = tocIds.indexOf(currentSectionId) || 0
-    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
-  }, throttleMs))
+      setActiveSection(currentSectionId)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+  )
 
   // 无目录就直接返回空
   if (!toc || toc.length < 1) {
     return <></>
   }
 
-  return <div className='px-3'>
-    <div className='w-full pb-1'>
-      <Progress />
+  return (
+    <div className='px-3'>
+      <div className='w-full pb-1'>
+        <Progress />
+      </div>
+      <div
+        className='overflow-y-auto max-h-96 overscroll-none scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full  text-black dark:text-gray-300'>
+          {toc.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`notion-table-of-contents-item duration-300 transform font-light
+              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-red-400 underline' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
     </div>
-    <div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
-      <nav className='h-full  text-black dark:text-gray-300'>
-        {toc.map((tocItem) => {
-          const id = uuidToId(tocItem.id)
-          tocIds.push(id)
-          return (
-            <a
-              key={id}
-              href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform font-light
-              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-red-400 underline' : ''}`}>
-                {tocItem.text}
-              </span>
-            </a>
-          )
-        })}
-      </nav>
-    </div>
-  </div>
+  )
 }
 
 export default Toc

themes/nobelium/components/Catalog.js

@@ -0,0 +1,96 @@
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+  // 监听滚动事件
+  useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+  const throttleMs = 200
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
+      }
+      setActiveSection(currentSectionId)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+  )
+
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+
+  return (
+    <div className='hidden lg:block absolute right-0 top-0 -mr-96 h-full'>
+      <div className='px-3 sticky top-32'>
+        <div
+          className='pl-10 mt-32 overflow-y-auto max-w-96  max-h-96 overscroll-none scroll-hidden'
+          ref={tRef}>
+          <nav className='h-full text-black dark:text-gray-300'>
+            {toc?.map(tocItem => {
+              const id = uuidToId(tocItem.id)
+              tocIds.push(id)
+              return (
+                <a
+                  key={id}
+                  href={`#${id}`}
+                  className={`${activeSection === id && 'dark:border-white border-gray-800 text-gray-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-gray-800 border-lduration-300 transform dark:text-gray-400 dark:border-gray-400
+              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-black dark:text-white underline' : ''}`}>
+                    {tocItem.text}
+                  </span>
+                </a>
+              )
+            })}
+          </nav>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Catalog

themes/nobelium/components/Nav.js

@@ -167,7 +167,7 @@ const NavBar = props => {
       </div>
 
       {siteConfig('NOBELIUM_MENU_DARKMODE_BUTTON') && (
-        <DarkModeButton className='text-center p-2.5 hover:bg-black hover:bg-opacity-10  rounded-full' />
+        <DarkModeButton className='text-center p-2.5 hover:bg-black hover:bg-opacity-10 rounded-full' />
       )}
 
       {siteConfig('NOBELIUM_MENU_RANDOM_POST') && (

themes/nobelium/index.js

@@ -19,6 +19,7 @@ import BlogArchiveItem from './components/BlogArchiveItem'
 import BlogListBar from './components/BlogListBar'
 import { BlogListPage } from './components/BlogListPage'
 import { BlogListScroll } from './components/BlogListScroll'
+import Catalog from './components/Catalog'
 import { Footer } from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
 import Nav from './components/Nav'
@@ -78,6 +79,7 @@ const LayoutBase = props => {
             {/* 顶部插槽 */}
             {topSlot}
             {children}
+            {post && <Catalog toc={post?.toc} />}
           </Transition>
         </main>
 

themes/simple/components/Catalog.js

@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
-import { useGlobal } from '@/lib/global'
+import { useEffect, useRef, useState } from 'react'
 
 /**
  * 目录导航组件
@@ -40,7 +40,9 @@ const Catalog = ({ post }) => {
         break
       }
       setActiveSection(currentSectionId)
-      const index = post?.toc?.findIndex(obj => uuidToId(obj.id) === currentSectionId)
+      const index = post?.toc?.findIndex(
+        obj => uuidToId(obj.id) === currentSectionId
+      )
       tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
     }, throttleMs)
 
@@ -56,34 +58,40 @@ const Catalog = ({ post }) => {
     return <></>
   }
 
-  return <div className='px-3 '>
-        <div className='dark:text-white mb-2'>
-            <i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}
-        </div>
+  return (
+    <div className='px-3 '>
+      <div className='dark:text-white mb-2'>
+        <i className='mr-1 fas fa-stream' />
+        {locale.COMMON.TABLE_OF_CONTENTS}
+      </div>
 
-        <div className='overflow-y-auto overscroll-none max-h-36 lg:max-h-96 scroll-hidden' ref={tRef}>
-            <nav className='h-full  text-black'>
-                {post?.toc?.map((tocItem) => {
-                  const id = uuidToId(tocItem.id)
-                  return (
-                        <a
-                            key={id}
-                            href={`#${id}`}
-                            className={`notion-table-of-contents-item duration-300 transform dark:text-gray-200
-            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-red-600 underline' : ''}`}
-                            >
-                                {tocItem.text}
-                            </span>
-                        </a>
-                  )
-                })}
-            </nav>
-
-        </div>
+      <div
+        className='overflow-y-auto overscroll-none max-h-36 lg:max-h-96 scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full  text-black'>
+          {post?.toc?.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`${activeSection === id && 'dark:border-white border-red-700 text-red-700 font-bold'} hover:font-semibold border-l pl-4 block hover:text-red-600 border-lduration-300 transform dark:text-red-400 dark:border-red-400
+                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-red-600 dark:text-white underline' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
     </div>
+  )
 }
 
 export default Catalog