成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Gatsby極速入門—使用GraphQL解析Markdown（2）

fou7 / 1945人閱讀

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

1.什么是GraphQL

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

官網(wǎng)：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 }) => {
//這里的數(shù)據(jù)是下面查出來的
  const title = data.site.siteMetadata.title;
  const description = data.site.siteMetadata.description;
  return (
    

      
{title}

      
{description}

    

  );
}
//這里是所有數(shù)據(jù)，傳到了TitleAndDescription組件里，react組件數(shù)據(jù)傳遞
const Header = () => {
  return (
     }
    />
  )
}
export default Header

這里是所有數(shù)據(jù)，傳到了TitleAndDescription組件里，react組件數(shù)據(jù)傳遞,我這么就為了看著舒服一點。

3.嵌套Header

將Header組件扔到 pages下面的index.js里面：

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

      

    

  )
}
export default Layout;

打開首頁，看到網(wǎng)站的描述就大功告成了。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109564.html

相關(guān)文章

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

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

    youkede 評論0 收藏0

  • Gatsby極速入門—添加博客內(nèi)容頁（4）

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

    wean 評論0 收藏0

  • Gatsby極速入門—添加博客文章列表（3）

    摘要：查數(shù)據(jù)如圖所示，套頁面打開打開首頁，看到文章列表就大功告成了。 1.查數(shù)據(jù) { 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 關(guān)鍵文件

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

    mzlogin 評論0 收藏0

發(fā)表評論

0條評論

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