jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore search for blog page

Browse Source
This commit is contained in:
Timothy Lin
2021-05-29 16:08:22 +08:00
parent 847f2537c3
commit 88096a536b
3 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
pages/blog.js
View File

@ -3,20 +3,20 @@ import siteMetadata from '@/data/siteMetadata'
import ListLayout from '@/layouts/ListLayout'
import { PageSeo } from '@/components/SEO'
export const POSTS_PER_PAGE = 10
export const POSTS_PER_PAGE = 5
export async function getStaticProps() {
const getPosts = await getAllFilesFrontMatter('blog')
const posts = getPosts.splice(0, POSTS_PER_PAGE)
const posts = await getAllFilesFrontMatter('blog')
const initialDisplayPosts = posts.slice(0, POSTS_PER_PAGE)
const pagination = {
currentPage: 1,
totalPages: Math.ceil(getPosts.length / POSTS_PER_PAGE) + 1,
totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
}
return { props: { posts, pagination } }
return { props: { initialDisplayPosts, posts, pagination } }
}
export default function Blog({ posts, pagination }) {
export default function Blog({ posts, initialDisplayPosts, pagination }) {
return (
<>
<PageSeo
@ -24,7 +24,12 @@ export default function Blog({ posts, pagination }) {
description={siteMetadata.description}
url={`${siteMetadata.siteUrl}/blog`}
/>
<ListLayout posts={posts} pagination={pagination} title="All Posts" />
<ListLayout
posts={posts}
initialDisplayPosts={initialDisplayPosts}
pagination={pagination}
title="All Posts"
/>
</>
)
}

20
pages/blog/page/[page].js
View File

@ -8,7 +8,7 @@ export async function getStaticPaths() {
const totalPosts = await getAllFilesFrontMatter('blog')
const totalPages = Math.ceil(totalPosts.length / POSTS_PER_PAGE)
const paths = Array.from({ length: totalPages }, (_, i) => ({
params: { page: '' + (i + 1) },
params: { page: (i + 1).toString() },
}))
return {
@ -21,26 +21,27 @@ export async function getStaticProps(context) {
const {
params: { page },
} = context
const getPosts = await getAllFilesFrontMatter('blog')
const posts = await getAllFilesFrontMatter('blog')
const pageNumber = parseInt(page)
const postsPerPage = getPosts.slice(
const initialDisplayPosts = posts.slice(
POSTS_PER_PAGE * (pageNumber - 1),
POSTS_PER_PAGE * pageNumber
)
const pagination = {
currentPage: pageNumber,
totalPages: Math.ceil(getPosts.length / POSTS_PER_PAGE),
totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
}
return {
props: {
postsPerPage,
posts,
initialDisplayPosts,
pagination,
},
}
}
export default function PostPage({ postsPerPage, pagination }) {
export default function PostPage({ posts, initialDisplayPosts, pagination }) {
return (
<>
<PageSeo
@ -48,7 +49,12 @@ export default function PostPage({ postsPerPage, pagination }) {
description={siteMetadata.description}
url={`${siteMetadata.siteUrl}/blog/${pagination.currentPage}`}
/>
<ListLayout posts={postsPerPage} pagination={pagination} title="All Posts" />
<ListLayout
posts={posts}
initialDisplayPosts={initialDisplayPosts}
pagination={pagination}
title="All Posts"
/>
</>
)
}