From 4354f3650b3f924ddc5c8592fa1a2c4cc1ed1065 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 28 Sep 2021 17:36:45 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20=E6=A0=B7=E5=BC=8F=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E7=BB=9F=E4=B8=80=EF=BC=8C=E5=B8=83=E5=B1=80=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPost.js           |  4 +--
 components/BlogPostMini.js       |  2 +-
 components/Comment.js            |  4 +--
 components/DarkModeButton.js     |  8 ++---
 components/Footer.js             | 10 ------
 components/RightAside.js         | 60 +++++++++++++++++++++++++++----
 components/RightWidget.js        |  8 ++---
 components/ShareBar.js           | 46 ++++++++++++------------
 components/ShareButton.js        |  8 ++---
 components/SideBar.js            | 61 ++++++++++++++++++--------------
 components/TagItem.js            |  2 +-
 components/{Toc.js => TocBar.js} | 52 +++++++++++++--------------
 components/TopJumper.js          |  2 +-
 layouts/ArticleLayout.js         | 20 +++++------
 layouts/DefaultLayout.js         | 20 ++++++-----
 15 files changed, 174 insertions(+), 133 deletions(-)
 rename components/{Toc.js => TocBar.js} (70%)

diff --git a/components/BlogPost.js b/components/BlogPost.js
index f8cd86be..e66580ed 100644
--- a/components/BlogPost.js
+++ b/components/BlogPost.js
@@ -4,11 +4,11 @@ import TagItem from '@/components/TagItem'
 const BlogPost = ({ post }) => {
   return (
     <article key={post.id}
-             className='inline-block border dark:border-gray-600 my-2 md:mx-2 w-full md:max-w-md duration-200 hover:shadow-2xl rounded-3xl bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
+             className='inline-block border dark:border-gray-600 my-2 shadow-card w-full md:max-w-md bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <a href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
-            <img className='w-full max-h-60 object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
+            <img className='w-full max-h-60 object-cover cursor-pointer transform hover:scale-110 duration-500' src={post.page_cover} alt={post.title} />
           </a>
         )}
 
