forked from tangly1024/NotionNext
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/tangly1024/NotionNext
- Loading branch information
Showing
37 changed files
with
153 additions
and
123 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,101 @@ | ||
| import { siteConfig } from '@/lib/config' | ||
| import { useGlobal } from '@/lib/global' | ||
| import { useEffect, useRef, useState } from 'react' | ||
| import BlogCard from './BlogCard' | ||
| import BlogPostListEmpty from './BlogListEmpty' | ||
| import { siteConfig } from '@/lib/config'; | ||
| import { useGlobal } from '@/lib/global'; | ||
| import throttle from 'lodash.throttle'; | ||
| import { useCallback, useEffect, useRef, useState } from 'react'; | ||
| import BlogCard from './BlogCard'; | ||
| import BlogPostListEmpty from './BlogListEmpty'; | ||
|
|
||
| /** | ||
| * 文章列表分页表格 | ||
| * @param page 当前页 | ||
| * @param posts 所有文章 | ||
| * @param tags 所有标签 | ||
| * @returns {JSX.Element} | ||
| * @constructor | ||
| */ | ||
| const BlogListScroll = props => { | ||
| const { posts = [], siteInfo } = props | ||
| const { locale, NOTION_CONFIG } = useGlobal() | ||
| const targetRef = useRef(null) | ||
| const [page, updatePage] = useState(1) | ||
| const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG) | ||
| const BlogListScroll = ({ posts }) => { | ||
| const { locale, NOTION_CONFIG } = useGlobal(); | ||
| const [page, setPage] = useState(1); | ||
| const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG); | ||
| const [filterPostsGroups, setFilterPostsGroups] = useState([]); | ||
|
|
||
| let hasMore = false | ||
| const postsToShow = posts | ||
| ? Object.assign(posts).slice(0, POSTS_PER_PAGE * page) | ||
| : [] | ||
| // 每页显示的文章数量 | ||
| const postsPerPage = POSTS_PER_PAGE; | ||
|
|
||
| // 计算总页数 | ||
| const totalPages = Math.ceil(posts.length / postsPerPage); | ||
|
|
||
| // 加载更多文章 | ||
| const loadMorePosts = () => { | ||
| if (page < totalPages) { | ||
| setPage(page + 1); | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| const targetRef = useRef(null) | ||
|
|
||
| if (posts) { | ||
| const totalCount = posts.length | ||
| hasMore = page * POSTS_PER_PAGE < totalCount | ||
| } | ||
| const handleGetMore = () => { | ||
| if (!hasMore) return | ||
| updatePage(page + 1) | ||
| } | ||
|
|
||
| // 监听滚动自动分页加载 | ||
| const scrollTrigger = () => { | ||
| requestAnimationFrame(() => { | ||
| const scrollTrigger = useCallback( | ||
| throttle(() => { | ||
| const scrollS = window.scrollY + window.outerHeight | ||
| const clientHeight = targetRef | ||
| ? targetRef.current | ||
| ? targetRef.current.clientHeight | ||
| : 0 | ||
| : 0 | ||
| if (scrollS > clientHeight + 100) { | ||
| handleGetMore() | ||
| loadMorePosts() | ||
| } | ||
| }) | ||
| } | ||
| }, 500) | ||
| ) | ||
|
|
||
| useEffect(() => { | ||
| window.addEventListener('scroll', scrollTrigger) | ||
| return () => { | ||
| window.removeEventListener('scroll', scrollTrigger) | ||
| } | ||
| }, []) | ||
| }) | ||
|
|
||
| // 根据当前页和每页文章数截取应该显示的文章 | ||
| useEffect(() => { | ||
| const startIndex = (page - 1) * postsPerPage; | ||
| const endIndex = startIndex + postsPerPage; | ||
| const postsToShow = posts.slice(startIndex, endIndex); | ||
| const columns = 3; // 假设有3列 | ||
|
|
||
| // 重新排列文章，保证列优先顺序 | ||
| const newFilterPosts = []; | ||
| for (let col = 0; col < columns; col++) { | ||
| for (let i = col; i < postsToShow.length; i += columns) { | ||
| newFilterPosts.push(postsToShow[i]); | ||
| } | ||
| } | ||
|
|
||
| setFilterPostsGroups((prev) => [...prev, newFilterPosts]); | ||
| }, [posts, page]); | ||
|
|
||
| if (!posts || posts.length === 0) { | ||
| return <BlogPostListEmpty /> | ||
| return <BlogPostListEmpty />; | ||
| } else { | ||
| return ( | ||
| <div id='posts-wrapper' ref={targetRef} className='grid-container'> | ||
| {/* 文章列表 */} | ||
| {postsToShow?.map(post => ( | ||
| <div | ||
| key={post.id} | ||
| className='grid-item justify-center flex' | ||
| style={{ breakInside: 'avoid' }}> | ||
| <BlogCard | ||
| index={posts.indexOf(post)} | ||
| key={post.id} | ||
| post={post} | ||
| siteInfo={siteInfo} | ||
| /> | ||
| <div ref={targetRef}> | ||
| {filterPostsGroups.map((group, groupIndex) => ( | ||
| <div key={groupIndex} id="posts-wrapper" className="grid-container mb-10"> | ||
| {group.map((post) => ( | ||
| <div | ||
| key={post.id} | ||
| className="grid-item justify-center flex" | ||
| style={{ breakInside: 'avoid' }} | ||
| > | ||
| <BlogCard key={post.id} post={post} showAnimate={groupIndex > 0}/> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ))} | ||
|
|
||
| <div | ||
| className='w-full my-4 py-4 text-center cursor-pointer ' | ||
| onClick={handleGetMore}> | ||
| {' '} | ||
| {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} | ||
| className="w-full my-4 py-4 text-center cursor-pointer" | ||
| onClick={loadMorePosts} | ||
| > | ||
| {page < totalPages ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} | ||
| </div> | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| export default BlogListScroll; | ||
|
|
||
| export default BlogListScroll |
Oops, something went wrong.