合并

lib/notion/getNotionData.js

@@ -279,7 +279,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
 
   const customNav = getCustomNav({ allPages })
   const categories = getAllCategories({ allPages, categoryOptions, sliceCount: BLOG.PREVIEW_CATEGORY_COUNT })
-  const tags = getAllTags({ allPages, tagOptions, sliceCount: BLOG.PREVIEW_TAG_COUNT })
+  const tags = getAllTags({ allPages, tagOptions })
   const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })
 
   return {

lib/utils.js

@@ -105,3 +105,17 @@ export const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
  * @returns {boolean}
  */
 export const isBrowser = () => typeof window !== 'undefined'
+
+/**
+ * 获取从第1页到指定页码的文章
+ * @param pageIndex 第几页
+ * @param list 所有文章
+ * @param pageSize 每页文章数量
+ * @returns {*}
+ */
+export const getListByPage = function (list, pageIndex, pageSize) {
+  return list.slice(
+    0,
+    pageIndex * pageSize
+  )
+}

themes/hexo/LayoutTag.js

@@ -3,16 +3,32 @@ import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'
 import TagItemMini from '../next/components/TagItemMini'
-import PaginationNumber from './PaginationNumber'
+// import PaginationNumber from './PaginationNumber'
 import BlogPostListEmpty from './BlogPostListEmpty'
+import React from 'react'
+import { getListByPage, getQueryVariable } from '@/lib/utils'
 
 export const LayoutTag = (props) => {
   const currentTag = props.tags.find((t) => {
     return t.name === props.tag
   })
 
-  const totalPage = Math.ceil(props.postCount / BLOG.POSTS_PER_PAGE)
-  const showPagination = props.postCount >= BLOG.POSTS_PER_PAGE
+  //   const totalPage = Math.ceil(props.postCount / BLOG.POSTS_PER_PAGE)
+  //   const showPagination = props.postCount >= BLOG.POSTS_PER_PAGE
+
+  const [page, updatePage] = React.useState(1)
+
+  const postsPerPage = BLOG.POSTS_PER_PAGE
+
+  const postsToShow = getListByPage(props.posts, page, postsPerPage)
+
+  React.useEffect(() => {
+    const qp = getQueryVariable('page')
+    console.log('分页', qp)
+    if (qp) {
+      updatePage(qp)
+    }
+  })
 
   props.headerSlot = <div className="cursor-pointer px-5 py-1 mb-2 font-light hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform text-center dark:text-white">
     <TagItemMini tag={currentTag}/>
@@ -23,23 +39,13 @@ export const LayoutTag = (props) => {
     return <LayoutBase {...props}> <BlogPostListEmpty/></LayoutBase>
   }
 
-  const page = 1
   return <LayoutBase {...props}>
-            <div className="cursor-pointer px-5 py-1 mb-2 font-light hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform text-center dark:text-white">
-                <TagItemMini tag={currentTag}/>
-            </div>
-
-            { props.postToShow && props.postToShow.length > 0
-              ? (<>
-                {BLOG.POST_LIST_STYLE === 'page'
-                  ? (<div id="container" className='w-full'>
-                        <BlogPostListPage {...props} />
-                        { showPagination && <PaginationNumber page={page} totalPage={totalPage} /> }
-                    </div>)
-                  : <BlogPostListScroll {...props} />}=
-              </>)
-              : (<BlogPostListEmpty/>)
-            }
-
+        {currentTag && (
+        <div className="cursor-pointer px-5 py-1 mb-2 font-light hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform text-center dark:text-white">
+           <TagItemMini tag={currentTag}/>
+        </div>
+        )
+        }
+    {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage posts={postsToShow} page={page} {...props} /> : <BlogPostListScroll {...props} />}
    </LayoutBase>
 }

themes/hexo/components/BlogPostListScroll.js

@@ -5,6 +5,7 @@ import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import CONFIG_HEXO from '../config_hexo'
+import { getListByPage } from '@/lib/utils'
 
 /**
  * 博客列表滚动分页
@@ -16,7 +17,7 @@ import CONFIG_HEXO from '../config_hexo'
 const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_HEXO.POST_LIST_SUMMARY }) => {
   const postsPerPage = BLOG.POSTS_PER_PAGE
   const [page, updatePage] = useState(1)
-  const postsToShow = getPostByPage(page, posts, postsPerPage)
+  const postsToShow = getListByPage(posts, page, postsPerPage)
 
   let hasMore = false
   if (posts) {
@@ -72,17 +73,4 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_HE
   }
 }
 
-/**
- * 获取从第1页到指定页码的文章
- * @param page 第几页
- * @param totalPosts 所有文章
- * @param postsPerPage 每页文章数量
- * @returns {*}
- */
-const getPostByPage = function (page, totalPosts, postsPerPage) {
-  return totalPosts.slice(
-    0,
-    postsPerPage * page
-  )
-}
 export default BlogPostListScroll