hexo主题 新增category、tag分页

pages/category/[category]/index.js

@@ -2,7 +2,13 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
+import BLOG from '@/blog.config'
 
+/**
+ * 分类页
+ * @param {*} props
+ * @returns
+ */
 export default function Category(props) {
   const { theme } = useGlobal()
   const ThemeComponents = ThemeMap[theme]
@@ -26,12 +32,23 @@ export default function Category(props) {
 export async function getStaticProps({ params: { category } }) {
   const from = 'category-props'
   let props = await getGlobalNotionData({ from })
-  const { allPages } = props
-  const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
-  const posts = allPosts.filter(
-    post => post && post.category && post.category.includes(category)
-  )
-  props = { ...props, posts, category }
+
+  // 过滤状态
+  props.posts = props.allPages.filter(page => page.type === 'Post' && page.status === 'Published')
+  // 处理过滤
+  props.posts = props.posts.filter(post => post && post.category && post.category.includes(category))
+  // 处理文章页数
+  props.postCount = props.posts.length
+  // 处理分页
+  if (BLOG.POST_LIST_STYLE === 'scroll') {
+    // 滚动列表 给前端返回所有数据
+  } else if (BLOG.POST_LIST_STYLE === 'page') {
+    props.posts = props.posts?.slice(0, BLOG.POSTS_PER_PAGE - 1)
+  }
+
+  delete props.allPages
+
+  props = { ...props, category }
 
   return {
     props,

pages/category/[category]/page/[page].js

@@ -0,0 +1,65 @@
+import { getGlobalNotionData } from '@/lib/notion/getNotionData'
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import * as ThemeMap from '@/themes'
+import BLOG from '@/blog.config'
+
+/**
+ * 分类页
+ * @param {*} props
+ * @returns
+ */
+export default function Category(props) {
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
+  const { siteInfo, posts } = props
+  const { locale } = useGlobal()
+  if (!posts) {
+    return <ThemeComponents.Layout404 {...props} />
+  }
+  const meta = {
+    title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
+      siteInfo?.title || ''
+    }`,
+    description: siteInfo?.description,
+    slug: 'category/' + props.category,
+    image: siteInfo?.pageCover,
+    type: 'website'
+  }
+  return <ThemeComponents.LayoutCategory {...props} meta={meta} />
+}
+
+export async function getStaticProps({ params: { category, page } }) {
+  const from = 'category-page-props'
+  let props = await getGlobalNotionData({ from })
+
+  // 过滤状态
+  props.posts = props.allPages.filter(page => page.type === 'Post' && page.status === 'Published')
+  // 过滤类型
+  props.posts = props.posts.filter(post => post && post.category && post.category.includes(category))
+  // 处理文章页数
+  props.postCount = props.posts.length
+  // 处理分页
+  props.posts = props.posts.slice(BLOG.POSTS_PER_PAGE * (page - 1), BLOG.POSTS_PER_PAGE * page - 1)
+
+  delete props.allPages
+  props.page = page
+
+  props = { ...props, category, page }
+
+  return {
+    props,
+    revalidate: 1
+  }
+}
+
+export async function getStaticPaths() {
+  const from = 'category-paths'
+  const { categories } = await getGlobalNotionData({ from })
+  return {
+    paths: Object.keys(categories).map(category => ({
+      params: { category: categories[category]?.name, page: '1' }
+    })),
+    fallback: true
+  }
+}

pages/category/index.js

@@ -3,6 +3,11 @@ import React from 'react'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
 
+/**
+ * 分类首页
+ * @param {*} props
+ * @returns
+ */
 export default function Category(props) {
   const { theme } = useGlobal()
   const ThemeComponents = ThemeMap[theme]

pages/index.js

@@ -12,8 +12,8 @@ const Index = props => {
 export async function getStaticProps() {
   const from = 'index'
   const props = await getGlobalNotionData({ from })
-  const { allPages, siteInfo } = props
-  const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
+  const { siteInfo } = props
+  props.posts = props.allPages.filter(page => page.type === 'Post' && page.status === 'Published')
   const meta = {
     title: `${siteInfo?.title} | ${siteInfo?.description}`,
     description: siteInfo?.description,
@@ -21,12 +21,11 @@ export async function getStaticProps() {
     slug: '',
     type: 'website'
   }
-
   // 处理分页
   if (BLOG.POST_LIST_STYLE === 'scroll') {
-    props.posts = Array.from(allPosts)
+    // 滚动列表默认给前端返回所有数据
   } else if (BLOG.POST_LIST_STYLE === 'page') {
-    props.posts = allPosts?.slice(0, BLOG.POSTS_PER_PAGE)
+    props.posts = props.posts?.slice(0, BLOG.POSTS_PER_PAGE)
   }
 
   // 预览文章内容

pages/page/[page].js

@@ -37,11 +37,11 @@ export async function getStaticPaths() {
 export async function getStaticProps({ params: { page } }) {
   const from = `page-${page}`
   const props = await getGlobalNotionData({ from })
-  props.page = page
   const { allPages } = props
   const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
   // 处理分页
   props.posts = allPosts.slice(BLOG.POSTS_PER_PAGE * (page - 1), BLOG.POSTS_PER_PAGE * page)
+  props.page = page
 
   // 处理预览
   if (BLOG.POST_LIST_PREVIEW === 'true') {

pages/tag/[tag]/index.js

@@ -1,6 +1,7 @@
 import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import * as ThemeMap from '@/themes'
+import BLOG from '@/blog.config'
 
 const Tag = props => {
   const { theme } = useGlobal()
@@ -23,16 +24,25 @@ const Tag = props => {
 }
 
 export async function getStaticProps({ params: { tag } }) {
-  const props = await getGlobalNotionData({
-    from: 'tag-props',
-    includePage: false,
-    tagsCount: 0
-  })
-  const { allPages } = props
-  const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
-  props.posts = allPosts.filter(
-    post => post && post.tags && post.tags.includes(tag)
-  )
+  const from = 'tag-props'
+  const props = await getGlobalNotionData({ from })
+
+  // 过滤状态
+  props.posts = props.allPages.filter(page => page.type === 'Post' && page.status === 'Published')
+
+  // 处理标签
+  props.posts = props.posts.filter(post => post && post.tags && post.tags.includes(tag))
+
+  // 处理文章页数
+  props.postCount = props.posts.length
+
+  // 处理分页
+  if (BLOG.POST_LIST_STYLE === 'scroll') {
+    // 滚动列表 给前端返回所有数据
+  } else if (BLOG.POST_LIST_STYLE === 'page') {
+    props.posts = props.posts?.slice(0, BLOG.POSTS_PER_PAGE - 1)
+  }
+
   props.tag = tag
   return {
     props,

pages/tag/[tag]/page/[page].js

@@ -0,0 +1,63 @@
+import { useGlobal } from '@/lib/global'
+import { getGlobalNotionData } from '@/lib/notion/getNotionData'
+import * as ThemeMap from '@/themes'
+import BLOG from '@/blog.config'
+
+const Tag = props => {
+  const { theme } = useGlobal()
+  const ThemeComponents = ThemeMap[theme]
+  const { locale } = useGlobal()
+  const { tag, siteInfo, posts } = props
+
+  if (!posts) {
+    return <ThemeComponents.Layout404 {...props} />
+  }
+
+  const meta = {
+    title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
+    description: siteInfo?.description,
+    image: siteInfo?.pageCover,
+    slug: 'tag/' + tag,
+    type: 'website'
+  }
+  return <ThemeComponents.LayoutTag {...props} meta={meta} />
+}
+
+export async function getStaticProps({ params: { tag, page } }) {
+  const from = 'tag-page-props'
+  const props = await getGlobalNotionData({ from })
+  // 过滤状态
+  props.posts = props.allPages.filter(page => page.type === 'Post' && page.status === 'Published')
+  // 过滤标签
+  props.posts = props.posts.filter(post => post && post.tags && post.tags.includes(tag))
+  // 处理文章页数
+  props.postCount = props.posts.length
+  // 处理分页
+  props.posts = props.posts.slice(BLOG.POSTS_PER_PAGE * (page - 1), BLOG.POSTS_PER_PAGE * page - 1)
+
+  props.tag = tag
+  props.page = page
+
+  return {
+    props,
+    revalidate: 1
+  }
+}
+
+export async function getStaticPaths() {
+  const from = 'tag-static-path'
+  const { tags } = await getGlobalNotionData({ from })
+  const tagNames = []
+  tags.forEach(tag => {
+    tagNames.push(tag.name)
+  })
+
+  return {
+    paths: Object.keys(tagNames).map(index => ({
+      params: { tag: tagNames[index], page: '1' }
+    })),
+    fallback: true
+  }
+}
+
+export default Tag

pages/tag/index.js

@@ -3,6 +3,11 @@ import React from 'react'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
 
+/**
+ * 标签首页
+ * @param {*} props
+ * @returns
+ */
 const TagIndex = props => {
   const { theme } = useGlobal()
   const ThemeComponents = ThemeMap[theme]

themes/hexo/LayoutCategory.js

@@ -1,13 +1,15 @@
 import BlogPostListScroll from './components/BlogPostListScroll'
+import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'
+import BLOG from '@/blog.config'
 
 export const LayoutCategory = props => {
-  const { tags, posts, category } = props
+  const { category } = props
   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">
             <i className="mr-1 far fa-folder" />
             {category}
         </div>
-        <BlogPostListScroll posts={posts} tags={tags} currentCategory={category} />
+        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
     </LayoutBase>
 }

themes/hexo/LayoutTag.js

@@ -3,49 +3,19 @@ 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 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 [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}/>
-  </div>
-
-  // 空文章处理
-  if (!props.postToShow || props.postToShow.length === 0) {
-    return <LayoutBase {...props}> <BlogPostListEmpty/></LayoutBase>
-  }
-
   return <LayoutBase {...props}>
         {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>
+            <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 {...props} /> : <BlogPostListScroll {...props} />}
+    </LayoutBase>
 }

themes/hexo/components/BlogPostListPage.js

@@ -14,8 +14,7 @@ import BlogPostListEmpty from './BlogPostListEmpty'
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
   const showPagination = postCount >= BLOG.POSTS_PER_PAGE
-
-  if (!posts || posts.length === 0) {
+  if (!posts || posts.length === 0 || page > totalPage) {
     return <BlogPostListEmpty />
   } else {
     return (

themes/hexo/components/BlogPostListScroll.js

@@ -63,9 +63,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_HE
       </div>
 
       <div>
-        <div onClick={() => {
-          handleGetMore()
-        }}
+        <div onClick={() => { handleGetMore() }}
              className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200'
         > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`} </div>
       </div>

themes/hexo/components/PaginationNumber.js

@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
@@ -13,76 +12,66 @@ const PaginationNumber = ({ page, totalPage }) => {
   const router = useRouter()
   const currentPage = +page
   const showNext = page < totalPage
-  const pages = generatePages(page, currentPage, totalPage)
+  const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+  const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   return (
-    <div className="mt-10 mb-5  flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
-      {/* 上一页 */}
-      <Link
-        href={{
-          pathname:
-            currentPage - 1 === 1
-              ? `${BLOG.SUB_PATH || '/'}`
-              : `/page/${currentPage - 1}`,
-          query: router.query.s ? { s: router.query.s } : {}
-        }}
-        passHref
-      >
-        <div
-          rel="prev"
-          className={`${currentPage === 1 ? 'invisible' : 'block'
-            } pb-0.5 border-white dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}
-        >
-          <i className="fas fa-angle-left" />
-        </div>
-      </Link>
+        <div className="mt-10 mb-5  flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
+            {/* 上一页 */}
+            <Link
+                href={{
+                  pathname: currentPage === 2
+                    ? pagePrefix
+                    : `${pagePrefix}/page/${currentPage - 1}`,
+                  query: router.query.s ? { s: router.query.s } : {}
+                }}
+            >
+                <a rel="prev" className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 border-white dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}>
+                    <i className="fas fa-angle-left" />
+                </a>
+            </Link>
 
-      {pages}
+            {pages}
 
-      {/* 下一页 */}
-      <Link
-        href={{
-          pathname: `/page/${currentPage + 1}`,
-          query: router.query.s ? { s: router.query.s } : {}
-        }}
-        passHref
-      >
-        <div
-          rel="next"
-          className={`${+showNext ? 'block' : 'invisible'
-            } pb-0.5 border-b border-indigo-300 dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
-        >
-          <i className="fas fa-angle-right" />
+            {/* 下一页 */}
+            <Link
+                href={{
+                  pathname: `${pagePrefix}/page/${currentPage + 1}`,
+                  query: router.query.s ? { s: router.query.s } : {}
+                }}
+            >
+                <a rel="next" className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-indigo-300 dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}>
+                    <i className="fas fa-angle-right" />
+                </a>
+            </Link>
         </div>
-      </Link>
-    </div>
   )
 }
 
-function getPageElement(page, currentPage) {
+function getPageElement(page, currentPage, pagePrefix) {
   return (
-    <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
-      <a className={
-          (page + '' === currentPage + ''
-            ? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white '
-            : 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
-          ' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'
-        } >
-        {page}
-      </a>
-    </Link>
+        <Link href={page === 1 ? `${pagePrefix}` : `${pagePrefix}/page/${page}`} key={page} passHref>
+            <a className={
+                (page + '' === currentPage + ''
+                  ? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white '
+                  : 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
+                ' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'
+            } >
+                {page}
+            </a>
+        </Link>
   )
 }
 
-function generatePages(page, currentPage, totalPage) {
+function generatePages(pagePrefix, page, currentPage, totalPage) {
   const pages = []
   const groupCount = 7 // 最多显示页签数
   if (totalPage <= groupCount) {
     for (let i = 1; i <= totalPage; i++) {
-      pages.push(getPageElement(i, page))
+      pages.push(getPageElement(i, page, pagePrefix))
     }
   } else {
-    pages.push(getPageElement(1, page))
+    pages.push(getPageElement(1, page, pagePrefix))
     const dynamicGroupCount = groupCount - 2
     let startPage = currentPage - 2
     if (startPage <= 1) {
@@ -97,7 +86,7 @@ function generatePages(page, currentPage, totalPage) {
 
     for (let i = 0; i < dynamicGroupCount; i++) {
       if (startPage + i < totalPage) {
-        pages.push(getPageElement(startPage + i, page))
+        pages.push(getPageElement(startPage + i, page, pagePrefix))
       }
     }
 
@@ -105,7 +94,7 @@ function generatePages(page, currentPage, totalPage) {
       pages.push(<div key={-2}>... </div>)
     }
 
-    pages.push(getPageElement(totalPage, page))
+    pages.push(getPageElement(totalPage, page, pagePrefix))
   }
   return pages
 }