catalog

themes/matery/LayoutBase.js

@@ -32,7 +32,7 @@ const LayoutBase = props => {
     const fullHeight = clientHeight - window.outerHeight
     let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
     if (per > 100) per = 100
-    const shouldShow = scrollY > 100 && per > 0
+    const shouldShow = scrollY > 300 && per > 0
 
     if (shouldShow !== show) {
       switchShow(shouldShow)
@@ -72,6 +72,7 @@ const LayoutBase = props => {
             <div className="bottom-24 right-2 fixed justify-end z-20">
                 <FloatDarkModeButton />
             </div>
+
             {/* 右下角悬浮 */}
             <div className="bottom-12 right-2 fixed justify-end z-20">
                 <div className={

themes/matery/LayoutSlug.js

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import React from 'react'
 import { ArticleLock } from './components/ArticleLock'
 import HeaderArticle from './components/HeaderArticle'
 import JumpToCommentButton from './components/JumpToCommentButton'
@@ -11,10 +11,26 @@ import ArticleAdjacent from './components/ArticleAdjacent'
 import ArticleCopyright from './components/ArticleCopyright'
 import { isBrowser } from '@/lib/utils'
 import { ArticleInfo } from './components/ArticleInfo'
+import Catalog from './components/Catalog'
 
 export const LayoutSlug = props => {
   const { post, lock, validPassword } = props
-  const drawerRight = useRef(null)
+  const drawerRight = React.useRef(null)
+
+  const [show, switchShow] = React.useState(false)
+
+  const scrollListener = () => {
+    const scrollY = window.pageYOffset
+    const shouldShow = scrollY > 220
+
+    if (shouldShow !== show) {
+      switchShow(shouldShow)
+    }
+  }
+  React.useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [show])
 
   if (!post) {
     return <LayoutBase
@@ -46,6 +62,7 @@ export const LayoutSlug = props => {
             showTag={false}
             floatSlot={floatSlot}
         >
+
             <div className='inner-wrapper drop-shadow-xl max-w-4xl'>
                 <div className="-mt-32 rounded-md mx-3 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
                     {lock && <ArticleLock validPassword={validPassword} />}
@@ -88,10 +105,13 @@ export const LayoutSlug = props => {
                         </div>
                     </div>}
                 </div>
-
                 {post.type === 'Post' && <ArticleAdjacent {...props} />}
-
             </div>
+
+            {show && <div className='sticky top-0 hidden xl:block '>
+                <Catalog toc={post.toc}/>
+            </div>}
+
             <div className='block lg:hidden'>
                 <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
             </div>

themes/matery/components/Catalog.js

@@ -10,10 +10,6 @@ import Progress from './Progress'
  * @constructor
  */
 const Catalog = ({ toc }) => {
-  // 无目录就直接返回空
-  if (!toc || toc.length < 1) {
-    return <></>
-  }
   // 监听滚动事件
   React.useEffect(() => {
     window.addEventListener('scroll', actionSectionScrollSpy)
@@ -57,12 +53,17 @@ const Catalog = ({ toc }) => {
     tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
   }, throttleMs))
 
-  return <div className='px-3'>
-    <div className='w-full'><i className='mr-1 fas fa-stream' /> 目录</div>
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+
+  return <div className='px-3 w-64'>
+    <div className='dark:text-white'><i className='mr-1 fas fa-stream' /> 目录</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}>
+    <div className='overflow-y-auto overscroll-none scroll-hidden' ref={tRef}>
       <nav className='h-full  text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)
@@ -75,7 +76,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-indigo-400 underline'}`}
+                className={`${activeSection === id && ' font-bold text-green-500 underline'}`}
               >
                 {tocItem.text}
               </span>