🏄‍ 瀑布流

components/BlogPost.js

@@ -1,9 +1,10 @@
 import BLOG from '@/blog.config'
+import TagItem from '@/components/TagItem'
 
 const BlogPost = ({ post }) => {
   return (
     <article key={post.id}
-             className='md:mx-2 w-full md:max-w-md duration-200 transform hover:scale-105 hover:shadow-2xl rounded-3xl bg-white dark:bg-gray-800 dark:hover:bg-gray-600 overflow-hidden'>
+             className='inline-block my-2 md:mx-2 w-full md:max-w-md duration-200 transform hover:scale-105 rounded-3xl bg-white dark:bg-gray-800 dark:hover:bg-gray-600 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <a href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
@@ -11,13 +12,18 @@ const BlogPost = ({ post }) => {
           </a>
         )}
 
-        <main className='px-8 py-2'>
+        <div className='px-8 py-6'>
           <a href={`${BLOG.path}/article/${post.slug}`}
              className='block my-3 text-2xl leading-tight font-semibold text-black dark:text-gray-200 hover:underline'>
             {post.title}
           </a>
           <p className='mt-2 text-gray-500 dark:text-gray-400 text-sm'>{post.summary}</p>
-        </main>
+            <div className='flex flex-nowrap leading-8 py-2'>
+              {post.tags.map(tag => (
+                <TagItem key={tag} tag={tag} />
+              ))}
+            </div>
+        </div>
     </article>
   )
 }

components/SideBar.js

@@ -2,10 +2,11 @@ import Tags from '@/components/Tags'
 import { useLocale } from '@/lib/locale'
 import Link from 'next/link'
 import BLOG from '@/blog.config'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Router, { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
 import Footer from '@/components/Footer'
+import throttle from 'lodash.throttle'
 
 const SideBar = ({ tags, currentTag }) => {
   const locale = useLocale()
@@ -18,16 +19,44 @@ const SideBar = ({ tags, currentTag }) => {
     }
   }
 
-  const [collapse, changeCollapse] = useState(false)
+  // 监听resize事件
+  useEffect(() => {
+    window.addEventListener('resize', resizeWindowHideToc)
+    resizeWindowHideToc()
+    return () => {
+      window.removeEventListener('resize', resizeWindowHideToc)
+    }
+  }, [])
+
+  const resizeWindowHideToc = throttle(() => {
+    if (window.innerWidth > 1300) {
+      changeCollapse(false)
+    } else {
+      changeCollapse(true)
+    }
+  }, 500)
+  const [collapse, changeCollapse] = useState(true)
 
   return <aside
-    className={(collapse ? '' : '') + ' z-10 bg-white dark:bg-gray-800 dark:border-black duration-500 ease-in-out'}
+    className={(collapse ? '' : '') + ' z-10 duration-500 ease-in-out'}
   >
 
-    <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' sidebar h-full w-60 md:w-80 duration-500 ease-in-out'}>
+    <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' dark:bg-gray-800 bg-white sidebar h-full w-60 md:w-80 duration-500 ease-in-out'}>
+
+      <section className='mx-5 pt-5'>
+        <Link href='/'>
+          <a
+            className='text-3xl hover:shadow-xl bg-white dark:bg-gray-800 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
+        </Link>
+      </section>
+
+      <section className='text-gray-500 text-sm px-6 pt-3 pb-5 dark:text-gray-300'>
+        <i className='fa fa-map-marker mr-1' />
+        Fuzhou, China
+      </section>
 
       {/* 搜索框 */}
-      <div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'>
+      <div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-200 dark:bg-black'>
         <input
           type='text'
           placeholder={
@@ -41,18 +70,6 @@ const SideBar = ({ tags, currentTag }) => {
         <i className='fa fa-search text-gray-400 -ml-8' />
       </div>
 
-      <section className='mx-5 py-5 flex'>
-        <Link href='/'>
-          <a
-            className='hover:shadow-xl dark:border-gray-600 border-gray-500 border-2 bg-white dark:bg-gray-800 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
-        </Link>
-      </section>
-
-      <section className='text-gray-500 px-5 dark:text-gray-300'>
-        <i className='fa fa-map-marker mr-1' />
-        Fuzhou, China
-      </section>
-
       {/* <hr className='my-5' /> */}
 
       <div className='p-5'>
@@ -62,8 +79,10 @@ const SideBar = ({ tags, currentTag }) => {
 
       <Footer />
     </div>
-     <div className={(collapse ? 'left-0' : 'md:left-80 left-60') + ' space-x-2 fixed md:absolute flex top-0 px-4 py-3 duration-500 ease-in-out'}>
-      <div className='my-4 text-xl p-1 rounded cursor-pointer text-center hover:scale-125 transform duration-200 bg-gray-100 bg-opacity-50 md:bg-opacity-0'>
+
+    <div className={(collapse ? 'left-0' : 'md:left-80 left-60') + ' space-x-2 fixed md:absolute flex top-0 px-4 py-1 duration-500 ease-in-out'}>
+      <div className='my-5 text-xl rounded cursor-pointer text-center hover:scale-125 transform duration-200 bg-gray-100 bg-opacity-50 md:bg-opacity-0
+      dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
         <i className='fa fa-bars px-1' onClick={() => changeCollapse(!collapse)} />
       </div>
       <div className='my-4 bg-gray-100 bg-opacity-50 p-1 rounded md:bg-opacity-0'>