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;
打开首页,看到文章列表就大功告成了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。