Gatsby入门指南—添加博客文章列表(3)

1.查数据

代码语言：javascript复制

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

如图所示:

2.套页面

打开index.js

代码语言：javascript复制

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;

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

gatsby 入门

0 人点赞