Gatsby极速入门—使用GraphQL解析Markdown（2）

fou7 发布于2019-08-26 13:48 / 1818人阅读

摘要：什么是既是一种用于的查询语言也是一个满足你数据查询的运行时。嵌套将组件扔到下面的里面打开首页，看到网站的描述就大功告成了。

1.什么是GraphQL

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

官网：http://graphql.cn/

2.为什么需要它？

一图抵万言：

3.怎么做？

1.一图抵万言：

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

{
  site {
    siteMetadata {
      title
    }
  }
}

2.怎么套到组件里？

src>components>Header.js里面，

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 (
    
      {title}
      {description}
    
  );
}
//这里是所有数据，传到了TitleAndDescription组件里，react组件数据传递
const Header = () => {
  return (
     }
    />
  )
}
export default Header

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

3.嵌套Header

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

import React from "react"
import Header from "../components/header"
const Layout = () => {
  return (
    
      
    
  )
}
export default Layout;

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

idc机房托管混合云 Gatsby GraphQL 免费2级域名解析 java 解析2进制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109564.html

Gatsby极速入门—添加上一页下一页功能（完结篇）

摘要：调整这个就简单了打开，增加代码如下这里是新增加的调整打开首页，点击页面跳转到对应的页面大功告成。总结到此，通过就快速的搭建了一个博客网站，我们只需书写文件就能生成对应的网页了。至于网页美化，那是切图的事儿，我就不在这里墨迹了。 1.调整gatsby-node 这个就简单了,打开gatsby-node.js，增加代码如下： const path = require(path); expo...

youkede 2019-08-23 17:59 评论0 收藏0
Gatsby极速入门—添加博客内容页（4）

摘要：查数据注意，这里跟前面不一样了，我用这个文件去提供数据，没有什么为什么，规定，照做就好。很清晰明显，这里就说一点我传递了一个参数，到内容页。创建内容页模板在下创建这里只要对应的路径的那个文章查询 1.查数据注意，这里跟前面不一样了，我用gatsby-node.js这个文件去提供数据，没有什么为什么，规定，照做就好。 const path = require(path); export...

wean 2019-08-23 17:51 评论0 收藏0
Gatsby极速入门—添加博客文章列表（3）

摘要：查数据如图所示，套页面打开打开首页，看到文章列表就大功告成了。 1.查数据 { allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) { edges { node { frontmatter { title path ...

cnTomato 2019-08-26 13:55 评论0 收藏0
Gatsby极速入门—支持Markdown（1）

摘要：安装插件我用就是因为它支持所以不墨迹，直接整支持。添加格式化文章在下面添加三篇文章，头部格式如下教程完整代码如图所示 1.安装插件我用Gatsby就是因为它支持Markdown.所以不墨迹，直接整Md支持。 yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章在src>page...

RobinTang 2019-08-26 18:27 评论0 收藏0
使用 Gatsby.js 搭建静态博客 1 关键文件

摘要：原文地址静态博客之前也有搭建过，不过使用一键生成的，其实当时也有考虑过，不过这个框架搭建博客入门还是比较难的，前置知识点包括和。使用建立项目已经自带了不少插件，但在我的搭建过程中仍然有一些需要自己添加的。原文地址：https://ssshooter.com/2018-12... 静态博客之前也有搭建过，不过使用 Hexo 一键生成的，其实当时也有考虑过 Gatsby，不过这个框架搭...

mzlogin 2019-08-23 13:58 评论0 收藏0