feature:

标签加入颜色，修复编译问题

components/LatestPosts.js

@@ -14,14 +14,14 @@ const LatestPosts = ({ posts }) => {
 
   // 时间排序
   postsSortByDate.sort((a, b) => {
-      const dateA = new Date(a?.lastEditedTime || a.createdTime)
-      const dateB = new Date(b?.lastEditedTime || b.createdTime)
-      return dateB - dateA
+    const dateA = new Date(a?.lastEditedTime || a.createdTime)
+    const dateB = new Date(b?.lastEditedTime || b.createdTime)
+    return dateB - dateA
   })
 
   // 只取前五
   postsSortByDate = postsSortByDate.slice(0, 5)
-  
+
   // 获取当前路径
   const currentPath = useRouter().asPath
 
@@ -33,12 +33,14 @@ const LatestPosts = ({ posts }) => {
     <div>
       {postsSortByDate.map(post => {
         return (
-          <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} >
-            <div className={(currentPath === `${BLOG.path}/article/${post.slug}` ? 'bg-gray-200 dark:bg-black' : '') + ' text-xs leading-5 py-1.5 px-5 flex'}>
+          <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`}>
+            <div
+              className={(currentPath === `${BLOG.path}/article/${post.slug}` ? 'bg-gray-200 dark:bg-black' : '') + ' text-xs leading-5 py-1.5 px-5 flex'}>
               <div className='mr-2 text-gray-500'>
                 {formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')}
               </div>
-              <div className='text-sm flex w-50 overflow-x-hidden whitespace-nowrap dark:text-gray-300 cursor-pointer hover:underline'>
+              <div
+                className='text-sm flex w-50 overflow-x-hidden whitespace-nowrap dark:text-gray-300 cursor-pointer hover:underline'>
                 {post.title}
               </div>
             </div>

components/TagItem.js

@@ -1,12 +1,24 @@
 import Link from 'next/link'
+import React from 'react'
 
-const TagItem = ({ tag, count }) => (
-  <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">
-     <span className='whitespace-nowrap'>  <i className='fa fa-tag mr-1 '/> {tag}{count && `(${count})`}</span>
-    </div>
+const TagItem = ({ tag, selected }) => {
+  return (
+  <Link href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
+    <li
+      className={`notion-${tag.color}_background list-none cursor-pointer hover:bg-gray-300 rounded-xl 
+      duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap
+                  dark:hover:bg-gray-800 dark:hover:text-white hover:text-black
+                 ${selected
+         ? ' text-white dark:text-white bg-black dark:hover:bg-gray-900 dark:bg-black'
+         : ' text-gray-600'}`}
+    >
+      <a>
+        <i className='fa fa-tag mr-1'/>
+        {`${tag.name} `} {tag.count ? `(${tag.count})` : ''}
+      </a>
+    </li>
   </Link>
-)
+  )
+}
 
 export default TagItem

components/TagItemMini.js

@@ -2,11 +2,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 border rounded hover:bg-gray-500 shadow-card
-      mr-2 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:text-gray-300
+    <div className={`cursor-pointer inline-block rounded hover:bg-gray-500 
+      mr-2 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:hover:text-white
        ${selected
-      ? 'text-white bg-black dark:bg-black dark:border-gray-600 dark:hover:bg-gray-900 border-gray-800'
-      : `text-gray-500 hover:shadow-xl hover:text-white border-gray-500 dark:hover:bg-gray-600 dark:border-gray-600 bg-${tag.color}-50 bg-gray-50 dark:bg-${tag.color}-700 dark:bg-gray-600 `}` }>
+      ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
+      : `text-gray-500 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>
   </Link>

components/TagList.js

@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import React from 'react'
+import TagItem from '@/components/TagItem'
 
 /**
  * 横向的标签列表
@@ -16,20 +17,7 @@ const TagList = ({ tags, currentTag }) => {
     <li className='w-10 py-2 dark:text-gray-200'>标签:</li>
     {tags.map(tag => {
       const selected = tag.name === currentTag
-      return (
-        <Link key={tag.name} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
-          <li
-            className={`cursor-pointer border hover:bg-gray-300 rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm 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-100 text-gray-600 dark:bg-gray-600 dark:border-gray-600'
-            }`}
-          >
-            <a>
-              <i className='fa fa-tag mr-1'/>
-              {`${tag.name} (${tag.count})`}
-            </a>
-          </li>
-        </Link>
-      )
+      return <TagItem key={tag.name} tag={tag} selected={selected}/>
     })}
   </ul>
 }