diff --git a/components/BlogPostMini.js b/components/BlogPostMini.js
index 9b155ba2..9955c5b8 100644
--- a/components/BlogPostMini.js
+++ b/components/BlogPostMini.js
@@ -3,7 +3,7 @@ import BLOG from '@/blog.config'
 const BlogPostMini = ({ post }) => {
   return (
     <a key={post.id} href={`${BLOG.path}/article/${post.slug}`}
-             className='md:flex w-full border my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-600'>
+             className='md:flex w-full border dark:border-gray-500 my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-600'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
             <img className='md:w-40 w-full max-h-32 object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
diff --git a/components/Comment.js b/components/Comment.js
index 421738a7..3bdfa55c 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -24,8 +24,8 @@ const CusdisComponent = dynamic(
 const Comment = ({ frontMatter }) => {
   const router = useRouter()
 
-  return <div className='comment'>
-    <div className='font-bold text-gray-800 pt-2 pb-4 dark:text-gray-300'>留下评论</div>
+  return <div className='comment text-gray-800 dark:text-gray-300'>
+    <div className='font-bold pt-2 pb-4 '>留下评论</div>
 
     {/* 评论插件 */}
     {BLOG.comment.provider === 'gitalk' && (
diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index 27bbd75e..313c50b9 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -8,10 +8,8 @@ const DarkModeButton = () => {
     changeTheme(newTheme)
     localStorage.setItem('theme', newTheme)
   }
-  return <div onClick={handleChangeDarkMode}
-        className=' justify-center align-middle font-bold text-xl cursor-pointer hover:scale-125 transform duration-200
-                dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
-     <i className={'fa px-1 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o')} />
-   </div>
+  return <div className='p-1 border dark:border-gray-500 my-4 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black'>
+    <i className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o') } onClick={handleChangeDarkMode} />
+  </div>
 }
 export default DarkModeButton
diff --git a/components/Footer.js b/components/Footer.js
index 2e53a3db..e17bc537 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -10,16 +10,6 @@ const Footer = ({ fullWidth = true }) => {
     <footer
       className='p-6 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400'
     >
-      <div className='py-2'>
-        <span className='text-xl border-b-2'>菜单</span>
-        <ul className='py-5 leading-8'>
-          <li><a className='fa fa-info hover:underline' href='/article/about' id='about'><span
-            className='ml-2'>关于本站</span></a></li>
-          <li><a className='fa fa-rss hover:underline' href='/feed' target='_blank' id='feed'><span
-            className='ml-2'>RSS订阅</span></a></li>
-        </ul>
-      </div>
-
       <div className='py-2'>
         <span className='text-xl border-b-2'>联系我</span>
         <div className='py-4'>
diff --git a/components/RightAside.js b/components/RightAside.js
index 584e2b3a..a9ec5f91 100644
--- a/components/RightAside.js
+++ b/components/RightAside.js
@@ -1,14 +1,60 @@
-import React from 'react'
-import Toc from '@/components/Toc'
+import React, { useState } from 'react'
+import TocBar from '@/components/TocBar'
+import throttle from 'lodash.throttle'
+import ShareButton from '@/components/ShareButton'
+import TopJumper from '@/components/TopJumper'
 
-const RightAside = ({ toc }) => {
+const RightAside = ({ toc, post }) => {
   // 无目录就直接返回空
   if (toc.length < 1) return <></>
+  // 监听滚动事件
+  React.useEffect(() => {
+    window.addEventListener('resize', resizeWindowHideToc)
+    return () => {
+      window.removeEventListener('resize', resizeWindowHideToc)
+    }
+  }, [])
 
-  return <aside className='bg-gray-100 dark:bg-gray-800 px-5 hidden lg:block py-5 hover:shadow-2xl duration-200'>
-      <div className='sticky top-8 w-52 overflow-x-auto'>
-      <Toc toc={toc}/>
+  const resizeWindowHideToc = throttle(() => {
+    if (window.innerWidth > 1300) {
+      changeHideAside(false)
+    } else {
+      changeHideAside(true)
+    }
+  }, 500)
+  const [hideAside, changeHideAside] = useState(false)
+
+  return <aside className='bg-white dark:bg-gray-800 py-5'>
+    <div className={(hideAside ? 'w-0' : 'w-52') + ' duration-500'} />
+
+    {/* 上方菜单组 */}
+    <div
+      className={(hideAside ? 'right-0' : 'right-52') + ' space-x-2 fixed md:fixed flex top-0 px-4 py-1 duration-500'}>
+      {/* 目录按钮 */}
+      <div
+        className='border dark:border-gray-500 my-3 bg-white dark:bg-gray-600 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black p-1'>
+        <i className='fa fa-book p-2.5 hover:scale-125 transform duration-200'
+           onClick={() => changeHideAside(!hideAside)} />
       </div>
-    </aside>
+    </div>
+
+    {/* 下方菜单组 */}
+    <div
+      className={(hideAside ? 'right-0' : 'right-52') + ' space-x-2 fixed flex bottom-10 px-4 py-1 duration-500'}>
+      <div className='flex-wrap'>
+        {/* 分享按钮 */}
+        <ShareButton post={post} />
+        {/* 跳回顶部 */}
+        <TopJumper />
+      </div>
+    </div>
+
+    {/* 目录 */}
+    <div
+      className={(hideAside ? '-mr-52' : 'mr-0 shadow-xl xl:shadow-none') + ' h-full hover:shadow-2xl bg-white w-52 right-0 dark:bg-gray-800 duration-500 fixed top-0 pt-8'}>
+      <TocBar toc={toc} />
+    </div>
+
+  </aside>
 }
 export default RightAside
diff --git a/components/RightWidget.js b/components/RightWidget.js
index 60df35a5..b239efe1 100644
--- a/components/RightWidget.js
+++ b/components/RightWidget.js
@@ -3,11 +3,9 @@ import TopJumper from '@/components/TopJumper'
 import ShareButton from '@/components/ShareButton'
 
 const RightWidget = ({ post }) => {
-  return <div className='fixed right-0 lg:mr-72 bottom-10 flex justify-center'>
-<div className='flex-wrap'>
-  <ShareButton post={post}/>
-  <TopJumper/>
-</div>
+  return <div className='flex-wrap'>
+    <ShareButton post={post} />
+    <TopJumper />
   </div>
 }
 export default RightWidget
diff --git a/components/ShareBar.js b/components/ShareBar.js
index e8a73f63..1b0f380e 100644
--- a/components/ShareBar.js
+++ b/components/ShareBar.js
@@ -30,25 +30,27 @@ const ShareBar = ({ post }) => {
   }
 
   return <>
-    <div className='text-gray-500 flex-col text-center space-y-2 w-12 border my-1 bg-white dark:bg-gray-800 dark:text-white overflow-hidden'>
-      <div>
-        分享
-      </div>
-      <div>
-        <a className='fa fa-facebook-square cursor-pointer text-3xl'
+    <div
+      className='dark:border-gray-500 py-2 text-gray-500 flex-col text-center space-y-2 w-12 border my-1 bg-white dark:bg-gray-800 dark:text-white overflow-hidden'>
+      <div className='text-3xl cursor-pointer'>
+        <a className='fa fa-facebook-square'
            href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} />
       </div>
-      <div>
-        <a className='fa fa-twitter-square text-3xl' target='_blank' rel='noreferrer'
+      <div className='text-3xl cursor-pointer'>
+        <a className='fa fa-twitter-square' target='_blank' rel='noreferrer'
            href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} />
       </div>
-      <div>
-        <a className='fa fa-telegram text-3xl' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} />
+      <div className='text-3xl cursor-pointer'>
+        <a className='fa fa-telegram' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} />
       </div>
-      <div>
-        <a className='fa fa-wechat cursor-pointer text-3xl' ref={btnRef}
-           onMouseEnter={() => { openPopover() }}
-           onMouseLeave={() => { closePopover() }}>
+      <div className='cursor-pointer text-2xl'>
+        <a className='fa fa-wechat' ref={btnRef}
+           onMouseEnter={() => {
+             openPopover()
+           }}
+           onMouseLeave={() => {
+             closePopover()
+           }}>
           <div ref={popoverRef}
                className={(qrCodeShow ? 'animate__animated animate__fadeIn ' : 'hidden') + ' text-center py-2 bg-white'}>
             <div className='p-2 bg-white border-0 duration-200 transform block z-50 font-normal shadow-xl'>
@@ -63,20 +65,20 @@ const ShareBar = ({ post }) => {
           </div>
         </a>
       </div>
-      <div>
-        <a className='fa fa-weibo text-3xl' target='_blank' rel='noreferrer'
+      <div className='cursor-pointer text-2xl'>
+        <a className='fa fa-weibo' target='_blank' rel='noreferrer'
            href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} />
       </div>
-      <div>
-        <a className='fa fa-qq text-3xl' target='_blank' rel='noreferrer'
+      <div className='cursor-pointer text-2xl'>
+        <a className='fa fa-qq' target='_blank' rel='noreferrer'
            href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} />
       </div>
-      <div>
-        <a className='fa fa-star text-3xl' target='_blank' rel='noreferrer'
+      <div className='cursor-pointer text-2xl'>
+        <a className='fa fa-star' target='_blank' rel='noreferrer'
            href={`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${shareUrl}&sharesource=qzone&title=${post.title}&summary=${post.summary}`} />
       </div>
-      <div>
-        <a className='fa fa-link cursor-pointer text-3xl' onClick={() => { copyUrl() }} />
+      <div className='cursor-pointer text-2xl'>
+        <a className='fa fa-link' onClick={copyUrl} />
       </div>
     </div>
   </>
diff --git a/components/ShareButton.js b/components/ShareButton.js
index fae1dec9..641ad0f4 100644
--- a/components/ShareButton.js
+++ b/components/ShareButton.js
@@ -20,18 +20,18 @@ const ShareButton = ({ post }) => {
     <div className='my-2'
          onMouseEnter={() => { openPopover() }}
          onMouseLeave={() => { closePopover() }}>
-      <div className=' overflow-hidden '>
+      <div className='overflow-hidden'>
         <div
           className={
-            (popoverShow ? ' block ' : ' hidden ') +
-            ' duration-200 transform transition z-50 font-normal'
+            (popoverShow ? ' h-96 ' : ' h-0 ') +
+            ' duration-200 ease-in-out transform z-50 font-normal'
           }
         >
           <ShareBar post={post}/>
         </div>
         <div
           ref={btnRef}
-          className='border dark:border-gray-600 dark:bg-black bg-white px-4 py-3 cursor-pointer text-md hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow'>
+          className='border dark:border-gray-500 dark:bg-gray-600 bg-white px-4 py-3 cursor-pointer text-md transform duration-200'>
           <div className='dark:text-gray-200 fa fa-share-alt' title='share' />
         </div>
       </div>
diff --git a/components/SideBar.js b/components/SideBar.js
index 11232c85..826f477a 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -21,14 +21,14 @@ const SideBar = ({ tags, currentTag }) => {
 
   // 监听resize事件
   useEffect(() => {
-    window.addEventListener('resize', resizeWindowHideToc)
-    resizeWindowHideToc()
+    window.addEventListener('resize', collapseSideBar)
+    collapseSideBar()
     return () => {
-      window.removeEventListener('resize', resizeWindowHideToc)
+      window.removeEventListener('resize', collapseSideBar)
     }
   }, [])
 
-  const resizeWindowHideToc = throttle(() => {
+  const collapseSideBar = throttle(() => {
     if (window.innerWidth > 1300) {
       changeCollapse(false)
     } else {
@@ -37,16 +37,14 @@ const SideBar = ({ tags, currentTag }) => {
   }, 500)
   const [collapse, changeCollapse] = useState(true)
 
-  return <aside
-    className={(collapse ? '' : '') + ' z-10 duration-500 ease-in-out'}
-  >
+  return <aside className='z-10' >
 
-    <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + '  hover:shadow-2xl dark:bg-gray-800 bg-white sidebar h-full w-72 duration-500 ease-in-out'}>
+    <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' hover:shadow-2xl dark:bg-gray-800 bg-white sidebar h-full w-60 duration-500 ease-in-out'}>
 
-      <section className='mx-5 pt-6 pb-2'>
+      <section className='mx-5 pt-6 pb-2 border-b'>
         <Link href='/'>
           <a
-            className='text-3xl hover:shadow-2xl text-black dark:bg-gray-900 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
+            className='text-3xl hover:shadow-2xl text-black dark:bg-gray-900 dark:text-gray-300 font-semibold dark:hover:bg-gray-600 hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
         </Link>
       </section>
 
@@ -57,13 +55,13 @@ const SideBar = ({ tags, currentTag }) => {
 
       {/* 搜索框 */}
       <div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'>
-        <div className='hover:block hidden fixed left-0 top-0 w-screen h-screen bg-black z-20 opacity-40'/>
+        <div className='hover:block hidden fixed left-0 top-0 w-screen h-screen bg-black z-20 opacity-40' />
         <input
           type='text'
           placeholder={
             currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`
           }
-          className='hover:shadow-xl duration-200 pl-2 rounded w-full py-2 border dark:border-gray-600 bg-white text-black dark:bg-gray-700 dark:text-white'
+          className='hover:shadow-inner duration-200 pl-2 rounded w-full py-2 border dark:border-gray-600 bg-white text-black dark:bg-gray-700 dark:text-white'
           onKeyUp={handleKeyUp}
           onChange={e => setSearchValue(e.target.value)}
           defaultValue={router.query.s ?? ''}
@@ -71,28 +69,39 @@ const SideBar = ({ tags, currentTag }) => {
         <i className='fa fa-search text-gray-400 -ml-8' />
       </div>
 
-      {/* <hr className='my-5' /> */}
+      <div className='p-6'>
+        <div className='mb-3'>
+          <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>标签</span>
+        </div>
+        <Tags tags={tags} currentTag={currentTag} />
+      </div>
 
       <div className='p-6'>
-        <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>标签</span>
-        <Tags tags={tags} currentTag={currentTag} />
+        <div className='mb-3'>
+          <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>菜单</span>
+        </div>
+        <ul className='leading-8 dark:text-gray-400'>
+          <li><a className='fa fa-info hover:underline' href='/article/about' id='about'><span
+            className='ml-2'>关于本站</span></a></li>
+          <li><a className='fa fa-rss hover:underline' href='/feed' target='_blank' id='feed'><span
+            className='ml-2'>RSS订阅</span></a></li>
+        </ul>
       </div>
 
       <Footer />
     </div>
 
-    <div className={(collapse ? 'left-0' : 'left-72') + ' space-x-2 fixed md:fixed flex top-0 px-4 py-1 duration-500 ease-in-out'}>
-
-      <div className='my-4 bg-gray-100 dark:bg-gray-800 bg-opacity-50 p-1 rounded'>
-        <div className=' justify-center align-middle font-bold text-xl cursor-pointer hover:scale-125 transform duration-200
-               dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
-          <i className='fa fa-bars px-1' onClick={() => changeCollapse(!collapse)}/>
-        </div>
+    {/* 顶部菜单按钮 */}
+    <div
+      className={(collapse ? 'left-0' : 'left-60') + ' fixed flex-wrap top-0 px-4 py-1 duration-500 ease-in-out'}>
+      {/* 菜单折叠 */}
+      <div className='p-1 border dark:border-gray-500 my-3 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
+      dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black'>
+        <i className='fa fa-bars p-2.5 hover:scale-125 transform duration-200' onClick={() => changeCollapse(!collapse)} />
       </div>
-      <div className='my-4 bg-gray-100 dark:bg-gray-800 bg-opacity-50 p-1 rounded'>
-        <DarkModeButton />
-      </div>
-     </div>
+      {/* 夜间模式 */}
+      <DarkModeButton />
+    </div>
   </aside>
 }
 export default SideBar
diff --git a/components/TagItem.js b/components/TagItem.js
index 73e30244..fa0aa8dd 100644
--- a/components/TagItem.js
+++ b/components/TagItem.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
 const TagItem = ({ tag }) => (
   <Link href={`/tag/${encodeURIComponent(tag)}`}>
     <a>
-      <p className="hover:shadow hover:scale-105 hover:bg-blue-500 bg-gray-200 hover:text-white duration-200 mr-1 px-2 py-1 leading-none text-sm
+      <p className="hover:shadow hover:scale-105 hover:bg-gray-500 bg-gray-200 hover:text-white duration-200 mr-1 px-2 py-1 leading-none text-sm
       dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-black">
         {tag}
       </p>
diff --git a/components/Toc.js b/components/TocBar.js
similarity index 70%
rename from components/Toc.js
rename to components/TocBar.js
index 68291a94..5a289b89 100644
--- a/components/Toc.js
+++ b/components/TocBar.js
@@ -6,7 +6,7 @@ import { cs } from 'react-notion-x'
 /**
  * 目录组件
  */
-const Toc = ({ toc }) => {
+const TocBar = ({ toc }) => {
   // 无目录就直接返回空
   if (toc.length < 1) return <></>
 
@@ -47,25 +47,24 @@ const Toc = ({ toc }) => {
     setActiveSection(currentSectionId)
   }, throttleMs)
 
-  return (
-    <>
-      <div className='text-center font-bold text-black dark:text-white'>
-        文章目录
-      </div>
-      <nav className='notion-table-of-contents text-gray-500 dark:text-gray-400 underline'>
-        {toc.map((tocItem) => {
-          const id = uuidToId(tocItem.id)
-          return (
-            <a
-              key={id}
-              href={`#${id}`}
-              className={cs(
-                'notion-table-of-contents-item',
-                `notion-table-of-contents-item-indent-level-${tocItem.indentLevel}`,
-                activeSection === id &&
-                ' font-bold text-black dark:text-white'
-              )}
-            >
+  return <>
+    <div className='text-center font-bold text-black dark:text-white border-b pb-2 mb-2 mx-4'>
+      文章目录
+    </div>
+    <nav className='notion-table-of-contents text-gray-500 dark:text-gray-400 underline overflow-x-auto'>
+      {toc.map((tocItem) => {
+        const id = uuidToId(tocItem.id)
+        return (
+          <a
+            key={id}
+            href={`#${id}`}
+            className={cs(
+              'notion-table-of-contents-item px-5',
+              `notion-table-of-contents-item-indent-level-${tocItem.indentLevel}`,
+              activeSection === id &&
+              ' font-bold text-black dark:text-white bg-gray-100 dark:bg-gray-500'
+            )}
+          >
                       <span
                         className='notion-table-of-contents-item-body'
                         style={{
@@ -75,12 +74,11 @@ const Toc = ({ toc }) => {
                       >
                         {tocItem.text}
                       </span>
-            </a>
-          )
-        })}
-      </nav>
-    </>
-  )
+          </a>
+        )
+      })}
+    </nav>
+  </>
 }
 
-export default Toc
+export default TocBar
diff --git a/components/TopJumper.js b/components/TopJumper.js
index b8562822..3c2b52a9 100644
--- a/components/TopJumper.js
+++ b/components/TopJumper.js
@@ -27,7 +27,7 @@ const TopJumper = () => {
     <div
       className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' animate__animated animate__faster'}>
       <div
-        className='border dark:border-gray-600 dark:bg-black bg-white cursor-pointer hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow-2xl hover:scale-125'
+        className='border dark:border-gray-500 dark:bg-gray-600 bg-white cursor-pointer transform duration-200 hover:shadow-2xl hover:scale-125'
         onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
         <a className='dark:text-gray-200 fa fa-arrow-up p-4' title={locale.POST.TOP}/>
       </div>
diff --git a/layouts/ArticleLayout.js b/layouts/ArticleLayout.js
index 073b395f..b971d175 100644
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -47,17 +47,17 @@ const ArticleLayout = ({
 
       {/* <TopNav tags={tags} /> */}
 
+      {/* Wrapper */}
       <div className='flex justify-between'>
 
         <SideBar tags={tags} />
 
         {/* 主体区块 */}
         <main className='bg-gray-100 dark:bg-black w-full'>
-          {/* 卡牌水平边距wrapper */}
-          {/* 文章卡牌 */}
-          <div className='bg-white dark:border-gray-700 dark:bg-gray-700 duration-200'>
+          {/* 中央区域 wrapper */}
+          <div>
 
-            <header className='md:flex-shrink-0 overflow-y-hidden shadow-sm animate__fadeIn animate__animated'>
+            <header className='border-l border-t border-r mx-auto max-w-5xl mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
               {/* 封面图 */}
               {frontMatter.page_cover && frontMatter.page_cover.length > 1 && (
                 <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
@@ -67,7 +67,7 @@ const ArticleLayout = ({
 
             <article
               ref={targetRef}
-              className='overflow-x-auto px-10 py-10 max-w-4xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
+              className='border-l border-b border-r mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
               {/* 文章标题 */}
               <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
                 {frontMatter.title}
@@ -140,7 +140,7 @@ const ArticleLayout = ({
 
               <div className='text-gray-800 my-5 dark:text-gray-300'>
                 <div className='mt-4 my-2 font-bold'>继续阅读</div>
-                <div className='flex flex-wrap justify-between py-2'>
+                <div className='flex flex-wrap lg:flex-nowrap lg:space-x-2 justify-between py-2'>
                   {/* <Link href={prev.slug}> */}
                   {/* <div>上一篇:<a className='py-1 underline cursor-pointer ml-1'>{prev.title}</a></div> */}
                   {/* </Link> */}
@@ -161,16 +161,12 @@ const ArticleLayout = ({
             </article>
 
           </div>
-
-          <RightWidget post={frontMatter} />
+          {/* <RightWidget post={frontMatter} /> */}
           {/* <ShareButton post={frontMatter}/> */}
           {/* <TopJumper /> */}
-
         </main>
-
         {/* 右侧内容 */}
-        <RightAside toc={frontMatter.toc} />
-
+        <RightAside toc={frontMatter.toc} post={frontMatter} />
       </div>
 
     </div>
diff --git a/layouts/DefaultLayout.js b/layouts/DefaultLayout.js
index 40900e1c..dbe21327 100644
--- a/layouts/DefaultLayout.js
+++ b/layouts/DefaultLayout.js
@@ -44,12 +44,12 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
     showNext = page * BLOG.postsPerPage < totalPosts
   }
 
-  // 首页隐藏看板娘
   useEffect(() => {
-    const ref = document.getElementById('waifu')
-    if (ref) {
-      ref.remove()
-    }
+    // 首页隐藏看板娘
+    // const ref = document.getElementById('waifu')
+    // if (ref) {
+    //   ref.remove()
+    // }
     window.addEventListener('resize', resizeWindowHideToc)
     resizeWindowHideToc()
     return () => {
@@ -58,7 +58,11 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
   }, [])
 
   const resizeWindowHideToc = throttle(() => {
-    if (window.innerWidth > 1300) {
+    if (window.innerWidth > 2500) {
+      changeColumn(5)
+    } else if (window.innerWidth > 1800) {
+      changeColumn(4)
+    } else if (window.innerWidth > 1300) {
       changeColumn(3)
     } else if (window.innerWidth < 768) {
       changeColumn(1)
@@ -80,7 +84,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
       <div className={`${BLOG.font} flex bg-gray-100 dark:bg-black min-h-screen`}>
         <SideBar tags={tags} currentTag={currentTag} />
 
-        <main className='md:pb-10 md:px-24 p-5 flex-grow'>
+        <main className='md:px-24 p-5 flex-grow'>
           {(!page || page === 1) && (
             <div className='py-5' />
           )
@@ -110,7 +114,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
           {/* 文章列表 */}
           <div className='mx-auto animate__animated animate__fadeIn'>
             {/* <div className='col-4 grid md:grid-cols-2 grid-cols-1 gap-6'> */}
-            <div style={{ columnCount: column, columnGap: '2rem' }}>
+            <div style={{ columnCount: column }} className=''>
               {!postsToShow.length && (
                 <p className='text-gray-500 dark:text-gray-300 textc'>No posts found.</p>
               )}