首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用 Gatsby 创建一个博客

包括(但不限于)使用GraphQL创建内容查询的能力,与各种cms集成——包括WordPress、Contentful、Drupal等等。还有基于路由的代码分布使得用户体验更佳。...我们定义的每个键都可以被注入到查询中。 现在,我们已经安装了一堆插件来从磁盘加载文件,将 Markdown 转换为HTML。我们有一个单独的 Markdown 文件,它将作为一个博客发布。...接下来:以编程方式创建必要的静态页面(并将模板注入)与 Gatsby 的 Node API,让我们开始吧。 此时需要注意的一点是,GraphQL 查询是在构建时进行的。...对于所有公开的 action 的完整列表,请参阅 Gatsby 的文档。现在我们可以构造 GraphQL 查询,它将获取我们所有的 Markdown 贴子。...我们的 GraphQL“形状”直接反映在这个数据对象中,因此,当我们在GraphQL博客文章模板中查询时,我们从该查询中提取的每个属性都将可用。

2.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【Web前端】使用 JSON 处理数据

    JSON 是基于文本的,因此它可以与几乎所有的编程语言无缝地配合使用。JSON 通常用于在客户端和服务器之间传输数据。 1.1 JSON 结构 JSON 数据主要由两种结构组成:对象和数组。...1.1.1 JSON 对象 JSON 对象是由键值对组成的一组无序的数据。使用大括号 ​​{}​​ 来包围,键(属性名)为字符串,值可以是字符串、数字、布尔值、数组、对象或 ​​null​​。..."age"​​ 是一个键,对应的值是数字 ​​23​​。 ​​"isStudent"​​ 是一个键,对应的值是布尔值 ​​yes​​。...1.1.2 JSON 数组 JSON 数组是有序的数据集合,使用方括号 ​​[]​​ 包围。数组中的元素可以是任意类型,包括对象和其他数组。...对应的值是一个数组,数组中包含两个对象,每个对象都有 ​​name​​ 和 ​​age​​​ 键。

    10400

    IntelliJ IDEA 2023.2新特性详解第二弹!

    默认调试器会获取 Flux 的前 100 个条目。...8.6 JavaScript 中的 JSON 正文补全 IDE 现在为 JavaScript 代码中的 JSON 对象键提供补全,例如使用 fetch() 调用或引用 Axios 库的代码。...8.9 HTTP 客户端 CLI 中对 GraphQL 和 WebSocket 的支持 现可以在 IntelliJ IDEA 中使用 HTTP 客户端 CLI 与 GraphQL API 交互,...8.12 针对检测 YAML 文件中不匹配值类型的新检查 2023.2 中,我们引入了一项新检查,旨在消除 Norway Problem 并防止对 YAML 文件中布尔值的意外误解。...如果列表主要由布尔式文字(例如 true、false、off、on、yes 或 no)组成,则偏离此模式的任何文字都将被高亮显示为可能的错误,不过,在这种情况下不会建议具体的快速修复。

    97850

    深入理解JSON:数据交换格式的优雅之路

    虽然不需要JavaScript知识,但是需要遵循特定的规则: 数据是以键值对的形式存在 数据由逗号分隔 对象由开闭花括号封装 空对象可以表示为{} 数组由开闭方括号封装 空数组可以表示为[] 对象的成员由键值对表示...,包含在双引号中 对象结构中的每个成员应有唯一的键 如果成员的值是字符串,必须包含在双引号中 布尔值用小写的true或false表示 数字值用双精度浮点格式表示,不应有前导零 字符串中的"冒犯"字符需要用反斜杠字符...\转义 空值用小写的null表示 日期和类似的对象类型不被充分支持,应转换为字符串 对象或数组值的每个成员后面都必须跟一个逗号,除了最后一个 JSON文件的标准扩展名是'.json' JSON文件的MIME...假设我们有一个在线书店,我们想要记录每本书的信息。在JSON中,我们可以创建一个对象,其中包含书的标题、作者、价格等信息。同时,我们也可以创建一个数组来保存多本书的信息,每本书都是一个单独的对象。...例如,在JavaScript中,我们可以这样创建一个JSON对象: let book = { "title": "The Great Gatsby", "author": "F.

    63210

    JavaScript(基础)

    :替换的新内容 search() 可以根据正则表达式去字符串中查找指定的内容 参数: 正则表达式 将会根据该表达式查询内容,并且将第一个匹配到的内容的索引返回,如果没有匹配到任何内容,则返回-1...来将其他的数据类型转换为布尔值 && &&可以对符号两侧的值进行与运算 只有两端的值都为true时,才会返回true。只要有一个false就会返回false。...与是一个短路的与,如果第一个值是false,则不再检查第二个值 对于非布尔值,它会将其转换为布尔值然后做运算,并返回原值 规则: 1.如果第一个值为false,则返回第一个值 2.如果第一个值为true...如果比较结果为true,则从当前case处开始向下执行代码。 如果所有的case判断结果都为false,则从default处开始执行代码。.../例子: var arr = [123,"hello",true,null]; 1 2 3 复制 # 获取和修改数组的长度 使用length属性来操作数组的长度 获取长度: 数组.length

    1.4K10

    【思维导图】前端开发JavaScript-巩固你的JavaScript知识体系

    ,并返回新的长度 valueOf() 返回数组对象的原始值 indexOf() 在数组中搜索指定元素并返回第一个匹配的索引 lastIndexOf() 在数组中搜索指定元素并返回最后一个匹配的索引...如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。...match() 找到一个或者多个正则表达式的匹配 replace() 替换与正则表达式匹配的子串 search() 检索与正则表达式匹配的值 slice() 提取字符串的片段,并在新的字符串中返回被提取的部分...match()可在字符串内检索指定的值,或者找到一个或者多个正则表达式的匹配。没有匹配到结果,就返回null。有匹配到,会返回一个数组,数组的第0个元素存放的是匹配文本。...表达式:g,i,m g 表示全局模式 应用于所有字符串,而非在发现第一个匹配项就停止 i 表示不区分大小写模式 m 表示多行模式 继续查找下一行中是否存在模式匹配的项 修饰符 描述 i 执行对大小写不敏感的匹配

    3.2K20

    前端开发JavaScript-巩固你的JavaScript

    ,并返回新的长度 valueOf() 返回数组对象的原始值 indexOf() 在数组中搜索指定元素并返回第一个匹配的索引 lastIndexOf() 在数组中搜索指定元素并返回最后一个匹配的索引...如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。...match() 找到一个或者多个正则表达式的匹配 replace() 替换与正则表达式匹配的子串 search() 检索与正则表达式匹配的值 slice() 提取字符串的片段,并在新的字符串中返回被提取的部分...match()可在字符串内检索指定的值,或者找到一个或者多个正则表达式的匹配。没有匹配到结果,就返回null。有匹配到,会返回一个数组,数组的第0个元素存放的是匹配文本。...表达式:g,i,m g 表示全局模式 应用于所有字符串,而非在发现第一个匹配项就停止 i 表示不区分大小写模式 m 表示多行模式 继续查找下一行中是否存在模式匹配的项 修饰符 描述 i 执行对大小写不敏感的匹配

    2.9K60

    用TS+GraphQL查询SpaceX火箭发射数据

    GraphQL 改变了我们对 API 的思考方式,并利用直观的键/值对匹配,客户端可以请求在网页或移动应用屏幕上显示所需的确切数据。...LaunchProfile 查询还会包含嵌套对象或类型,可以通过指定括号内的键来获取对应的值。...在终端中执行: 1yarn codegen 在 src/generated/graphql.ts 中,你将会找到定义程序所需的所有类型,以及获取 GraphQL 端点以检索该数据的相应查询。...例如,检查 type Launch,这是我们在 playground 上与 GraphQL 交互的 Launch 对象的 TypeScript 表示。...此外,如果你需要一个类型或函数的定义,可以通过 Cmd + t 快捷键,或用鼠标悬停在它上面,这样会给出所有的细节。

    3K20

    📚从ES7到ES12,了解JavaScript的新特性与语法演变

    它返回一个布尔值,表示数组中是否存在指定的值。 1.2 语法 arr.includes(searchElement[, fromIndex]) arr: 要调用 includes 方法的数组。...searchElement: 要查找的元素。 fromIndex (可选): 开始查找的索引位置。如果省略该参数,则从数组的开头(索引 0)开始查找。...如果 fromIndex 为负数,则从数组的末尾开始计算。 1.3 返回值 一个布尔值。如果数组包含指定的元素,则返回 true,否则返回 false。...{flat, flatMap} 扁平化嵌套数组 1.1 Array.prototype.flat 1.1.1 定义 flat() 方法会按照一个可指定的深度遍历递归数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回...3.2 使用场景 在不同的环境中,获取全局对象有不同的方式: 在浏览器中可以使用 window 或 self 在 Web Workers 中可以使用 self 或 globalThis 在 Node.js

    39330

    面试官:说说你对keep-alive的理解是什么?怎么缓存当前的组件?缓存后怎么更新?

    > 匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值),匿名组件不能被匹配 设置了 keep-alive 缓存的组件...对象进行遍历,取出每一项的name值,用其与新的缓存规则进行匹配,如果匹配不上,则表示在新的缓存规则下该组件已经不需要被缓存,则调用pruneCacheEntry函数将其从this.cache对象剔除即可...的组件实例,此时重新调整该组件key的顺序,将其从原来的地方删掉并重新放在this.keys中最后一个 this.cache对象中没有该key值的情况,如下: /* 如果没有命中缓存,则将其设置进缓存...*/ else { cache[key] = vnode keys.push(key) /* 如果配置了max并且缓存的长度超过了this.max,则从缓存中删除第一个 */..._vnode) } } 表明该组件还没有被缓存过,则以该组件的key为键,组件vnode为值,将其存入this.cache中,并且把key存入this.keys中 此时再判断this.keys

    2.7K21

    ECMAScript 6 新特性总结

    如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。...+变量名形式与...+数组形式相当于互逆操作: ...变量名:将多余的参数放入一个数组中,rest参数必须在最后一个;函数的length属性,不包括rest参数。...所以如果所有函数都是尾调用,那么完全可以做到每次执行时,调用帧只有一项,这将大大节省内存。...这就解决了同名属性碰撞(clash)的问题,我们扩展别人的库的时候,如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。只有对同一个对象的引用,Map结构才将其视为同一个键。...get(key):读取一个键。 has(key):返回一个布尔值,表示某个键是否在Map数据结构中。 delete(key):删除某个键。 clear():清除所有成员。

    1.5K60

    C# 一分钟浅谈:GraphQL 数据类型与查询

    引言 随着Web开发技术的不断进步,GraphQL作为一种数据查询和操作语言,逐渐成为现代Web应用中的重要组成部分。相比传统的REST API,GraphQL提供了更加灵活和高效的数据获取方式。...GraphQL 数据类型 标量类型 GraphQL定义了一些基本的标量类型,包括: String:字符串类型 Int:整数类型 Float:浮点数类型 Boolean:布尔类型 ID:唯一标识符类型,通常用于表示数据库中的主键...例如,查询用户的基本信息: query { user(id: "123") { id name email } } 嵌套查询 GraphQL支持嵌套查询,可以一次性获取关联对象的数据...例如: query { user(id: "123") { id name email @include(if: true) } } C# 中的GraphQL实现 使用Hot...Playground或其他工具进行查询: query { getUser(id: 1) { id name email } } 常见问题与易错点 类型不匹配:确保客户端请求的字段类型与服务器端定义的类型一致

    8500

    C# 一分钟浅谈:GraphQL 数据类型与查询

    引言随着Web开发技术的不断进步,GraphQL作为一种数据查询和操作语言,逐渐成为现代Web应用中的重要组成部分。相比传统的REST API,GraphQL提供了更加灵活和高效的数据获取方式。...GraphQL 数据类型标量类型GraphQL定义了一些基本的标量类型,包括:String:字符串类型Int:整数类型Float:浮点数类型Boolean:布尔类型ID:唯一标识符类型,通常用于表示数据库中的主键枚举类型枚举类型用于定义一组固定的值...例如,查询用户的基本信息:query { user(id: "123") { id name email }}嵌套查询GraphQL支持嵌套查询,可以一次性获取关联对象的数据。...例如:query { user(id: "123") { id name email @include(if: true) }}C# 中的GraphQL实现使用Hot ChocolateHot...Playground或其他工具进行查询:query { getUser(id: 1) { id name email }}常见问题与易错点类型不匹配:确保客户端请求的字段类型与服务器端定义的类型一致

    11410

    细说php入门学习

    end( ) 将指针重置到最后第一位 each( ) 获取当前指针的键和值, 且下移一位 一旦超出范围, 是无法通过next 或 prev 返回数组中 next 和 prev 相对性的 移动指针 解决方案...与其他不可见元素 元字符 | 元字符: 原子的筛选方式 | 匹配两个或者多个分支选择 [] 匹配方括号中任意一个原子 [^] 除了括号内的不可匹配,[]外匹配任意一个原子 2....判断是否匹配成功 匹配全部函数 preg_match_all( 正则, 对象 [,结果]) 返回值: 匹配的次数 ​ 成功: >= 1 ​ 失败: = 0 ​ 例: 只获取字符串中的所有汉字...( 这个大原子里面可能有好几个原子 但是看做一个原子了哦~~~) ( ) 内的内容送进 子模式组 注意点: **被小括号包起来后** ,**被匹配的值 会进入到接收结果的数组中.** 也就是...$this 伪对象 $this 不需要声明,直接代表当前对象 只能在 类内 使用 一般用于类内操作属性 或 方法 伪对象使用方法 ———- (以下内容与方法是在写 类的内部的!!!

    3.7K20

    JavaScript基础教程

    布尔值从Boolean.prototype上获取方法: > true.toString === Boolean.prototype.toString //true 注意:包装类型名字的首字母是大写的...如果在JavaScript中布尔值的类型可以访问,那么它可能会被转换为布尔对象。 数字值的包装类型是Number。 字符串值的包装类型是String。...instanceof Array //true 深入阅读 探索JavaScript中Null和Undefined的深渊 五、布尔 布尔类型原始值包括true和false。...到目前为止,我们看到的对象字面量中的和点操作符后的属性关键字。按这种方法你只能使用标识符。如果你想用其他任意字符串作为键名,你必须在对象字面量里加上引号,并使用方括号获取和设置属性。...) // false 方法 exec():匹配和捕获组 /a(b+)a/.exec('_abbba_aba_') // [ 'abbba', 'bbb' ] 返回的数组第一项(索引为0)是完整匹配

    2.6K20

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

    目录 Gatsby.js设置 配置 页面布局 机器学习设置与谷歌Colab 假文章代 Google Drive API 编程式页面生成 部署 改进的领域 如果您想要更深入地了解这个项目,或者想要添加到代码中...所有这些资产帮助您创建更好的网络体验与更少的麻烦。让我们逐个介绍。 gatsby-browser.js 此文件用于实现Gatsby浏览器api。对于这个项目,我们不需要在这个文件中放入任何东西。...稍后,我们将使用Git从GitHub中提取必要的文件,这样本地文件系统中的所有文件都能与云服务器中的资源相匹配,并且可以进行自动部署。...其他的插件不太重要,就不介绍了。 gatsby-node.js 此文件用于实现api。这些api可以使用GraphQL从数据层中获取数据。在处理程序化页面生成时,我们将更深入地研究这个文件的内容。...创建页面的两个大步骤是: 1)为本地文件系统中的每个标记文件创建slugs(或唯一的url) 2)使用页面模板使用slugs和通过GraphQL获取的其他信息创建实际的web页面。

    4.5K60

    《JavaScript高级程序设计》学习笔记(4)——引用类型

    以下是这5个迭代方法的作用,这些方法都不会修改数组中的包含的值。 every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。...filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。 forEach():对数组中的每一项运行给定函数,这个方法没有返回值。...map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。 some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。...,即在确定匹配时忽略模式与字符串的大小写; m:表示多行(multiline)模式,即在到达一行文本末尾时还会继续查找系一行中是否存在与模式匹配的项。...在数组中,第一项是与整个模式匹配的字符串,其他项是与模式中捕获组匹配的字符串(如果模式中没有捕获组,则该数组只包含一项)。

    1.5K140

    ES6 数组方法归纳整理

    console.log(result) // true every() 返回布尔值,如果所有数组项都满足条件则返回true let arr = [1, 2, 3]; let result = arr.every...,获取对象所有属性的键 var arr = ["a", , "c"]; var sparseKeys = Object.keys(arr); var denseKeys = [...arr.keys...Iterator对象,该对象包含数组中每个索引的键/值对。...如果没有删除元素,则返回空数组。 start 指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从1计数)。...如果数组中的某一项的值是 null 或者 undefined,那么该值在join()、 toLocaleString()、toString()和 valueOf()方法返回的结果中以空字符串表示。

    59010

    ECMAScript 6 学习笔记

    正则表达式的y修饰符:它的作用与g修饰符类似,也是全局匹配,后一次匹配都从上一次匹配成功的下一个位置开始,不同之处在于,g修饰符只确保剩余位置中存在匹配,而y修饰符确保匹配必须从剩余的第一个位置开始 模板字符串...(2)数组实例的findIndex()的用法与find()非常类似,返回第一个符合条件的数组元素的位置,如果所有元素都不符合条件,则返回-1。...ES6引入rest参数(...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。...(3)get(key):读取key对应的键值,如果找不到key,返回undefined。 (4)has(key):返回一个布尔值,表示某个键是否在Map数据结构中。...(5)delete(key):删除某个键,返回true。如果删除失败,返回false。 (6)clear():清除所有成员,没有返回值。

    58730
    领券