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>
 }

pages/article/[slug].js

@@ -128,14 +128,14 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
 
         <section className='md:flex md:justify-between'>
 
-          {post.tags && (
+           {post.tagItems && (
             <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.tagItems.map(tag => (
                 <TagItem key={tag.name} tag={tag} />
               ))}
             </div>
-          )}
+           )}
 
           <div>
             <ShareBar post={post} />

pages/tag/index.js

@@ -16,7 +16,7 @@ export default function Tag ({ tags, posts, categories }) {
       <div id='tags-list' className='duration-200 flex flex-wrap'>
         {
           tags.map(tag => {
-            return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag.name} count={tag.count} /></div>
+            return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div>
           })
         }
       </div>

styles/notion.css

@@ -37,6 +37,8 @@
   --notion-orange_background: rgb(250, 235, 221);
   --notion-brown_background: rgb(233, 229, 227);
   --notion-gray_background: rgb(235, 236, 237);
+  --notion-green_background: rgb(219, 237, 219);
+  --notion-default_background: rgba(227, 226, 224);
 
   --notion-red_background_co: rgba(251, 228, 228, 0.3);
   --notion-pink_background_co: rgba(244, 223, 235, 0.3);
@@ -47,6 +49,8 @@
   --notion-orange_background_co: rgba(250, 235, 221, 0.3);
   --notion-brown_background_co: rgba(233, 229, 227, 0.3);
   --notion-gray_background_co: rgba(235, 236, 237, 0.3);
+  --notion-green_background_co: rgba(219, 237, 219, 0.3);
+  --notion-default_background_co: rgba(227, 226, 224, 0.3);
 
   --notion-item-blue: rgba(0, 120, 223, 0.2);
   --notion-item-orange: rgba(245, 93, 0, 0.2);
@@ -281,6 +285,13 @@
 .notion-gray_background {
   background-color: var(--notion-gray_background);
 }
+.notion-green_background {
+  background-color: var(--notion-green_background);
+}
+.notion-default_background {
+  background-color: var(--notion-default_background);
+}
+
 .notion-red_background_co {
   background-color: var(--notion-red_background_co);
 }
@@ -308,6 +319,12 @@
 .notion-gray_background_co {
   background-color: var(--notion-gray_background_co);
 }
+.notion-green_background_co {
+  background-color: var(--notion-green_background_co);
+}
+.notion-default_background_co {
+  background-color: var(--notion-default_background_co);
+}
 
 .notion-item-blue {
   background-color: var(--notion-item-blue);