From c7bf2562396dda4d2e8095bbdb342c9950fd2bc5 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 24 Dec 2021 12:38:34 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E5=8A=A0=E4=B8=80=E7=82=B9=E7=82=B9?=
 =?UTF-8?q?=E9=98=B4=E5=BD=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Analytics.js     |  4 ++--
 components/ArticleDetail.js |  2 +-
 components/BlogPostCard.js  |  2 +-
 components/SideAreaLeft.js  | 29 +++++++++--------------------
 components/SideAreaRight.js | 10 +++++-----
 5 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/components/Analytics.js b/components/Analytics.js
index 10197e48..9edcf75e 100644
--- a/components/Analytics.js
+++ b/components/Analytics.js
@@ -10,7 +10,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 export default function Analytics ({ postCount }) {
   const { locale } = useGlobal()
 
-  return <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-4'>
+  return <>
     <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div>
     <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
         <span className='px-1 '>
@@ -20,5 +20,5 @@ export default function Analytics ({ postCount }) {
         <span className='px-1 busuanzi_container_site_pv hidden'>
         | <strong className='pl-1 busuanzi_value_site_pv font-medium'></strong>{locale.COMMON.VIEWS}</span>
       </div>
-</section>
+</>
 }
diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index ed02248f..9ad3e3a7 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -39,7 +39,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   return (<>
       <div id="article-wrapper" ref={targetRef} className="flex-grow mt-14 md:mt-0 max-w-5xl mx-auto w-screen md:w-full ">
           <article itemScope itemType="https://schema.org/Movie"
-            className="shadow-md hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
+            className="shadow hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
           >
             <header>
                 {post.type && !post.type.includes('Page') && post?.page_cover && (
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 68c4341e..049fe5ec 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -8,7 +8,7 @@ import TagItemMini from './TagItemMini'
 
 const BlogPostCard = ({ post, tags }) => {
   return (
-    <div key={post.id} className='flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-xl duration-300
+    <div key={post.id} className='shadow flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-xl duration-300
        w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
 
       <div className='p-8 flex flex-col justify-between w-full'>
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index 0e402c89..aeeb0bfe 100644
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -24,13 +24,13 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
   const postCount = posts?.length || 0
   return <>
 
-    <div className={(!post ? 'sticky top-8 ' : ' ') + ' w-60'}>
-      <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-6'>
+    <section className={(!post ? 'sticky top-8 ' : ' ') + ' w-60'}>
+      <section className='shadow hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-6'>
         <InfoCard postCount={postCount} />
       </section>
 
       {/* 菜单 */}
-      <section className='hidden lg:block mb-5 py-4  bg-white dark:bg-gray-800  hover:shadow-xl duration-200'>
+      <section className='shadow hidden lg:block mb-5 py-4  bg-white dark:bg-gray-800  hover:shadow-xl duration-200'>
         <MenuButtonGroup allowCollapse={true} />
         <div className='px-5 pt-2'>
            <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
@@ -38,32 +38,21 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
       </section>
 
       {/* 统计 */}
-      <Analytics postCount={postCount}/>
+      <section className='shadow hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-4'>
+        <Analytics postCount={postCount}/>
+      </section>
 
-      {/* 分类  */}
-      {/* { categories && ( */}
-      {/*  <section className='  py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'> */}
-      {/*    <div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'> */}
-      {/*      <div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div> */}
-      {/*      <Link href='/category' passHref> */}
-      {/*        <a className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'> */}
-      {/*          {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} /> */}
-      {/*        </a> */}
-      {/*      </Link> */}
-      {/*    </div> */}
-      {/*    <CategoryGroup currentCategory={currentCategory} categories={categories} /> */}
-      {/*  </section> */}
-      {/* )} */}
-    </div>
+    </section>
 
     {showToc && (
-      <section className='sticky top-8 pb-20  bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
+      <section className='shadow sticky top-8 pb-20  bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
         <div className='border-b text-center text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
           {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
         <Toc toc={post.toc} targetRef={targetRef} />
       </section>
     )}
+
  </>
 }
 export default SideAreaLeft
diff --git a/components/SideAreaRight.js b/components/SideAreaRight.js
index 1bdbf3fb..b2cafa35 100644
--- a/components/SideAreaRight.js
+++ b/components/SideAreaRight.js
@@ -49,7 +49,7 @@ const SideAreaRight = ({
         </div>
       </section> */}
 
-      <section className=" mb-5 py-4 px-2 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+      <section className="shadow mb-5 py-4 px-2 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
         {/* 展示广告  */}
         <ins
           className="adsbygoogle"
@@ -76,7 +76,7 @@ const SideAreaRight = ({
 
         {/* 分类  */}
         {categories && (
-          <section className=' py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
+          <section className='shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
             <div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
               <div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
               <Link href='/category' passHref>
@@ -91,7 +91,7 @@ const SideAreaRight = ({
 
         {/* 最新文章 */}
         {posts && (
-          <section className=" py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+          <section className="shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
             <div className="text-sm pb-2 px-5  flex flex-nowrap justify-between">
               <div className="font-light text-gray-600  dark:text-gray-200">
                 <FontAwesomeIcon icon={faArchive} className="mr-2" />
@@ -103,13 +103,13 @@ const SideAreaRight = ({
           </section>
         )}
 
-        {/* <section className=" py-4 px-5 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+        {/* <section className="shadow py-4 px-5 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
           <SearchInput currentTag={currentTag} currentSearch={currentSearch}/>
         </section> */}
 
         {/* 标签云  */}
          {tags && (
-          <section className=" py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+          <section className="shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
             <div className="text-sm pb-1 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200">
               <div className="text-gray-600 dark:text-gray-200">
                 <FontAwesomeIcon icon={faTags} className="mr-2" />