From e3423f97686713e570a2d31993e9fbb912c4536a Mon Sep 17 00:00:00 2001
From: tangly <tlyong1992@hotmail.com>
Date: Sun, 7 Nov 2021 09:21:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8D=9A=E5=AE=A2=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=E8=BE=B9=E8=B7=9D=EF=BC=9B=20=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E7=99=BE=E5=88=86=E6=AF=94=E8=B4=9F=E6=95=B0=E5=BC=82?=
 =?UTF-8?q?=E5=B8=B8=EF=BC=9B=20=E6=A0=87=E7=AD=BE=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E4=B8=8D=E6=8D=A2=E8=A1=8C=EF=BC=9B=20=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=89=B2=E4=B8=8D=E5=BD=93=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostListScroll.js | 2 +-
 components/JumpToTopButton.js    | 8 +++++---
 components/TagItem.js            | 2 +-
 components/Toc.js                | 4 ++--
 pages/article/[slug].js          | 8 ++++----
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index 5d8d7a29..423ee6c0 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -51,7 +51,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty currentSearch={currentSearch}/>
   } else {
-    return <div id='post-list-wrapper' className='mt-20 mx-2 md:mx-20' ref={targetRef}>
+    return <div id='post-list-wrapper' className='mt-20 mx-2 pt-10 md:mx-20' ref={targetRef}>
 
       {currentCategory && (
         <div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index 69db5db8..4a949db0 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -18,12 +18,14 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
     const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0
     const scrollY = window.pageYOffset
     const fullHeight = clientHeight - window.outerHeight
-    const shouldShow = scrollY > 100
+    let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
+    if (per > 100) per = 100
+    const shouldShow = scrollY > 100 && per > 0
+
+
     if (shouldShow !== show) {
       switchShow(shouldShow)
     }
-    let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
-    if (per > 100) per = 100
     changePercent(per)
   }
   useEffect(() => {
diff --git a/components/TagItem.js b/components/TagItem.js
index 88499c53..8f2091fb 100644
--- a/components/TagItem.js
+++ b/components/TagItem.js
@@ -4,7 +4,7 @@ const TagItem = ({ tag }) => (
   <Link href={`/tag/${encodeURIComponent(tag)}`}>
     <div className="cursor-pointer hover:shadow hover:border-gray-600 rounded-md 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">
-     <div>  <i className='fa fa-tag mr-1 '/> {tag}</div>
+     <div className='whitespace-nowrap'>  <i className='fa fa-tag mr-1 '/> {tag}</div>
     </div>
   </Link>
 )
diff --git a/components/Toc.js b/components/Toc.js
index c850949f..9ff24e14 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -50,9 +50,9 @@ const Toc = ({ toc }) => {
     setActiveSection(currentSectionId)
   }, throttleMs))
 
-  return <div className='dark:bg-gray-600 min-h-screen'>
+  return <div className='dark:bg-gray-800 min-h-screen'>
     <div
-      className=' 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'>
+      className='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>
     <nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto scroll-hidden p-2'>
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 9934c5c8..302417e2 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -62,12 +62,12 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
           {post.title}
         </h1>
 
-        <h2 className='text-gray-500 my-5 dark:text-gray-400 animate__animated animate__fadeIn'>
+        <h2 className='text-gray-500 text-xs my-5 dark:text-gray-400 animate__animated animate__fadeIn'>
           {post.summary}
         </h2>
 
         {/* 文章作者等关联信息 */}
-        <div className='justify-between flex flex-wrap bg-gray-50 p-2 dark:bg-gray-800 dark:text-white'>
+        <div className='justify-between flex flex-wrap bg-gray-100 p-2 dark:bg-gray-900 dark:text-white'>
           <div className='flex-nowrap flex'>
             <div className='py-2 opacity-50'>
               发表于：
@@ -136,8 +136,8 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
         <section className='md:flex md:justify-between'>
 
           {post.tags && (
-            <div className='flex flex-nowrap leading-8 p-1 py-4'>
-              <div className='hidden md:block  dark:text-gray-300'>标签：</div>
+            <div className='flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
+              <div className='hidden md:block dark:text-gray-300'>标签：</div>
               {post.tags.map(tag => (
                 <TagItem key={tag} tag={tag} />
               ))}