Gatsby GraphQL错误:在操作"BlogPostQuery“中从不使用变量"$slug” - 腾讯云开发者社区

文章/答案/技术大牛

发布

一杯茶的时间，上手 Gatsby 搭建个人博客

为什么用 GraphQL 在上一节介绍了选择 Gatsby 的原因，其中提到了 Gatsby 使用 GraphQL 。大家可能会有疑惑，不是建静态博客么，怎么会有 GraphQL？...在 Gatsby 中，根据 js 文件的位置不同，使用 GraphQL 有两种形式，且 Gatsby 对其做了魔法，在 src/pages 下的页面可以直接 export GraphQL 查询，在其它页面需要用...一般使用时只需要知道集合里每个项目的数据在 edges.node 中，同时通过 GraphiQL 浏览其它可以使用的数据。...我在修改 starter 时踩到一个坑是复制组件时忘了修改 static query 查询语句的名称，导致重名报错。避免错误最好方式是在 GraphiQL 编辑器中写好运行无误再复制到组件中。...修改 Markdown 节点在 Remark 插件生成的 Markdown 节点中，我们可以往 fields 域放一些自定义的变量。这里我们把自定义的路径存到 fields.slug 中。

4.3K2 0

Gatsby: 添加标签

安装插件 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...> {tag} ))} )} export const pageQuery = graphql...tags } } } ` (4) 添加标签样式 src/styles/blog.module.css .tag { margin-right: 2%; } (5) 在...content/blog 中每篇博客的开头添加标签： tags: - 标签1 - 标签2 如果没有自动重建，手动执行： gatsby build 效果：https://aping-dev.com

1.6K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

如何利用机器学习和Gatsby.js创建假新闻网站

一个重要的插件是Gatsby -source-filesystem，它允许Gatsby从存储在本地文件系统中的文件中提取数据。...gatsby-node.js 此文件用于实现api。这些api可以使用GraphQL从数据层中获取数据。在处理程序化页面生成时，我们将更深入地研究这个文件的内容。...在区分人工生成的新闻和机器生成的新闻方面，它的准确率超过90%。这也意味着，该模式本身就擅长制造假新闻。我们可以在Colab中克隆存储它的存储库并使用它。...创建页面的两个大步骤是: 1)为本地文件系统中的每个标记文件创建slugs(或唯一的url) 2)使用页面模板使用slugs和通过GraphQL获取的其他信息创建实际的web页面。...) }) } 在gatsby-node.js中，为每个markdown文件创建数据节点，然后所有这些节点将与页面模板一起使用，以创建实际的页面。

5.4K6 0

Gatsby中怎么加载图片？

提供的组件，类似html 中的 img 标签，可以在页面中直接使用。... 在 gatsby 中的使用实例： import React from "react" import logo from "....style 中的 borderRadius 给图片增加圆角边框，此法在 safari 浏览器会失效。...插件，转为数据层节点 ImageSharp；使用 Graphql 查询 ImageSharp 节点数据，传递给 gatsby-plugin-image 插件提供的组件 GatsbyImage...怎么在gatsby中访问 strapi 中数据？ 2、解决方案借助插件 gatsby-source-strapi 把strapi中数据转为 gatsby 数据节点，方便访问。

3.9K5 0

Vue.js最佳静态站点生成器对比

在 VuePress 中，每个页面都被视为一个 markdown 文件，它们被渲染为 HTML 页面，并在加载页面时充当一个单页应用程序。...与 React 中的 Gatsby 相似，Gridsome 是一个数据驱动的框架。Gridsome 使用一个 GraphQL 层从各种源中获取内容，然后从中动态生成页面。...你可以使用 gridsome develop 命令在本地运行项目，以在 localhost:8080/___explore 处浏览这个 GraphQL 数据层。...与 Gatsby 和 Gridsome 类似，Saber 允许你使用你想用的数据来创建静态网站。你可以从不同的文件系统中提取数据。有了 Saber，你就不用操心 GraphQL 了。...例如，Gatsby 和 Gridsome 的行为看起来非常接近。此外，Gridsome 在性能、学习曲线、社区规模等方面都能与 Gatsby 相提并论。

6K1 0

用 Gatsby 创建一个博客

您通常希望使用 gatsby develop 来启动本地开发服务器，以验证我们在步骤中所完成的功能。添加必要的插件 Gatsby 支持使用丰富的插件，很多非常有用的插件都是为了完成普通任务而编写的。...我们将使用这些数据来构建一个包含盖茨比的页面。我们的 GraphQL“形状”直接反映在这个数据对象中，因此，当我们在GraphQL博客文章模板中查询时，我们从该查询中提取的每个属性都将可用。...你不知道，我们在 Gatsby 做到这一点有多容易，使用我们在博客模板中使用的类似策略，例如一个 React 组件和一个 GraphQL 查询。...我们在博客文章模板中采用了类似的方法，因此这应该看起来非常熟悉。我们再一次导出包含了 GraphQL 查询的 pageQuery。...现在我们有一个由 Gatsby 所生成的功能完整的博客，其中有真正的内容在 Markdown 里，有一个博客列表，以及在博客中浏览的能力。

3.5K3 0

学习gatsby，从这里开始！

：通过 GraphQL 查询 GraphQL Data Layer 中的数据展示数据：通过React 编写HTML页面，把数据展示出来。...--- 三、安装 Gatsby 并新建网站 Gatsby 是在 Node.js 的基础上建立，使用 Gatsby 之前必须先安装 Node.js 且版本 ≥ 12.13。...--- 4、使用 MDX 文件新增页面 MDX文件是指在 markdown 文件中直接插入 jsx 代码的混合文件，怎么用在Gatsby中？详细步骤，看这里！...使用了插件 react-helmet。 --- 七、部署怎么部署发布gatsby项目？第一步：有一个备案过的域名。可以在阿里云上进行域名注册和备案；第二步：需要一个服务器。...同样也可以在阿里云上购买一个ESC；第三步：在阿里云后台设置域名解析到第二步的服务器；第四步：在服务器上安装nginx；第五步：在开发机器上编译 gatsby 项目 gatsby clean gatsby

2.8K2 0

Gatsby中怎么使用MDX？

MDX 是一种文档格式，可以在 Markdown 文档中无缝地插入 JSX 代码。 import {Chart} from '.... mdx - 中文 - 官方文档 mdx - 英文 - 官方文档 mdx - 源码 - GitHub 二、Gatsby 中使用...项目中，新增页面 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...项目，浏览器访问页面：http://localhost:8000/about/ 三、参考文档 Gatsby中怎么使用MDX？

1.7K1 0

9个不错的前端开源项目

为了帮助你在2020年成为前端大师，我收集了9个不同的项目，每个项目都有不同的主题和不同的JavaScript框架或库作为技术栈，您可以构建它们并将它们添加到学习计划中。...按照教程进行操作，或者自己动手做。...，它在后台使用React和GraphQL。...您将学到什么在本教程中，您将学习如何利用Gatsby构建出色的博客，以便在使用React和GraphQL的同时编写自己的文章。...，但是使用Gatsby，您可以在使用React的同时创建高性能网站——这是一个了不起的组合。

8.3K3 0

你的博客用不着什么JavaScript框架

它有一个由 GraphQL 支持的数据层，并将所有内容输出到静态文件，使你可以在几乎任何地方托管它。...这种多出来的操作看来是违背我转向 SSG 的初衷（提高页面速度）的。...在 2020 年 2 月对 100 万个首页的调查中，WebAIM 发现使用 React 的网页的可访问性错误比平均水平高 5.7％；而使用 Vue 的网页则高出 25％。...https://www.gatsbyjs.org/packages/gatsby-plugin-no-javascript/ 你可以继续编写 react 组件和 GraphQL，甚至可以使用 CSS-in-JS...使用并发包，我可以在 Eleventy 的 serve 过程中同时运行构建脚本。像 Gatsby 一样，Eleventy 也有一个插件生态系统（虽然很小，但增长迅速）。

5.5K1 0

2018 年前端开发五大趋势

这就是GraphQL的用武之地，使用GraphQL而不是使用单独的端点来访问每个资源。你可以使用单个端点，该端点能够同时处理涉及多个数据源的复杂查询。...Gatsby 如果你的预算比较紧张，但是同时又希望在你的项目中只使用高级技术，那么你一定要尝试 Gatsby。Gatsby 是 Kyle Matthews 为静态网站的创建而构建的新型解决方案。...与 Jekyll，Hugo 或 Hexo 等流行解决方案不同，这个静态生成器不使用模板，而是信赖于 Webpack 和 React 组件（注意 React 官网本身也是在 Gatsby 的帮助下编写的）...从1.0版本开始，Gatsby 使用了上面提到的 GraphQL。因此，在构建过程，它可以从多个 GraphQL API 中获得数据，然后使用它们创建一个完全静态的 React 客户端应用程序。...静态网站生成器专门用于解决此问题，Gatsby 是其中最好的，感谢 GraphQL。我们坚持认为，任何在职的前端工程师在 2018 年至少都能掌握这个流行工具的基本知识。

3.8K4 0

【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比

事实上，静态网站的使用在增加。在本文中，您将看到三种最好的静态站点生成器的比较，它们的优点、缺点以及您应该使用它们的原因。静态站点生成器使构建静态站点轻而易举。...Gatsby、Hugo和Jekyll是最受欢迎的静态站点生成器中的三种，它们受欢迎的原因有很多。让我们看看他们能提供什么。盖茨比（Gatsby）由节点。盖茨比是这三款中最新的静态网站生成器。...使用反应物.js使Gatsby能够受益于框架呈现DOM的方法，因为组件成为焦点。 Gatsby还支持GraphQL，这意味着数据查询变得更加容易。...由于有了GraphQL, Gatsby可以生成能够访问和利用来自不同来源的数据的站点。您将在使用Gatsby时看到，生成的站点是进步的Web应用程序。...它支持GraphQL。大量的插件都是可用的——谈谈庞大的用户社区的好处吧。解释性教程不难找到，文档也很棒。缺点使用Gatsby需要大量的JavaScript、React和GraphQL知识。

3.9K2 0

Next.js + 腾讯云开发Webify 打造绝佳网站

之前使用Next.js + strapi做了一个简单博客站点也顺道写了一篇Next.js 简明教程，之后Next本身一直在迅猛发展。...) React.js (create-react-app) Hexo Gatsby.js Angular Next.js SSG Nuxt.js SSG 以及自动适配框架。...next export 不支持next SSG中“动”的特性（fallback，revalidate）。...async read(size) { const result = await getPostsWithGraphql(`${cmsUrl}/graphql...|| data.book.uuid}/${ data.slug || data.uuid }`, changefreq: 'daily

1.7K1 0

Next.js + 云开发Webify 打造绝佳网站

之前使用 Next.js + strapi 做了一个简单博客站点也顺道写了一篇 Next.js 简明教程，之后 Next 本身一直在迅猛发展。...Webify支持版本 Github、Gitlab、Gitee 服务商，听说即将支持 Coding： Vue.js (vue-cli) React.js (create-react-app) Hexo Gatsby.js...next export 不支持next SSG中“动”的特性（fallback，revalidate）。...async read(size) { const result = await getPostsWithGraphql(`${cmsUrl}/graphql...data, encoding, callback) { callback(null, { url: `/p/${data.book.slug

1.8K3 0

创建 React 应用的 7 种方式，你用过几种？

创建 gatsby 应用 npm init gatsby 在命令行中选择开发语言，是否使用 CMS、是否支持、md、mdx 等创建完成后，在命令行运行 npm run dev，打开 http://localhost...:8000/ 看下效果打开 http://localhost:8000/___graphql 运行 graphql 语言查询比如创建一个博客列表，可以在代码中直接导出一个 graphql 查询语言...import * as React from 'react' import { graphql } from 'gatsby' import Layout from '.....创建 Next.js 应用 npx create-next-app@latest --ts 在项目中，您可以编写 react 组件，并使用 Next.js 提供的 API 进行路由配置、服务端渲染等操作...例如，在 Next.js 中，可以使用 dynamic 导入组件，实现代码拆分；可以使用 next/link 组件，实现客户端路由跳转，提升用户体验等。

9.4K1 0

塔荐 | 2018 年最值得关注的 JavaScript 趋势

谈到取悦开发者，不要忘了Facebook今年在BSD+Patents的收钱事件中遭遇的史诗般的失败，这惹恼了不少的开发者。...尽管Facebook从未在这场游戏中领先过，并且在创新的势头上无法与Vue匹敌，但在工具使用、代码切割、路由以及状态管理方面， React加上Next.js能让你在体验上跟Vue接近许多，此外还能让你获得大规模的...RESTful API当然还远没到灭亡的地步，但再次地，看看初创企业的使用趋势就知道GraphQL是个热门选项。另一方面，像Falcor这样的替代者几乎连讨论的声音都没有了。...Facebook开发的Flow是React开发者的优先选择，因为它很容易跟Babel集成，在React项目中也使用得很普遍。...这跟JavaScript形成了羡慕对比，后者的一些操作不会改变你的数据（比方说一些数据方法，包括map、filter、concat、forEach等），但有的就会（Array的pop、push、splice

1.9K8 0

Next.js + 云开发Webify 打造绝佳网站

之前使用 Next.js + strapi 做了一个简单博客站点也顺道写了一篇 Next.js 简明教程，之后 Next 本身一直在迅猛发展。...支持版本 Github、Gitlab、Gitee 服务商，听说即将支持 Coding： Vue.js (vue-cli) React.js (create-react-app) Hexo Gatsby.js...next export 不支持next SSG中“动”的特性（fallback，revalidate）。... async read(size) { const result = await getPostsWithGraphql(`${cmsUrl}/graphql...data, encoding, callback) { callback(null, { url: `/p/${data.book.slug

1.4K2 0

JavaScript前端学习有哪些项目可以练习

01 使用React构建电影搜索应用首先，可以使用React构建一个电影搜索应用。你将学到什么内容：构建这个应用时，你将使用相对较新的Hooks API来提升你的React技能。...Vue构建聊天应用你将学到什么内容：在这个教程中，你将学习如何从头开始设置一款Vue应用，创建组件、处理状态、创建路由、连接到第三方服务，甚至处理身份验证。...教程： https://www.sitepoint.com/pusher-vue-real-time-chat-app/ 03 使用Svelte构建待办事项应用你将学到什么内容：本教程将向你展示如何从头到尾使用...Gatsby建立博客你将学到什么内容：在本教程中，你将学习如何利用Gatsby构建出色的博客，可以很好地用来撰写自己的文章，同时利用React和GraphQL的能力。...技术栈和功能： Gatsby React GraphQL 插件和主题 MDX/Markdown 引导CSS 教程：https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

3.5K2 1

大势 | 2018最值得关注的JavaScript趋势

谈到取悦开发者，不要忘了Facebook今年在BSD+Patents的收钱事件中遭遇的史诗般的失败，这惹恼了不少的开发者。...RESTful API当然还远没到灭亡的地步，但再次地，看看初创企业的使用趋势就知道GraphQL是个热门选项。另一方面，像Falcor这样的替代者几乎连讨论的声音都没有了。...Gatsby Gatsby是Kyle Mathews开发的用于React的静态网站生成器。自从Kyle去年全职开发Gatsby以来，这个东西开始真正获得发展势头。...Facebook开发的Flow是React开发者的优先选择，因为它很容易跟Babel集成，在React项目中也使用得很普遍。...7.在一个项目上安装Prettier，让你的代码可读性更强。 8.在一个React项目上学习使用Jest截屏及Enzyme。

1.2K2 0

2023 年，这 9 个项目助你成为前端高手

你将学到什么在构建这个 App 时，你将使用相对较新的 Hooks API，这有助于提高你的 React 技能。...7 用 Gatsby 构建一个博客 Gatsby 是一个很好的静态站点生成器，它在底层使用了 React 和 GraphQL。这个项目看起来是这样的。...你将学到什么在这个教程中，你将学习如何利用 Gatsby、React 和 GraphQL 构建一个出色的博客。...Gridsome 与 Gatsby 一样，两者都使用 GraphQL 作为数据层，不一样的是 Gridsome 使用了 VueJS。它也是一个很棒的静态站点生成器，可以帮你构建出很好的博客。...还是继续使用你最喜欢的框架 / 库，在 2023 年用它们完成所有的项目？

4.2K2 0

点击加载更多

一杯茶的时间，上手 Gatsby 搭建个人博客

Gatsby: 添加标签

如何利用机器学习和Gatsby.js创建假新闻网站

Gatsby中怎么加载图片？

Vue.js最佳静态站点生成器对比

用 Gatsby 创建一个博客

学习gatsby，从这里开始！

Gatsby中怎么使用MDX？

9个不错的前端开源项目

你的博客用不着什么JavaScript框架

2018 年前端开发五大趋势

【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比

Next.js + 腾讯云开发Webify 打造绝佳网站

Next.js + 云开发Webify 打造绝佳网站

创建 React 应用的 7 种方式，你用过几种？

塔荐 | 2018 年最值得关注的 JavaScript 趋势

Next.js + 云开发Webify 打造绝佳网站

JavaScript前端学习有哪些项目可以练习

大势 | 2018最值得关注的JavaScript趋势

2023 年，这 9 个项目助你成为前端高手

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