feature:

主色加入蓝色;
缓存读取日志

components/BlogPostCard.js

@@ -19,18 +19,18 @@ const BlogPostCard = ({ post, tags }) => {
       <div className='px-4 py-4 col-span-3'>
         <div className='w-52'>
           <Link href={`/category/${post.category}`} passHref>
-            <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'>
+            <span className='cursor-pointer dark:text-gray-200 text-gray-400 text-sm py-1.5 mr-1 hover:underline hover:text-blue-500 dark:hover:text-blue-400 transform'>
               <FontAwesomeIcon icon={faFolder} size='sm' className='mr-1 text-sm' />{post.category}
             </span>
           </Link>
           <span className='mx-1 dark:text-gray-400'>|</span>
           <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
-            <span className='mt-2 mx-2 text-gray-400 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
+            <span className='mt-2 mx-2 text-gray-400 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 dark:hover:text-blue-400 text-sm leading-4'>{post.date.start_date}</span>
           </Link>
         </div>
 
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-          <p className='cursor-pointer my-3 text-lg leading-tight font-bold text-black dark:text-gray-100 hover:underline'>
+          <p className='cursor-pointer my-3 text-lg leading-tight font-bold text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 hover:underline'>
             {post.title}
           </p>
         </Link>

components/CategoryGroup.js

@@ -12,7 +12,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
           <div className={(selected
             ? 'bg-gray-200 dark:bg-black text-black dark:text-white'
             : 'dark:text-gray-400 text-gray-500') +
-            ' duration-300 hover:text-black dark:hover:text-white hover:underline px-5 cursor-pointer py-2'}>
+            ' duration-300 hover:text-blue-500 dark:hover:text-blue-400 hover:underline px-5 cursor-pointer py-2'}>
             <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-black dark:text-white' : 'text-gray-400'} mr-2 `} />{category}({categories[category]})</div>
         </Link>
       })}

components/LatestPostsGroup.js

@@ -38,7 +38,7 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
               <div
                 className={
                   (selected ? 'dark:text-white text-black ' : 'text-gray-500') +
-                  ' text-sm flex w-50 overflow-x-hidden whitespace-nowrap  hover:text-black dark:hover:text-white cursor-pointer hover:underline'
+                  ' text-sm flex w-50 overflow-x-hidden whitespace-nowrap  hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline'
                 }>
                 {post.title}
               </div>

components/MenuButtonGroup.js

@@ -27,7 +27,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={link.id + link.icon} title={link.to} href={link.to} >
-            <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 ' +
+            <a className={'py-2 px-5 hover:text-white hover:bg-blue-500 cursor-pointer duration-100 flex flex-nowrap align-middle ' +
               (selected ? 'font-bold bg-gray-200 dark:bg-black dark:text-white text-black ' : '')} >
               <div className='my-auto w-5 justify-center flex'>
                 <FontAwesomeIcon icon={link.icon} />

components/RecommendPosts.js

@@ -25,7 +25,11 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {
   if (currentPost.tags && currentPost.tags.length) {
     const currentTag = currentPost.tags[0]
     filteredPosts = totalPosts.filter(
-      post => post && post.tags && post.tags.includes(currentTag) && post.slug !== currentPost.slug
+      post =>
+        post &&
+        post.tags &&
+        post.tags.includes(currentTag) &&
+        post.slug !== currentPost.slug
     )
   }
   shuffleSort(filteredPosts)
@@ -37,13 +41,21 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {
 
   const { locale } = useGlobal()
 
-  return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 my-2  border-l-4 border-yellow-500'>
-    <div className='mb-2 font-bold text-xl'>{locale.COMMON.RELATE_POSTS}</div>
-    <ul className='list-disc px-5 text-sm '>
-      {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>
-      ))}
-    </ul>
-  </div>
+  return (
+    <div className="dark:text-gray-300">
+      <div className="mb-2 text-2xl">{locale.COMMON.RELATE_POSTS}</div>
+        <ul className="list-disc pl-6 text-sm dark:bg-gray-900 bg-gray-100 p-2 my-2  border-l-4 border-yellow-500">
+          {filteredPosts.map(post => (
+            <li className="py-1" key={post.id}>
+              <Link href={`/article/${post.slug}`}>
+                <a className="cursor-pointer hover:text-blue-500 hover:underline">
+                  {post.title}
+                </a>
+              </Link>
+            </li>
+          ))}
+        </ul>
+    </div>
+  )
 }
 export default RecommendPosts

components/TagItem.js

@@ -13,7 +13,7 @@ const TagItem = ({ tag, selected }) => {
   <Link href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`} passHref>
     <li
       className={`notion-${tag.color}_background list-none cursor-pointer hover:bg-gray-300 rounded-md 
-      duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap
+      duration-200 mr-1 my-1 px-2 py-1 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'

components/TagItemMini.js

@@ -4,11 +4,11 @@ import Link from 'next/link'
 
 const TagItemMini = ({ tag, selected = false }) => {
   return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`} passHref>
-    <div className={`cursor-pointer inline-block rounded hover:bg-gray-500 duration-200
-      mr-2 my-1 py-1 px-2 font-medium font-light text-xs whitespace-nowrap dark:hover:text-white
+    <div className={`cursor-pointer inline-block rounded hover:bg-blue-500 hover:text-white duration-200
+      mr-2 my-1 py-1 px-2  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 `}` }>
+      : `text-gray-600 dark:text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background `}` }>
     <div>{selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
     </div>
   </Link>