Merge branch 'release/4.0.0' into feat/new-theme-heo

package.json

@@ -69,7 +69,7 @@
     "eslint-plugin-react": "^7.23.2",
     "next-sitemap": "^1.6.203",
     "postcss": "^8.4.20",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.3.2",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "resolutions": {

themes/plog/components/BlogListPage.js

@@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import BlogPost from './BlogPost'
+import { useEffect, useRef } from 'react'
 
 export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
@@ -16,12 +17,33 @@ export const BlogListPage = props => {
   const showNext = page < totalPage
   const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
 
+  const blogPostRefs = useRef([])
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.toggle('visible')
+        }
+      })
+    }, {
+      threshold: 0.1 // 调整阈值以达到最佳效果
+    })
+
+    blogPostRefs.current.forEach(ref => {
+      observer.observe(ref)
+    })
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
   return (
       <div className="w-full">
 
             <div id="posts-wrapper" className='grid lg:grid-cols-3 grid-cols-1 md:grid-cols-2'>
-                {posts?.map(post => (
-                   <BlogPost key={post.id} post={post} {...props}/>
+                {posts?.map((post, index) => (
+                   <BlogPost index={index} key={post.id} className="blog-post" post={post} {...props} ref={el => blogPostRefs.current.push(el)}/>
                 ))}
             </div>
 

themes/plog/components/BlogPost.js

@@ -1,6 +1,7 @@
 import { compressImage } from '@/lib/notion/mapImage'
 import Link from 'next/link'
 import { usePlogGlobal } from '..'
+import { isMobile } from '@/lib/utils'
 
 /**
  * 博客照片卡牌
@@ -8,16 +9,24 @@ import { usePlogGlobal } from '..'
  * @returns
  */
 const BlogPost = (props) => {
-  const { post, siteInfo } = props
+  const { post, index, siteInfo } = props
   const pageThumbnail = compressImage(post?.pageCoverThumbnail || siteInfo?.pageCover, 800, 80)
   const { setModalContent, setShowModal } = usePlogGlobal()
   const handleClick = () => {
     setShowModal(true)
     setModalContent(post)
   }
+
+  // 实现动画 一个接一个出现
+  let delay = index * 100
+  if (isMobile()) {
+    delay = 0
+  }
+
   return (
         <article
             onClick={handleClick}
+            data-aos-delay={`${delay}`}
             data-aos="fade-up"
             data-aos-duration="500"
             data-aos-once="true"

themes/plog/components/Modal.js

@@ -90,11 +90,11 @@ export default function Modal(props) {
                                 {!loading && (<>
                                     <div className='absolute bottom-0 left-0 m-4 z-20'>
                                         <div className='flex'>
-                                            <h2 style={{ textShadow: '0.1em 0.1em 0.2em black' }} className='text-5xl text-white mb-4 px-2 py-1 rounded-lg'>{modalContent?.title}</h2>
+                                            <h2 style={{ textShadow: '0.1em 0.1em 0.2em black' }} className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>{modalContent?.title}</h2>
                                         </div>
 
                                         <Link href={`${BLOG.SUB_PATH}/${modalContent.slug}`}>
-                                            <div style={{ textShadow: '0.1em 0.1em 0.2em black' }} className={'cursor-pointer text-gray-50 rounded-lg p-2'}>
+                                            <div style={{ textShadow: '0.1em 0.1em 0.2em black' }} className={'line-clamp-3 md:line-clamp-none overflow-hidden cursor-pointer text-gray-50 rounded-lg m-2'}>
                                                 {modalContent?.summary}
                                             </div>
                                         </Link>

themes/plog/components/Nav.js

@@ -8,9 +8,9 @@ import { MenuItemDrop } from './MenuItemDrop'
 import Collapse from '@/components/Collapse'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
-const Nav = props => {
+const Header = props => {
   const { navBarTitle, fullWidth, siteInfo } = props
-  return <div className='md:hidden fixed top-0 w-full'>
+  return <div className='md:hidden fixed top-0 w-full z-20'>
         <div id="sticky-nav"
             className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8  glassmorphism ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
                 }`} >
@@ -90,4 +90,4 @@ const NavBar = props => {
   )
 }
 
-export default Nav
+export default Header

themes/plog/index.js

@@ -1,7 +1,7 @@
 import CONFIG from './config'
 import CommonHead from '@/components/CommonHead'
 import React, { createContext, useContext, useEffect, useState } from 'react'
-import Nav from './components/Nav'
+import Header from './components/Nav'
 import { useGlobal } from '@/lib/global'
 
 import BLOG from '@/blog.config'
@@ -65,7 +65,7 @@ const LayoutBase = props => {
             <CommonHead meta={meta} />
 
             {/* 移动端顶部导航栏 */}
-            <Nav {...props} />
+            <Header {...props} />
 
             {/* 主区 */}
             <main id='out-wrapper' className={'relative m-auto flex-grow w-full transition-all pb-16'}>
@@ -179,7 +179,7 @@ const LayoutSlug = props => {
 
             {lock && <ArticleLock validPassword={validPassword} />}
 
-            {!lock && <div id="article-wrapper" className="px-2 max-w-6xl mx-auto">
+            {!lock && <div id="article-wrapper" className="px-2 my-16 max-w-6xl mx-auto">
                 <>
                     <ArticleInfo post={post} />
                     <NotionPage post={post} />