国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Gatsby極速入門—使用GraphQL解析Markdown(2)

fou7 / 1915人閱讀

摘要:什么是既是一種用于的查詢語言也是一個滿足你數據查詢的運行時。嵌套將組件扔到下面的里面打開首頁,看到網站的描述就大功告成了。

1.什么是GraphQL

GraphQL 既是一種用于 API 的查詢語言也是一個滿足你數據查詢的運行時。 GraphQL 對你的 API 中的數據提供了一套易于理解的完整描述,使得客戶端能夠準確地獲得它需要的數據,而且沒有任何冗余,也讓 API 更容易地隨著時間推移而演進,還能用于構建強大的開發(fā)者工具。

官網: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;

打開首頁,看到網站的描述就大功告成了。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109564.html

相關文章

  • Gatsby極速入門—添加上一頁下一頁功能(完結篇)

    摘要:調整這個就簡單了打開,增加代碼如下這里是新增加的調整打開首頁,點擊頁面跳轉到對應的頁面大功告成。總結到此,通過就快速的搭建了一個博客網站,我們只需書寫文件就能生成對應的網頁了。至于網頁美化,那是切圖的事兒,我就不在這里墨跡了。 1.調整gatsby-node 這個就簡單了,打開gatsby-node.js,增加代碼如下: const path = require(path); expo...

    youkede 評論0 收藏0
  • Gatsby極速入門—添加博客內容頁(4)

    摘要:查數據注意,這里跟前面不一樣了,我用這個文件去提供數據,沒有什么為什么,規(guī)定,照做就好。很清晰明顯,這里就說一點我傳遞了一個參數,到內容頁。創(chuàng)建內容頁模板在下創(chuàng)建這里只要對應的路徑的那個文章查詢 1.查數據 注意,這里跟前面不一樣了,我用gatsby-node.js這個文件去提供數據,沒有什么為什么,規(guī)定,照做就好。 const path = require(path); export...

    wean 評論0 收藏0
  • Gatsby極速入門—添加博客文章列表(3)

    摘要:查數據如圖所示,套頁面打開打開首頁,看到文章列表就大功告成了。 1.查數據 { allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) { edges { node { frontmatter { title path ...

    cnTomato 評論0 收藏0
  • Gatsby極速入門—支持Markdown(1)

    摘要:安裝插件我用就是因為它支持所以不墨跡,直接整支持。添加格式化文章在下面添加三篇文章,頭部格式如下教程完整代碼如圖所示 1.安裝插件 我用Gatsby就是因為它支持Markdown.所以不墨跡,直接整Md支持。 yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章 在src>page...

    RobinTang 評論0 收藏0
  • 使用 Gatsby.js 搭建靜態(tài)博客 1 關鍵文件

    摘要:原文地址靜態(tài)博客之前也有搭建過,不過使用一鍵生成的,其實當時也有考慮過,不過這個框架搭建博客入門還是比較難的,前置知識點包括和。使用建立項目已經自帶了不少插件,但在我的搭建過程中仍然有一些需要自己添加的。 原文地址:https://ssshooter.com/2018-12... 靜態(tài)博客之前也有搭建過,不過使用 Hexo 一鍵生成的,其實當時也有考慮過 Gatsby,不過這個框架搭...

    mzlogin 評論0 收藏0

發(fā)表評論

0條評論

fou7

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<