Skip to content
Permalink
Browse files

enable pagination

  • Loading branch information
xdays committed Aug 11, 2019
1 parent 29ab053 commit 75368a606fb847b4bfcf35c98f5e19de7041631b
Showing with 169 additions and 80 deletions.
  1. +1 −0 gatsby-config.js
  2. +16 −0 gatsby-node.js
  3. +35 −11 package-lock.json
  4. +0 −69 src/pages/index.js
  5. +117 −0 src/templates/blog-list.js
@@ -3,6 +3,7 @@ module.exports = {
title: `xdays`,
author: `xdays`,
description: `记录着我技术的成长,生活的点滴和感悟,能对你有所帮助那更好。`,
keywords: [`blog`, `gatsby`, `devops`, `fullstack`, `indie hacker`],
siteUrl: `https://xdays.me/`,
social: {
github: `xdays`,
@@ -51,6 +51,22 @@ exports.createPages = ({ graphql, actions }) => {
},
})
})
// Create blog post list pages
const postsPerPage = 20
const numPages = Math.ceil(posts.length / postsPerPage)

Array.from({ length: numPages }).forEach((_, i) => {
createPage({
path: i === 0 ? `/` : `/${i + 1}`,
component: path.resolve('./src/templates/blog-list.js'),
context: {
limit: postsPerPage,
skip: i * postsPerPage,
numPages,
currentPage: i + 1,
},
})
})
})
)
})

Some generated files are not rendered by default. Learn more.

This file was deleted.

@@ -0,0 +1,117 @@
import React from 'react'
import { Link, graphql } from 'gatsby'

import Bio from '../components/Bio'
import Layout from '../components/Layout'
import SEO from '../components/seo'
import { rhythm } from '../utils/typography'

class BlogIndex extends React.Component {
render() {
const { data } = this.props
const siteTitle = data.site.siteMetadata.title
const siteKeywords = data.site.siteMetadata.keywords
const posts = data.allMarkdownRemark.edges
const { currentPage, numPages } = this.props.pageContext
const isFirst = currentPage === 1
const isLast = currentPage === numPages
const prevPage = currentPage - 1 === 1 ? '/' : (currentPage - 1).toString()
const nextPage = (currentPage + 1).toString()

return (
<Layout location={this.props.location} title={siteTitle}>
<SEO title={siteTitle} keywords={siteKeywords} />
<Bio />
{posts.map(({ node }) => {
const title = node.frontmatter.title || node.fields.slug
return (
<div key={node.fields.slug}>
<h3
style={{
marginBottom: rhythm(1 / 4),
}}
>
<Link style={{ boxShadow: `none` }} to={node.fields.slug}>
{title}
</Link>
</h3>
<small>{node.frontmatter.date}</small>
<p dangerouslySetInnerHTML={{ __html: node.excerpt }} />
</div>
)
})}
<ul
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
alignItems: 'center',
listStyle: 'none',
padding: 0,
}}
>
{!isFirst && (
<Link to={prevPage} rel="prev">
← Previous Page
</Link>
)}
{Array.from({ length: numPages }, (_, i) => (
<li
key={`pagination-number${i + 1}`}
style={{
margin: 0,
}}
>
<Link
to={`/${i === 0 ? '' : i + 1}`}
style={{
padding: rhythm(1 / 4),
textDecoration: 'none',
color: i + 1 === currentPage ? '#ffffff' : '',
background: i + 1 === currentPage ? '#007acc' : '',
}}
>
{i + 1}
</Link>
</li>
))}
{!isLast && (
<Link to={nextPage} rel="next">
Next Page →
</Link>
)}
</ul>
</Layout>
)
}
}

export default BlogIndex

export const pageQuery = graphql`
query blogPageQuery($skip: Int!, $limit: Int!) {
site {
siteMetadata {
title
}
}
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: $limit
skip: $skip
) {
edges {
node {
excerpt
fields {
slug
}
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
}
}
}
}
}
`

0 comments on commit 75368a6

Please sign in to comment.
You can’t perform that action at this time.