@@ -22,6 +22,7 @@ const PaginationNumber = ({ page, totalPage }) => {
22
22
. split ( '?' ) [ 0 ]
23
23
. replace ( / \/ p a g e \/ [ 1 - 9 ] \d * / , '' )
24
24
. replace ( / \/ $ / , '' )
25
+ . replace ( '.html' , '' )
25
26
const pages = generatePages ( pagePrefix , page , currentPage , totalPage )
26
27
if ( pages ?. length <= 1 ) {
27
28
return < > </ >
@@ -46,7 +47,7 @@ const PaginationNumber = ({ page, totalPage }) => {
46
47
return (
47
48
< >
48
49
{ /* pc端分页按钮 */ }
49
- < div className = " hidden lg:flex justify-between items-end mt-10 mb-5 font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2 overflow-x-auto" >
50
+ < div className = ' hidden lg:flex justify-between items-end mt-10 mb-5 font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2 overflow-x-auto' >
50
51
{ /* 上一页 */ }
51
52
< Link
52
53
href = { {
@@ -56,32 +57,29 @@ const PaginationNumber = ({ page, totalPage }) => {
56
57
: `${ pagePrefix } /page/${ currentPage - 1 } ` ,
57
58
query : router . query . s ? { s : router . query . s } : { }
58
59
} }
59
- rel = "prev"
60
- className = { `${ currentPage === 1 ? 'invisible' : 'block' } ` }
61
- >
62
- < div className = "relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group" >
63
- < i className = "fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4" />
64
- < div className = "absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0" >
60
+ rel = 'prev'
61
+ className = { `${ currentPage === 1 ? 'invisible' : 'block' } ` } >
62
+ < div className = 'relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group' >
63
+ < i className = 'fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4' />
64
+ < div className = 'absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0' >
65
65
{ locale . PAGINATION . PREV }
66
66
</ div >
67
67
</ div >
68
68
</ Link >
69
69
70
70
{ /* 分页 */ }
71
- < div className = " flex items-center space-x-2" >
71
+ < div className = ' flex items-center space-x-2' >
72
72
{ pages }
73
73
74
74
{ /* 跳转页码 */ }
75
- < div className = " bg-white hover:bg-gray-100 dark:hover:bg-yellow-600 dark:bg-[#1e1e1e] h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200" >
75
+ < div className = ' bg-white hover:bg-gray-100 dark:hover:bg-yellow-600 dark:bg-[#1e1e1e] h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200' >
76
76
< input
77
77
value = { value }
78
- className = "w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg"
79
- onInput = { handleInputChange }
80
- > </ input >
78
+ className = 'w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg'
79
+ onInput = { handleInputChange } > </ input >
81
80
< div
82
81
onClick = { jumpToPage }
83
- className = "cursor-pointer hover:bg-indigo-600 dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white"
84
- >
82
+ className = 'cursor-pointer hover:bg-indigo-600 dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white' >
85
83
< ChevronDoubleRight className = { 'w-4 h-4' } />
86
84
</ div >
87
85
</ div >
@@ -93,12 +91,11 @@ const PaginationNumber = ({ page, totalPage }) => {
93
91
pathname : `${ pagePrefix } /page/${ currentPage + 1 } ` ,
94
92
query : router . query . s ? { s : router . query . s } : { }
95
93
} }
96
- rel = "next"
97
- className = { `${ + showNext ? 'block' : 'invisible' } ` }
98
- >
99
- < div className = "relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group" >
100
- < i className = "fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6" />
101
- < div className = "absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2" >
94
+ rel = 'next'
95
+ className = { `${ + showNext ? 'block' : 'invisible' } ` } >
96
+ < div className = 'relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group' >
97
+ < i className = 'fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6' />
98
+ < div className = 'absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2' >
102
99
{ locale . PAGINATION . NEXT }
103
100
</ div >
104
101
</ div >
@@ -107,7 +104,7 @@ const PaginationNumber = ({ page, totalPage }) => {
107
104
108
105
{ /* 移动端分页 */ }
109
106
110
- < div className = " lg:hidden w-full flex flex-row" >
107
+ < div className = ' lg:hidden w-full flex flex-row' >
111
108
{ /* 上一页 */ }
112
109
< Link
113
110
href = { {
@@ -117,23 +114,21 @@ const PaginationNumber = ({ page, totalPage }) => {
117
114
: `${ pagePrefix } /page/${ currentPage - 1 } ` ,
118
115
query : router . query . s ? { s : router . query . s } : { }
119
116
} }
120
- rel = "prev"
121
- className = { `${ showPrev ? 'block' : 'hidden' } dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer` }
122
- >
117
+ rel = 'prev'
118
+ className = { `${ showPrev ? 'block' : 'hidden' } dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer` } >
123
119
{ locale . PAGINATION . PREV }
124
120
</ Link >
125
121
126
- { showPrev && showNext && < div className = " w-12" > </ div > }
122
+ { showPrev && showNext && < div className = ' w-12' > </ div > }
127
123
128
124
{ /* 下一页 */ }
129
125
< Link
130
126
href = { {
131
127
pathname : `${ pagePrefix } /page/${ currentPage + 1 } ` ,
132
128
query : router . query . s ? { s : router . query . s } : { }
133
129
} }
134
- rel = "next"
135
- className = { `${ + showNext ? 'block' : 'hidden' } dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer` }
136
- >
130
+ rel = 'next'
131
+ className = { `${ + showNext ? 'block' : 'hidden' } dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer` } >
137
132
{ locale . PAGINATION . NEXT }
138
133
</ Link >
139
134
</ div >
@@ -163,8 +158,7 @@ function getPageElement(page, currentPage, pagePrefix) {
163
158
? 'bg-indigo-600 dark:bg-yellow-600 text-white '
164
159
: 'dark:bg-[#1e1e1e] bg-white' ) +
165
160
' hover:border-indigo-600 dark:hover:bg-yellow-600 dark:border-gray-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
166
- }
167
- >
161
+ } >
168
162
{ page }
169
163
</ Link >
170
164
)
@@ -197,7 +191,7 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
197
191
}
198
192
if ( startPage > 2 ) {
199
193
pages . push (
200
- < div key = { - 1 } className = " -mt-2 mx-1" >
194
+ < div key = { - 1 } className = ' -mt-2 mx-1' >
201
195
...{ ' ' }
202
196
</ div >
203
197
)
0 commit comments