最后一页上的Gatsby Blog分页禁用按钮 [英] Gatsby blog pagination disable button on the last page

问题描述

我正在Gatsby中设置博客分页，如下所示:

I'm setting blog pagination in Gatsby like this:

gatsby-node.js 文件:

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
    query {
      allContentfulPost(sort: { order: ASC, fields: [createdAt] }) {
        edges {
          node {
            postTitle
            slug
          }
        }
      }
    }
  `)

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

然后在 blog.js 文件中添加按钮和页码，如下所示:

then in blog.js file i add the buttons and the page numbers like this:

function Blog({ pageContext, data }) {
  const { currentPage, numPages } = pageContext
  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage = currentPage - 1 === 1 ? "" : (currentPage - 1).toString()
  const nextPage = (currentPage + 1).toString()
  return ( 

    <PaginationContainer>
              <FlatButton
                item={
                  !isFirst && {
                    title: "Previous Page",
                    icon: "/images/icons/left-arrow.svg",
                    link: `/blog/${prevPage}`,
                  }
                }
              />
    
              <PageNumbersContainer>
                {Array.from({ length: numPages }, (_, i) => (
                  <PageNumber
                    item={{
                      title: `${i + 1}`,
                      icon: "",
                      link: `/blog/${i === 0 ? "" : i + 1}`,
                      key: `pagination-number${i + 1}`,
                    }}
                  />
                ))}
              </PageNumbersContainer>
    
              <FlatButton
                item={
                  !isLast && {
                    title: "Next Page",
                    icon: "/images/icons/right-arrow.svg",
                    link: `/blog/${nextPage}`,
                  }
                }
              />
            </PaginationContainer>

)}

现在没有上一页或下一页时，按钮 title 消失，只有容器在其中.

now when theres no previous page or next page, in the button the title dissapears and only the container is there.

我想保持标题和按钮的形状不变，但要使其禁用(不可点击)

i want to keep the title and the button shape to stay as it is but to make it disabled (un-cklickable)

感谢您的帮助.

推荐答案

如果要保留 title ，则只需删除条件并保留以下组件即可:

If you want to keep the title you just need to remove the condition and leave the component like:

          <FlatButton
            item={
              {
                title: "Next Page",
                icon: "/images/icons/right-arrow.svg",
                link: `/blog/${nextPage}`,
              }
            }
          />

要使按钮处于禁用状态，您有多种解决方法.最简单和本机的是，如果您的 FlatButton 组件从任何 button 标记扩展，则可以传递 isDisabled prop 喜欢:

To make the button disabled you have multiple workarounds. The most simple and native is, if your FlatButton component extends from any button tag, you can pass an isDisabled prop like:

          <FlatButton
            item={
              {
                isDisabled: isLast
                title: "Next Page",
                icon: "/images/icons/right-arrow.svg",
                link: `/blog/${nextPage}`,
              }
            }
          />

然后，在您的组件中:

const FlatButton = ({ item })=>{

  return <button disabled={item.isDisabled}>{item.title}</button>
}

当然，在不知道您的 FlatButton 外观如何的情况下，您需要对其进行一些调整，但是您知道了.

Of course, without knowing how your FlatButton looks like you'll need to tweak it a little bit, but you get the idea.

否则，您可以使用组件的类名，并使用 pointer-events:none CSS规则等样式.

Otherwise, you can play with the class names of the components and use, among other styling, pointer-events: none CSS rule.

如何在CSS中选择 isDisabled ?使用样式化的组件

像样式组件中的所有道具一样:

Like all props in styled-components:

  color: ${props => props.isDisabled? "white" : "red"};

这篇关于最后一页上的Gatsby Blog分页禁用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！