From c929d6fa02a3952c2af987524f79cbe3e23acf1e Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Sat, 12 Feb 2022 17:09:00 +0800
Subject: [PATCH 1/2] Medium V2.0

---
 components/Tabs.js                           |  6 +-
 themes/Medium/LayoutBase.js                  | 52 ++++++++++---
 themes/Medium/LayoutIndex.js                 |  1 -
 themes/Medium/LayoutPage.js                  |  3 +-
 themes/Medium/LayoutSearch.js                | 43 +++++------
 themes/Medium/LayoutSlug.js                  | 34 +++++----
 themes/Medium/components/BlogPostListPage.js | 23 +++++-
 themes/Medium/components/BottomMenuBar.js    | 23 ++++++
 themes/Medium/components/CategoryGroup.js    | 30 ++++++++
 themes/Medium/components/InfoCard.js         | 12 +--
 themes/Medium/components/LogoBar.js          | 29 ++++----
 themes/Medium/components/RevolverMaps.js     |  2 +-
 themes/Medium/components/SearchInput.js      | 77 ++++++++++++++++++++
 themes/Medium/components/SocialButton.js     |  2 +-
 themes/Medium/components/TagGroups.js        | 29 ++++++++
 themes/Medium/components/TagItemMini.js      |  2 +-
 themes/Medium/components/TopNavBar.js        |  9 +++
 17 files changed, 294 insertions(+), 83 deletions(-)
 create mode 100644 themes/Medium/components/BottomMenuBar.js
 create mode 100644 themes/Medium/components/CategoryGroup.js
 create mode 100644 themes/Medium/components/SearchInput.js
 create mode 100644 themes/Medium/components/TagGroups.js
 create mode 100644 themes/Medium/components/TopNavBar.js

