分页适配example主题

pages/tag/index.js

@@ -27,7 +27,6 @@ const TagIndex = props => {
 export async function getStaticProps() {
   const from = 'tag-index-props'
   const props = await getGlobalNotionData({ from })
-  console.log('获取所有标签', props)
   props.tags = getAllTags({ allPages: props.allPages, sliceCount: 0, tagOptions: props.tagOptions })
   delete props.tagOptions
   return {

themes/example/LayoutCategory.js

@@ -1,61 +1,10 @@
 import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
+import { BlogListPage } from './components/BlogListPage'
-import Link from 'next/link'
+import { BlogListScroll } from './components/BlogListScroll'
-import { useState } from 'react'
 import LayoutBase from './LayoutBase'
 
 export const LayoutCategory = props => {
-  const { category, posts } = props
-  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)
-  }
-
   return <LayoutBase {...props}>
-        <div className='w-full'>
+       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-            <div className='pb-12'>{category}</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">  {p.title}</a>
-                        </Link>
-                    </h2>
-
-                    <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">
-                        {p.summary}
-                    </p>
-                </article>
-            ))}
-
-            <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 >
 }

themes/example/LayoutCategoryIndex.js

@@ -5,7 +5,6 @@ export const LayoutCategoryIndex = (props) => {
   const { categories } = props
 
   return <LayoutBase {...props}>
-    <div >
       <div id='category-list' className='duration-200 flex flex-wrap'>
         {categories && categories.map(category => {
           return <Link key={category.name} href={`/category/${category.name}`} passHref>
@@ -16,6 +15,5 @@ export const LayoutCategoryIndex = (props) => {
           </Link>
         })}
       </div>
-    </div>
   </LayoutBase>
 }

themes/example/LayoutIndex.js

@@ -1,11 +1,11 @@
 
-import { BlogList } from './components/BlogList'
+import { BlogListPage } from './components/BlogListPage'
 import LayoutBase from './LayoutBase'
 
 export const LayoutIndex = props => {
   return (
     <LayoutBase {...props}>
-      <BlogList {...props} page={1} />
+      <BlogListPage {...props} page={1} />
     </LayoutBase>
   )
 }

themes/example/LayoutPage.js

@@ -1,10 +1,10 @@
-import { BlogList } from './components/BlogList'
+import { BlogListPage } from './components/BlogListPage'
 import LayoutBase from './LayoutBase'
 
 export const LayoutPage = props => {
   return (
     <LayoutBase {...props}>
-        <BlogList {...props} />
+        <BlogListPage {...props} />
     </LayoutBase>
   )
 }

themes/example/LayoutTag.js

@@ -1,59 +1,10 @@
 import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
+import { BlogListPage } from './components/BlogListPage'
-import Link from 'next/link'
+import { BlogListScroll } from './components/BlogListScroll'
-import { useState } from 'react'
 import LayoutBase from './LayoutBase'
 
 export const LayoutTag = props => {
-  const { posts } = props
+  return <LayoutBase {...props}>
-  const { locale } = useGlobal()
+       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-
-  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)
-  }
-
-  return <LayoutBase>
-        {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">  {p.title}</a>
-                    </Link>
-                </h2>
-
-                <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">
-                    {p.summary}
-                </p>
-            </article>
-        ))}
-
-        <div
-            onClick={handleGetMore}
-            className="w-full my-4 py-4 text-center cursor-pointer "
-        >
-            {' '}
-            {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
-        </div>
-
     </LayoutBase >
 }

themes/example/components/BlogListPage.js

@@ -4,20 +4,17 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 
-export const BlogList = (props) => {
+export const BlogListPage = props => {
-  const { page, posts, postCount } = props
+  const { page = 1, posts, postCount } = props
-
   const { locale } = useGlobal()
   const router = useRouter()
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
-
-  const showNext =
-        page < totalPage &&
-        posts.length === BLOG.POSTS_PER_PAGE &&
-        posts.length < postCount
-
   const currentPage = +page
 
+  const showPrev = currentPage > 1
+  const showNext = page < totalPage
+  const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+
   return <div className="w-full md:pr-12 mb-12">
 
         {posts.map(p => (
@@ -51,10 +48,10 @@ export const BlogList = (props) => {
         ))}
 
         <div className="flex justify-between text-xs">
-            <Link href={{ pathname: currentPage - 1 === 1 ? `${BLOG.SUB_PATH || '/'}` : `/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}>
+            <Link href={{ pathname: currentPage - 1 === 1 ? `${BLOG.SUB_PATH || pagePrefix}` : `${pagePrefix}/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}>
-                <a className={`${currentPage > 1 ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>{locale.PAGINATION.PREV}</a>
+                <a className={`${showPrev ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>{locale.PAGINATION.PREV}</a>
             </Link>
-            <Link href={{ pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} }}>
+            <Link href={{ pathname: `${pagePrefix}/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} }}>
                 <a className={`${showNext ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>{locale.PAGINATION.NEXT}</a>
             </Link>
         </div>

themes/example/components/BlogListScroll.js

@@ -0,0 +1,58 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const BlogListScroll = props => {
+  const { posts } = props
+  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)
+  }
+
+  return <div className="w-full md:pr-12 mb-12">
+          {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">  {p.title}</a>
+                      </Link>
+                  </h2>
+
+                  <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">
+                      {p.summary}
+                  </p>
+              </article>
+          ))}
+
+          <div
+              onClick={handleGetMore}
+              className="w-full my-4 py-4 text-center cursor-pointer "
+          >
+              {' '}
+              {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+          </div>
+
+      </div>
+}