回顶按钮

themes/Medium/LayoutBase.js

@@ -25,14 +25,13 @@ const LayoutBase = props => {
     <div id='container' className='bg-white w-full h-full min-h-screen justify-center'>
       <CommonHead meta={meta} />
       <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
-
         {/* 桌面端左侧菜单 */}
         {/* <LeftMenuBar/> */}
 
-        <div className='w-full justify-center'>
+        <div className='w-full'>
           {/* 移动端顶部菜单 */}
           <TopNavBar />
-          <div className='px-5'>
+          <div className='px-5 max-w-5xl justify-center mx-auto'>
             {children}
           </div>
         </div>
@@ -51,8 +50,8 @@ const LayoutBase = props => {
       </main>
 
       {/* 移动端底部 */}
-      <BottomMenuBar className='block md:hidden' />
       <Footer />
+      <BottomMenuBar className='block md:hidden' />
     </div>
   )
 }

themes/Medium/components/BottomMenuBar.js

@@ -6,7 +6,7 @@ import JumpToTopButton from '@/themes/Medium/components/JumpToTopButton'
 
 export default function BottomMenuBar ({ className }) {
   return (
-    <div className={'fixed bottom-0 w-full h-12 bg-white ' + className}>
+    <div className={'sticky bottom-0 w-full h-12 bg-white ' + className}>
       <div className='flex justify-between h-full shadow-card'>
         <Link href='/' passHref>
           <div className='flex w-full items-center justify-center cursor-pointer'>

themes/Medium/components/Catalog.js

@@ -2,8 +2,7 @@ import React from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
-// import { cs } from 'react-notion-x'
-
+import JumpToTopButton from './JumpToTopButton'
 /**
  * 目录导航组件
  * @param toc
@@ -79,6 +78,7 @@ const Catalog = ({ toc }) => {
         )
       })}
     </nav>
+    <JumpToTopButton className='text-gray-400 hover:bg-gray-100 py-1 duration-200'/>
   </div>
 }
 

themes/Medium/components/Footer.js

@@ -9,7 +9,7 @@ const Footer = ({ title }) => {
   const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
   return (
     <footer
-      className='dark:bg-gray-900 flex-shrink-0 mb-8 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
+      className='dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
     >
       <FontAwesomeIcon icon={faCopyright} /> {`${startYear}${currentYear}`} <span><FontAwesomeIcon icon={faHeart} className='mx-1 animate-pulse'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
       <br/>

themes/Medium/components/JumpToTopButton.js

@@ -12,12 +12,12 @@ import CONFIG_MEDIUM from '../config_medium'
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToTopButton = ({ showPercent = false, percent }) => {
+const JumpToTopButton = ({ showPercent = false, percent, className }) => {
   if (!CONFIG_MEDIUM.WIDGET_TO_TOP) {
     return <></>
   }
   const { locale } = useGlobal()
-  return (<div className='flex space-x-1 items-center cursor-pointer' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+  return (<div className={'flex space-x-1 items-center cursor-pointer w-full justify-center ' + className } onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
         <div title={locale.POST.TOP} >
           <FontAwesomeIcon icon={faArrowUp} />
         </div>