模型出错了，请稍后重试~
1.什么是GraphQL GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。...GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。...官网：http://graphql.cn/ 2.为什么需要它？ 一图抵万言： ? 1557045421223.png 3.怎么做？ 1.一图抵万言， ?...} from 'gatsby' import React from "react" const TitleAndDescription = ({ data }) => { //这里的数据是下面查出来的...这里是所有数据，传到了TitleAndDescription组件里，react组件数据传递 const Header = () => { return ( <StaticQuery query={graphql
1.什么是GraphQL GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。...GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。...官网：http://graphql.cn/ 2.为什么需要它？ 一图抵万言： 1557045421223.png 3.怎么做？...src>components>Header.js里面， import { StaticQuery, graphql } from 'gatsby' import React from "react" const...传到了TitleAndDescription组件里，react组件数据传递 const Header = () => { return ( <StaticQuery query={graphql
1.查数据 注意，这里跟前面不一样了，我用gatsby-node.js这个文件去提供数据，没有什么为什么，规定，照做就好。...const path = require("path"); exports.createPages = ({ actions, graphql }) => { const { createPage...} = actions const blogPostTemplate = path.resolve(`src/templates/blogPost.js`) return graphql...context: { pathSlug: path }, }) }) }) } 很清晰明显，这里就说一点我传递了一个参数，pathSlug到内容页...2.创建内容页模板 在src>templates下创建blogPost.js import React from "react" import { graphql,Link } from 'gatsby
1.查数据 注意，这里跟前面不一样了，我用gatsby-node.js这个文件去提供数据，没有什么为什么，规定，照做就好。...const path = require("path"); exports.createPages = ({ actions, graphql }) => { const { createPage...pathSlug: path }, }) }) }) } 很清晰明显，这里就说一点我传递了一个参数，pathSlug到内容页...2.创建内容页模板 在src>templates下创建blogPost.js import React from "react" import { graphql,Link } from...'gatsby' const Template = ({ data, pageContext }) => { const {next,prev} = pageContext;
一旦呈现为静态 HTML，客户端站点的React和JavaScript会接管它并添加动态的内容。 Gatsby 最近发布了v1.0.0，推出了很多新特性。...包括(但不限于)使用GraphQL创建内容查询的能力，与各种cms集成——包括WordPress、Contentful、Drupal等等。还有基于路由的代码分布使得用户体验更佳。...中指定的相关文件、，通过 gatsby-remark-images 压缩图像，并使用 srcset 添加响应性图像等等。...这些问题，让我们通过编写一个GraphQL查询来回答，以便为我们的组件添加内容。 编写一个 GraphQL 查询 在 Template 声明下面，我们将添加一个 GraphQL 查询。...GraphQL是很优雅的。 实际的 React 组件是相当琐碎的，需要注意一点，当链接到内部内容时，你应该经常使用 gatsby-link。
) } export default IndexPage 2、StaticImage 与 img 与 区别 ：StaticImage 组件对图像做了预处理...1、原理说明： 本地文件通过 gatsby-source-filesystem 插件，转为数据层节点 allFile； 数据层节点 allFile 中的图像节点， 通过 gatsby-transformer-sharp...插件，转为数据层节点 ImageSharp； 使用 Graphql 查询 ImageSharp 节点数据，传递给 gatsby-plugin-image 插件提供的组件 GatsbyImage...import * as React from 'react' import { graphql } from 'gatsby' import { MDXRenderer } from 'gatsby-plugin-mdx...{ graphql } from "gatsby" import { GatsbyImage } from "gatsby-plugin-image" const HomePage = ({ data
但是，VuePress 针对以内容为中心的静态网站创建做了更多优化，而 Nuxt.js 则更多专注于 Web 应用程序开发。...与 React 中的 Gatsby 相似，Gridsome 是一个数据驱动的框架。Gridsome 使用一个 GraphQL 层从各种源中获取内容，然后从中动态生成页面。...GraphQL 充当 Gridsome 的内容管理系统。...提供开箱即用的代码拆分、资产优化和渐进式图像，以提高性能。 PWA 准备就绪。 SEO 友好。 定义良好的结构和自动化路由。 丰富的插件。 缺点 需要具备 GraphQL 的基础知识。...与 Gatsby 和 Gridsome 类似，Saber 允许你使用你想用的数据来创建静态网站。你可以从不同的文件系统中提取数据。有了 Saber，你就不用操心 GraphQL 了。
它有一个由 GraphQL 支持的数据层，并将所有内容输出到静态文件，使你可以在几乎任何地方托管它。...特性来切换到新内容上，而不会触发页面加载。...https://www.gatsbyjs.org/packages/gatsby-plugin-no-javascript/ 你可以继续编写 react 组件和 GraphQL，甚至可以使用 CSS-in-JS...Gatsby Starter Low Tech 博客使用 no-javascript 插件和其他一些技术（包括将所有图像转换为灰度），来帮助你创建一个轻量且节能的博客。...相比之下，Gatsby 中出色的 gatsby-image 插件可以生成延迟加载和响应式的图片元素，并能在加载全分辨率文件后在低分辨率或 SVG 版本的图像间平滑切换。
而且在了解过程中还发现了 Netlify CMS[10] 这个内容管理平台，如此一来，文章数据完全可以存在 Github 中，同时可以便捷地编辑文章。...为什么用 GraphQL 在上一节介绍了选择 Gatsby 的原因，其中提到了 Gatsby 使用 GraphQL 。大家可能会有疑惑，不是建静态博客么，怎么会有 GraphQL？...带魔法的 GraphQL 这里也是 Gatsby 的第一个坑。...在 Gatsby 中，根据 js 文件的位置不同，使用 GraphQL 有两种形式，且 Gatsby 对其做了魔法，在 src/pages 下的页面可以直接 export GraphQL 查询，在其它页面需要用...Debug GraphQL Gatsby 魔法带来的另外一个坑是 GraphQL 报错信息不全，可能会默默被吞掉，也可能无法定位到最终文件。
add gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-source-filesystem ：...gatsby-plugin-mdx ：转换 allFile 节点中格式为 .mdx、.md 的文件，生成新的 gatsby 数据层节点：allMdx、mdx。...2、修改配置 gatsby-config.js 增加下面内容： // gatsby-config.js module.exports = { plugins: [ { resolve...项目中，新增页面 src/pages/about.js import * as React from "react" import { graphql } from "gatsby" import...data.allMdx.nodes[0].body} ) } export default AboutPageMdx export const pageQueryMDX = graphql
--- 二、Gatsby 简介 1、图解系统结构 数据统一：从 不同数据源(下图中 CMS、Private API 等) 获取数据，形成统一的数据结构（ GraphQL Data Layer） 数据查询...：通过 GraphQL 查询 GraphQL Data Layer 中的数据 展示数据：通过React 编写HTML页面，把数据展示出来。...--- 三、安装 Gatsby 并新建网站 Gatsby 是在 Node.js 的基础上建立，使用 Gatsby 之前必须先安装 Node.js 且版本 ≥ 12.13。...同样也可以在阿里云上购买一个ESC； 第三步：在阿里云后台设置域名解析到第二步的服务器； 第四步：在服务器上安装nginx； 第五步：在开发机器上编译 gatsby 项目 gatsby clean gatsby...build # 项目目录下会生成 public 文件夹 第六步：把第五步中 public 文件夹 下所有内容拷贝至 第四步中的nginx下，并设置好ngingx 配置文件； 第七步：可以通过域名访问网站了
1.调整gatsby-node 这个就简单了,打开gatsby-node.js，增加代码如下： const path = require("path"); exports.createPages...= ({ actions, graphql }) => { const { createPage } = actions const blogPostTemplate = path.resolve...(`src/templates/blogPost.js`) return graphql(` { allMarkdownRemark {...to={prev.frontmatter.path}>Prev} ) } export const query = graphql...如果你觉得深入学习gatsby太麻烦，你可以直接用我写好的模板就行， 开源库地址，直接克隆就可以用了： https://github.com/leolau2012/gatsby-teach 但是基础还是要会的
安装插件 npm install yarn -g yarn add gatsby-plugin-tags 配置插件 在 gatsby-config.js 的 plugins 中添加： { resolve...}) } export default PostsList (2) 添加标签页 src/templates/tag.js import React from "react" import { graphql...postEdges={data.allMarkdownRemark.edges} /> ) } export const pageQuery = graphql...> {tag} ))} )} export const pageQuery = graphql.../packages/gatsby-plugin-tags/?
1.调整gatsby-node 这个就简单了,打开gatsby-node.js，增加代码如下： const path = require("path"); exports.createPages =...({ actions, graphql }) => { const { createPage } = actions const blogPostTemplate = path.resolve...(`src/templates/blogPost.js`) return graphql(` { allMarkdownRemark { edges {...can be passed via context }) }) }) } 2.调整blogPost.js import React from "react" import { graphql...如果你觉得深入学习gatsby太麻烦，你可以直接用我写好的模板就行， 开源库地址，直接克隆就可以用了： https://github.com/leolau2012/gatsby-teach 但是基础还是要会的
Gatsby、Hugo和Jekyll是最受欢迎的静态站点生成器中的三种，它们受欢迎的原因有很多。让我们看看他们能提供什么。 盖茨比（Gatsby） 由节点。盖茨比是这三款中最新的静态网站生成器。...除了使用Node之外，Gatsby还对客户端使用了response .js。使用反应物.js使Gatsby能够受益于框架呈现DOM的方法，因为组件成为焦点。...Gatsby还支持GraphQL，这意味着数据查询变得更加容易。由于有了GraphQL, Gatsby可以生成能够访问和利用来自不同来源的数据的站点。...它支持GraphQL。 大量的插件都是可用的——谈谈庞大的用户社区的好处吧。 解释性教程不难找到，文档也很棒。 缺点 使用Gatsby需要大量的JavaScript、React和GraphQL知识。...虽然Jekyll对页面内容使用Markdown，但它也使用液体模板语言来处理页面。Jekyll也使用Sass，这对于喜欢CSS预处理器的开发人员来说非常重要。
与REST模型相比，GraphQL是一个智能的个人助理，使用你指定的源地址，提供所需的内容。...Gatsby 如果你的预算比较紧张，但是同时又希望在你的项目中只使用高级技术，那么你一定要尝试 Gatsby。Gatsby 是 Kyle Matthews 为静态网站的创建而构建的新型解决方案。...从1.0版本开始，Gatsby 使用了上面提到的 GraphQL。因此，在构建过程，它可以从多个 GraphQL API 中获得数据，然后使用它们创建一个完全静态的 React 客户端应用程序。...主题也是许多内容管理系统的弱点。相反，开发者更喜欢使用单独的模块，这些模块可以在将来根据自己的需要重写。...除了我们上面描述的明显的优势外，这种页面有一个重要的缺点 —— 它的内容不容易被编辑。静态网站生成器专门用于解决此问题，Gatsby 是其中最好的，感谢 GraphQL。
并且随意在这个项目上添加你想要的任何内容。...网站配置 现在我们已经设置了Gatsby站点，并预先打包了基本的静态web资源后，在实际添加内容之前，我们应该了解站点的基本组件并正确配置它们。 当你设置一个Gatsby网站时，你会得到一堆文件。...gatsby-node.js 此文件用于实现api。这些api可以使用GraphQL从数据层中获取数据。在处理程序化页面生成时，我们将更深入地研究这个文件的内容。...' import { graphql } from 'gatsby' import Layout from ".....develop或gatsby build时，代码就会自动生成所有内容!
你将学到什么内容： 构建这个应用时，你将使用相对较新的Hooks API来提升你的React技能。示例项目利用了React组件、许多Hooks、一个外部api，当然还有一些CSS样式。...样式 部署 SSR和SPA 教程：https://snipcart.com/blog/next-js-ecommerce-tutorial 05 使用Nuxt.js构建完整的多语言博客网站 你将学到什么内容...用于状态管理的Vuex SCSS样式 Nuxt中间件 教程：https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial 06 使用Gatsby...建立博客 你将学到什么内容： 在本教程中，你将学习如何利用Gatsby构建出色的博客，可以很好地用来撰写自己的文章，同时利用React和GraphQL的能力。...技术栈和功能： Gatsby React GraphQL 插件和主题 MDX/Markdown 引导CSS 教程：https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc
There was an error in your GraphQL query: Cannot query field "entry" on type "DocsJsonChapters"....couple of solutions to common problems: - If you added a new data source and/or changed something inside gatsby-node.js.../gatsby-config.js, please try a restart of your development server - The field might be accessible in...Therefore Gatsby can't infer the type and add it to the GraphQL schema....to add a least one entry with that field ("dummy content") It is recommended to explicitly type your GraphQL
7 用 Gatsby 构建一个博客 Gatsby 是一个很好的静态站点生成器，它在底层使用了 React 和 GraphQL。这个项目看起来是这样的。...你将学到什么 在这个教程中，你将学习如何利用 Gatsby、React 和 GraphQL 构建一个出色的博客。...技术栈和特性 Gatsby React GraphQL 插件和主题 MDX/Markdown Bootstrap CSS 模板 如果你曾经想过要开发一个博客，这就是一个很好的例子（https://blog.bitsrc.io...Gridsome 与 Gatsby 一样，两者都使用 GraphQL 作为数据层，不一样的是 Gridsome 使用了 VueJS。它也是一个很棒的静态站点生成器，可以帮你构建出很好的博客。...点击底部阅读原文访问 InfoQ 官网，获取更多精彩内容！ 今日好文推荐 每个月在云上“狂烧”180万，Ruby On Rails 之父：我们要直接买硬件！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
