我有一个我用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