- {' '}
- {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
-
-
+ return
{posts.map(p => (
@@ -51,10 +48,10 @@ export const BlogList = (props) => {
))}
diff --git a/themes/example/components/BlogListScroll.js b/themes/example/components/BlogListScroll.js
new file mode 100644
index 00000000..07da67d3
--- /dev/null
+++ b/themes/example/components/BlogListScroll.js
@@ -0,0 +1,78 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import React from 'react'
+import throttle from 'lodash.throttle'
+
+export const BlogListScroll = props => {
+ const { posts } = props
+ const { locale } = useGlobal()
+
+ const [page, updatePage] = React.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)
+ }
+
+ const targetRef = React.useRef(null)
+
+ // 监听滚动自动分页加载
+ const scrollTrigger = React.useCallback(throttle(() => {
+ const scrollS = window.scrollY + window.outerHeight
+ const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+ if (scrollS > clientHeight + 100) {
+ handleGetMore()
+ }
+ }, 500))
+
+ React.useEffect(() => {
+ window.addEventListener('scroll', scrollTrigger)
+
+ return () => {
+ window.removeEventListener('scroll', scrollTrigger)
+ }
+ })
+
+ return
+ {postsToShow.map(p => (
+
+
+
+
+
+
+ {p.summary}
+
+
+ ))}
+
+
+ {' '}
+ {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+
+
+
+}
diff --git a/themes/fukasawa/LayoutCategory.js b/themes/fukasawa/LayoutCategory.js
index 8b3f3b04..fa6c8c0d 100644
--- a/themes/fukasawa/LayoutCategory.js
+++ b/themes/fukasawa/LayoutCategory.js
@@ -1,8 +1,10 @@
+import BLOG from '@/blog.config'
import BlogListPage from './components/BlogListPage'
+import BlogListScroll from './components/BlogListScroll'
import LayoutBase from './LayoutBase'
export const LayoutCategory = props => {
return
-
}
diff --git a/themes/fukasawa/LayoutIndex.js b/themes/fukasawa/LayoutIndex.js
index 7559d65b..47ae1bce 100644
--- a/themes/fukasawa/LayoutIndex.js
+++ b/themes/fukasawa/LayoutIndex.js
@@ -1,8 +1,10 @@
+import BLOG from '@/blog.config'
import BlogListPage from './components/BlogListPage'
+import BlogListScroll from './components/BlogListScroll'
import LayoutBase from './LayoutBase'
export const LayoutIndex = (props) => {
return
-
}
diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js
index 78957330..50da0ee2 100644
--- a/themes/fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -92,7 +92,7 @@ export default function ArticleDetail(props) {
-
+ {post.type === 'Post' &&
}
{/* 评论互动 */}
diff --git a/themes/fukasawa/components/BlogListPage.js b/themes/fukasawa/components/BlogListPage.js
index 04ef2b47..47650b5b 100644
--- a/themes/fukasawa/components/BlogListPage.js
+++ b/themes/fukasawa/components/BlogListPage.js
@@ -14,7 +14,7 @@ import PaginationSimple from './PaginationSimple'
*/
const BlogListPage = ({ page = 1, posts = [], postCount }) => {
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
- const showNext = page < totalPage && posts.length === BLOG.POSTS_PER_PAGE && posts.length < postCount
+ const showNext = page < totalPage
const [colCount, changeCol] = useState(1)
function updateCol() {
diff --git a/themes/fukasawa/components/BlogListScroll.js b/themes/fukasawa/components/BlogListScroll.js
new file mode 100644
index 00000000..522d3f0e
--- /dev/null
+++ b/themes/fukasawa/components/BlogListScroll.js
@@ -0,0 +1,93 @@
+import BLOG from '@/blog.config'
+import React from 'react'
+import BlogCard from './BlogCard'
+import BlogPostListEmpty from './BlogListEmpty'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogListScroll = props => {
+ const { posts = [] } = props
+ const [colCount, changeCol] = React.useState(1)
+ const { locale } = useGlobal()
+
+ function updateCol() {
+ if (window.outerWidth > 1200) {
+ changeCol(3)
+ } else if (window.outerWidth > 900) {
+ changeCol(2)
+ } else {
+ changeCol(1)
+ }
+ }
+ const targetRef = React.useRef(null)
+
+ const [page, updatePage] = React.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)
+ }
+
+ // 监听滚动自动分页加载
+ const scrollTrigger = React.useCallback(throttle(() => {
+ const scrollS = window.scrollY + window.outerHeight
+ const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+ if (scrollS > clientHeight + 100) {
+ handleGetMore()
+ }
+ }, 500))
+
+ React.useEffect(() => {
+ updateCol()
+ window.addEventListener('scroll', scrollTrigger)
+
+ window.addEventListener('resize', updateCol)
+ return () => {
+ window.removeEventListener('resize', updateCol)
+ window.removeEventListener('scroll', scrollTrigger)
+ }
+ })
+
+ if (!posts || posts.length === 0) {
+ return
+ } else {
+ return (
+
+ {/* 文章列表 */}
+
+ {postsToShow?.map(post => (
+
+
+ ))}
+
+
+
+ {' '}
+ {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+
+
+ )
+ }
+}
+
+export default BlogListScroll
diff --git a/themes/fukasawa/components/PaginationSimple.js b/themes/fukasawa/components/PaginationSimple.js
index 11eb837d..71ba8b8f 100644
--- a/themes/fukasawa/components/PaginationSimple.js
+++ b/themes/fukasawa/components/PaginationSimple.js
@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useGlobal } from '@/lib/global'
@@ -14,14 +13,16 @@ const PaginationSimple = ({ page, showNext }) => {
const { locale } = useGlobal()
const router = useRouter()
const currentPage = +page
+ const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+
return (
{
{
- const { tags, posts, category } = props
+ const { category } = props
return
-
}
diff --git a/themes/hexo/LayoutSlug.js b/themes/hexo/LayoutSlug.js
index 36bb3449..7875c990 100644
--- a/themes/hexo/LayoutSlug.js
+++ b/themes/hexo/LayoutSlug.js
@@ -74,9 +74,10 @@ export const LayoutSlug = props => {
data-ad-slot="3806269138" />
-
-
-
+ {post.type === 'Post' &&
}
+ {post.type === 'Post' &&
}
+ {post.type === 'Post' &&
}
+
diff --git a/themes/hexo/LayoutTag.js b/themes/hexo/LayoutTag.js
index 7380aef0..75c308e5 100644
--- a/themes/hexo/LayoutTag.js
+++ b/themes/hexo/LayoutTag.js
@@ -1,10 +1,21 @@
+import BLOG from '@/blog.config'
import BlogPostListScroll from './components/BlogPostListScroll'
+import BlogPostListPage from './components/BlogPostListPage'
import LayoutBase from './LayoutBase'
+import TagItemMini from '../next/components/TagItemMini'
+import React from 'react'
export const LayoutTag = (props) => {
- const { tags, posts, tag } = props
+ const currentTag = props.tags.find((t) => {
+ return t.name === props.tag
+ })
return
-
-
+ {currentTag && (
+
+
+ )}
+ {BLOG.POST_LIST_STYLE === 'page' ?
:
}
+
}
diff --git a/themes/hexo/components/BlogPostListPage.js b/themes/hexo/components/BlogPostListPage.js
index 4964f024..3662aee9 100644
--- a/themes/hexo/components/BlogPostListPage.js
+++ b/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
} else {
return (
diff --git a/themes/hexo/components/BlogPostListScroll.js b/themes/hexo/components/BlogPostListScroll.js
index 4c56ff8e..ca6f705d 100644
--- a/themes/hexo/components/BlogPostListScroll.js
+++ b/themes/hexo/components/BlogPostListScroll.js
@@ -3,8 +3,9 @@ import BlogPostCard from './BlogPostCard'
import BlogPostListEmpty from './BlogPostListEmpty'
import { useGlobal } from '@/lib/global'
import throttle from 'lodash.throttle'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React from 'react'
import CONFIG_HEXO from '../config_hexo'
+import { getListByPage } from '@/lib/utils'
/**
* 博客列表滚动分页
@@ -15,8 +16,8 @@ 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 [page, updatePage] = React.useState(1)
+ const postsToShow = getListByPage(posts, page, postsPerPage)
let hasMore = false
if (posts) {
@@ -30,7 +31,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_HE
}
// 监听滚动自动分页加载
- const scrollTrigger = useCallback(throttle(() => {
+ const scrollTrigger = React.useCallback(throttle(() => {
const scrollS = window.scrollY + window.outerHeight
const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
if (scrollS > clientHeight + 100) {
@@ -39,14 +40,14 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_HE
}, 500))
// 监听滚动
- useEffect(() => {
+ React.useEffect(() => {
window.addEventListener('scroll', scrollTrigger)
return () => {
window.removeEventListener('scroll', scrollTrigger)
}
})
- const targetRef = useRef(null)
+ const targetRef = React.useRef(null)
const { locale } = useGlobal()
if (!postsToShow || postsToShow.length === 0) {
@@ -62,9 +63,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_HE
-
{
- handleGetMore()
- }}
+
{ 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}`}
@@ -72,17 +71,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
diff --git a/themes/hexo/components/HeaderArticle.js b/themes/hexo/components/HeaderArticle.js
index b11d7cfc..64636717 100644
--- a/themes/hexo/components/HeaderArticle.js
+++ b/themes/hexo/components/HeaderArticle.js
@@ -58,7 +58,7 @@ export default function HeaderArticle({ post, siteInfo }) {
{BLOG.ANALYTICS_BUSUANZI_ENABLE &&
}
diff --git a/themes/hexo/components/PaginationNumber.js b/themes/hexo/components/PaginationNumber.js
index a2b446a8..96207d43 100644
--- a/themes/hexo/components/PaginationNumber.js
+++ b/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,78 +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 (
-
- {/* 上一页 */}
-
-
-
-
+
+ {/* 上一页 */}
+
+
+
+
- {pages}
+ {pages}
- {/* 下一页 */}
-
-
-
+ {/* 下一页 */}
+
+
+
+
-
-
)
}
-function getPageElement(page, currentPage) {
+function getPageElement(page, currentPage, pagePrefix) {
return (
-
-
- {page}
-
-
+
+
+ {page}
+
+
)
}
-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) {
@@ -99,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))
}
}
@@ -107,7 +94,7 @@ function generatePages(page, currentPage, totalPage) {
pages.push(
...
)
}
- pages.push(getPageElement(totalPage, page))
+ pages.push(getPageElement(totalPage, page, pagePrefix))
}
return pages
}
diff --git a/themes/medium/LayoutCategory.js b/themes/medium/LayoutCategory.js
index 0cd835da..a3018144 100644
--- a/themes/medium/LayoutCategory.js
+++ b/themes/medium/LayoutCategory.js
@@ -1,11 +1,13 @@
import LayoutBase from './LayoutBase'
import BlogPostListScroll from './components/BlogPostListScroll'
+import BlogPostListPage from './components/BlogPostListPage'
+import BLOG from '@/blog.config'
export const LayoutCategory = props => {
const { category } = props
- const slotTop =
+ const slotTop =
return
-
+ {BLOG.POST_LIST_STYLE === 'page' ?
:
}
+
}
diff --git a/themes/medium/LayoutTag.js b/themes/medium/LayoutTag.js
index 0e6bd79b..dda44141 100644
--- a/themes/medium/LayoutTag.js
+++ b/themes/medium/LayoutTag.js
@@ -1,11 +1,13 @@
import LayoutBase from './LayoutBase'
import BlogPostListScroll from './components/BlogPostListScroll'
+import BLOG from '@/blog.config'
+import BlogPostListPage from './components/BlogPostListPage'
export const LayoutTag = (props) => {
const { tag } = props
const slotTop =
return
-
}
diff --git a/themes/medium/components/ArticleDetail.js b/themes/medium/components/ArticleDetail.js
index c9eabe73..48630d47 100644
--- a/themes/medium/components/ArticleDetail.js
+++ b/themes/medium/components/ArticleDetail.js
@@ -66,7 +66,7 @@ export const ArticleDetail = props => {
{CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag =>
)}
{
{
- const { tags, posts, category, categories } = props
+ const { category, categories } = props
return
-
+ {BLOG.POST_LIST_STYLE !== 'page'
+ ?
}
diff --git a/themes/next/LayoutTag.js b/themes/next/LayoutTag.js
index b50f801a..7594ba8c 100644
--- a/themes/next/LayoutTag.js
+++ b/themes/next/LayoutTag.js
@@ -2,16 +2,21 @@ import LayoutBase from './LayoutBase'
import StickyBar from './components/StickyBar'
import TagList from './components/TagList'
import BlogPostListScroll from './components/BlogPostListScroll'
+import BlogPostListPage from './components/BlogPostListPage'
+import BLOG from '@/blog.config'
export const LayoutTag = (props) => {
- const { tags, posts, tag } = props
+ const { tags, tag } = props
return
-
+ {BLOG.POST_LIST_STYLE !== 'page'
+ ?
}
diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js
index ab7f9608..340f0f5a 100644
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -100,29 +100,31 @@ export default function ArticleDetail(props) {
{showArticleInfo && <>
{/* 版权声明 */}
-
+ {post.type === 'Post' &&
}
{/* 推荐文章 */}
-
+ {post.type === 'Post' &&
}
{/* 标签列表 */}
-
- {post.tagItems && (
-
-
- {locale.COMMON.TAGS}：
-
- {post.tagItems.map(tag => (
-
- ))}
+ {post.type === 'Post' && (
+
+ {post.tagItems && (
+
+
+ {locale.COMMON.TAGS}：
+
+ {post.tagItems.map(tag => (
+
+ ))}
+
+
- )}
-
-
-
+
+ )}
-
+ {post.type === 'Post' &&
}
}
{/* 评论互动 */}
diff --git a/themes/next/components/InfoCard.js b/themes/next/components/InfoCard.js
index 6ddde9c4..5bbed271 100644
--- a/themes/next/components/InfoCard.js
+++ b/themes/next/components/InfoCard.js
@@ -12,7 +12,7 @@ const InfoCard = (props) => {
{BLOG.AUTHOR}
- {BLOG.BIO}
+ {BLOG.BIO}
diff --git a/themes/next/components/Logo.js b/themes/next/components/Logo.js
index 8169b624..46cb814e 100644
--- a/themes/next/components/Logo.js
+++ b/themes/next/components/Logo.js
@@ -6,7 +6,7 @@ const Logo = props => {
return 
