专栏首页大前端666Gatsby入门指南—使用GraphQL解析Markdown(2)

Gatsby入门指南—使用GraphQL解析Markdown(2)

1.什么是GraphQL

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。

官网:http://graphql.cn/

2.为什么需要它?

一图抵万言:

1557045421223.png

3.怎么做?

1.一图抵万言,

1557046295168.png

解释:你需要的东西都在这段代码里:

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="c24" 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;">{
 site {
 siteMetadata {
 title
 }
 }
}</pre>

2.怎么套到组件里?

src>components>Header.js里面,

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="c28" 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 { StaticQuery, graphql } from 'gatsby'
import React from "react"
const TitleAndDescription = ({ data }) => {
//这里的数据是下面查出来的
 const title = data.site.siteMetadata.title;
 const description = data.site.siteMetadata.description;
 return (
 <div style={{
 display: 'flex',
 flexDirection: 'column',
 alignItems: 'center'
 }}>
 <h2>{title}</h2>
 <p>{description}</p>
 </div>
 );
}
//这里是所有数据,传到了TitleAndDescription组件里,react组件数据传递
const Header = () => {
 return (
 <StaticQuery
 query={graphql`
 query{
 site {
 siteMetadata {
 title,
 description,

 }
 }
 }
 `}
 render={data => <TitleAndDescription data={data} />}
 />
 )
}
export default Header</pre>

这里是所有数据,传到了TitleAndDescription组件里,react组件数据传递,我这么就为了看着舒服一点。

3.嵌套Header

将Header组件扔到 pages下面的index.js里面:

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="c34" 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'
const Layout = () => {
 return (
 <div>
 <Header />
 </div>
 )
}
export default Layout;</pre>

打开首页,看到网站的描述就大功告成了。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Gatsby入门指南—使用GraphQL解析Markdown(2)

    这里是所有数据,传到了TitleAndDescription组件里,react组件数据传递,我这么就为了看着舒服一点。

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

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

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

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

    一只图雀
  • Vue.js最佳静态站点生成器对比

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

    winty
  • Gatsby入门指南—添加上一页下一页功能(完结篇)

    到此,通过gatsby就快速的搭建了一个博客网站,我们只需书写markdown文件就能生成对应的网页了。至于网页美化,那是切图的事儿,我就不在这里墨迹了。

    前端大彬哥
  • Gatsby入门指南—添加上一页下一页功能(完结篇)

    到此,通过gatsby就快速的搭建了一个博客网站,我们只需书写markdown文件就能生成对应的网页了。至于网页美化,那是切图的事儿,我就不在这里墨迹了。

    前端大彬哥
  • 9个不错的前端开源项目

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

    前端迷
  • 如何利用机器学习和Gatsby.js创建假新闻网站​

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

    deephub
  • 你的博客用不着什么JavaScript框架

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

    深度学习与Python
  • 【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比

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

    首席架构师智库
  • 2018 年前端开发五大趋势

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

    我就是马云飞
  • 塔荐 | 2018 年最值得关注的 JavaScript 趋势

    前言 JavaScript 渗透的范围越来越广,它能做的事情已经远不止前端开发而已。不久前stateofjs.com刚刚发布了 2017 JavaScript ...

    灯塔大数据
  • Web 开发人员的文档生成工具【推荐】

    工欲善其事必先利其器,在此给 Web 开发人员推荐几款优秀的开源文档生成工具,希望能对大家有所帮助。

    一墨编程学习
  • 2019-Web开发技术指南和趋势

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

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

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

    grain先森
  • 【前端必看】2017 年 JavaScript 全面崛起大运势

    最受欢迎项目 ? 下面是年度最流行的项目,不区分类别。 Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军,今年在 GitHub 上新增了超过 40...

    IT派
  • 18年最受欢迎的JS项目

    通过对比各项目过去 12 个月在 GitHub 上新增 star 数量,来评估其在 2018 年度的受关注程度,进而选出 2018 年度 JavaScript ...

    grain先森
  • SEO 在 SPA 站点中的实践

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

    牧云云
  • 2018年1月份最热门的JavaScript开源项目

    本篇文章为大家盘点了1月份最热门的 JavaScript 项目,让我们一起来看下吧! 一、编辑器tui.editor https://github.com/nh...

    IT大咖说

扫码关注云+社区

领取腾讯云代金券