菜单调整

components/Tabs.js

@@ -37,7 +37,7 @@ const Tabs = ({ className, children }) => {
                    onClick={() => {
                      tabClickHandle(index)
                    }}>
-          {item?.key}
+          {item?.key || 'undefined_key'}
         </li>
       })}
     </ul>

themes/Medium/LayoutBase.js

@@ -2,16 +2,14 @@ import CommonHead from '@/components/CommonHead'
 import React from 'react'
 import Footer from './components/Footer'
 import InfoCard from './components/InfoCard'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import RevolverMaps from './components/RevolverMaps'
 import CONFIG_MEDIUM from './config_medium'
 import Tabs from '@/components/Tabs'
-import { faHome } from '@fortawesome/free-solid-svg-icons'
 import TopNavBar from './components/TopNavBar'
-import Link from 'next/link'
 import SearchInput from './components/SearchInput'
-import { useRouter } from 'next/router'
 import BottomMenuBar from './components/BottomMenuBar'
+import { useGlobal } from '@/lib/global'
+import JumpToTopButton from './components/JumpToTopButton'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -21,6 +19,7 @@ import BottomMenuBar from './components/BottomMenuBar'
  */
 const LayoutBase = props => {
   const { children, meta, showInfoCard = true, slotRight } = props
+  const { locale } = useGlobal()
 
   return (
     <div id='container' className='bg-white w-full h-full min-h-screen justify-center'>
@@ -28,19 +27,11 @@ const LayoutBase = props => {
       <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
 
         {/* 桌面端左侧菜单 */}
-        <div className='w-20  border-r hidden lg:block pt-12'>
-          <section>
-            <Link href='/'>
-              <div className='text-center cursor-pointer  hover:text-black'>
-                <FontAwesomeIcon icon={faHome} size='lg' color='gray' />
-              </div>
-            </Link>
-          </section>
-        </div>
+        {/* <LeftMenuBar/> */}
 
         <div className='w-full justify-center'>
           {/* 移动端顶部菜单 */}
-          <TopNavBar className='block lg:hidden' />
+          <TopNavBar />
           <div className='px-5'>
             {children}
           </div>
@@ -49,8 +40,8 @@ const LayoutBase = props => {
         {/* 桌面端右侧 */}
         <div className='hidden xl:block border-l w-96'>
           <Tabs className='py-14 px-6 sticky top-0'>
-            {slotRight && <div key='Article' className='mt-6'>{slotRight} </div>}
-            <div key='About'>
+            {slotRight}
+            <div key={locale.NAV.ABOUT}>
               <SearchInput className='mt-6  mb-12' />
               {showInfoCard && <InfoCard />}
               {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
@@ -60,8 +51,8 @@ const LayoutBase = props => {
       </main>
 
       {/* 移动端底部 */}
-      <BottomMenuBar className='block md:hidden'/>
-      <Footer/>
+      <BottomMenuBar className='block md:hidden' />
+      <Footer />
     </div>
   )
 }

themes/Medium/LayoutSlug.js

@@ -14,7 +14,7 @@ import { useGlobal } from '@/lib/global'
 import formatDate from '@/lib/formatDate'
 import Link from 'next/link'
 import mediumZoom from 'medium-zoom'
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import ArticleAround from './components/ArticleAround'
 import Catalog from './components/Catalog'
 
@@ -56,7 +56,9 @@ export const LayoutSlug = (props) => {
     }
   })
 
-  return <LayoutBase {...props} meta={meta} showInfoCard={true} slotRight={<Catalog toc={post.toc}/>}>
+  const slotRight = post?.toc && <div key={locale.COMMON.TABLE_OF_CONTENTS} className='mt-6'><Catalog toc={post.toc}/></div>
+
+  return <LayoutBase {...props} meta={meta} showInfoCard={true} slotRight={slotRight}>
     <h1 className='text-4xl pt-12 font-sans'>{post?.title}</h1>
     <div className='flex py-4 items-center font-sans px-1'>
       <Link href='/about' passHref>

themes/Medium/components/BlogPostCard.js

@@ -15,7 +15,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
         <div className='lg:p-8 p-4 flex flex-col w-full'>
           <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-            <a className={'cursor-pointer font-bold font-sans hover:underline text-4xl flex justify-start leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'}>
+            <a className={'cursor-pointer font-bold font-sans hover:underline text-3xl flex justify-start leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'}>
               {post.title}
             </a>
           </Link>

themes/Medium/components/BottomMenuBar.js

@@ -2,6 +2,7 @@ import { faHome, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
+import JumpToTopButton from '@/themes/Medium/components/JumpToTopButton'
 
 export default function BottomMenuBar ({ className }) {
   return (
@@ -17,6 +18,9 @@ export default function BottomMenuBar ({ className }) {
             <FontAwesomeIcon icon={faSearch} />
           </div>
         </Link>
+        <div className='flex w-full items-center justify-center cursor-pointer'>
+          <JumpToTopButton/>
+        </div>
       </div>
     </div>
   )

themes/Medium/components/Catalog.js

@@ -2,8 +2,6 @@ import React from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faStream } from '@fortawesome/free-solid-svg-icons'
 // import { cs } from 'react-notion-x'
 
 /**
@@ -55,7 +53,6 @@ const Catalog = ({ toc }) => {
   }, throttleMs))
 
   return <div className='px-3'>
-    <div className='w-full'><FontAwesomeIcon className='mr-1' icon={faStream}/> 目录</div>
     <div className='w-full py-1'>
       <Progress/>
     </div>

themes/Medium/components/JumpToTopButton.js

@@ -0,0 +1,28 @@
+import { useGlobal } from '@/lib/global'
+import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+import CONFIG_MEDIUM from '../config_medium'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = false, percent }) => {
+  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' })} >
+        <div title={locale.POST.TOP} >
+          <FontAwesomeIcon icon={faArrowUp} />
+        </div>
+        {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
+    </div>)
+}
+
+export default JumpToTopButton

themes/Medium/components/LeftMenuBar.js

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHome } from '@fortawesome/free-solid-svg-icons'
+import React from 'react'
+
+export default function LeftMenuBar () {
+  return <div className='w-20  border-r hidden lg:block pt-12'>
+    <section>
+      <Link href='/'>
+        <div className='text-center cursor-pointer  hover:text-black'>
+          <FontAwesomeIcon icon={faHome} size='lg' color='gray' />
+        </div>
+      </Link>
+    </section>
+  </div>
+}

themes/Medium/components/TopNavBar.js

@@ -1,7 +1,7 @@
 import LogoBar from '@/themes/Medium/components/LogoBar'
 
 export default function TopNavBar ({ className }) {
-  return <div id='top-nav' className={'sticky top-0 w-full z-50 ' + className}>
+  return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-50 ' + className}>
     <div className='flex w-full h-12 shadow bg-white px-5 items-center'>
       <LogoBar />
     </div>

themes/Medium/config_medium.js

@@ -11,6 +11,7 @@ const CONFIG_MEDIUM = {
   MENU_SEARCH: true, // 显示搜索
 
   // Widget
-  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false' // 地图插件
+  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
+  WIDGET_TO_TOP: true // 跳回顶部
 }
 export default CONFIG_MEDIUM