Magzine主题移动端目录

themes/magzine/components/Catalog.js

@@ -53,6 +53,7 @@ const Catalog = ({ toc, className }) => {
       setActiveSection(currentSectionId)
       const index = tocIds.indexOf(currentSectionId) || 0
       tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+      console.log(tRef?.current)
     }, throttleMs)
   )
 
@@ -67,7 +68,7 @@ const Catalog = ({ toc, className }) => {
         <Progress />
       </div>
       <div
-        className='overflow-y-auto max-h-44 overscroll-none scroll-hidden'
+        className='overflow-y-auto scroll-hidden lg:max-h-dvh max-h-44'
         ref={tRef}>
         <nav className='h-full  text-black'>
           {toc.map(tocItem => {

themes/magzine/components/CatalogFloat.js

@@ -1,5 +1,6 @@
 import { useMagzineGlobal } from '..'
 import Catalog from './Catalog'
+import CatalogFloatButton from './CatalogFloatButton'
 
 /**
  * 悬浮抽屉目录
@@ -8,14 +9,21 @@ import Catalog from './Catalog'
  * @returns {JSX.Element}
  * @constructor
  */
-const TocDrawer = ({ post, cRef }) => {
+const CatalogFloat = ({ post, cRef }) => {
   const { tocVisible, changeTocVisible } = useMagzineGlobal()
   const switchVisible = () => {
     changeTocVisible(!tocVisible)
   }
   return (
-    <>
-      <div id='medium-toc-float' className='fixed top-0 right-0 z-40'>
+    <div className='lg:hidden'>
+      <div
+        onClick={() => {
+          changeTocVisible(true)
+        }}
+        className='fixed right-0 bottom-24 z-20 shadow bg-white dark:bg-hexo-black-gray'>
+        {!tocVisible && <CatalogFloatButton />}
+      </div>
+      <div id='magzine-toc-float' className='fixed top-0 right-0 z-40'>
         {/* 侧边菜单 */}
         <div
           className={
@@ -26,7 +34,7 @@ const TocDrawer = ({ post, cRef }) => {
           }>
           {post && (
             <>
-              <div className='dark:text-gray-400 text-gray-600 h-56'>
+              <div className='dark:text-gray-400 text-gray-600 h-56 px-2'>
                 <Catalog toc={post.toc} />
               </div>
             </>
@@ -42,7 +50,7 @@ const TocDrawer = ({ post, cRef }) => {
         }
         onClick={switchVisible}
       />
-    </>
+    </div>
   )
 }
-export default TocDrawer
+export default CatalogFloat

themes/magzine/components/CatalogFloatButton.js

@@ -0,0 +1,28 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+
+/**
+ * 移动端点击召唤目录抽屉
+ * 当屏幕下滑500像素后会出现该控件
+ * @param props 父组件传入props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CatalogFloatButton = props => {
+  const { locale } = useGlobal()
+  // 用此配置可以关闭
+  if (!siteConfig('Magzine_WIDGET_TOC', true, CONFIG)) {
+    return <></>
+  }
+  return (
+    <div
+      onClick={props.onClick}
+      className='py-5 px-5 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center'
+      title={locale.POST.TOP}>
+      <i className='fas fa-list-ol' />
+    </div>
+  )
+}
+
+export default CatalogFloatButton

themes/magzine/index.js

@@ -17,6 +17,7 @@ import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
 import BannerFullWidth from './components/BannerFullWidth'
 import Catalog from './components/Catalog'
+import CatalogFloat from './components/CatalogFloat'
 import CategoryGroup from './components/CategoryGroup'
 import Footer from './components/Footer'
 import Header from './components/Header'
@@ -31,7 +32,6 @@ import PostSimpleListHorizontal from './components/PostListSimpleHorizontal'
 import PostNavAround from './components/PostNavAround'
 import TagGroups from './components/TagGroups'
 import TagItemMini from './components/TagItemMini'
-import TocDrawer from './components/TocDrawer'
 import TouchMeCard from './components/TouchMeCard'
 import CONFIG from './config'
 import { Style } from './style'
@@ -245,6 +245,9 @@ const LayoutSlug = props => {
                   <AdSlot />
                 </div>
 
+                {/* 留白 */}
+                <div></div>
+
                 {/* 文章分类区块 */}
                 <div>
                   <CategoryGroup {...props} />
@@ -264,7 +267,7 @@ const LayoutSlug = props => {
             </div>
 
             {/* 移动端目录 */}
-            <TocDrawer {...props} />
+            <CatalogFloat {...props} />
           </div>
         )}
       </div>