d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2549 from tangly1024/fix/fukasawa-scroll-page

Browse Source 
主题分页相关调整,fix fukasawa scroll功能
This commit is contained in:
tangly1024
2024-06-28 16:58:46 +08:00
committed by GitHub
parent b3e008a5f7 3f686ed16f
commit b13c54ed66
32 changed files with 131 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/category/[category]/page/[page].js
View File

@@ -71,7 +71,7 @@ export async function getStaticPaths() {
// 处理文章页数
const postCount = categoryPosts.length
const totalPages = Math.ceil(
postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
)
if (totalPages > 1) {
for (let i = 1; i <= totalPages; i++) {

2
pages/page/[page].js
View File

@@ -23,7 +23,7 @@ export async function getStaticPaths({ locale }) {
const from = 'page-paths'
const { postCount, NOTION_CONFIG } = await getGlobalData({ from, locale })
const totalPages = Math.ceil(
postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
)
return {
// remove first page, we 're not gonna handle that.

1
pages/sitemap.xml.js
View File

@@ -27,7 +27,6 @@ export const getServerSideProps = async ctx => {
'Cache-Control',
'public, max-age=3600, stale-while-revalidate=59'
)
console.log('fff', fields)
return getServerSideSitemap(ctx, fields)
}

2
pages/tag/[tag]/page/[page].js
View File

@@ -56,7 +56,7 @@ export async function getStaticPaths() {
// 处理文章页数
const postCount = tagPosts.length
const totalPages = Math.ceil(
postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
)
if (totalPages > 1) {
for (let i = 1; i <= totalPages; i++) {

2
themes/commerce/components/BlogPostListPage.js
View File

@@ -14,7 +14,7 @@ import ProductCard from './ProductCard'
*/
const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
const showPagination = postCount >= POSTS_PER_PAGE
if (!posts || posts.length === 0 || page > totalPage) {

2
themes/commerce/components/BlogPostListScroll.js
View File

@@ -20,7 +20,7 @@ const BlogPostListScroll = ({
siteInfo
}) => {
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const [page, updatePage] = useState(1)
const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)

2
themes/example/components/BlogListPage.js
View File

@@ -14,7 +14,7 @@ export const BlogListPage = props => {
const { locale, NOTION_CONFIG } = useGlobal()
const router = useRouter()
const totalPage = Math.ceil(
postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
)
const currentPage = +page

2
themes/example/components/BlogListScroll.js
View File

@@ -13,7 +13,7 @@ export const BlogListScroll = props => {
const { posts } = props
const { locale, NOTION_CONFIG } = useGlobal()
const [page, updatePage] = useState(1)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
let hasMore = false
const postsToShow = posts

1
themes/example/components/SearchInput.js
View File

@@ -24,7 +24,6 @@ const SearchInput = ({ currentTag, keyword, cRef }) => {
const key = searchInputRef.current.value
if (key && key !== '') {
router.push({ pathname: '/search/' + key }).then(r => {
console.log('搜索', key)
})
} else {
router.push({ pathname: '/' }).then(r => {

7
themes/fukasawa/components/BlogCard.js
View File

@@ -1,6 +1,7 @@
import LazyImage from '@/components/LazyImage'
import NotionIcon from '@/components/NotionIcon'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import CONFIG from '../config'
import TagItemMini from './TagItemMini'
@@ -10,7 +11,8 @@ import TagItemMini from './TagItemMini'
* @param {*} param0
* @returns
*/
const BlogCard = ({ index, post, showSummary, siteInfo }) => {
const BlogCard = ({ showAnimate, post, showSummary }) => {
const {siteInfo} =useGlobal()
const showPreview =
siteConfig('FUKASAWA_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
// fukasawa 强制显示图片
@@ -24,11 +26,12 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
const showPageCover =
siteConfig('FUKASAWA_POST_LIST_COVER', null, CONFIG) &&
post?.pageCoverThumbnail
const FUKASAWA_POST_LIST_ANIMATION = siteConfig(
'FUKASAWA_POST_LIST_ANIMATION',
null,
CONFIG
)
) || showAnimate
// 动画样式 首屏卡片不用，后面翻出来的加动画
const aosProps = FUKASAWA_POST_LIST_ANIMATION

35
themes/fukasawa/components/BlogListPage.js
View File

@@ -17,8 +17,9 @@ import PaginationSimple from './PaginationSimple'
*/
const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
const { NOTION_CONFIG } = useGlobal()
const postsPerPage = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(
postCount / parseInt(siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG))
postCount / postsPerPage
)
const showNext = page < totalPage
@@ -33,23 +34,27 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
return () => window.removeEventListener('resize', handleResize)
}, [])
/**
* 文章重新布局，使纵向排列看起来是横向排列
*/
/**
* 文章重新布局，使纵向排列看起来是横向排列
*/
useEffect(() => {
const count = posts?.length || 0
const rows = Math.ceil(count / columns)
const newFilterPosts = []
for (let i = 0; i < columns; i++) {
for (let j = 0; j < rows; j++) {
const index = j * columns + i
if (index < count) {
newFilterPosts.push(deepClone(posts[index]))
const count = posts?.length || 0;
const rows = Math.ceil(count / columns);
const newFilterPosts = new Array(count);
let index = 0;
for (let col = 0; col < columns; col++) {
for (let row = 0; row < rows; row++) {
const sourceIndex = row * columns + col;
if (sourceIndex < count) {
newFilterPosts[index] = deepClone(posts[sourceIndex]);
index++;
}
}
}
}
setFilterPosts(newFilterPosts)
}, [columns, posts])
setFilterPosts(newFilterPosts);
}, [columns, posts]);
if (!filterPosts || filterPosts.length === 0) {
return <BlogPostListEmpty />

130
themes/fukasawa/components/BlogListScroll.js
View File

@@ -1,41 +1,36 @@
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';
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([]);
// 每页显示的文章数量
const postsPerPage = POSTS_PER_PAGE;
// 计算总页数
const totalPages = Math.ceil(posts.length / postsPerPage);
// 加载更多文章
const loadMorePosts = () => {
if (page < totalPages) {
setPage(page + 1);
}
};
/**
* 文章列表分页表格
* @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)
let hasMore = false
const postsToShow = posts
? Object.assign(posts).slice(0, POSTS_PER_PAGE * page)
: []
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
@@ -43,47 +38,64 @@ const BlogListScroll = props => {
: 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

3
themes/fukasawa/index.js
View File

@@ -114,12 +114,13 @@ const LayoutIndex = props => {
* @param {*} props
*/
const LayoutPostList = props => {
const POST_LIST_STYLE = siteConfig('POST_LIST_STYLE')
return (
<>
<div className='w-full p-2'>
<WWAds className='w-full' orientation='horizontal' />
</div>
{siteConfig('POST_LIST_STYLE') === 'page' ? (
{ POST_LIST_STYLE=== 'page' ? (
<BlogListPage {...props} />
) : (
<BlogListScroll {...props} />

9
themes/fukasawa/style.js
View File

@@ -44,7 +44,16 @@ const Style = () => {
column-gap: .5rem;
}
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
}
`}</style>
}
export { Style }

2
themes/game/components/BlogListScroll.js
View File

@@ -9,7 +9,7 @@ export const BlogListScroll = props => {
const { posts } = props
const { locale, NOTION_CONFIG } = useGlobal()
const [page, updatePage] = useState(1)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
let hasMore = false
const postsToShow =

2
themes/heo/components/BlogPostListPage.js
View File

@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
*/
const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
const showPagination = postCount >= POSTS_PER_PAGE
if (!posts || posts.length === 0 || page > totalPage) {

2
themes/heo/components/BlogPostListScroll.js
View File

@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
}) => {
const { NOTION_CONFIG } = useGlobal()
const [page, updatePage] = useState(1)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
let hasMore = false

2
themes/hexo/components/BlogPostListPage.js
View File

@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
*/
const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
const showPagination = postCount >= POSTS_PER_PAGE
if (!posts || posts.length === 0 || page > totalPage) {

2
themes/hexo/components/BlogPostListScroll.js
View File

@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
}) => {
const { NOTION_CONFIG } = useGlobal()
const [page, updatePage] = useState(1)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
let hasMore = false

2
themes/matery/components/BlogPostListPage.js
View File

@@ -14,7 +14,7 @@ import PaginationSimple from './PaginationSimple'
*/
const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
const showPagination = postCount >= POSTS_PER_PAGE
if (!posts || posts.length === 0 || page > totalPage) {

2
themes/matery/components/BlogPostListScroll.js
View File

@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
siteInfo
}) => {
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const [page, updatePage] = useState(1)
const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
// 监听滚动

2
themes/medium/components/BlogPostListPage.js
View File

@@ -14,7 +14,7 @@ import PaginationSimple from './PaginationSimple'
*/
const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
if (!posts || posts.length === 0) {

2
themes/medium/components/BlogPostListScroll.js
View File

@@ -15,7 +15,7 @@ import BlogPostListEmpty from './BlogPostListEmpty'
*/
const BlogPostListScroll = ({ posts = [], currentSearch }) => {
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const [page, updatePage] = useState(1)
const router = useRouter()
let filteredPosts = Object.assign(posts)

2
themes/movie/components/BlogListPage.js
View File

@@ -7,7 +7,7 @@ import PaginationNumber from './PaginationNumber'
export const BlogListPage = props => {
const { page = 1, posts, postCount } = props
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)

2
themes/nav/components/BlogPostListPage.js
View File

@@ -13,7 +13,7 @@ import PaginationSimple from './PaginationSimple'
*/
const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
const totalPage = Math.ceil(
postCount / parseInt(siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG))
postCount / parseInt(siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG))
)
if (!posts || posts.length === 0) {

2
themes/nav/components/NavPostItem.js
View File

@@ -16,8 +16,6 @@ const NavPostItem = props => {
const toggleOpenSubMenu = () => {
changeIsOpen(!isOpen)
}
console.log('group::')
console.log(group)
if (group?.category) {
return (

2
themes/next/components/BlogPostListPage.js
View File

@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
*/
const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
if (!posts || posts.length === 0) {

2
themes/next/components/BlogPostListScroll.js
View File

@@ -19,7 +19,7 @@ const BlogPostListScroll = ({
showSummary = siteConfig('NEXT_POST_LIST_SUMMARY', null, CONFIG)
}) => {
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const [page, updatePage] = useState(1)
const postsToShow = getPostByPage(page, posts, POSTS_PER_PAGE)

2
themes/nobelium/components/BlogListPage.js
View File

@@ -9,7 +9,7 @@ export const BlogListPage = props => {
const { locale } = useGlobal()
const router = useRouter()
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
const currentPage = +page

2
themes/plog/components/BlogListPage.js
View File

@@ -10,7 +10,7 @@ export const BlogListPage = props => {
const { locale } = useGlobal()
const router = useRouter()
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
const currentPage = +page

2
themes/simple/components/BlogListPage.js
View File

@@ -15,7 +15,7 @@ export default function BlogListPage(props) {
const { page = 1, posts, postCount } = props
const router = useRouter()
const { NOTION_CONFIG } = useGlobal()
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
const currentPage = +page

2
themes/simple/components/BlogListScroll.js
View File

@@ -13,7 +13,7 @@ export default function BlogListScroll(props) {
const { posts } = props
const { locale, NOTION_CONFIG } = useGlobal()
const [page, updatePage] = useState(1)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
let hasMore = false
const postsToShow = posts
? Object.assign(posts).slice(0, POSTS_PER_PAGE * page)