diff --git a/components/Tabs.js b/components/Tabs.js
index 66012477..6f7497ba 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -5,7 +5,7 @@ import React, { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-const Tabs = ({ children }) => {
+const Tabs = ({ className, children }) => {
   if (!children) {
     return <></>
   }
@@ -18,7 +18,7 @@ const Tabs = ({ children }) => {
   })
 
   if (count === 1) {
-    return <section className='duration-200'>
+    return <section className={'duration-200 ' + className}>
       {children}
     </section>
   }
@@ -29,7 +29,7 @@ const Tabs = ({ children }) => {
     setCurrentTab(i)
   }
 
-  return <div className='mb-5 bg-white dark:bg-gray-800 duration-200'>
+  return <div className={'mb-5 bg-white dark:bg-gray-800 duration-200 ' + className}>
     <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
       {children.map((item, index) => {
         return <li key={index}
diff --git a/themes/Medium/LayoutBase.js b/themes/Medium/LayoutBase.js
index 5772a5e4..cc57b3da 100644
--- a/themes/Medium/LayoutBase.js
+++ b/themes/Medium/LayoutBase.js
@@ -2,9 +2,16 @@ import CommonHead from '@/components/CommonHead'
 import React from 'react'
 import Footer from './components/Footer'
 import InfoCard from './components/InfoCard'
-import LogoBar from './components/LogoBar'
+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'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -16,21 +23,44 @@ const LayoutBase = props => {
   const { children, meta, showInfoCard = true, slotRight } = props
 
   return (
-    <div id="container" className='bg-white w-full h-full min-h-screen justify-center'>
-      <CommonHead meta={meta}/>
-      <main id="wrapper" className='max-w-7xl w-full h-full mx-auto'>
-        <LogoBar/>
-        <div className='w-72 px-8 py-12 fixed top-24 hidden lg:block'>
-          {showInfoCard && <InfoCard/>}
+    <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'>
+
+        {/* 桌面端左侧菜单 */}
+        <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>
-        <div className='lg:ml-72 max-w-3xl w-full px-5'>
+
+        <div className='w-full justify-center'>
+          {/* 移动端顶部菜单 */}
+          <TopNavBar className='block lg:hidden' />
+          <div className='px-5'>
             {children}
+          </div>
         </div>
-        <div className='w-72 px-8 py-6 fixed right-12 top-24 hidden lg:block'>
-          { CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps/>}
-          { slotRight }
+
+        {/* 桌面端右侧 */}
+        <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'>
+              <SearchInput className='mt-6  mb-12' />
+              {showInfoCard && <InfoCard />}
+              {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
+            </div>
+          </Tabs>
         </div>
       </main>
+
+      {/* 移动端底部 */}
+      <BottomMenuBar className='block md:hidden'/>
       <Footer/>
     </div>
   )
diff --git a/themes/Medium/LayoutIndex.js b/themes/Medium/LayoutIndex.js
index 3d336bd7..884b825a 100644
--- a/themes/Medium/LayoutIndex.js
+++ b/themes/Medium/LayoutIndex.js
@@ -2,7 +2,6 @@ import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'
 
 export const LayoutIndex = (props) => {
-  // const { posts, tags, meta, categories, postCount, latestPosts } = props
   return <LayoutBase {...props}>
       <BlogPostListPage {...props}/>
   </LayoutBase>
diff --git a/themes/Medium/LayoutPage.js b/themes/Medium/LayoutPage.js
index 0c6640c8..cec493ce 100644
--- a/themes/Medium/LayoutPage.js
+++ b/themes/Medium/LayoutPage.js
@@ -2,8 +2,7 @@ import LayoutBase from './LayoutBase'
 import BlogPostListPage from './components/BlogPostListPage'
 
 export const LayoutPage = (props) => {
-  const { page, posts, postCount } = props
   return <LayoutBase {...props}>
-      <BlogPostListPage page={page} posts={posts} postCount={postCount} />
+      <BlogPostListPage {...props} />
   </LayoutBase>
 }
diff --git a/themes/Medium/LayoutSearch.js b/themes/Medium/LayoutSearch.js
index c7469a60..cd66e5e8 100644
--- a/themes/Medium/LayoutSearch.js
+++ b/themes/Medium/LayoutSearch.js
@@ -1,31 +1,24 @@
-import { useRouter } from 'next/router'
 import LayoutBase from './LayoutBase'
+import BlogPostListPage from './components/BlogPostListPage'
+import SearchInput from './components/SearchInput'
+import { useGlobal } from '@/lib/global'
+import TagGroups from './components/TagGroups'
+import CategoryGroup from './components/CategoryGroup'
 
 export const LayoutSearch = (props) => {
-  const { posts } = props
-  let filteredPosts
-  const searchKey = getSearchKey()
-  if (searchKey) {
-    filteredPosts = posts.filter(post => {
-      const tagContent = post.tags ? post.tags.join(' ') : ''
-      const searchContent = post.title + post.summary + tagContent
-      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
-    })
-  } else {
-    filteredPosts = posts
-  }
-
-  console.log(filteredPosts)
-
+  const { locale } = useGlobal()
   return <LayoutBase {...props}>
-    Search {searchKey}
+
+    <div className='py-12'>
+      <div className='pb-4 w-full'>
+      {locale.NAV.SEARCH}
+      </div>
+      <SearchInput/>
+
+      <TagGroups {...props}/>
+      <CategoryGroup {...props}/>
+    </div>
+
+    <BlogPostListPage {...props}/>
   </LayoutBase>
 }
-
-function getSearchKey () {
-  const router = useRouter()
-  if (router.query && router.query.s) {
-    return router.query.s
-  }
-  return null
-}
diff --git a/themes/Medium/LayoutSlug.js b/themes/Medium/LayoutSlug.js
index 905d8ed8..14419392 100644
--- a/themes/Medium/LayoutSlug.js
+++ b/themes/Medium/LayoutSlug.js
@@ -56,22 +56,24 @@ export const LayoutSlug = (props) => {
     }
   })
 
-  return <LayoutBase {...props} meta={meta} showInfoCard={false} slotRight={<Catalog toc={post.toc}/>}>
-    <h1 className='text-4xl mt-12 font-sans'>{post?.title}</h1>
-    <Link href='/about' passHref>
-      <div className='flex py-3 items-center font-sans cursor-pointer'>
-        <Image
-          alt={BLOG.AUTHOR}
-          width={25}
-          height={25}
-          loading='lazy'
-          src='/avatar.jpg'
-          className='rounded-full'
-        />
-        <div className='mr-3 ml-1 text-green-500'>{BLOG.AUTHOR}</div>
-        <div className='text-gray-500'>{date}</div>
-      </div>
-    </Link>
+  return <LayoutBase {...props} meta={meta} showInfoCard={true} slotRight={<Catalog toc={post.toc}/>}>
+    <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>
+        <>
+          <Image
+            alt={BLOG.AUTHOR}
+            width={25}
+            height={25}
+            loading='lazy'
+            src='/avatar.jpg'
+            className='rounded-full cursor-pointer'
+          />
+          <div className='mr-3 ml-1 text-green-500 cursor-pointer'>{BLOG.AUTHOR}</div>
+        </>
+      </Link>
+      <div className='text-gray-500'>{date}</div>
+    </div>
     {/* Notion文章主体 */}
     <section id='notion-article' className='px-1 max-w-5xl'>
       {post.blockMap && (
diff --git a/themes/Medium/components/BlogPostListPage.js b/themes/Medium/components/BlogPostListPage.js
index fe91b9b0..0c6b56b8 100644
--- a/themes/Medium/components/BlogPostListPage.js
+++ b/themes/Medium/components/BlogPostListPage.js
@@ -2,6 +2,7 @@ import BlogPostCard from './BlogPostCard'
 import BLOG from '@/blog.config'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import PaginationSimple from './PaginationSimple'
+import { useRouter } from 'next/router'
 
 /**
  * 文章列表分页表格
@@ -12,7 +13,17 @@ import PaginationSimple from './PaginationSimple'
  * @constructor
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  let filteredPosts = Object.assign(posts)
+  const searchKey = getSearchKey()
+  if (searchKey) {
+    filteredPosts = posts.filter(post => {
+      const tagContent = post.tags ? post.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent
+      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
+    })
+  }
+  const filteredPostsCount = filteredPosts.length
+  const totalPage = Math.ceil(filteredPostsCount / BLOG.POSTS_PER_PAGE)
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
@@ -20,7 +31,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
     return (
       <div id="container" className='w-full justify-center'>
         {/* 文章列表 */}
-        {posts.map(post => (
+        {filteredPosts.map(post => (
           <BlogPostCard key={post.id} post={post} />
         ))}
         <PaginationSimple page={page} totalPage={totalPage} />
@@ -29,4 +40,12 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
   }
 }
 
+function getSearchKey () {
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    return router.query.s
+  }
+  return null
+}
+
 export default BlogPostListPage
diff --git a/themes/Medium/components/BottomMenuBar.js b/themes/Medium/components/BottomMenuBar.js
new file mode 100644
index 00000000..75c2a9e0
--- /dev/null
+++ b/themes/Medium/components/BottomMenuBar.js
@@ -0,0 +1,23 @@
+import { faHome, faSearch } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+import React from 'react'
+
+export default function BottomMenuBar ({ className }) {
+  return (
+    <div className={'fixed 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'>
+            <FontAwesomeIcon icon={faHome} />
+          </div>
+        </Link>
+        <Link href='/search' passHref>
+          <div className='flex w-full items-center justify-center cursor-pointer'>
+            <FontAwesomeIcon icon={faSearch} />
+          </div>
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/themes/Medium/components/CategoryGroup.js b/themes/Medium/components/CategoryGroup.js
new file mode 100644
index 00000000..6a1d040b
--- /dev/null
+++ b/themes/Medium/components/CategoryGroup.js
@@ -0,0 +1,30 @@
+import { faFolder, faFolderOpen, faTag, faTh } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+import React from 'react'
+
+const CategoryGroup = ({ currentCategory, categories }) => {
+  if (!categories) {
+    return <></>
+  }
+  return <div id='category-list' className='pt-4'>
+    <div className='mb-2'><FontAwesomeIcon icon={faTh} className='mr-2' />分类</div>
+    <div className='flex flex-wrap'>
+      {Object.keys(categories).map(category => {
+        const selected = currentCategory === category
+        return <Link key={category} href={`/category/${category}`} passHref>
+          <a className={(selected
+            ? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
+            : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-600') +
+          '  text-sm items-center duration-300 cursor-pointer py-1 font-light px-2 whitespace-nowrap'}>
+            <div><FontAwesomeIcon icon={selected ? faFolderOpen : faFolder}
+                                  className={'mr-2'} />{category}({categories[category]})
+            </div>
+          </a>
+        </Link>
+      })}
+    </div>
+  </div>
+}
+
+export default CategoryGroup
diff --git a/themes/Medium/components/InfoCard.js b/themes/Medium/components/InfoCard.js
index 47d300f6..65e1e3ba 100644
--- a/themes/Medium/components/InfoCard.js
+++ b/themes/Medium/components/InfoCard.js
@@ -5,9 +5,9 @@ import React from 'react'
 import SocialButton from './SocialButton'
 
 const InfoCard = () => {
-  return <>
-    <div className='items-center justify-start font-sans '>
-        <div className='hover:scale-105 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/about') }}>
+  return <div id='info-card' className='py-4'>
+    <div className='items-center justify-center font-sans '>
+        <div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
           <Image
           alt={BLOG.AUTHOR}
           width={120}
@@ -17,11 +17,11 @@ const InfoCard = () => {
           className='rounded-full'
         />
         </div>
-        <div className='text-xl py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
-        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200'>{BLOG.BIO}</div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center'>{BLOG.AUTHOR}</div>
+        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center'>{BLOG.BIO}</div>
         <SocialButton/>
     </div>
-  </>
+  </div>
 }
 
 export default InfoCard
diff --git a/themes/Medium/components/LogoBar.js b/themes/Medium/components/LogoBar.js
index 75a23aec..f8836744 100644
--- a/themes/Medium/components/LogoBar.js
+++ b/themes/Medium/components/LogoBar.js
@@ -1,25 +1,26 @@
 import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 
 export default function LogoBar () {
-  const { locale } = useGlobal()
+  // const { locale } = useGlobal()
 
   return <div id='top-wrapper' className='w-full flex justify-center font-sans'>
-        <div className='flex mx-auto w-full items-center space-x-3 py-6 px-5'>
-            <Link href='/'>
-                 <a className='text-3xl'>{BLOG.TITLE}</a>
-            </Link>
-            <Link href='/about'>
-                <a className='text-gray-600'>{locale.NAV.ABOUT}</a>
-            </Link>
-            {BLOG.CONTACT_EMAIL && <Link href={`mailto:${BLOG.CONTACT_EMAIL}`} passHref>
-                <div className='bg-black px-2 py-1 rounded-full'>
-                <FontAwesomeIcon className='cursor-pointer text-white' icon={faEnvelope}/>
-                </div>
-            </Link>}
+    <div className='flex mx-auto w-full  justify-between '>
+      <div className='space-x-3 flex items-center'>
+        <Link href='/'>
+          <a className='text-2xl'>{BLOG.TITLE}</a>
+        </Link>
+        {/* <Link href='/about'> */}
+        {/*  <a className='text-gray-600'>{locale.NAV.ABOUT}</a> */}
+        {/* </Link> */}
+      </div>
+      {BLOG.CONTACT_EMAIL && <Link href={`mailto:${BLOG.CONTACT_EMAIL}`} passHref>
+        <div className='bg-black px-2 py-1 rounded-full'>
+          <FontAwesomeIcon className='cursor-pointer text-white' icon={faEnvelope} />
         </div>
+      </Link>}
     </div>
+  </div>
 }
diff --git a/themes/Medium/components/RevolverMaps.js b/themes/Medium/components/RevolverMaps.js
index 57d2cccc..d839d85d 100644
--- a/themes/Medium/components/RevolverMaps.js
+++ b/themes/Medium/components/RevolverMaps.js
@@ -8,7 +8,7 @@ export default function RevolverMaps () {
       changeLoad(true)
     }
   })
-  return <div id="revolvermaps"/>
+  return <div id="revolvermaps" className='p-4'/>
 }
 
 function initRevolverMaps () {
diff --git a/themes/Medium/components/SearchInput.js b/themes/Medium/components/SearchInput.js
new file mode 100644
index 00000000..53dc6637
--- /dev/null
+++ b/themes/Medium/components/SearchInput.js
@@ -0,0 +1,77 @@
+import { useRouter } from 'next/router'
+import { useImperativeHandle, useRef, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons'
+
+const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
+  const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
+  const [onLoading, setLoadingState] = useState(false)
+  const router = useRouter()
+  const searchInputRef = useRef()
+  useImperativeHandle(cRef, () => {
+    return {
+      focus: () => {
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+
+  const handleSearch = (key) => {
+    if (key && key !== '') {
+      setLoadingState(true)
+      router.push({ pathname: '/search', query: { s: key } }).then(r => {
+        setLoadingState(false)
+      })
+    } else {
+      router.push({ pathname: '/' }).then(r => {
+      })
+    }
+  }
+  const handleKeyUp = (e) => {
+    if (e.keyCode === 13) { // 回车
+      handleSearch(searchInputRef.current.value)
+    } else if (e.keyCode === 27) { // ESC
+      cleanSearch()
+    }
+  }
+  const cleanSearch = () => {
+    searchInputRef.current.value = ''
+    setSearchKey('')
+  }
+
+  const updateSearchKey = (val) => {
+    setSearchKey(val)
+  }
+
+  return <div className={'flex w-full bg-gray-100 ' + className}>
+    <input
+      ref={searchInputRef}
+      type='text'
+      className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      onKeyUp={handleKeyUp}
+      onChange={e => updateSearchKey(e.target.value)}
+      defaultValue={searchKey}
+    />
+
+    <div className='-ml-8 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'
+      onClick={() => { handleSearch(searchKey) }}>
+        <FontAwesomeIcon spin={onLoading} icon={onLoading ? faSpinner : faSearch} className='hover:text-black transform duration-200 text-gray-500 cursor-pointer' />
+    </div>
+
+    {(searchKey && searchKey.length &&
+      <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
+        <FontAwesomeIcon icon={faTimes} className='hover:text-black transform duration-200 text-gray-400 cursor-pointer' onClick={cleanSearch} />
+      </div>
+      )}
+  </div>
+}
+
+function getSearchKey () {
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    return router.query.s
+  }
+  return null
+}
+
+export default SearchInput
diff --git a/themes/Medium/components/SocialButton.js b/themes/Medium/components/SocialButton.js
index c50f5984..71f43da2 100644
--- a/themes/Medium/components/SocialButton.js
+++ b/themes/Medium/components/SocialButton.js
@@ -10,7 +10,7 @@ import React from 'react'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-52 flex-wrap flex'>
+  return <div className='w-52 flex-wrap flex justify-center'>
     <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 '>
       {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
         <FontAwesomeIcon icon={faGithub} className='transform hover:scale-125 duration-150'/>
diff --git a/themes/Medium/components/TagGroups.js b/themes/Medium/components/TagGroups.js
new file mode 100644
index 00000000..17da94b4
--- /dev/null
+++ b/themes/Medium/components/TagGroups.js
@@ -0,0 +1,29 @@
+import { faTag } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TagGroups = ({ tags, currentTag }) => {
+  if (!tags) return <></>
+  return (
+    <div id='tags-group' className='dark:border-gray-600 py-4'>
+      <div className='mb-2'><FontAwesomeIcon icon={faTag} className='mr-2' />标签</div>
+      <div className='space-y-2'>
+      {
+        tags.map(tag => {
+          const selected = tag.name === currentTag
+          return <TagItemMini key={tag.name} tag={tag} selected={selected} />
+        })
+      }
+      </div>
+    </div>
+  )
+}
+
+export default TagGroups
diff --git a/themes/Medium/components/TagItemMini.js b/themes/Medium/components/TagItemMini.js
index 9fec9e35..fb7e3013 100644
--- a/themes/Medium/components/TagItemMini.js
+++ b/themes/Medium/components/TagItemMini.js
@@ -5,7 +5,7 @@ import Link from 'next/link'
 const TagItemMini = ({ tag, selected = false }) => {
   return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`} passHref>
     <a className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
-      mr-2 py-0.5 px-1 text-xs whitespace-nowrap dark:hover:text-white
+      mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white
        ${selected
       ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
       : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}` }>
diff --git a/themes/Medium/components/TopNavBar.js b/themes/Medium/components/TopNavBar.js
new file mode 100644
index 00000000..c73223c3
--- /dev/null
+++ b/themes/Medium/components/TopNavBar.js
@@ -0,0 +1,9 @@
+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}>
+    <div className='flex w-full h-12 shadow bg-white px-5 items-center'>
+      <LogoBar />
+    </div>
+  </div>
+}

From a038100d42b4f7c147e96c7d5b836e30010f2836 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Sat, 12 Feb 2022 17:39:07 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Tabs.js                          |  2 +-
 themes/Medium/LayoutBase.js                 | 27 +++++++-------------
 themes/Medium/LayoutSlug.js                 |  6 +++--
 themes/Medium/components/BlogPostCard.js    |  2 +-
 themes/Medium/components/BottomMenuBar.js   |  4 +++
 themes/Medium/components/Catalog.js         |  3 ---
 themes/Medium/components/JumpToTopButton.js | 28 +++++++++++++++++++++
 themes/Medium/components/LeftMenuBar.js     | 16 ++++++++++++
 themes/Medium/components/TopNavBar.js       |  2 +-
 themes/Medium/config_medium.js              |  3 ++-
 10 files changed, 66 insertions(+), 27 deletions(-)
 create mode 100644 themes/Medium/components/JumpToTopButton.js
 create mode 100644 themes/Medium/components/LeftMenuBar.js

diff --git a/components/Tabs.js b/components/Tabs.js
index 6f7497ba..39308d29 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -37,7 +37,7 @@ const Tabs = ({ className, children }) => {
                    onClick={() => {
                      tabClickHandle(index)
                    }}>
-          {item?.key}
+          {item?.key || 'undefined_key'}
         </li>
       })}
     </ul>
diff --git a/themes/Medium/LayoutBase.js b/themes/Medium/LayoutBase.js
index cc57b3da..3cd0f7bb 100644
--- a/themes/Medium/LayoutBase.js
+++ b/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>
   )
 }
diff --git a/themes/Medium/LayoutSlug.js b/themes/Medium/LayoutSlug.js
index 14419392..015e6d29 100644
--- a/themes/Medium/LayoutSlug.js
+++ b/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>
diff --git a/themes/Medium/components/BlogPostCard.js b/themes/Medium/components/BlogPostCard.js
index a9e1ee5c..76ab1933 100644
--- a/themes/Medium/components/BlogPostCard.js
+++ b/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>
diff --git a/themes/Medium/components/BottomMenuBar.js b/themes/Medium/components/BottomMenuBar.js
index 75c2a9e0..6e8e0c71 100644
--- a/themes/Medium/components/BottomMenuBar.js
+++ b/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>
   )
diff --git a/themes/Medium/components/Catalog.js b/themes/Medium/components/Catalog.js
index d82bee28..9ae655a1 100644
--- a/themes/Medium/components/Catalog.js
+++ b/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>
diff --git a/themes/Medium/components/JumpToTopButton.js b/themes/Medium/components/JumpToTopButton.js
new file mode 100644
index 00000000..7126309c
--- /dev/null
+++ b/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
diff --git a/themes/Medium/components/LeftMenuBar.js b/themes/Medium/components/LeftMenuBar.js
new file mode 100644
index 00000000..680855c2
--- /dev/null
+++ b/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>
+}
diff --git a/themes/Medium/components/TopNavBar.js b/themes/Medium/components/TopNavBar.js
index c73223c3..b08dc88b 100644
--- a/themes/Medium/components/TopNavBar.js
+++ b/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>
diff --git a/themes/Medium/config_medium.js b/themes/Medium/config_medium.js
index 4d13d756..e61b1982 100644
--- a/themes/Medium/config_medium.js
+++ b/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