From 88d1e0742accb429ad89a64408c67c21f7bd0352 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 2 Dec 2021 17:43:18 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=A0=B7=E5=BC=8F=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js                |  2 +-
 components/BlogPostArchive.js |  2 +-
 components/BlogPostCard.js    | 36 +++++++++++++++++++----------------
 components/MenuButtonGroup.js |  3 ++-
 components/RecommendPosts.js  |  5 ++++-
 components/SideBar.js         | 36 +++++++++++++++++------------------
 components/Toc.js             |  7 +++----
 components/TocDrawer.js       |  7 ++++---
 components/TocDrawerButton.js |  9 ++++++---
 lib/lang/en-US.js             |  3 ++-
 lib/lang/zh-CN.js             |  3 ++-
 pages/404.js                  |  3 ++-
 12 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 2b8432be..5890e0ac 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -9,7 +9,7 @@ const BLOG = {
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   defaultImgCover: 'https://avatars.githubusercontent.com/u/15920488', // default image cover
   appearance: 'auto', // ['light', 'dark', 'auto'],
-  font: 'font-serif', // ['font-sans', 'font-serif', 'font-mono']
+  font: 'font-sans', // ['font-sans', 'font-serif', 'font-mono']
   lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc
   darkBackground: '#111827', // use hex value, don't forget '#'
   path: '', // leave this empty unless you want to deploy in a folder
diff --git a/components/BlogPostArchive.js b/components/BlogPostArchive.js
index c37b2722..e4ddf742 100644
--- a/components/BlogPostArchive.js
+++ b/components/BlogPostArchive.js
@@ -14,7 +14,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
     return <></>
   } else {
     return <div className='py-2' ref={targetRef}>
-      <div className='py-2 text-xl dark:text-white'>{archiveTitle}</div>
+      <div className='py-2 text-3xl dark:text-white'>{archiveTitle}</div>
       {/* 文章列表 */}
       <ul className='flex flex-wrap space-y-1'>
         {posts.map(post => (
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 4be89176..2ddc2bb7 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -6,8 +6,8 @@ import React from 'react'
 const BlogPostCard = ({ post, tags }) => {
   return (
     <div key={post.id}
-         className='animate__animated animate__fadeIn animate__faster xl:flex shadow-card border dark:border-gray-600 mb-6 w-full bg-white bg-opacity-80 dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
-      {/*  封面图 */}
+         className='animate__animated animate__fadeIn animate__faster xl:flex shadow-card border dark:border-gray-600 mb-6 w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 overflow-hidden'>
+
       {post.page_cover && post.page_cover.length > 1 && (
         <Link href={`${BLOG.path}/article/${post.slug}`}>
           <img className='w-full max-h-72 xl:w-80 object-cover cursor-pointer transform hover:scale-110 duration-500'
@@ -15,24 +15,28 @@ const BlogPostCard = ({ post, tags }) => {
         </Link>
       )}
 
-      <div className='px-8 py-6 w-full'>
+      <div className='px-4 py-4 w-full'>
+
+        <div>
+          <Link href={`/category/${post.category}`}>
+            <span className='cursor-pointer dark:text-gray-200 text-gray-400 text-sm py-1.5 mr-1 hover:underline hover:text-blue-500 transform'>
+              <i className='fa fa-folder-open-o mr-1' />{post.category}
+            </span>
+          </Link>
+          <span className='mx-1 dark:text-gray-400'>|</span>
+          <span className='mt-2 mx-2 text-gray-400 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
+        </div>
+
         <Link href={`${BLOG.path}/article/${post.slug}`}>
-          <div
-            className='cursor-pointer my-3 text-xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>{post.title}</div>
+          <div className='cursor-pointer my-3 text-lg leading-tight font-bold text-black dark:text-gray-100 hover:underline'>
+            {post.title}
+          </div>
         </Link>
-        <p className='mt-2 text-gray-500 dark:text-gray-400 text-sm'>{post.summary}</p>
+
+        <p className='mt-2 text-gray-400 dark:text-gray-400 text-sm'>{post.summary}</p>
 
         <div className='flex md:flex-nowrap flex-wrap md:justify-start justify-between pt-5'>
-          <div className='flex whitespace-nowrap'>
-            <Link href={`/category/${post.category}`}>
-              <div
-                className='cursor-pointer dark:text-gray-200 text-gray-500 text-sm py-1.5 mr-1 hover:underline hover:scale-105 transform duration-200'>
-                <i
-                  className='fa fa-folder-open-o mr-1' />{post.category}</div>
-            </Link>
-            <span className='mt-2 mx-2 text-gray-500 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
-          </div>
-          <div className='flex ml-1'> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
+          <div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
         </div>
       </div>
     </div>
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 07345f7e..7f825083 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -24,7 +24,8 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         if (link.show) {
           const selected = router.asPath === link.to
           return <Link key={link.id + link.icon} title={link.to} href={link.to} >
-            <a className={(selected ? 'bg-gray-200 dark:bg-black dark:text-white text-black ' : '') + ' py-2 px-5 hover:text-black hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle'} >
+            <a className={'py-2 px-5 hover:text-black dark:hover:text-white hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle' +
+              (selected ? 'bg-gray-200 dark:bg-black dark:text-white text-black ' : '') } >
               <div className='my-auto w-5 text-2xl justify-center flex'>
                 <i className={'fa ' + link.icon} />
               </div>
diff --git a/components/RecommendPosts.js b/components/RecommendPosts.js
index 1bcd8195..834271fc 100644
--- a/components/RecommendPosts.js
+++ b/components/RecommendPosts.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 洗牌乱序：从数组的最后位置开始，从前面随机一个位置，对两个数进行交换，直到循环完毕
@@ -34,8 +35,10 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {
     filteredPosts = filteredPosts.slice(0, 5)
   }
 
+  const { locale } = useGlobal()
+
   return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 mb-2  border-l-4 border-yellow-500'>
-    <h2 className='ml-2 mb-2 font-bold'>相关推荐</h2>
+    <h2 className='mb-2 font-bold text-xl'>{locale.COMMON.RELATE_POSTS}</h2>
     <ul className='list-disc px-5'>
       {filteredPosts.map(post => (
         <li className='py-1' key={post.id} ><Link href={`/article/${post.slug}`}><a className='cursor-pointer hover:underline'>{post.title}</a></Link></li>
diff --git a/components/SideBar.js b/components/SideBar.js
index bfb232d3..9dd327ba 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -4,10 +4,10 @@ import InfoCard from '@/components/InfoCard'
 import TagGroups from '@/components/TagGroups'
 import LatestPostsGroup from '@/components/LatestPostsGroup'
 import CategoryGroup from '@/components/CategoryGroup'
-import Toc from '@/components/Toc'
 import SearchInput from '@/components/SearchInput'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
+import Toc from '@/components/Toc'
 
 /**
  * 侧边栏
@@ -41,21 +41,6 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
         <hr className='dark:border-gray-700 my-2' />
       </section>
 
-      {/* 分类  */}
-      {categories && (
-        <section className='mt-2'>
-          <div className='text-sm font-bold py-2 px-5  flex flex-nowrap justify-between'>
-            <div className='text-black font-bold dark:text-gray-200'><i className='fa fa-th-list mr-4'/>{locale.COMMON.CATEGORY}</div>
-              <Link href='/category'>
-                <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
-                  {locale.COMMON.MORE} <i className='fa fa-angle-double-right'/>
-                </div>
-              </Link>
-          </div>
-          <CategoryGroup currentCategory={currentCategory} categories={categories} />
-        </section>
-      )}
-
       {/* 最新文章 */}
       {posts && (
         <section className='mt-3'>
@@ -71,6 +56,21 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
         </section>
       )}
 
+      {/* 分类  */}
+      {categories && (
+        <section className='mt-2'>
+          <div className='text-sm font-bold py-2 px-5  flex flex-nowrap justify-between'>
+            <div className='text-black font-bold dark:text-gray-200'><i className='fa fa-th-list mr-4'/>{locale.COMMON.CATEGORY}</div>
+              <Link href='/category'>
+                <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+                  {locale.COMMON.MORE} <i className='fa fa-angle-double-right'/>
+                </div>
+              </Link>
+          </div>
+          <CategoryGroup currentCategory={currentCategory} categories={categories} />
+        </section>
+      )}
+
       {/* 标签云  */}
       {tags && (
         <section className='mt-3'>
@@ -92,14 +92,14 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
     {post && (
       <section id='left-toc' className='sticky top-0 bg-white dark:bg-gray-800'>
         <div
-          className='border-b text-2xl bg-white font-bold text-black dark:bg-gray-700 dark:text-white py-6 px-6'>
+          className='border-b text-2xl bg-white font-bold 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} />
       </section>
     )}
 
-     <section id='blank' className='bg-white dark:bg-gray-800 py-20'/>
+    <section id='blank' className='bg-white dark:bg-gray-800 py-20'/>
 
   </aside>
 }
diff --git a/components/Toc.js b/components/Toc.js
index 15aedbc3..92280e14 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -51,19 +51,18 @@ const Toc = ({ toc }) => {
   }, throttleMs))
 
   return <div className='dark:bg-gray-800 bg-white'>
-    <nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto scroll-hidden p-2'>
+    <nav className='text-gray-500 dark:text-gray-400 overflow-y-auto scroll-hidden p-2'>
       {toc.map((tocItem) => {
         const id = uuidToId(tocItem.id)
         return (
           <a
             key={id}
             href={`#${id}`}
-            className={`notion-table-of-contents-item px-5 
+            className={`notion-table-of-contents-item px-5 duration-300 transform
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} 
-            ${activeSection === id && ' font-bold text-black dark:text-white animate-pulse'}`}
+            ${activeSection === id && ' font-bold text-blue-400 dark:text-white'}`}
           >
                       <span
-                        className='notion-table-of-contents-item-body'
                         style={{
                           display: 'inline-block',
                           marginLeft: tocItem.indentLevel * 16
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index e137d126..9d6d3281 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -25,10 +25,11 @@ const TocDrawer = ({ post, cRef }) => {
     <div className='fixed top-0 right-0 z-40'>
       {/* 侧边菜单 */}
       <div
-        className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') + ' border dark:border-gray-800 bg-white dark:bg-gray-700 shadow-xl animate__animated animate__faster max-h-96 w-72 duration-200 fixed right-4 top-16 rounded-xl overflow-y-auto'}>
+        className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') + ' border ' +
+        ' dark:border-gray-800 bg-white dark:bg-gray-700 shadow-xl animate__animated animate__faster max-h-96 ' +
+        ' w-60 duration-200 fixed right-4 top-16 rounded-xl overflow-y-auto'}>
           {post && <>
-            <div
-              className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
+            <div className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
               {locale.COMMON.TABLE_OF_CONTENTS}
             </div>
             <Toc toc={post.toc}/>
diff --git a/components/TocDrawerButton.js b/components/TocDrawerButton.js
index bb300176..85907d23 100644
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 点击召唤目录抽屉
@@ -8,14 +9,16 @@ import React from 'react'
  * @constructor
  */
 const TocDrawerButton = (props) => {
+  const { locale } = useGlobal()
+
   return (
-    <div id='toc-drawer-button' className='right-0 fixed flex top-24 mr-4 duration-500 z-40 hidden' onClick={props.onClick}>
+    <div id='toc-drawer-button' className='right-0 fixed flex top-40 mr-4 duration-500 z-40 hidden' onClick={props.onClick}>
       <div className='transform hover:scale-105 duration-200 '>
         <div style={{ borderRadius: '28px' }}
           className={'animate__fadeInUp bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-xl'}>
           <div className='text-center dark:text-gray-100'>
-            <div className='w-10 text-xl' title='目录' ><i className='fa fa-book'/> </div>
-            <div className='text-xs'>目录</div>
+            <div className='w-10 text-xl' title={locale.COMMON.TABLE_OF_CONTENTS} ><i className='fa fa-book'/> </div>
+            <div className='text-xs'>{locale.COMMON.TABLE_OF_CONTENTS}</div>
           </div>
         </div>
       </div>
diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
index f9d619bc..69609b76 100644
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -15,7 +15,8 @@ export default {
     SHARE: 'Share',
     SCAN_QR_CODE: 'Scan QRCode',
     URL_COPIED: 'URL has copied!',
-    TABLE_OF_CONTENTS: 'Table of Contents'
+    TABLE_OF_CONTENTS: 'Table of Contents',
+    RELATE_POSTS: 'Relate Posts'
   },
   PAGINATION: {
     PREV: 'Prev',
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
index 33445f81..dd5369ff 100644
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -16,7 +16,8 @@ export default {
     SHARE: '分享',
     SCAN_QR_CODE: '扫一扫二维码',
     URL_COPIED: '链接已复制！',
-    TABLE_OF_CONTENTS: '目录'
+    TABLE_OF_CONTENTS: '目录',
+    RELATE_POSTS: '相关文章'
   },
   PAGINATION: {
     PREV: '上一页',
diff --git a/pages/404.js b/pages/404.js
index ade77625..766f30c8 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -28,7 +28,8 @@ export default function Custom404 () {
       <div>
         <h1 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><i className='fa fa-spinner mr-2 animate-spin'/>404</h1>
         <div className='inline-block text-left h-32 leading-10 align-middle'>
-          <h2 className='m-0 p-0'>页面找不到了，3秒后返回首页</h2></div>
+          <h2 className='m-0 p-0'>页面无法加载，即将返回首页</h2>
+        </div>
       </div>
     </div>
   </BaseLayout>