微调组件，首页和博客页分离

2026-05-21 07:26:49 +00:00 · 2021-10-14 09:42:00 +08:00
parent 811c2522ba
commit 408c358da7
9 changed files with 145 additions and 25 deletions
--- a/layouts/IndexLayout.js
+++ b/layouts/IndexLayout.js
@@ -0,0 +1,110 @@
+import BlogPost from '@/components/BlogPost'
+import PropTypes from 'prop-types'
+import Pagination from '@/components/Pagination'
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import Tags from '@/components/Tags'
+import Footer from '@/components/Footer'
+import React, { useRef } from 'react'
+import Container from '@/components/Container'
+import JumpToTop from '@/components/JumpToTop'
+import SideBar from '@/components/SideBar'
+
+const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
+  const meta = {
+    title: `${BLOG.title} | 首页`,
+    type: 'website',
+    ...customMeta
+  }
+  page = page ?? 1
+  let postsToShow = []
+  let filteredBlogPosts = posts ?? []
+  let currentSearch = ''
+  if (posts) {
+    const router = useRouter()
+    if (router.query && router.query.s) {
+      currentSearch = router.query.s
+      filteredBlogPosts = posts.filter(post => {
+        const tagContent = post.tags ? post.tags.join(' ') : ''
+        const searchContent = post.title + post.summary + tagContent + post.slug
+        return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
+      })
+    }
+  }
+  const totalPages = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage)
+
+  if (posts) {
+    postsToShow = filteredBlogPosts.slice(
+      BLOG.postsPerPage * (page - 1),
+      BLOG.postsPerPage * page
+    )
+  }
+  let showNext = false
+  if (filteredBlogPosts) {
+    const totalPosts = filteredBlogPosts.length
+    showNext = page * BLOG.postsPerPage < totalPosts
+  }
+
+  const targetRef = useRef(null)
+
+  return (
+    <Container id='wrapper' meta={meta} tags={tags}>
+
+      <div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
+        {/* 侧边菜单 */}
+        <SideBar />
+        <div className='flex-grow'>
+
+          <div id='tags-bar' className='fixed 2xl:mt-0 top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
+            <Tags tags={tags} currentTag={currentTag} />
+          </div>
+
+          <main id='post-list-wrapper' className='pt-16 md:pt-28 px-2 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 md: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>
+            <div className='w-full border-t '>
+              <Footer/>
+            </div>
+          </main>
+
+        </div>
+      </div>
+
+      {/* 下方菜单组 */}
+      <div
+        className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
+        <div className='flex-wrap'>
+          <JumpToTop targetRef={targetRef} showPercent={false}/>
+        </div>
+      </div>
+    </Container>
+  )
+}
+IndexLayout.propTypes = {
+  posts: PropTypes.array.isRequired,
+  tags: PropTypes.object.isRequired,
+  currentTag: PropTypes.string
+}
+export default IndexLayout