Gatsby极速入门添加博客文章列表3

1. 查数据

{allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) {
    edges {
      node {
        frontmatter {
          title
          path
          date
          excerpt
        }
      }
    }
  }
}

如图所示，

2. 套页面

打开 index.js

import React from "react"
import Header from '../components/header'
import {Link,graphql} from 'gatsby'

const Layout = ({data}) => {const { edges} = data.allMarkdownRemark;
  return (
    <div>
      <Header />
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
      }}>
        {
          edges.map(edge => {const { frontmatter} = edge.node;
            return (<div key={frontmatter.path}>
                <Link to={frontmatter.path}>
                 {frontmatter.title}
                </Link>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}
export const query = graphql`
query{
    allMarkdownRemark (sort:{
      order:DESC,
      fields:[frontmatter___date]
    }){
      edges {
        node {
          frontmatter {
            title
            path
            date
            excerpt
          }
        }
      } 
  }
}
`;
export default Layout;

打开首页，看到文章列表就大功告成了。