d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-04 23:16:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

搜索页面分页处理

Browse Source
This commit is contained in:
tangly
2022-11-18 13:12:59 +08:00
parent 12babbdbca
commit 8a1bf132f2
18 changed files with 354 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
themes/example/LayoutIndex.js
View File

@@ -1,11 +1,13 @@
import BLOG from '@/blog.config'
import { BlogListPage } from './components/BlogListPage'
import { BlogListScroll } from './components/BlogListScroll'
import LayoutBase from './LayoutBase'
export const LayoutIndex = props => {
return (
<LayoutBase {...props}>
<BlogListPage {...props} page={1} />
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</LayoutBase>
)
}

55
themes/example/LayoutSearch.js
View File

@@ -1,14 +1,14 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import { BlogListPage } from './components/BlogListPage'
import { BlogListScroll } from './components/BlogListScroll'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { useEffect } from 'react'
import SearchInput from './components/SearchInput'
import LayoutBase from './LayoutBase'
import { isBrowser } from '@/lib/utils'
export const LayoutSearch = props => {
const { keyword, posts } = props
const { keyword } = props
const router = useRouter()
useEffect(() => {
@@ -21,22 +21,6 @@ export const LayoutSearch = props => {
}, 100)
}, [router.events])
const { locale } = useGlobal()
const [page, updatePage] = useState(1)
let hasMore = false
const postsToShow = posts
? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
: []
if (posts) {
const totalCount = posts.length
hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
}
const handleGetMore = () => {
if (!hasMore) return
updatePage(page + 1)
}
useEffect(() => {
setTimeout(() => {
if (keyword) {
@@ -59,36 +43,7 @@ export const LayoutSearch = props => {
<SearchInput {...props} />
</div>
{postsToShow.map(p => (
<article key={p.id} className="mb-12" >
<h2 className="mb-4">
<Link href={`/${p.slug}`}>
<a className="text-black text-xl md:text-2xl no-underline hover:underline replace"> {p.title}</a>
</Link>
</h2>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
<div className="mb-4 text-sm text-gray-700">
by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
<span className="font-bold mx-1"> | </span>
<a href="#" className="text-gray-700">{p.category}</a>
<span className="font-bold mx-1"> | </span>
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
</div>
<p className="text-gray-700 leading-normal replace">
{p.summary}
</p>
</article>
))}
<div>
<div
onClick={handleGetMore}
className="w-full my-4 py-4 text-center cursor-pointer "
>
{' '}
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
</div>
</div>
</LayoutBase>
}

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

@@ -17,35 +17,37 @@ export const BlogListPage = props => {
return <div className="w-full md:pr-12 mb-12">
{posts.map(p => (
<article key={p.id} className="mb-12" >
<h2 className="mb-4">
<Link href={`/${p.slug}`}>
<a className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline"> {p.title}</a>
</Link>
</h2>
<div id="container">
{posts?.map(p => (
<article key={p.id} className="mb-12" >
<h2 className="mb-4">
<Link href={`/${p.slug}`}>
<a className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline"> {p.title}</a>
</Link>
</h2>
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
<span className="font-bold mx-1"> | </span>
<a href="#" className="text-gray-700 dark:text-gray-300">{p.category}</a>
{/* <span className="font-bold mx-1"> | </span> */}
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
</div>
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
<span className="font-bold mx-1"> | </span>
<a href="#" className="text-gray-700 dark:text-gray-300">{p.category}</a>
{/* <span className="font-bold mx-1"> | </span> */}
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
</div>
<p className="text-gray-700 dark:text-gray-400 leading-normal">
{p.summary}
</p>
{/* 搜索结果 */}
{p.results && (
<p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{p.results.map(r => (
<span key={r}>{r}</span>
))}
<p className="text-gray-700 dark:text-gray-400 leading-normal">
{p.summary}
</p>
)}
</article>
))}
{/* 搜索结果 */}
{p.results && (
<p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{p.results.map(r => (
<span key={r}>{r}</span>
))}
</p>
)}
</article>
))}
</div>
<div className="flex justify-between text-xs">
<Link href={{ pathname: currentPage - 1 === 1 ? `${BLOG.SUB_PATH || pagePrefix}` : `${pagePrefix}/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}>

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

@@ -43,7 +43,7 @@ export const BlogListScroll = props => {
}
})
return <div className="w-full md:pr-12 mb-12" ref={targetRef}>
return <div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}>
{postsToShow.map(p => (
<article key={p.id} className="mb-12" >
<h2 className="mb-4">