{
allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) {
edges {
node {
frontmatter {
title
path
date
excerpt
}
}
}
}
}
打开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;
打开首页,看到文章列表就大功告成了。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。