词汇表
初次接触 Gatsby 时,您可能会遇到很多需要学习的术语。本术语表旨在提供一个宏观的概述,介绍常用术语及其在 Gatsby 网站中的含义。
A
AST
抽象语法树:在两种语言之间的编译过程中,代码的一种树状表示。例如,gatsby-transformer-remark 会从 Markdown 生成 AST,使用 Remark 解析器以树形结构描述 Markdown 文档。
API
应用程序编程接口:一种应用程序与其他应用程序通信的方法。例如,数据源插件通常会使用 API 来获取其数据。
无障碍性
一种包容性的实践,旨在消除残障人士在访问或使用网站时遇到的障碍。当网站在无障碍性方面设计、开发和编辑正确时,所有用户通常都能平等地获取信息和功能。请阅读关于 Gatsby 对无障碍性的承诺。
B
Babel
一个允许您编写最新 JavaScript 代码的工具,并在 构建 过程中将其 转译 成大多数浏览器都能理解的代码。
后端
公众看不到的幕后操作。这通常指您的 CMS 的控制面板。它们通常由服务器端编程语言驱动,例如 Node.js、PHP、Go、ASP.net、Ruby 或 Java。
构建
在 Gatsby 中,这是将您的代码和内容打包成一个可托管和访问的网站的过程。通常称为 构建时间。另请参阅:后端和服务器端。
C
缓存
本地存储信息,以便将来可以重复使用,从而可以更快地从一个地方检索计算和查找结果。Gatsby 使用缓存来存储信息,以便在开发过程中可以更快地构建您的网站,而无需重复进行相同的工作。
CLI
命令行界面:一个通过 命令行 在您的计算机上运行并与您的键盘交互的应用程序。
Gatsby 有两个命令行接口。一个是 gatsby,用于日常的 Gatsby 开发;另一个是 gatsby-dev,供那些为 Gatsby 项目贡献代码的人使用。
客户端
客户端是指在计算机网络的 客户端-服务器模型 中,由用户浏览器执行的操作。在 Gatsby 中,当您 使用依赖于浏览器 DOM 对象(如 window 或 navigator)的包时,这一点很重要。另请参阅:服务器端、前端和后端。
客户端渲染
一种使用 JavaScript 在 客户端 渲染页面的实践,而不是仅依赖 服务器端渲染。Gatsby 使用 React 和 @reach/router 库来增强在 构建时间 编译的 HTML 页面,从而在 Web 浏览器中导航网站页面,无需传统的页面重新加载,从而实现预加载和 预取、交叉观察器和响应式 srcset(用于图像)等性能技术。另请参阅:路由,Gatsby 默认在客户端处理。
CMS
内容管理系统:一个应用程序,您可以在其中管理您的内容,并将其保存到数据库或文件中以供以后访问。内容管理系统的示例包括 WordPress、Drupal、Contentful 和 Netlify CMS。
命令行
一个文本界面的应用程序,用于在您的计算机上运行命令。Mac 和 Windows 的默认命令行应用程序分别是 Terminal 和 Command Prompt。
编译器
编译器是一个将一种语言编写的代码翻译成另一种语言的程序。例如,Gatsby 可以将 React 应用程序编译成静态 HTML 文件。另请参阅:转译。
组件
组件是由 React 驱动的独立且可重用的代码块,组合起来构成您的网站或应用程序。
一个组件可以包含其他组件。事实上,页面 和 模板 都是组件的示例。
配置
配置文件 gatsby-config.js/gatsby-config.ts 会告诉 Gatsby 关于您网站的信息。此配置中常见的选项是您的网站元数据,它可以用于您的 SEO 元标签。
内容分发网络
内容分发网络(CDN)是一个高度分布式的服务器网络,它将您的内容副本存储在离您网站访问者更近的位置。内容分发网络通过减少完成网络请求所需的时间来提高您网站的性能。
持续部署
持续部署(CD)自动化发布项目更改的过程。持续部署工作流会自动构建和测试您的项目,仅在通过所需测试时才发布您的更改。
CSS
CSS 代表层叠样式表,它是 Web 平台与 HTML 和 JavaScript 的主要组成部分。CSS 是一种用于样式化网页的语言,旨在高度向后兼容。随着新功能向最终用户推出,CSS 解析器 可以安全地忽略不受支持的功能,并增强对它们支持的属性。CSS 通过其 层叠 设计实现这一点,这对于使用 CSS Grid 等新技术进行样式化至关重要,同时为旧浏览器提供回退。Gatsby 支持多种 样式方法,包括常规 CSS 文件、CSS 模块和 CSS-in-JS。
D
数据源
内容和数据的来源点,通常通过 数据源插件 集成到 Gatsby 中。数据源通常是 无头 CMS,但也可能包括 Markdown、JSON 或 YAML 文件。
数据库
数据库是结构化的数据或内容集合。通常 CMS 会使用 后端技术 保存到数据库。在 Gatsby 中,它们通常通过 数据源插件 访问。
解耦
解耦描述了不同关注点的分离。对于 Gatsby 而言,这通常意味着将 前端 与 后端 解耦,就像 解耦 Drupal 或 无头 WordPress 一样。
解耦 Drupal
解耦指的是将 Drupal 用作 无头 CMS 的实践。解耦的 Drupal 实例充当内容 API,返回 JSON 以供您的 前端 使用。
延迟静态生成 (DSG)
延迟静态生成(DSG) 是 Gatsby 的渲染选项之一,它允许您将非关键页面的生成延迟到用户请求时,从而加快构建速度。与其在构建时生成所有页面,不如决定预先生成某些页面,而另一些页面仅在用户运行时访问页面时生成。
部署
开发环境
您编写代码时的 环境。可以通过 CLI 使用 gatsby develop 访问,它提供额外的错误报告和调试工具,有助于在构建 生产 版本之前进行调试。
DOM
文档对象模型(Document Object Model),通常简称为“DOM”,是一个标准的浏览器 API,它通过在内存中表示 HTML 文档的结构来连接网页与脚本或编程语言。开发者通常通过 HTML 标记(在 Gatsby 中以 JSX 形式编写),以及 React 和 原生 JavaScript 代码来与 DOM 交互。利用 DOM 的另一个重要方面是编写 可访问的 HTML 标记,以便将页面的结构暴露给辅助技术。
E
ECMAScript
ECMAScript(通常简称为 ES)是脚本语言的规范。JavaScript 是 ECMAScript 的一种实现。开发人员通常使用 Babel 将最新的 ECMAScript 代码 转译 成更广泛支持的 JavaScript。
环境
Gatsby 运行的环境。例如,在编写代码时,您可能希望尽可能多的调试信息,但这在实时网站或应用程序上是不受欢迎的。因此,Gatsby 可以根据其所处环境改变其行为。
环境变量
环境变量 允许您根据应用程序的 环境 来自定义其行为。例如,您可能希望在开发过程中从暂存 CMS 获取内容,并在 构建 网站时连接到生产 CMS。使用环境变量,您可以为每个环境设置不同的 URL。
F
文件系统
文件组织的方式。在 Gatsby 中,这意味着将文件与网站或应用程序的代码放在同一位置,而不是从外部 数据源 拉取数据。Gatsby 中常见的文件系统用法包括 Markdown 内容、图像、数据文件和其他资产。
前端
您网站或应用程序的 面向公众 的界面,使用 Web 技术:HTML、CSS 和 JavaScript 提供。要更深入地了解 Web 平台如何将这些技术结合在一起,请参阅这篇关于 浏览器工作原理 的文章。
G
Gatsby
Gatsby 是一个现代化的网站框架,它利用最新的 Web 技术,如 React、GraphQL 和现代 JavaScript,将性能融入每个网站或应用程序的构建中。Gatsby 使创建闪电般快速、引人注目的 Web 体验变得容易,而无需成为性能专家。
GraphQL
一个 查询 语言,允许您将数据提取到您的网站或应用程序中。它是 Gatsby 用于管理网站数据 的接口。
H
HTML
一种标记语言,所有 Web 浏览器都能理解。它代表超文本标记语言(Hypertext Markup Language)。HTML 为您的 Web 内容提供了通用的信息结构,定义了标题、段落等内容。它也是提供无障碍网站的关键。
无头CMS
一个只处理后端内容管理的CMS,而不是同时处理后端和前端。这种设置也称为解耦。
无头WordPress
使用WordPress REST API返回的JSON作为无头CMS的做法。它允许您使用WordPress编写和编辑内容,这些内容可以被任何能够解析JSON的客户端所使用。
托管
托管提供商会保留您网站或应用的副本,并使其可供公众访问。Gatsby项目的常用托管提供商包括Netlify、AWS、S3、Surge、Heroku等。
热模块替换
在使用gatsby develop时使用的一个功能,通过自动替换打开的浏览器窗口中的模块或代码块,在保存文本编辑器中的代码时实时更新您的站点。Gatsby使用快速刷新。
水合
一旦网站由Gatsby构建并在Web浏览器中加载,客户端JavaScript资产将下载并将网站变成一个完整的React应用程序,可以操作DOM。这个过程通常称为重新水合,因为它运行一些用于生成Gatsby页面的相同JavaScript代码,但这次可以使用浏览器DOM API,如window。
I
推断
作为其数据层和构建过程的一部分,Gatsby将根据可用的数据源(例如Markdown文件节点、WordPress帖子等)自动推断一个模式或基于类型的结构。通过使用Gatsby的模式自定义API,可以获得对该结构的更多控制。
基础设施即代码
基础设施即代码是通过使用配置文件和脚本来自动化设置开发、测试和生产环境的过程。
J
JAMStack
JAMStack指一种现代Web架构,使用JavaScript、API和(HTML)标记。来自JAMStack.org:“这是一种构建网站和应用程序的新方法,可提供更高的性能、更高的安全性、更低的扩展成本以及更好的开发人员体验。”
JavaScript
一种编程语言,可帮助我们使Web具有动态性和交互性。JavaScript是浏览器中广泛部署的Web技术。它也用于服务器端,与Node.js一起使用。它是ECMAScript规范的实现。
JSX
JSX是JavaScript的一个扩展,允许开发人员在同一段代码中编写HTML和自定义组件。React团队建议使用它来描述UI应该是什么样子。JSX可能让您想起模板语言,但它具有JavaScript的全部功能。需要注意的一些重要细节是,因为JSX使用JavaScript,所以您标记中的一些HTML属性必须被替换,以避免JavaScript中的保留字(例如htmlFor和className)。
K
L
代码检查
代码检查是运行一个程序来分析代码潜在错误的过程。Gatsby项目使用prettier来识别和修复常见的样式问题。另一个在React项目中常用的代码检查器是eslint-plugin-jsx-a11y,它检查开发中的常见可访问性问题。
M
MDX
Markdown
一种使用纯文本编写HTML内容的方式,使用特殊字符来表示内容类型,例如哈希符号表示标题,下划线和星号表示文本强调。
N
npm
Node 包管理器。允许您安装和更新项目所依赖的其他包。Gatsby和React是您项目依赖项的示例。另请参阅:Yarn。
Node
Gatsby使用数据节点来表示单个数据项。一个数据源将创建多个节点。
Node.js
一个允许您在计算机上运行JavaScript的程序。Gatsby由Node提供支持。
O
P
包
一个包通常描述一个JavaScript程序,它具有关于如何分发和使用它的附加信息,例如其版本号。npm和Yarn管理和安装您的项目使用的包。Gatsby本身就是一个包。
页面
一个HTML页面。
这也经常指生活在/src/pages/中并由Gatsby转换为页面的组件,以及在您的gatsby-node.js文件中动态创建的页面。
部分水合
Gatsby的部分水合由React服务器组件提供支持,它使您能够将网站的特定部分标记为可交互,而网站的其余部分默认是静态的。可交互性可以来自点击事件、效果和状态更改等。通过部分水合,只有这些部分的JavaScript才会被下载,从而使您的网站向用户发送更少的JavaScript。
插件
为Gatsby添加额外功能的代码,这些功能不是开箱即用的。常见的Gatsby插件包括用于分别拉取和操作数据的源插件和转换器插件。
生产环境
用户在部署时将体验到的构建好的网站或应用的环境。可以使用gatsby build或gatsby serve通过CLI访问。
编程方式
基于您的代码和配置自动发生的事情。例如,您可能配置您的项目为每篇博客文章创建一个页面,或者读取并显示当前年份作为您网站页脚版权的一部分。
渐进增强
渐进增强是一种Web策略,它强调核心页面内容在其他任何内容之前从服务器加载,而无需JavaScript作为加载的先决条件。然后,该策略将根据最终用户的浏览器/网络连接情况,在内容之上逐步添加更复杂的演示层和功能。Gatsby预先构建页面的默认方法意味着内容将首先加载,并在脚本下载和执行时进行增强。
公共
这通常是指公众成员(与您的团队相对)或保存您构建的网站或应用的/public文件夹。
Q
查询
从某个地方请求特定数据的过程。在Gatsby中,您通常使用GraphQL进行查询。
R
React
一个用于构建用户界面的代码库(用JavaScript编写)。它是Gatsby用于构建页面和构建内容的框架。
React服务器组件
总的来说,React服务器组件允许开发人员构建跨服务器和客户端的应用程序。服务器组件可以动态选择渲染哪些客户端组件,从而允许客户端仅下载渲染页面所需的最小代码量。Gatsby利用此功能来实现其部分水合功能。观看“服务器组件中的数据获取”演讲或阅读服务器组件RFC以了解更多信息。
Remark
一个将Markdown转换为HTML或React代码等其他格式的解析器。
运行脚本
在package.json文件的scripts属性中定义的、可执行的命令。有关更多信息,请参阅npm和yarn运行脚本文档。
运行时
运行时是一个程序正在运行(或可执行)的时候;它可以指几件事。Node.js是一个执行JavaScript代码的服务器端运行时。另一方面,客户端JavaScript指的是传统JavaScript代码执行的浏览器运行时。Gatsby在构建时编译您的网站,并通过React运行时进行水合,以提供快速、交互式和动态的用户体验。
路由
路由是根据网络请求(通常是URL)在网站或应用程序中加载正确内容的机制。例如,它允许将/about-us之类的URL路由到相应的页面、模板或组件。
S
模式
一个系统如何存储数据的精确表示,例如数据库中的表和字段,或JSON文件的结构。在Gatsby中,GraphQL模式表达了所有可查询的数据——即组件可以在Gatsby的数据层中询问的数据。
服务器端
客户端-服务器关系中的服务器端是指由计算机程序执行的操作,该程序管理对计算机网络中集中资源或服务的访问。另请参阅:前端和后端。
服务器端渲染
使用基于 Node.js 的服务器来响应用户代理(如浏览器)的请求,从而生成 HTML。Gatsby 使用服务器端技术 Node.js 在构建时编译页面,而不是在 浏览器运行时 使用 客户端 JavaScript 进行服务。
源代码
源代码是位于 `/src/` 文件夹中的代码,构成了你的网站或应用的独特之处。它由 JavaScript 组成,有时也包含 CSS 和其他文件。
源代码在 构建 后将成为 public 文件夹中供用户看到的内容。
数据源插件
一个 插件,它为 Gatsby 添加了额外 数据源,这些数据源随后可以被你的 页面 和 组件 查询。
启动器
一个预配置的 Gatsby 项目,可以用作你项目的起点。可以通过 Gatsby 启动器库 找到它们,并使用 Gatsby CLI 安装它们。
静态
Gatsby 构建 你页面的静态版本,这些版本可以轻松 托管。这与动态系统形成对比,动态系统在每次用户请求时都实时生成页面。静态的优势在于性能的大幅提升,因为工作只需要针对每次内容或代码更改完成一次。
它还指 `/static` 文件夹,该文件夹在每次 构建 时都会自动复制到 `/public` 目录中,用于不需要 Gatsby 处理但需要存在于 public 目录下的文件。
静态网站生成器
一种软件应用程序,它从模板或 组件 以及给定的内容源创建 HTML 页面。
T
模板
一个 组件,它被 Gatsby 以编程方式 转化为一个页面。
主题
Gatsby 主题类似于 WordPress 主题,它是可组合的(与其他主题一起)、可扩展的(通过更多逻辑)和可替换的(组件覆盖)。Gatsby 主题可以包含 Gatsby 应用的任何方面,并且还可以提供任意数量的开关来开启或关闭功能。
转换器
一个 插件,它将一种数据类型转换为另一种。例如,你可能可以将电子表格转换为 JavaScript 数组。
转译
将代码从一种语法或格式转换为另一种的进程,例如 TypeScript,它是 JavaScript 的超集,可在开发期间提供自定义类型检查。 Babel 是另一个常见的转译示例,它会重新格式化遵循 ECMAScript 标准的较新 JavaScript 代码,使其在网站 编译 过程中具有更好的向后兼容性。
U
用户界面
UI 指用户界面。在人机交互领域,UI 是人与机器进行交互的空间。这种交互的目标是允许人端有效地操作和控制机器,同时机器向用户反馈信息以辅助其决策过程(例如错误消息或通知)。
V
W
webpack
一个 JavaScript 应用程序,Gatsby 使用它来打包你的网站代码。这会在 构建 时自动完成。
WPGraphQL
一个 WordPress 插件,它为 WordPress 添加了 GraphQL 功能。这是你可以将 WordPress 用作 Gatsby 内容来源的另一种方式。
X
Y
Yarn
一个 包 管理器,有些人比 npm 更喜欢它。它也是 开发 Gatsby 所必需的。