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;

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