🏄‍ 瀑布流

blog.config.js

@@ -11,7 +11,7 @@ const BLOG = {
   darkBackground: '#111827', // use hex value, don't forget '#'
   path: '', // leave this empty unless you want to deploy in a folder
   since: 2020, // if leave this empty, current year will be used.
-  postsPerPage: 6,
+  postsPerPage: 9,
   sortByDate: false,
   showAbout: true, // WIP
   showArchive: true, // WIP

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

layouts/ArticleLayout.js

@@ -45,7 +45,7 @@ const ArticleLayout = ({
 
       <Progress targetRef={targetRef} />
 
-      <TopNav tags={tags} />
+      {/* <TopNav tags={tags} /> */}
 
       <div className='flex justify-between'>
 

layouts/DefaultLayout.js

@@ -5,8 +5,9 @@ import BLOG from '@/blog.config'
 import CommonHead from '@/components/CommonHead'
 import { useRouter } from 'next/router'
 import { useTheme } from '@/lib/theme'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import SideBar from '@/components/SideBar'
+import throttle from 'lodash.throttle'
 
 const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
   const meta = {
@@ -49,7 +50,24 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
     if (ref) {
       ref.remove()
     }
-  })
+    window.addEventListener('resize', resizeWindowHideToc)
+    resizeWindowHideToc()
+    return () => {
+      window.removeEventListener('resize', resizeWindowHideToc)
+    }
+  }, [])
+
+  const resizeWindowHideToc = throttle(() => {
+    if (window.innerWidth > 1300) {
+      changeColumn(3)
+    } else if (window.innerWidth < 768) {
+      changeColumn(1)
+    } else {
+      changeColumn(2)
+    }
+  }, 500)
+
+  const [column, changeColumn] = useState(1)
 
   const { theme } = useTheme()
 
@@ -59,7 +77,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
       {/* <TopNav tags={tags} currentTag={currentTag} /> */}
       {/* <Header navBarTitle={meta.title} fullWidth={true}/> */}
 
-      <div className={`${BLOG.font} flex bg-gray-100 dark:bg-black`}>
+      <div className={`${BLOG.font} flex bg-gray-200 dark:bg-black`}>
         <SideBar tags={tags} currentTag={currentTag} />
 
         <main className='md:pb-10 md:px-24 p-5 flex-grow'>
@@ -91,12 +109,13 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
 
           {/* 文章列表 */}
           <div className='mx-auto animate__animated animate__fadeIn'>
-            <div className='grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6'>
+            {/* <div className='col-4 grid md:grid-cols-2 grid-cols-1 gap-6'> */}
+            <div style={{ columnCount: column, columnGap: '2rem' }}>
               {!postsToShow.length && (
                 <p className='text-gray-500 dark:text-gray-300 textc'>No posts found.</p>
               )}
               {postsToShow.map(post => (
-                <BlogPost key={post.id} post={post} tags={tags} />
+                  <BlogPost key={post.id} post={post} tags={tags} />
               ))}
             </div>
           </div>

styles/globals.css

@@ -111,6 +111,10 @@ nav {
 
 @media (max-width: 1300px){
   .sidebar{
+    -ms-overflow-style: none;
+    overflow: -moz-scrollbars-none;
     @apply border-r border-gray-200 h-screen overflow-y-scroll fixed left-0
   }
+  .sidebar::-webkit-scrollbar { width: 0 !important }
 }
+