盖茨比博客未显示所有帖子,仅显示当月的帖子

时间:2020-09-25 19:21:22

标签: reactjs graphql gatsby

我有一个我用react&gatsby做的登陆页面,这个登陆有一个博客。该博客的帖子来自8月和9月,仅显示9月的帖子。我怎样才能解决这个问题?这是我的blog.js文件代码:

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import CardBlog from "../components/CardBlog"
import { MainContainer } from "../components/stylesPages"
class Blog extends React.Component {
render() {
const { data } = this.props
const siteTitle = data.site.siteMetadata.title
const posts = data.allMdx.edges

return (
  <Layout location={this.props.location} title={siteTitle}>
    <SEO title="Blog" />
    <MainContainer>
      <CardBlog posts={posts} />
    </MainContainer>
  </Layout>
  )
 }
}

export default Blog

export const pageQuery = graphql`
     query {
          site {
            siteMetadata {
            title
         }
       }
   allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
  edges {
    node {
      excerpt
      fields {
        slug
      }
      frontmatter {
        date(formatString: "D MMM YYYY", locale: "es")
        title
        description
        author
        position
        image
        tags
      }
    }
  }
}
 }
`

这是我的CardBlog组件,我使用它以特定的布局显示帖子:

import React, { useEffect, useState } from "react"
import PropTypes from "prop-types"
import { Link } from "gatsby"
import {
  ContainerRowPosts,
  Title,
  Description,
  Details,
  PrincipalPost,
  LargeImage,
  PrincipalInfo,
  Posts,
  SmallImage,
  SmallImageContainer,
  Info,
  Subtitle,
  PostRight,
  MediumPost,
  ImageContainer,
  InfoContainer,
  ContainerMediumBottom,
  MoreContainer,
 } from "./styles"
 import InvitationButton from "../InvitationButton"

 function CardBlog(props) {
 const { posts } = props
 const [mediumPostLength, setMediumPostLength] = useState(5)
 let dinamicos = []
 let arrayItems = []
 const [loadPost, setLoadPost] = useState([])
 const [visibles, setVisible] = useState(6)
 useEffect(() => {
   setLoadPost(posts)
 }, [])

const loadMore = () => {
 setVisible(visibles + 6)
}

 function dividePosts() {
  const newDinamicos = Array.from(loadPost)
  const dinamicosSplice = newDinamicos.splice(5, newDinamicos.length - 
 1)
dinamicos = dinamicosSplice
let arraydePrueba = []
let mediumPost = 0
let rowPost = 0
let bottomPost = 0

dinamicosSplice.slice(0, visibles).map((item, index) => {
  if (mediumPost == 1 && rowPost <= 2) {
    rowPost = rowPost + 1
    if (rowPost == 2) {
      rowPost = rowPost + 1
      arraydePrueba.push({ tipo: "row", closed: true })
    } else {
      arraydePrueba.push({ tipo: "row" })
    }
  }
  if (mediumPost == 0) {
    arraydePrueba.push({ tipo: "medium" })
    mediumPost = 1
  }
  if (mediumPost == 1 && rowPost > 2) {
    console.log(bottomPost)
    arraydePrueba.push({
      tipo: "bottom",
      closed: bottomPost == 3 ? true : false,
    })
    bottomPost = bottomPost + 1
    rowPost = rowPost + 1

    if (bottomPost == 4) {
      mediumPost = 0
      rowPost = 0
      bottomPost = 0
    }
  }
})

arraydePrueba.map((item, index) => {
  const object = dinamicosSplice[index]
  const newobject =
    object != undefined ? object.node.frontmatter : undefined
  const path = object != undefined ? object.node.fields.slug : undefined

  if (
    item.tipo == "medium" &&
    newobject != undefined &&
    path != undefined
  ) {
    //const closed
    arrayItems.push(arrayMedium(newobject, path))
  }
  if (item.tipo == "row" && newobject != undefined && path != undefined) {
    arrayItems.push(arrayRight(newobject, item.closed, path))
  }
  if (
    item.tipo == "bottom" &&
    newobject != undefined &&
    path != undefined
  ) {
    arrayItems.push(arrayRow(newobject, item.closed, path))
  }
})
}

  function arrayMedium(item, path) {
   return (
     <MediumPost>
     <SmallImageContainer>
      <Link to={`blog/${path}`} style={{ boxShadow: "none" }}>
        <SmallImage style={{ backgroundImage: `url(${item.image})` }} />
      </Link>
    </SmallImageContainer>
    <Info>
      <Link to={`blog/${path}`} style={{ boxShadow: "none" }}>
        {" "}
        <Subtitle> {item.title} </Subtitle>
        <Description> {item.description} </Description>
        <Details>
          <span>{item.author}</span> | <span>{item.date}</span>
        </Details>
      </Link>
    </Info>
  </MediumPost>
)
  }

  function arrayRight(item, closed, path) {
    return (
     <PostRight className={closed ? "closed" : "unset"} closed={closed}>
    <ImageContainer>
      <SmallImageContainer>
        <Link to={`blog/${path}`} style={{ boxShadow: "none" }}>
          <SmallImage style={{ backgroundImage: `url(${item.image})` }} />
        </Link>
      </SmallImageContainer>
    </ImageContainer>
    <InfoContainer>
      <Info>
        <Link to={`blog/${path}`} style={{ boxShadow: "none" }}>
          <Subtitle>{item.title}</Subtitle>
          <Details>
            <span>{item.author}</span> | <span>{item.date}</span>
          </Details>
        </Link>
      </Info>
    </InfoContainer>
  </PostRight>
)
 }

   function arrayRow(item, closed, path) {
     return (
  <Posts
    margin={closed ? "0" : "1.5%"}
    marginLeft={closed ? "1.5%" : "1.5%"}
  >
    <SmallImageContainer>
      <Link to={`blog/${path}`} style={{ boxShadow: "none" }}>
        <SmallImage style={{ backgroundImage: `url(${item.image})` }} />
      </Link>
    </SmallImageContainer>
    <Info>
      <Link to={`blog/${path}`} style={{ boxShadow: "none" }}>
        <Subtitle>{item.title}</Subtitle>
        <Details>
          <span>{item.author}</span> | <span>{item.date}</span>
        </Details>
      </Link>
    </Info>
  </Posts>
)
 }

  return (
     <>
     {/*Tira de 4 post en fila*/}

  <ContainerRowPosts>
    {posts.map(({ node }, index) => {
      const titlePrincipal = node.frontmatter.title || node.fields.slug
      const authorPrincipal = node.frontmatter.author
      const publicationDatePrincipal = node.frontmatter.date
      const descriptionPrincipal = node.frontmatter.description
      const imagePrincipal = node.frontmatter.image

      return (
        <>
          {index === 0 && (
            <Link
              to={`blog${node.fields.slug}`}
              style={{ boxShadow: "none", width: "100%" }}
            >
              <PrincipalPost>
                <LargeImage
                  style={{ backgroundImage: `url(${imagePrincipal})` }}
                />
                <PrincipalInfo>
                  <Title>{titlePrincipal}</Title>
                  <Description>{descriptionPrincipal} </Description>
                  <Details>
                    <span>{authorPrincipal}</span> |{" "}
                    <span>{publicationDatePrincipal}</span>
                  </Details>
                </PrincipalInfo>
              </PrincipalPost>
            </Link>
          )}
          {index > 0 && index < 5 && (
            <Posts posts>
              <SmallImageContainer>
                <Link
                  to={`blog${node.fields.slug}`}
                  style={{ boxShadow: "none" }}
                >
                  <SmallImage
                    style={{ backgroundImage: `url(${imagePrincipal})` }}
                  />
                </Link>
              </SmallImageContainer>
              <Info>
                <Link
                  to={`blog${node.fields.slug}`}
                  style={{ boxShadow: "none" }}
                >
                  <Subtitle>{titlePrincipal}</Subtitle>
                  <Details>
                    <span>{authorPrincipal}</span> |{" "}
                    <span>{publicationDatePrincipal}</span>
                  </Details>
                </Link>
              </Info>
            </Posts>
          )}
        </>
      )
    })}
  </ContainerRowPosts>
  {posts.length > 7 && (
    <ContainerMediumBottom>
      {dividePosts()}
      {arrayItems}
    </ContainerMediumBottom>
  )}
  {visibles < dinamicos.length && (
    <MoreContainer>
      <InvitationButton
        margin="auto"
        backgroundColor="#D93300"
        height="40px"
        id_btn="Ver mas articulos"
        background="#FF3D00"
        color="white"
        width="158px"
        onClick={loadMore}
      >
        Ver más artículos
      </InvitationButton>
    </MoreContainer>
  )}
</>
)
}

 CardBlog.propTypes = {
  posts: PropTypes.array,
 }

导出默认CardBlog

0 个答案:

没有答案