4.0 仿Youtube界面样式

layouts/DefaultLayout.js

@@ -4,10 +4,10 @@ import Pagination from '@/components/Pagination'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { useTheme } from '@/lib/theme'
-import { useEffect, useState } from 'react'
-import SideBar from '@/components/SideBar'
-import throttle from 'lodash.throttle'
 import CommonHead from '@/components/CommonHead'
+import TopNav from '@/components/TopNav'
+import Tags from '@/components/Tags'
+import SideBarResponsive from '@/components/SideBarResponsive'
 
 const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
   const meta = {
@@ -44,80 +44,53 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
     showNext = page * BLOG.postsPerPage < totalPosts
   }
 
-  useEffect(() => {
-    // 首页隐藏看板娘
-    // const ref = document.getElementById('waifu')
-    // if (ref) {
-    //   ref.remove()
-    // }
-    window.addEventListener('resize', changeColumnCount)
-    changeColumnCount()
-    return () => {
-      window.removeEventListener('resize', changeColumnCount)
-    }
-  }, [])
-
-  const changeColumnCount = throttle(() => {
-    if (window.innerWidth > 2500) {
-      changeColumn(5)
-    } else if (window.innerWidth > 1800) {
-      changeColumn(4)
-    } else if (window.innerWidth > 1300) {
-      changeColumn(3)
-    } else if (window.innerWidth > 900) {
-      changeColumn(2)
-    } else if (window.innerWidth <= 900) {
-      changeColumn(1)
-    }
-  }, 500)
-
-  const [column, changeColumn] = useState(3)
-
   const { theme } = useTheme()
 
   return (
     <div id='wrapper' className={theme}>
       <CommonHead meta={meta} />
-      <div className={`${BLOG.font} flex bg-gray-100 dark:bg-black min-h-screen`}>
+      <div className=' fixed w-full top-0 z-20'>
+        <TopNav />
+      </div>
+
+      <div className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
         {/* 侧边菜单 */}
-        <SideBar tags={tags} currentTag={currentTag} />
-        <main className='md:px-24 p-5 flex-grow'>
-          {(!page || page === 1) && (<div className='py-5' />)}
+        <SideBarResponsive />
 
-          {/* 标签 */}
-          {currentTag && (
-            <div className='pb-5 dark:text-gray-200'>
-              <div className='py-1'>标签: {currentTag}</div>
-              <hr />
-            </div>
-          )}
-
-          {/* 当前搜索 */}
-          {(currentSearch || (page && page !== 1)) && (
-            <div className='pb-5'>
-              <div className='dark:text-gray-200 flex justify-between py-1'>
-                {currentSearch && (<span>搜索关键词: {currentSearch}</span>)}
-                {page && page !== 1 && (<span>页 {page} / {totalPages}</span>)}
-              </div>
-              <hr />
-            </div>
-          )}
-
-          <div className='mx-auto'>
-            {/* 文章列表 */}
-            <div style={{ columnCount: column }}>
-              {!postsToShow.length && (
-                <p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
-              )}
-              {postsToShow.map(post => (
-                <BlogPost key={post.id} post={post} tags={tags} />
-              ))}
-            </div>
-
-            <Pagination page={page} showNext={showNext} />
+        <div className='flex-grow'>
+          <div className='fixed top-12 z-10 w-full border-b dark:border-gray-600'>
+            <Tags tags={tags} currentTag={currentTag} />
           </div>
 
-        </main>
+          <main id='post-list-wrapper' className='py-24 px-8 md:px-20'>
+            {(!page || page === 1) && (<div className='py-5' />)}
+
+            {/* 当前搜索 */}
+            {(currentSearch || (page && page !== 1)) && (
+              <div className='pb-5'>
+                <div className='dark:text-gray-200 flex justify-between py-1'>
+                  {page && page !== 1 && (<span>页 {page} / {totalPages}</span>)}
+                </div>
+              </div>
+            )}
+
+            <div className=''>
+              {/* 文章列表 */}
+              <div className='grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-3'>
+                {!postsToShow.length && (
+                  <p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
+                )}
+                {postsToShow.map(post => (
+                  <BlogPost key={post.id} post={post} tags={tags} />
+                ))}
+              </div>
+
+              <Pagination page={page} showNext={showNext} />
+            </div>
+          </main>
+
+        </div>
+
       </div>
     </div>
   )