gatsby

Despite Gatsby’s amazing performance, it would be best not to force the user to load every single post onto the same page. Instead, we’ll explore the plugin to segment our post archive into more manageable sections.

尽管Gatsby表现出色，但最好不要强迫用户将每个帖子都加载到同一页面上。 取而代之的是，我们将探索插件，将我们的帖子存档细分为更易于管理的部分。

安装 (Installation)

We’ll start with the starter since it comes with markdown support.

我们将从起动器开始，因为它具有markdown支持。

$ gatsby new pagination-example https://github.com/gatsbyjs/gatsby-starter-blog$ yarn add gatsby-awesome-pagination

分页 (Paginate)

In our gatsby-node.js file, Let’s import the paginate method and pass it an object below the query for our posts. It only needs a few things, namely the createPage action, an array of our posts, the item limit per page, the slug for our new archive page, and its template. Now when we make this query we’ll get get a bunch of extra stuff in the pageContext prop we’ll use to manage which page is rendered.

在我们的gatsby-node.js文件中，让我们导入paginate方法，并将其传递给帖子查询下方的对象。 它只需要几件事，即createPage操作，我们的帖子数组，每页的项目限制，新存档页面的标签及其模板。 现在，当我们进行查询时，将在pageContext道具中获得很多额外的东西，我们将使用它们来管理呈现哪个页面。

const { paginate } = require('gatsby-awesome-pagination');exports.createPages = async ({ graphql, actions }) => {  const { createPage } = actions  const blogPost = path.resolve(`./src/templates/blog-post.js`)  const result = await graphql(` ... `)  paginate({    createPage,    items: result.data.allMarkdownRemark.edges,    itemsPerPage: 3,    pathPrefix: '/posts',    component: path.resolve('src/templates/blog-archive.js')  });};

模板 (Template)

The gatsby-awesome-pagination plugin is, as far as I know, just for paginating separate ‘archive’ pages. So instead of adding pagination to the starter’s home page we’ll link to a separate posts page with everything. Groups of posts on normal pages would probably be best with just a static query and something like a carousel to manage what’s shown.

据我所知， gatsby-awesome-pagination插件仅用于对单独的“存档”页面进行分页。 因此，我们不会将分页添加到入门者的主页上，而是链接到包含所有内容的单独的帖子页面。 普通页面上的帖子组最好仅使用静态查询和类似轮播的方式来管理显示的内容。

import React from "react";import { Link, graphql } from "gatsby";import Bio from "../components/bio";import Layout from "../components/layout";class BlogIndex extends React.Component {  render() {    const { data } = this.props;    return (      
            
             
     
     See All Posts      
        )  }};export default BlogIndex;

---

---

Our archive template already has access to our query’s pageContext in its props, which we’ll pass to a separate Pager component. Note that we need to use a normal query instead of a static query since our pageContext will be passing values into the skip and limit arguments, which we’ll also need to set.

我们的存档模板已经可以在其道具中访问查询的pageContext ，我们将其传递给一个单独的Pager组件。 请注意，我们需要使用普通查询而不是静态查询，因为我们的pageContext会将值传递到skip和limit参数中，这也是我们需要设置的。

import Pager from '../components/pager';export const pageQuery = graphql`  query($skip: Int!, $limit: Int!) {    site { ... }    allMarkdownRemark(        sort: { fields: [frontmatter___date], order: DESC},        skip: $skip,        limit: $limit        ) {      edges { ... }    }  }`;const BlogArchive = ({ data, pageContext, location }) => {    const posts = data.allMarkdownRemark.edges;    return (      
    
             {posts.map(({ node }) => {            const title = node.frontmatter.title || node.fields.slug            return (              
     
                
      
                  
       
                    
         {title}                   
                  
       {node.frontmatter.date}                
      
                
      
                  
       
                
      
              
     
            )        })}        
           
        )};export default BlogArchive;

传呼机 (Pager)

The final step is really as simple as getting the page paths from the pageContext. If you log the pageContext you can see the skip and limit properties that are being passed to the query, along with pageNumber and numberOfPages which you could use to generate a number and link for each page.

最后一步实际上非常简单，就像从pageContext获取页面路径一样。 如果您记录pageContext ，则可以看到传递给查询的skip和limit属性，以及pageNumber和numberOfPages ，可用于为每个页面生成数字和链接。

import React from 'react';import { Link } from 'gatsby';const Pager = ({ pageContext }) => {  console.log(pageContext);  const { previousPagePath, nextPagePath } = pageContext;  return (    
      );};export default Pager;

帖子 (Posts)

Adding navigation between each post is just as simple and doesn’t even need a plugin. This particular starter actually already supports this, but let’s pretend it doesn’t for now.

在每个帖子之间添加导航非常简单，甚至不需要插件。 这个特定的启动器实际上已经支持此功能，但让我们假装它暂时不支持。

Where we create our pages from our query, we just need to add two fields that will then have access to in the pageContext. If it’s the first post then prev shouldn’t exist, else we’ll return the last post. Same with next, only return the next post if one exists.

从查询创建页面的地方，我们只需要添加两个字段即可在pageContext进行访问。 如果这是第一篇文章，那么prev不应该存在，否则我们将返回最后一篇文章。 与next相同，如果存在则仅返回下一个帖子。

posts.forEach((post, index) => {  createPage({    path: post.node.fields.slug,    component: blogPost,    context: {      slug: post.node.fields.slug,      prev: index === 0 ? null : posts[index - 1].node,      next: index === (posts.length - 1) ? null : posts[index + 1].node    },  })});

It’s the same execution as with our Pager, check if prev/next exist, throw them in a Link, and you’re done.

这与我们的Pager执行相同，请检查prev / next是否存在，将它们放入Link ，然后完成。

const BlogPostTemplate = ({ data, pageContext, location }) => {  const post = data.markdownRemark;  const { prev, next } = pageContext;  return (    
          
     Archive      
     
        
      
          
       
 {post.frontmatter.title} 
          
       
 {post.frontmatter.date} 
        
      
        
      
        
      
      
     
      
         
      )};export default BlogPostTemplate;

总结思想 (Closing Thoughts)

This plugin is still being ironed out, but I’m excited to see how they’ll improve this already incredibly simple design.

这个插件仍在解决中，但是我很高兴看到他们将如何改进这个已经非常简单的设计。

翻译自:

gatsby