+ {(!page || page === 1) && ()}
- {(page && page !== 1) && (
-
-
-
-}
-
export default BlogPostListScrollPagination
diff --git a/components/CommonHead.js b/components/CommonHead.js
index 67c4fde0..17f6ad8a 100644
--- a/components/CommonHead.js
+++ b/components/CommonHead.js
@@ -1,6 +1,5 @@
import BLOG from '@/blog.config'
import Head from 'next/head'
-import ThirdPartyScript from '@/components/ThirdPartyScript'
const CommonHead = ({ meta }) => {
const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link
diff --git a/components/JumpToTop.js b/components/JumpToTop.js
index 4ead6b10..98c5142b 100644
--- a/components/JumpToTop.js
+++ b/components/JumpToTop.js
@@ -33,20 +33,25 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
}, [show])
return (
-
- {page && page !== 1 && (页 {page} / {totalPages})}
+ {(page && page !== 1) && (
+
- )}
+ )}
-
+
-
+ {page && page !== 1 && (页 {page} / {totalPages})}
+
- {/* 文章列表 */}
-
-
+ }
}
export default BlogPostList
diff --git a/components/BlogPostListEmpty.js b/components/BlogPostListEmpty.js
new file mode 100644
index 00000000..1dfb71b4
--- /dev/null
+++ b/components/BlogPostListEmpty.js
@@ -0,0 +1,13 @@
+/**
+ * 空白博客 列表
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListEmpty = () => {
+ return
- {!postsToShow.length && (
-
+ No posts found.
- )} - {postsToShow.map(post => ( -
+ {/* 文章列表 */}
+
+ {postsToShow.map(post => (
+
-
+
+}
+export default BlogPostListEmpty
diff --git a/components/BlogPostListScrollPagination .js b/components/BlogPostListScrollPagination.js
similarity index 54%
rename from components/BlogPostListScrollPagination .js
rename to components/BlogPostListScrollPagination.js
index 2da18c45..28369cfe 100644
--- a/components/BlogPostListScrollPagination .js
+++ b/components/BlogPostListScrollPagination.js
@@ -1,10 +1,91 @@
import BlogPost from '@/components/BlogPost'
-import Pagination from '@/components/Pagination'
import BLOG from '@/blog.config'
import { useRouter } from 'next/router'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
import throttle from 'lodash.throttle'
+import BlogPostListEmpty from '@/components/BlogPostListEmpty'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @param targetRef 指向父容器，用于计算下拉滚动的高度
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListScrollPagination = ({ posts = [], tags, targetRef }) => {
+ let filteredBlogPosts = posts
+
+ // 处理查询过滤 支持标签、关键词过滤
+ let currentSearch = ''
+ const router = useRouter()
+ if (router.query && router.query.s) {
+ currentSearch = router.query.s
+ filteredBlogPosts = posts.filter(post => {
+ const tagContent = post.tags ? post.tags.join(' ') : ''
+ const searchContent = post.title + post.summary + tagContent + post.slug
+ return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
+ })
+ }
+
+ const [page, updatePage] = useState(1)
+ const initPosts = getPostByPage(page, filteredBlogPosts, BLOG.postsPerPage)
+ const [postsToShow, updatePostToShow] = useState(useRef(initPosts).current)
+
+ let hasMore = false
+ if (filteredBlogPosts) {
+ const totalPosts = filteredBlogPosts.length
+ hasMore = page * BLOG.postsPerPage < totalPosts
+ }
+ const handleGetMore = function () {
+ if (!hasMore) return
+ updatePage(page + 1)
+ updatePostToShow(postsToShow.concat(getPostByPage(page + 1, filteredBlogPosts, BLOG.postsPerPage)))
+ }
+
+ // 监听滚动自动分页加载
+ const scrollTrigger = useCallback(throttle(() => {
+ const scrollS = window.scrollY + window.outerHeight
+ const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+ if (scrollS > clientHeight + 10) {
+ handleGetMore()
+ }
+ }, 500))
+
+ // 监听滚动
+ useEffect(() => {
+ window.addEventListener('scroll', scrollTrigger)
+ return () => {
+ window.removeEventListener('scroll', scrollTrigger)
+ }
+ })
+
+ if (!postsToShow || postsToShow.length === 0) {
+ return
+
+ No posts found.
+
+
+ }
+}
/**
* 获取指定页码的文章
@@ -19,98 +100,4 @@ const getPostByPage = function (page, totalPosts, postsPerPage) {
postsPerPage * page
)
}
-
-/**
- * 博客列表滚动分页
- * @param posts 所有文章
- * @param tags 所有标签
- * @returns {JSX.Element}
- * @constructor
- */
-const BlogPostListScrollPagination = ({ posts = [], tags, targetRef }) => {
- if (!posts) {
- return
+ {/* 文章列表 */}
+
+
+ {postsToShow.map(post => (
+
+
+
+ {hasMore
+ ? (
+ 加载更多
)
+ : (
+ 加载完了😰
+ )}
+
+
-
- }
- let filteredBlogPosts = posts
-
- // 处理查询过滤 支持标签、关键词过滤
- let currentSearch = ''
- const router = useRouter()
- if (router.query && router.query.s) {
- currentSearch = router.query.s
- filteredBlogPosts = posts.filter(post => {
- const tagContent = post.tags ? post.tags.join(' ') : ''
- const searchContent = post.title + post.summary + tagContent + post.slug
- return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
- })
- }
- const [page, updatePage] = useState(1)
- const [postsToShow, updatePostToShow] = useState(getPostByPage(page, filteredBlogPosts, BLOG.postsPerPage))
-
- let showNext = false
- if (filteredBlogPosts) {
- const totalPosts = filteredBlogPosts.length
- showNext = page * BLOG.postsPerPage < totalPosts
- }
- const [loading, updateLoading] = useState(false)
- const handleGetMore = function () {
- if (!showNext) {
- // 完了
- return
- }
- if (loading) {
- // 加载中
- return
- }
- updateLoading(true)
- updatePage(page + 1)
- updatePostToShow(postsToShow.concat(getPostByPage(page + 1, filteredBlogPosts, BLOG.postsPerPage)))
- updateLoading(false)
- }
-
- // 监听滚动自动分页加载
- const scrollTrigger = useCallback(throttle(() => {
- const scrollS = window.scrollY + window.outerHeight
- const clientHeight = targetRef ? (targetRef.current.clientHeight) : 0
- if (scrollS > clientHeight + 10) {
- handleGetMore()
- }
- }, 500))
-
- // 监听滚动
- useEffect(() => {
- window.addEventListener('scroll', scrollTrigger)
- return () => {
- window.removeEventListener('scroll', scrollTrigger)
- }
- })
-
- return
-
- No posts found.
-
- {/* 文章列表 */}
-
-
- {!postsToShow.length && (
-
-
- No posts found.
- )} - {postsToShow.map(post => ( -
- {showNext
- ? (
- 加载更多
)
- : (
- 加载完了😰
- )}
-
-
-
window.scrollTo({ top: 0, behavior: 'smooth' })}>
- {showPercent && (
-
- {percent}%
-
- )}
-
-
+
)
}
-IndexLayout.propTypes = {
+PageLayout.propTypes = {
posts: PropTypes.array.isRequired,
tags: PropTypes.object.isRequired,
currentTag: PropTypes.string
}
-export default IndexLayout
+export default PageLayout
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 386569dc..267369c3 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -7,7 +7,7 @@ import Custom404 from '@/pages/404'
const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
if (!post) {
- return {
}
export async function getStaticPaths () {
- let posts = await getAllPosts()
- posts = posts.filter(post => post.status[0] === 'Published')
- return {
- paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
- fallback: true
+ if (BLOg.isProd) {
+ let posts = await getAllPosts()
+ posts = posts.filter(post => post.status[0] === 'Published')
+ return {
+ paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
+ fallback: true
+ }
+ } else {
+ return {
+ paths: [],
+ fallback: true
+ }
}
}
@@ -36,7 +43,7 @@ export async function getStaticProps ({ params: { slug } }) {
const post = posts.find(t => t.slug === slug)
if (!post) {
return {
- props: { },
+ props: {},
revalidate: 1
}
}
diff --git a/pages/index.js b/pages/index.js
index f8545a5a..5e859498 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,6 @@
import { getAllPosts, getAllTags } from '@/lib/notion'
import IndexLayout from '@/layouts/IndexLayout'
+import BLOG from '@/blog.config'
export async function getStaticProps () {
let posts = await getAllPosts()
@@ -7,20 +8,25 @@ export async function getStaticProps () {
post => post.status[0] === 'Published' && post.type[0] === 'Post'
)
const tags = await getAllTags(posts)
-
+ const meta = {
+ title: `${BLOG.title} | 首页`,
+ description: BLOG.description,
+ type: 'website'
+ }
return {
props: {
page: 1, // current page is 1
posts,
- tags
+ tags,
+ meta
},
revalidate: 1
}
}
-const index = ({ posts, page, tags }) => {
+const index = ({ posts, page, tags, meta }) => {
return (
-
+
diff --git a/layouts/ArticleLayout.js b/layouts/ArticleLayout.js
index 51ec17b7..b0f96f6e 100644
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -34,6 +34,7 @@ const ArticleLayout = ({
}) => {
const meta = {
title: post.title,
+ description: post.summary,
type: 'article'
}
const targetRef = useRef(null)
diff --git a/layouts/IndexLayout.js b/layouts/IndexLayout.js
index 668718ba..ef1163a2 100644
--- a/layouts/IndexLayout.js
+++ b/layouts/IndexLayout.js
@@ -7,35 +7,23 @@ import Container from '@/components/Container'
import JumpToTop from '@/components/JumpToTop'
import SideBar from '@/components/SideBar'
import TopNav from '@/components/TopNav'
-import BlogPostListScrollPagination from '@/components/BlogPostListScrollPagination '
-
-const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
- const meta = {
- title: `${BLOG.title} | 首页`,
- type: 'website',
- ...customMeta
- }
+import BlogPostListScrollPagination from '@/components/BlogPostListScrollPagination'
+const IndexLayout = ({ tags, posts, page, currentTag, meta, ...customMeta }) => {
const targetRef = useRef(null)
return (
- {/* 侧边菜单 */}
-
- {/* 下方菜单组 */}
-
+
-
-
-
diff --git a/layouts/PageLayout.js b/layouts/PageLayout.js
index c67ab706..b5c1bee0 100644
--- a/layouts/PageLayout.js
+++ b/layouts/PageLayout.js
@@ -9,45 +9,31 @@ import SideBar from '@/components/SideBar'
import TopNav from '@/components/TopNav'
import BlogPostList from '@/components/BlogPostList'
-const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
- const meta = {
- title: BLOG.title,
- type: 'website',
- ...customMeta
- }
+const PageLayout = ({ tags, posts, page, currentTag, meta, ...customMeta }) => {
const targetRef = useRef(null)
return (
+
+
- {/* 侧边菜单 */}
- {/* 下方菜单组 */}
-
+
-
-
-
-
-
-
+