专栏首页大前端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入门指南—添加博客文章列表(3)

    前端大彬哥
  • Gatsby入门指南—添加博客内容页(4)

    注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。

    前端大彬哥
  • Gatsby入门指南—添加博客内容页(4)

    注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。

    前端大彬哥
  • 用 Gatsby 创建一个博客

    Gatsby 是一个令人难以置信的静态站点生成器,它允许使用React作为渲染引擎引擎来搭建一个静态站点,它真正具有现代web应用程序所期望的所有优点。它通过在...

    疯狂的技术宅
  • 一杯茶的时间,上手 Gatsby 搭建个人博客

    我的博客最初是用 Github Pages 默认的 Jekyll[2] 框架,其使用的 Liquid[3] 模板引擎在使用上有诸多不便。

    一只图雀
  • 你的博客用不着什么JavaScript框架

    今年年初,我终于决定将自己的网站从基于 PHP 的 CMS 移植到基于 JavaScript 的静态网站生成器(SSG)了。原因如下:

    深度学习与Python
  • Gatsby 博客部署到腾讯云教程

    原文发表于:https://avenirzheng.net/blog/2020/deploying-gatsby-to-tencent-cloud/

    Avenir
  • 9个不错的前端开源项目

    无论您是刚开始编程还是已经是一名经验丰富的开发人员,在这个行业中,学习新的概念和语言/框架是跟上快速变化的必要条件。

    前端迷
  • SEO 在 SPA 站点中的实践

    观察基于 create-react-doc 搭建的文档站点, 发现网页代码光秃秃的一片(见下图)。这显然是单页应用 (SPA) 站点的通病 —— 不利于文档被搜...

    牧云云
  • 自学MVC看这里——全网最全ASP.NET MVC 教程汇总

    MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC。小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC...

    葡萄城控件
  • JavaScript前端学习有哪些项目可以练习

    构建这个应用时,你将使用相对较新的Hooks API来提升你的React技能。示例项目利用了React组件、许多Hooks、一个外部api,当然还有一些CSS样...

    加米谷大数据
  • 如何利用机器学习和Gatsby.js创建假新闻网站​

    我们生活在一个真理不再是非黑即白的世界。在我们生活的世界里,媒体明白,影响人们的最佳方式不是通过逻辑,而是通过情感。他们明白我们人类不是通过有意识的思考和逻辑处...

    deephub
  • 【玩转腾讯云】blueflyming.cn个人博客搭建

    本博客系统使用GatsbyJS构建,源码来自UnrealCPP,这里修改了部分功能。

    blueflyming
  • 【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比

    在本文中,您将看到三种最好的静态站点生成器的比较,它们的优点、缺点以及您应该使用它们的原因。

    首席架构师智库
  • 前端之变(三):变革与突破

    回到上一篇我讲的不变前端中,我在文章中明显的指出了,前端的变化会有一个分界线,在这个分界线之前,前端有一个最大的困境,就是:

    御剑
  • 2019-Web开发技术指南和趋势

    HTML/CSS框架目前没有以前那么有意义, 但是我还是介意你选择一个学习(这里作者想隐射的应该是, 在jquery时代, HTML/CSS框架的学习是必须的)...

    用户1272076
  • 2019-Web开发技术指南和趋势

    HTML/CSS框架目前没有以前那么有意义, 但是我还是介意你选择一个学习(这里作者想隐射的应该是, 在jquery时代, HTML/CSS框架的学习是必须的)...

    grain先森
  • Vue.js最佳静态站点生成器对比

    在过去的几年中,Vue.js 已成为 Web 应用程序开发的流行选项。用户变多后,这个框架开始将触角伸向了静态站点生成,一个曾经由 React 统治的领域。

    winty
  • 2018 年前端开发五大趋势

    对于开发者而言,2017出奇的高效,不过2018年有望为IT领域带来更多发展。本文中,为了处理项目时紧跟潮流,我们会描述出每个前端编程人都需要关注的2018年J...

    我就是马云飞

扫码关注云+社区

领取腾讯云代金券