重新排版优化

2026-05-14 15:09:22 +00:00 · 2021-10-14 17:36:39 +08:00
parent 6f5e1b3f39
commit a07894bd46
20 changed files with 184 additions and 168 deletions
--- a/components/BlogPost.js
+++ b/components/BlogPost.js
@@ -1,10 +1,10 @@
 import BLOG from '@/blog.config'
-import TagItem from '@/components/TagItem'
+import TagItemMini from '@/components/TagItemMini'

 const BlogPost = ({ post }) => {
  return (
    <article key={post.id}
-             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'>
+             className='inline-block border dark:border-gray-600 my-2 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'>
@@ -14,15 +14,14 @@ const BlogPost = ({ post }) => {

        <div className='px-8 py-6'>
          <a href={`${BLOG.path}/article/${post.slug}`}
-             className='block my-3 text-2xl leading-tight font-semibold text-black dark:text-gray-100 hover:underline'>
+             className='block my-3 text-2xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>
            {post.title}
          </a>
+          <div className='flex flex-nowrap'>
+            {post.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}
+            <span className='mt-2 mx-2 text-gray-500 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
+          </div>
          <p className='mt-2 text-gray-500 dark:text-gray-300 text-sm'>{post.summary}</p>
-            <div className='flex flex-nowrap leading-8 py-2'>
-              {post.tags.map(tag => (
-                <TagItem key={tag} tag={tag} />
-              ))}
-            </div>
        </div>
    </article>
  )
--- a/components/BlogPostMini.js
+++ b/components/BlogPostMini.js
@@ -9,13 +9,12 @@ const BlogPostMini = ({ post }) => {
            <img className='sm:w-40 w-full object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
        )}

-        <main className='px-2 py-1'>
+        <main className='px-2 overflow-x-hidden'>
          <a href={`${BLOG.path}/article/${post.slug}`}
-             className='block my-3 leading-tight font-semibold text-black dark:text-gray-200 hover:underline'>
+             className='block my-3 leading-tight font-semibold text-black dark:text-gray-200 hover:underline whitespace-nowrap'>
            {post.title}
          </a>
-          {/* <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{post.summary}</p> */}
-          {/* <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{BLOG.link}/article/{post.slug}</p> */}
+           <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{post.summary}</p>
        </main>
    </a>
  )
--- a/components/Container.js
+++ b/components/Container.js
@@ -11,14 +11,20 @@ const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) =
  const scrollTrigger = useCallback(throttle(() => {
    const scrollS = window.scrollY
    const nav = document.querySelector('#sticky-nav')
+    const sidebar = document.querySelector('#sidebar')
    const tagsBar = document.querySelector('#tags-bar')
+    const rightToc = document.querySelector('#right-toc')
    if (scrollS >= windowTop && scrollS > 10) {
      nav && nav.classList.add('-mt-16')
      tagsBar && tagsBar.classList.add('-mt-32')
+      sidebar && sidebar.classList.replace('top-20', 'top-2')
+      rightToc && rightToc.classList.replace('top-16', 'top-0')
      windowTop = scrollS
    } else {
      nav && nav.classList.remove('-mt-16')
      tagsBar && tagsBar.classList.remove('-mt-32')
+      sidebar && sidebar.classList.replace('top-2', 'top-20')
+      rightToc && rightToc.classList.replace('top-0', 'top-16')
      windowTop = scrollS
    }
  }, 200))
