Gatsby入门指南—添加博客文章列表（3）

1.查数据

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

如图所示：

1557047446713.png

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 (
 

 

 

 {
 edges.map(edge => {
 const { frontmatter } = edge.node;
 return (
 

 
 {frontmatter.title}
 
 
 )
 })
 }
 
 
 )
}
export const query = graphql`
query{
 allMarkdownRemark (sort:{
 order:DESC,
 fields:[frontmatter___date]
 }){
 edges {
 node {
 frontmatter {
 title
 path
 date
 excerpt
 }
 }
 } 
 }
}
`;
export default Layout;

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