专栏首页大前端666Gatsby入门指南—添加博客文章列表(3)

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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Gatsby入门指南—支持Markdown(1)

    前端大彬哥
  • Gatsby入门指南—使用GraphQL解析Markdown(2)

    GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户...

    前端大彬哥
  • Vue实战系列—路由轻松设置vue-router(3)

    在web端路由(route)就是URL到函数的映射,vue的router就像一个容器,分配,处理每一个route到URL中。

    前端大彬哥
  • Gatsby入门指南—支持Markdown(1)

    前端大彬哥
  • Gatsby入门指南—使用GraphQL解析Markdown(2)

    GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户...

    前端大彬哥
  • C# File.Exists 判断系统文件,警惕32位和64位的差异

    关于socket函数,每个的意义和基本功能都知道,但每次使用都会去百度,参数到底是什么,返回值代表什么意义,就是说用的少,也记得不够精确。每次都查半天,经常烦恼...

    不会飞的小鸟
  • 简单粗暴的移动端适配方案 - REM

    腾讯NEXT学位
  • 简单粗暴的移动端适配方案 - REM

    手机市场日渐丰富的同时,给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题,...

    IMWeb前端团队
  • CSS入门13-单位详解

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥

扫码关注云+社区

领取腾讯云代金券