--- a/components/Drawer.js
+++ b/components/Drawer.js
@@ -24,7 +24,6 @@ const Drawer = ({ post, currentTag, cRef, tags }) => {
  const handleMenuClick = () => {
    switchShowDrawer(!showDrawer)
  }
-  console.log(post)
  return <div>
    <div className='fixed top-0 left-0 z-30 h-full'>
      <div
--- a/components/DrawerRight.js
+++ b/components/DrawerRight.js
@@ -20,7 +20,6 @@ const DrawerRight = ({ post, cRef }) => {
    switchShowDrawer(!showDrawer)
  }

-  console.log(post)
  return <div>
    <div className='fixed top-0 right-0 z-30 h-full'>
      <div
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -5,9 +5,9 @@ const Footer = ({ fullWidth = true }) => {
  const y = d.getFullYear()
  return (
    <footer
-      className='flex-shrink-0 justify-center text-center m-auto w-full mx-auto text-gray-500 dark:text-gray-400 text-sm text-gray-400 p-6'
+      className='bg-gray-800 dark:bg-black dark:border-gray-900 border-t flex-shrink-0 justify-center text-center m-auto w-full text-gray-400 text-sm p-6'
    >
-      <span className='fa fa-copyright leading-6'> {` ${y}`} <span> <a href='https://www.tangly1024.com/article/about' className='underline font-bold'>tangly1024.com</a>. Powered by <a href='https://notion.so' className='underline font-bold'>Notion</a> & <a href='https://vercel.com' className='underline font-bold'>Vercel</a>.</span> </span>
+      <span className='fa fa-copyright leading-6'> {` ${y}`} <span> <a href='https://www.tangly1024.com/article/about' className='underline font-bold text-gray-100'>tangly1024.com</a>. Powered by <a href='https://notion.so' className='underline font-bold text-gray-100'>Notion</a> & <a href='https://vercel.com' className='underline font-bold text-gray-100'>Vercel</a>.</span> </span>
      <br />
      <span className='fa fa-shield leading-6 mr-2'> <a href='https://beian.miit.gov.cn/' className='ml-1 font-bold'>闽ICP备20010331号</a></span>

--- a/components/InfoCard.js
+++ b/components/InfoCard.js
@@ -6,7 +6,7 @@ import Router from 'next/router'
 const InfoCard = () => {
  return <>
    <div className='flex justify-center text-center'>
-      <div className='mx-auto py-4 leading-8'>
+      <div className='pb-6 mx-auto leading-8'>
        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}>
          <Image
          alt={BLOG.author}
@@ -18,7 +18,6 @@ const InfoCard = () => {
        </div>
        <h1 className='text-2xl dark:text-white py-2'>{BLOG.author}</h1>
        <h2 className='text-sm text-gray-500 dark:text-gray-400'>{BLOG.description}</h2>
-        <h2 className='text-sm fa fa-map-marker text-gray-500 dark:text-gray-400'>&nbsp;Fuzhou,China</h2>
      </div>
    </div>
  </>
--- a/components/JumpToTop.js
+++ b/components/JumpToTop.js
@@ -33,16 +33,17 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {

  return (
    <div
-      className={(show ? 'animate__fade InUp' : 'animate__fadeOutUp') + ' animate__animated animate__faster shadow-lg'}>
+      className={(show ? 'animate__fade InUp' : 'animate__fadeOutUp') + '  rounded-full animate__animated animate__faster shadow-xl'}>
      <div
-        className='border dark:border-gray-500 dark:bg-gray-600 bg-white cursor-pointer hover:shadow-2xl'
+        style={{ backgroundColor: 'rgb(56, 144, 255)' }}
+        className='rounded-full dark:bg-gray-600 bg-white cursor-pointer'
        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
        {showPercent && (
-          <div className='absolute bg-white dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
-            {percent}%
-          </div>
+        <div style={{ backgroundColor: 'rgb(56, 144, 255)' }} className='text-gray-100 absolute rounded-full dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
+          {percent}%
+        </div>
        )}
-        <a className='dark:text-gray-200 fa fa-arrow-up p-4 transform hover:scale-150 duration-200'
+        <a className='text-gray-100 fa fa-arrow-up p-4 transform hover:scale-150 duration-200'
           title={locale.POST.TOP} />
      </div>
    </div>
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -4,7 +4,7 @@ import { useLocale } from '@/lib/locale'
 const MenuButtonGroup = ({ allowCollapse = false }) => {
  const locale = useLocale()
  const links = [
-    // { id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
    { id: 1, icon: 'fa-info-circle', name: locale.NAV.ABOUT, to: '/article/about', show: true },
    { id: 7, icon: 'fa-github', name: 'Github', to: 'https://github.com/tangly1024', show: true },
    { id: 5, icon: 'fa-weibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
--- a/components/RewardButton.js
+++ b/components/RewardButton.js
@@ -40,12 +40,12 @@ const RewardButton = () => {
      <div
        className={
          (popoverShow ? 'animate__animated animate__fadeIn ' : 'hidden ') +
-          ' animate__faster border-0 transform block z-50 font-normal'
+          ' animate__faster transform block z-50 font-normal'
        }
        ref={popoverRef}
      >
        <div
-          className='border animate__animated animate__fadeIn hover:shadow-2xl duration-200 my-5 px-5 py-6 w-96 grid justify-center bg-white dark:bg-black dark:text-gray-200'>
+          className='animate__animated animate__fadeIn hover:shadow-2xl duration-200 my-5 px-5 py-6 w-96 grid justify-center bg-white dark:bg-black dark:text-gray-200'>
         <span>
            <img className='md:w-72 m-auto' src='/reward_code.jpg' />
          </span>
--- a/components/ShareBar.js
+++ b/components/ShareBar.js
@@ -16,7 +16,7 @@ const ShareBar = ({ post }) => {

  const openPopover = () => {
    createPopper(btnRef.current, popoverRef.current, {
-      placement: 'left'
+      placement: 'top'
    })
    setQrCodeShow(true)
  }
@@ -31,20 +31,20 @@ const ShareBar = ({ post }) => {

  return <>
    <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-visible'>
+      className='py-2 text-gray-500 text-center space-x-2 flex inline-block my-1 dark:text-gray-200 overflow-visible'>
      <div className='text-3xl cursor-pointer'>
-        <a className='fa fa-facebook-square'
+        <a className='fa fa-facebook-square hover:text-red-600'
           href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} />
      </div>
      <div className='text-3xl cursor-pointer'>
-        <a className='fa fa-twitter-square' target='_blank' rel='noreferrer'
+        <a className='fa fa-twitter-square hover:text-red-600' target='_blank' rel='noreferrer'
           href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} />
      </div>
      <div className='text-3xl cursor-pointer'>
-        <a className='fa fa-telegram' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} />
+        <a className='fa fa-telegram hover:text-red-600' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} />
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='fa fa-wechat' ref={btnRef}
+        <a className='fa fa-wechat hover:text-red-600' ref={btnRef}
           onMouseEnter={() => {
             openPopover()
           }}
@@ -66,19 +66,19 @@ const ShareBar = ({ post }) => {
        </a>
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='fa fa-weibo' target='_blank' rel='noreferrer'
+        <a className='fa fa-weibo hover:text-red-600' target='_blank' rel='noreferrer'
           href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} />
      </div>
      <div className='cursor-pointer text-2xl'>
-        <a className='fa fa-qq' target='_blank' rel='noreferrer'
+        <a className='fa fa-qq hover:text-red-600' 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 className='cursor-pointer text-2xl'>
-        <a className='fa fa-star' target='_blank' rel='noreferrer'
+        <a className='fa fa-star hover:text-red-600' 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 className='cursor-pointer text-2xl'>
-        <a className='fa fa-link' onClick={copyUrl} />
+        <a className='fa fa-link hover:text-red-600' onClick={copyUrl} />
      </div>
    </div>
  </>
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -6,20 +6,26 @@ import TagList from '@/components/TagList'
 const SideBar = ({ tags, currentTag, post }) => {
  return <aside className='z-10 dark:border-gray-500 border-gray-200 bg-white hidden md:block'>
    <div className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
-      <div className='hidden md:block sticky top-16'>
-
+      <div id='sidebar' className='hidden md:block sticky top-20 duration-500'>
        <InfoCard/>
+        <hr className='dark:border-gray-700'/>
        <div className={post ? 'hidden xl:block' : 'block'}>
          <MenuButtonGroup allowCollapse={true}/>
        </div>

        {tags && (
-          <div className='p-4'>
+          <div>
            {/* 标签云  */}
-            <section>
-              <strong className='text-xl text-gray-600 dark:text-gray-400'>标签</strong>
-              <TagList tags={tags} currentTag={currentTag} />
+            <hr className='dark:border-gray-700'/>
+            <section className='py-3 px-5 text-gray-600 dark:text-gray-400 dark:hover:bg-black duration-100 flex flex-nowrap align-middle'>
+              <div className='my-auto w-5 text-xl justify-center flex'>
+                <i className='fa fa-tags' />
+              </div>
+              <div className='ml-4 w-32'>标签</div>
            </section>
+            <div className='px-5'>
+              <TagList tags={tags} currentTag={currentTag} />
+            </div>
          </div>
        )}

--- 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 rounded-lg dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
+      <p className="hover:shadow hover:border-gray-600 rounded-lg dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
      dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-black">
        {tag}
      </p>
--- a/components/TagItemMini.js
+++ b/components/TagItemMini.js
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+const TagItemMini = ({ tag, selected = false, count }) => (
+  <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag)}`}>
+    <span
+      className={`cursor-pointer inline-block border hover:bg-gray-300 duration-200 mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap
+                   dark:text-gray-300 dark:hover:bg-gray-800 ${selected ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800' : 'bg-gray-200 text-gray-600 dark:bg-gray-600 dark:border-gray-600'
+      }`}
+    >
+                  <a> {tag + (count ? `(${count})` : '')} </a>
+                </span>
+  </Link>
+)
+
+export default TagItemMini
--- a/components/TagList.js
+++ b/components/TagList.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import TagItemMini from '@/components/TagItemMini'

 /**
 * 标签组
@@ -11,20 +11,10 @@ const TagList = ({ tags, currentTag }) => {
  if (!tags) return <></>
  return (
    <div id='tags-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-52 pt-2'>
-        {Object.keys(tags).map(key => {
-          const selected = key === currentTag
+        {Object.keys(tags).map(tag => {
+          const selected = tag === currentTag
          return (
-            <Link key={key} href={selected ? '/' : `/tag/${encodeURIComponent(key)}`}>
-              <span
-                className={`cursor-pointer inline-block border hover:bg-gray-300 duration-200 mr-1 my-1 p-1 font-medium font-light text-xs whitespace-nowrap
-                 dark:text-gray-300 dark:hover:bg-gray-800 ${selected ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800' : 'bg-gray-200 text-gray-600 dark:bg-gray-600 dark:border-gray-600'
-                }`}
-              >
-                <a>
-                  {`${key} (${tags[key]})`}
-                </a>
-              </span>
-            </Link>
+            <TagItemMini tag={tag} selected={selected} count={tags[tag]}/>
          )
        })}
    </div>
--- a/components/TocBar.js
+++ b/components/TocBar.js
@@ -50,7 +50,7 @@ const TocBar = ({ toc }) => {
    setActiveSection(currentSectionId)
  }, throttleMs))

-  return <div className='bg-white dark:bg-gray-800 pb-10 min-h-screen'>
+  return <div>
    <nav className='text-gray-500 dark:text-gray-400 underline overflow-auto scroll-hidden py-2'>
      {toc.map((tocItem) => {
        const id = uuidToId(tocItem.id)
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -16,7 +16,7 @@ const TopNav = ({ tags, currentTag, post }) => {
    <DrawerRight post={post} cRef={drawerRight}/>

    {/* 导航栏 */}
-    <div id='sticky-nav' className='xl:mt-0 transform 2xl:mt-0 duration-500 bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
+    <div id='sticky-nav' className='transform duration-500 bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
      <div className='text-sm m-auto w-full flex flex-row justify-between items-center px-4 py-2 shadow-md'>
        {/* 左侧LOGO */}
        <div className='flex ml-12'>
@@ -41,9 +41,9 @@ const TopNav = ({ tags, currentTag, post }) => {
        {/* 右侧功能 */}
        <div className='flex flex-nowrap space-x-1'>
          <DarkModeButton />
-          <div className='z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
+          {post && <div className='block xl:hidden z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
            <i className='fa p-2.5 hover:scale-125 transform duration-200 fa-bookmark' onClick={() => { drawerRight.current.handleMenuClick() }}/>
-          </div>
+          </div>}
        </div>
      </div>
    </div>
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -10,13 +10,13 @@ import Image from 'next/image'
 import RewardButton from '@/components/RewardButton'
 import BlogPostMini from '@/components/BlogPostMini'
 import { useRouter } from 'next/router'
-import ShareButton from '@/components/ShareButton'
 import JumpToTop from '@/components/JumpToTop'
 import SideBar from '@/components/SideBar'
 import Footer from '@/components/Footer'
 import Container from '@/components/Container'
 import TocBar from '@/components/TocBar'
 import TopNav from '@/components/TopNav'
+import ShareBar from '@/components/ShareBar'

 const mapPageUrl = id => {
  return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -43,7 +43,7 @@ const ArticleLayout = ({
    <Container meta={meta} tags={tags}>

      {/* live2d 看板娘 */}
-      <script async src='https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js' />
+      {/* <script async src='https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js' /> */}

      <Progress targetRef={targetRef} />

@@ -55,113 +55,116 @@ const ArticleLayout = ({
        <SideBar tags={tags} post={post} />

        {/* 主体区块 */}
-        <main className='bg-gray-100 w-full dark:bg-gray-800' ref={targetRef} >
+        <main className='bg-gray-100 w-full dark:bg-gray-800' ref={targetRef}>
          {/* 中央区域 wrapper */}
-            <header
-              className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 animate__fadeIn animate__animated'>
-              {/* 封面图 */}
-              {post.page_cover && post.page_cover.length > 1 && (
-                <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
-                     src={post.page_cover} alt={post.title} />
-              )}
-            </header>
+          <header
+            className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 animate__fadeIn animate__animated'>
+            {/* 封面图 */}
+            {post.page_cover && post.page_cover.length > 1 && (
+              <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
+                   src={post.page_cover} alt={post.title} />
+            )}
+          </header>

-            <article className='mb-10 overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
-              {/* 文章标题 */}
-              <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
-                {post.title}
-              </h1>
+          <article
+            className='overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
+            {/* 文章标题 */}
+            <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
+              {post.title}
+            </h1>

-              {/* 文章信息 */}
-              <div className='justify-between flex flex-wrap bg-gray-50 p-2 dark:bg-gray-700 dark:text-white'>
-                <div className='flex-nowrap flex'>
+            {/* 文章信息 */}
+            <div className='justify-between flex flex-wrap bg-gray-50 p-2 dark:bg-gray-700 dark:text-white'>
+              <div className='flex-nowrap flex'>

-                  {post.slug !== 'about' && (<>
-                    <a
-                      className='hidden md:block duration-200 px-1' href='/article/about'
-                    >
-                        <Image alt={BLOG.author} width={33} height={33} src='/avatar.svg'
-                                  className='rounded-full cursor-pointer transform hover:scale-125 duration-200' />
-                    </a>
-                  </>)}
-                  {post.tags && (
-                    <div className='flex flex-nowrap leading-8 p-1'>
-                      {post.tags.map(tag => (
-                        <TagItem key={tag} tag={tag} />
-                      ))}
-                    </div>
-                  )}
-
-                  {post.type[0] !== 'Page' && (
-                    <div className='flex items-start text-gray-500 dark:text-gray-400 leading-10'>
-                      {formatDate(
-                        post?.date?.start_date || post.createdTime,
-                        BLOG.lang
-                      )}
-                    </div>
-                  )}
-                </div>
-
-                {/* 不蒜子 */}
-                <div id='busuanzi_container_page_pv' className='hidden'>
-                  <a href='https://analytics.google.com/analytics/web/#/p273013569/reports/reportinghub'
-                     className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'>
-                    &nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span>
+                {post.slug !== 'about' && (<>
+                  <a
+                    className='hidden md:block duration-200 px-1' href='/article/about'
+                  >
+                    <Image alt={BLOG.author} width={33} height={33} src='/avatar.svg'
+                           className='rounded-full cursor-pointer transform hover:scale-125 duration-200' />
                  </a>
-                </div>
+                </>)}
+                {post.tags && (
+                  <div className='flex flex-nowrap leading-8 p-1'>
+                    {post.tags.map(tag => (
+                      <TagItem key={tag} tag={tag} />
+                    ))}
+                  </div>
+                )}
+
+                {post.type[0] !== 'Page' && (
+                  <div className='flex items-start text-gray-500 dark:text-gray-400 leading-10'>
+                    {formatDate(
+                      post?.date?.start_date || post.createdTime,
+                      BLOG.lang
+                    )}
+                  </div>
+                )}
              </div>

-              {/* Notion文章主体 */}
-              {blockMap && (
-                <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
-                                components={{
-                                  equation: Equation,
-                                  code: Code,
-                                  collectionRow: CollectionRow,
-                                  collection: Collection
-                                }}
-                />
-              )}
-
-              <div className='flex justify-center pt-5'>
-                <RewardButton />
+              {/* 不蒜子 */}
+              <div id='busuanzi_container_page_pv' className='hidden'>
+                <a href='https://analytics.google.com/analytics/web/#/p273013569/reports/reportinghub'
+                   className='fa fa-eye text-gray-500 text-sm leading-none py-1 px-2'>
+                  &nbsp;<span id='busuanzi_value_page_pv' className='leading-6'></span>
+                </a>
              </div>
-              <p className='flex justify-center py-5 dark:text-gray-200'>
-                 - 💖 本 文 结 束 😚 感 谢 您 的 阅 读  💖 -
-              </p>
-
-              {/* 版权声明 */}
-              <section
-                className='overflow-auto dark:bg-gray-700 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
-                <ul>
-                  <li><strong>本文作者：</strong>{BLOG.author}</li>
-                  <li><strong>本文链接：</strong> <a href={url}>{url}</a> 《{post.title}》</li>
-                  <li><strong>版权声明：</strong> 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
-                </ul>
-              </section>
-
-              <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 lg:flex-nowrap lg:space-x-10 justify-between py-2'>
-                  <BlogPostMini post={prev} />
-                  <BlogPostMini post={next} />
-                </div>
-              </div>
-              {/* 评论互动 */}
-              <Comment frontMatter={post} />
-            </article>
-
-            <div className='w-full border-t px-10 max-w-5xl mx-auto'>
-              <Footer/>
            </div>

+            {/* Notion文章主体 */}
+            {blockMap && (
+              <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
+                              components={{
+                                equation: Equation,
+                                code: Code,
+                                collectionRow: CollectionRow,
+                                collection: Collection
+                              }}
+              />
+            )}
+
+            <div className='flex justify-center pt-5'>
+              <RewardButton />
+            </div>
+            <p className='flex justify-center py-5 dark:text-gray-200'>
+              - 💖 本 文 结 束 😚 感 谢 您 的 阅 读 💖 -
+            </p>
+
+            {/* 版权声明 */}
+            <section
+              className='overflow-auto dark:bg-gray-700 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
+              <ul>
+                <li><strong>本文作者：</strong>{BLOG.author}</li>
+                <li><strong>本文链接：</strong> <a href={url}>{url}</a> 《{post.title}》</li>
+                <li><strong>版权声明：</strong> 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
+              </ul>
+            </section>
+
+            <section className='flex'>
+              <div className='text-gray-800 my-5 dark:text-gray-300 font-bold my-5 mr-2'>分享本文&nbsp;</div>
+              <ShareBar post={post} />
+            </section>
+
+            <div className='text-gray-800 my-5 dark:text-gray-300'>
+              <div className='mt-4 font-bold'>继续阅读</div>
+              <div className='flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
+                <BlogPostMini post={prev} />
+                <BlogPostMini post={next} />
+              </div>
+            </div>
+            {/* 评论互动 */}
+            <Comment frontMatter={post} />
+          </article>
+
        </main>

-        {/* 目录 */}
-        <aside className='dark:bg-gray-800'>
-          <section className='xl:static xl:block hidden top-0 right-0 fixed h-full w-52 dark:bg-gray-800 duration-500'>
-            <div className='sticky top-16'>
-              <div className='border-t dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-black dark:text-white py-6 px-6'>
+        {/* 右侧目录 */}
+        <aside className='dark:bg-gray-800 bg-white'>
+          <section className='h-full xl:static xl:block hidden top-0 right-0 fixed h-full w-52 dark:bg-gray-800 duration-500'>
+            <div id='right-toc' className='sticky top-16 duration-500'>
+              <div
+                className='border-t dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-gray-900 dark:text-white py-6 px-6'>
                文章目录
              </div>
              <TocBar toc={post.toc} />
@@ -174,13 +177,15 @@ const ArticleLayout = ({
          className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
          <div className='flex-wrap'>
            {/* 分享按钮 */}
-            <ShareButton post={post} />
+            {/* <ShareButton post={post} /> */}
            {/* 跳回顶部 */}
-            <JumpToTop targetRef={targetRef}/>
+            <JumpToTop targetRef={targetRef} />
          </div>
        </div>
      </div>

+      <Footer />
+
    </Container>
  )
 }
--- a/layouts/IndexLayout.js
+++ b/layouts/IndexLayout.js
@@ -82,9 +82,6 @@ const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {

              <Pagination page={page} showNext={showNext} />
            </div>
-            <div className='w-full border-t '>
-              <Footer/>
-            </div>
          </main>
        </div>
      </div>
@@ -92,9 +89,11 @@ const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
      {/* 下方菜单组 */}
      <div className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
        <div className='flex-wrap'>
-          <JumpToTop targetRef={targetRef} showPercent={false}/>
+          <JumpToTop targetRef={targetRef} showPercent={false} />
        </div>
      </div>
+
+      <Footer />
    </Container>
  )
 }
--- a/layouts/PageLayout.js
+++ b/layouts/PageLayout.js
@@ -83,9 +83,6 @@ const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {

              <Pagination page={page} showNext={showNext} />
            </div>
-            <div className='w-full border-t '>
-              <Footer />
-            </div>
          </main>

        </div>
@@ -98,6 +95,8 @@ const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
          <JumpToTop targetRef={targetRef} showPercent={false} />
        </div>
      </div>
+
+      <Footer />
    </Container>
  )
 }