File size: 4,022 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
import Link from 'next/link'
import { useRouter } from 'next/router'
/**
* 数字翻页插件
* @param page 当前页码
* @param showNext 是否有下一页
* @returns {JSX.Element}
* @constructor
*/
const PaginationNumber = ({ page, totalPage }) => {
const router = useRouter()
const currentPage = +page
const showNext = currentPage !== totalPage
const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
const pages = generatePages(pagePrefix, page, currentPage, totalPage)
return (
<div
data-aos="fade-down"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
className="my-5 flex justify-center items-end font-medium text-black hover:shadow-xl duration-200 transition-all bg-white dark:bg-hexo-black-gray dark:text-gray-300 py-3 shadow space-x-2">
{/* 上一页 */}
<Link
href={{
pathname:
currentPage - 1 === 1
? `${pagePrefix}/`
: `${pagePrefix}/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
legacyBehavior>
<div
rel="prev"
className={`${currentPage === 1 ? 'invisible' : 'block'
} hover:border-t-2 border-white hover:border-gray-400 dark:hover:border-gray-400 w-8 h-8 justify-center flex items-center cursor-pointer duration-200 transition-all hover:font-bold`}
>
<i className="fas fa-angle-left" />
</div>
</Link>
{pages}
{/* 下一页 */}
<Link
href={{
pathname: `${pagePrefix}/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
legacyBehavior>
<div
rel="next"
className={`${+showNext ? 'block' : 'invisible'
} hover:border-t-2 border-white hover:border-gray-400 dark:hover:border-gray-400 w-8 h-8 justify-center flex items-center cursor-pointer duration-200 transition-all hover:font-bold`}
>
<i className="fas fa-angle-right" />
</div>
</Link>
</div>
)
}
function getPageElement(pagePrefix, page, currentPage) {
return (
(<Link
href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
key={page}
passHref
className={
(page + '' === currentPage + ''
? 'font-bold bg-gray-500 dark:bg-gray-400 text-white '
: 'hover:border-t-2 duration-200 transition-all border-white hover:border-gray-400 ') +
' border-white dark:hover:border-gray-400 cursor-pointer w-8 h-8 justify-center flex items-center font-light hover:font-bold'
}>
{page}
</Link>)
)
}
function generatePages(pagePrefix, page, currentPage, totalPage) {
const pages = []
const groupCount = 7 // 最多显示页签数
if (totalPage <= groupCount) {
for (let i = 1; i <= totalPage; i++) {
pages.push(getPageElement(pagePrefix, i, page))
}
} else {
pages.push(getPageElement(pagePrefix, 1, page))
const dynamicGroupCount = groupCount - 2
let startPage = currentPage - 2
if (startPage <= 1) {
startPage = 2
}
if (startPage + dynamicGroupCount > totalPage) {
startPage = totalPage - dynamicGroupCount
}
if (startPage > 2) {
pages.push(<div key={-1} className='select-none'>... </div>)
}
for (let i = 0; i < dynamicGroupCount; i++) {
if (startPage + i < totalPage) {
pages.push(getPageElement(pagePrefix, startPage + i, page))
}
}
if (startPage + dynamicGroupCount < totalPage) {
pages.push(<div key={-2} className='select-none'>... </div>)
}
pages.push(getPageElement(pagePrefix, totalPage, page))
}
return pages
}
export default PaginationNumber
|