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

1.查数据

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="c8" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-position: inherit inherit; background-repeat: inherit inherit;">{
 allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) {
 edges {
 node {
 frontmatter {
 title
 path
 date
 excerpt
 }
 }
 }
 }
}</pre>

如图所示：

1557047446713.png

2.套页面

打开index.js

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="c18" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-position: inherit inherit; background-repeat: inherit inherit;">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;</pre>

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