From 2a105d71f3f8b9fdb8f7da58791486af131c00a0 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 2 Dec 2021 10:54:00 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E4=B8=BB=E8=A6=81=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=8A=A0=E5=85=A5=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CategoryList.js |  2 +-
 components/SideBar.js      | 30 +++++++++++++++++++++---------
 components/TagItem.js      |  1 -
 components/TagItemMini.js  |  4 ++--
 components/TagList.js      |  2 +-
 pages/blogs/index.js       |  2 +-
 pages/category/index.js    |  2 +-
 pages/tag/index.js         |  3 ++-
 8 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/components/CategoryList.js b/components/CategoryList.js
index d803ef78..94c59244 100644
--- a/components/CategoryList.js
+++ b/components/CategoryList.js
@@ -6,7 +6,7 @@ const CategoryList = ({ currentCategory, categories }) => {
     return <></>
   }
   return <ul className='flex py-1 space-x-3'>
-    <li className='w-10 py-2 dark:text-gray-200'>分类:</li>
+    <li className='w-16 py-2 dark:text-gray-200'><i className='fa fa-th-list mr-2'/>分类:</li>
     {Object.keys(categories).map(category => {
       const selected = category === currentCategory
       return (
diff --git a/components/SideBar.js b/components/SideBar.js
index 6da41cd2..af1eee4a 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -45,8 +45,12 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {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'>{locale.COMMON.CATEGORY}</div>
-            <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} 》 </div></Link></div>
+            <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>
@@ -56,8 +60,12 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {posts && (
         <section className='mt-3'>
           <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'>{locale.COMMON.LATEST_POSTS}</div>
-            <div><Link href='/blogs'><div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>{locale.COMMON.MORE} 》 </div></Link></div>
+            <div className='text-black font-bold dark:text-gray-200'><i className='fa fa-newspaper-o mr-4'/>{locale.COMMON.LATEST_POSTS}</div>
+            <Link href='/blogs'>
+              <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>
           <LatestPostsGroup posts={posts} />
         </section>
@@ -67,12 +75,16 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {tags && (
         <section className='mt-3'>
           <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'>{locale.COMMON.TAGS}</div>
-            <div><Link href='/tag'><div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>{locale.COMMON.MORE} 》</div></Link></div>
-          </div>
-          <div className='px-5'>
-            <TagGroups tags={tags} currentTag={currentTag} />
+            <div className='text-black font-bold dark:text-gray-200'><i className='fa fa-tags mr-4'/>{locale.COMMON.TAGS}</div>
+            <Link href='/tag'>
+              <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>
+            <div className='px-5'>
+              <TagGroups tags={tags} currentTag={currentTag} />
+            </div>
         </section>
       )}
     </div>
diff --git a/components/TagItem.js b/components/TagItem.js
index f3e9cf1c..48cb2829 100644
--- a/components/TagItem.js
+++ b/components/TagItem.js
@@ -13,7 +13,6 @@ const TagItem = ({ tag, selected }) => {
          : ' text-gray-600'}`}
     >
       <a>
-        <i className='fa fa-tag mr-1'/>
         {`${tag.name} `} {tag.count ? `(${tag.count})` : ''}
       </a>
     </li>
diff --git a/components/TagItemMini.js b/components/TagItemMini.js
index 7b959db1..ee82c025 100644
--- a/components/TagItemMini.js
+++ b/components/TagItemMini.js
@@ -3,11 +3,11 @@ import Link from 'next/link'
 const TagItemMini = ({ tag, selected = false }) => {
   return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
     <div className={`cursor-pointer inline-block rounded hover:bg-gray-500 duration-200
-      mr-2 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:hover:text-white
+      mr-2 my-1 py-1 px-2 font-medium font-light text-xs whitespace-nowrap dark:hover:text-white
        ${selected
       ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
       : `text-gray-600 dark:text-gray-600 hover:shadow-xl hover:text-white dark:hover:bg-gray-600 dark:border-gray-600 notion-${tag.color}_background `}` }>
-    <div> <i className='fa fa-tag mr-2 py-0.5'/>{tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+    <div>{tag.name + (tag.count ? `(${tag.count})` : '')} </div>
     </div>
   </Link>
 }
diff --git a/components/TagList.js b/components/TagList.js
index a2bac134..754508d9 100644
--- a/components/TagList.js
+++ b/components/TagList.js
@@ -14,7 +14,7 @@ const TagList = ({ tags, currentTag }) => {
     return <></>
   }
   return <ul className='flex py-1 space-x-3'>
-    <li className='w-10 py-2 dark:text-gray-200'>标签:</li>
+    <li className='w-16 py-2 dark:text-gray-200'><i className='fa fa-tags mr-2'/>标签:</li>
     {tags.map(tag => {
       const selected = tag.name === currentTag
       return <TagItem key={tag.name} tag={tag} selected={selected}/>
diff --git a/pages/blogs/index.js b/pages/blogs/index.js
index 0fbbc5f5..f8278b00 100644
--- a/pages/blogs/index.js
+++ b/pages/blogs/index.js
@@ -46,7 +46,7 @@ const Index = ({ allPosts, tags, categories }) => {
     <BaseLayout meta={meta} tags={tags} categories={categories}>
       <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'>
         <StickyBar>
-          <div className='py-4 text-lg lg:mx-14'>{locale.COMMON.LATEST_POSTS}</div>
+          <div className='py-4 text-lg lg:mx-14'><i className='fa fa-newspaper-o mr-4'/>{locale.COMMON.LATEST_POSTS}</div>
         </StickyBar>
         <BlogPostListScroll posts={postsSortByDate} tags={tags} />
       </div>
diff --git a/pages/category/index.js b/pages/category/index.js
index 3dc6c443..ca4b25e0 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -18,7 +18,7 @@ export default function Category ({ tags, allPosts, categories }) {
   return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
     <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-14'>
     <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
-      <div className='dark:text-gray-200 mb-5'>{locale.COMMON.TAGS}:</div>
+      <div className='dark:text-gray-200 mb-5'><i className='fa fa-th-list mr-4'/>{locale.COMMON.CATEGORY}:</div>
       <div id='category-list' className='duration-200 flex flex-wrap'>
         {Object.keys(categories).map(category => {
           return <Link key={category} href={`/category/${category}`}>
diff --git a/pages/tag/index.js b/pages/tag/index.js
index d400adde..750b38d7 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -4,6 +4,7 @@ import BaseLayout from '@/layouts/BaseLayout'
 import TagItem from '@/components/TagItem'
 import { getNotionPageData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
+import React from 'react'
 
 export default function Tag ({ tags, allPosts, categories }) {
   const { locale } = useGlobal()
@@ -15,7 +16,7 @@ export default function Tag ({ tags, allPosts, categories }) {
   return <BaseLayout meta={meta} categories={categories} totalPosts={allPosts}>
     <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-14'>
     <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
-      <div className='dark:text-gray-200 mb-5'>{locale.COMMON.TAGS}:</div>
+      <div className='dark:text-gray-200 mb-5'><i className='fa fa-tags mr-4'/>{locale.COMMON.TAGS}:</div>
       <div id='tags-list' className='duration-200 flex flex-wrap'>
         {
           tags.map(tag => {