专栏首页大前端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入门指南—支持Markdown(1)

    前端大彬哥
  • Gatsby入门指南—添加博客文章列表(3)

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

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

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

    前端大彬哥
  • Gatsby入门指南—添加博客文章列表(3)

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

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

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

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

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

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

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

    love丁酥酥

扫码关注云+社区

领取腾讯云代金券