Gatsby(免费开源Web框架)

Gatsby是一个基于React的开源框架，通过它可以设计任何程序或博客类型的网站，具有丰富的插件，可以直接添加到您的网站中使用，例如图像插件功能，可以在软件中直接将各种图像或视频加载到您的网站中，方便从网络来源添加素材，在编辑博客时引用图像，并提供源文件系统插件。使用Markdown、JSON等语言编辑网站内容，支持离线插件。您还可以离线运行网站、配置网站地图和添加云存储服务。政府提供了2500多个插件来帮助用户扩展网站功能。可以使用Gatsby!

软件功能

最快的前端现代网络。

借助Gatsby 3.0 for React，用您喜爱的服务和内容打造闪电般的Web体验。设置电子商务网站、登录页面、博客等。几分钟后。

盖茨比语速快得令人难以置信。

一切感觉...那里。

Gatsby仅在访问者需要时加载页面的关键部分，而不是很快。加载后，Gatsby从其他页面预取资源2，以便在点击网站时感觉流畅且响应迅速。一切都是在运行时静态生成的——所以你的网站会尽快加载。

网络最难的部分变得简单。

如今，前端工程师全面从事性能、安全、SEO、可访问性、数据等方面的工作。默认情况下，我们将处理所有这些问题，让您专注于构建出色的数字体验。

这是一个封闭的绩效图表。

Gatsby可以自动执行代码拆分、图像优化、内联键样式、延迟加载、预取资源等操作。，以确保您的网站完全优化。不需要手动调节。

您可以依赖的可扩展性。

Gatsby该网站不需要复杂的扩展操作或昂贵的托管。它们可以在需要时扩展，但是当流量减少时，您的使用和成本也会降低。主机的几分钱。

开箱即用的保安。

Gatsby的无服务器呈现在构建时生成静态HTML。没有服务器或可访问的数据库意味着没有恶意请求、DDOS攻击或意外暴露。

每个人的可及性。

作为WebAIM认可的最易访问的Web框架，我们已经建立了最佳实践，例如可访问性路由、渐进式页面增强和内置毛发去除工具来查找可访问性错误。帮助每个人使用互联网。

软件特色

修改页面，添加图片，创建页面，制作组件，发送道具，链接页面和部署您的网站!

使用全局CSS和组件级CSS设置页面样式。使用CSS模块为组件设置样式。

安装插件，创建布局组件，然后将它们导入页面以创建统一的样式。

将站点元数据添加到gatsby-config.js中，并使用GraphQL查询将其拉入页面。

使用graphql(一个GraphQL IDE)。使用源插件将数据从文件系统拉入Gatsby的数据层。用GraphQL查询。

使用转换器插件转换Gatsby的数据层中的数据。

创建一个模板化页面来更改路线，并根据传入的数据显示它。

使用灯塔来审核站点。添加渐进式Web应用程序功能，如清单文件和离线支持。

官方教程

使用GIF。

如果你想用Gatsby来建立你的博客，你可能想包括一些动画gif:谁不想包括跳舞的水獭或猫的gif?

在程序集中包含GIF。

在Gatsby组件和页面中，您将导入动画GIF，而不是使用Gatsby Image，因为它优化了响应图片元素的图像数据方式。

这是一个例子:

在Markdown中包含GIF。

在减价文章和页面中，包括动画gif与静态图片相同:

动画gif的大小可能非常大，所以请注意不要使用超大文件来破坏网页的性能。您可以通过优化帧或将帧转换为视频来减小文件大小。

GIF的可访问性。

请注意，闪烁和自动播放GIF可能会给对运动敏感的用户带来问题。出于安全考虑，gif不应该尽可能自动播放。

创建新的Gatsby网站。

正如我们在第二部分中提到的，此时最好关闭本教程前面部分的终端窗口和项目文件，以保持桌面上的内容干净整洁。然后打开一个新的终端窗口，运行以下命令，在名为目录的目录中创建新的Gatsby site教程-第三部分，然后移动到新目录:

安装和配置盖茨比插件类型。

使用插件有两个主要步骤:安装和配置。

1.安装盖茨比-插件-类型NPM软件包。

npm安装盖茨比-插件-排版反应-排版排版排版-主题-仙女-盖茨

注意:排版. js需要一些其他的包，所以这些包包含在描述中。每个插件的安装说明中都列出了类似的附加要求。

2.gatsby-config.js将项目根目录中的文件编辑成以下内容:

Gatsby-config.js是Gatsby会自动识别的另一个特殊文件。您可以在这里添加插件和其他站点配置。

3.排版. js需要一个配置文件。Utils在src目录中创建新目录。然后向utils添加一个名为floating . js的新文件，并将以下内容复制到该文件中:

4.启动开发服务器。

盖茨比发展公司

加载网站后，如果使用Chrome Developer Tool检查生成的HTML，会发现布局插件在元素中添加了样式元素头及其生成的CSS:

内容会改变一些内容和风格。

将以下内容复制到您的文档中，以更好地查看排版生成的CSS的效果

您的网站现在应该如下所示:

让我们快速改进。许多网站在页面中间显示一列文本。要创建此样式，请在div中添加以下样式src/pages/index.js。

您已经安装并配置了第一个Gatsby插件!

创建布局组件。

现在让我们继续学习布局组件。为了准备这一部分，请在项目中添加几个新页面:“关于”页面和“联系”页面。

让我们看看页面的新外观:

如果两个新页面的内容像索引页面一样居中，那就太好了。有某种全局导航是很好的，这样访问者可以很容易地找到并访问每个子页面。

您将通过创建第一个布局组件来解决这些更改。

创建第一个布局组件。

1.创建新目录src/components。

2.在以下位置创建一个非常基本的布局组件src/components/layout.js:

3.将新布局组件导入src/pages/index.js页面组件:

太好了，布局成功了!索引的内容仍然居中。

但是，请尝试导航到/about/或/contact/。这些页面上的内容仍然没有居中。

在about.js和中导入布局组件contact.js(如上面的step index.js中所述)。

有了这个单一的共享布局组件，您的三个页面都居中了!

添加网站标题。

1.向新布局组件添加以下行:

如果您转到三页中的任何一页，您将看到添加了相同的标题，例如，关于页面:

在页面之间添加导航链接。

1.将以下内容复制到布局组件文件中:

好了，你拿到了!具有基本全球导航的三页网站。

挑战:使用新的“布局组件”功能，尝试添加页眉、页脚、全局导航、侧边栏等。to Gatsby网站!

用视频。

从主机购买视频。

将视频添加到网站Gatsby的最简单方法是从Yo*Tub*、Vimeo或Twitch等网站获取上传的文件。使用其中一台主机的源URL，您可以使用“备注”插件或创建自定义iframe解决方案，将视频嵌入到Gatsby站点中。

在Markdown中嵌入托管视频。

降价的帖子和页面有许多Gatsby插件来处理托管视频。我们建议您查看GATS by-备注-嵌入-视频插件，以便从各种主机(如Yo*Tub*或Vimeo)购买。

为托管视频编写自定义组件。

如果想进一步控制Yo*Tub*(或类似)视频嵌入Gatsby帖子和页面的方式，可以编写一个可重用的自定义iframe组件，并将其包含在JSX模板或MDX内容中。

在这个可重用的示例组件中，您可以包含视频数据的道具，如URL或标题、用于样式目的的任何必要标签以及通用iframe嵌入代码:

然后，您可以将该组件包含在模板或页面中，并将其作为道具与视频源的网址和标题一起传递。URL和标题数据可以通过多种方式获取，比如导入JSON或者使用GraphQL从Markdown查询视频数据。您还可以将视频数据硬编码为有趣的内容，例如带有复活节彩蛋Yo*Tub*视频的自定义404页面:

使用GraphQL从Markdown查询视频数据。

如果一个标记页面或帖子有特色视频，可能需要在其前缀中包含视频网址和标题。这允许您将这些值传递给自定义组件:

要在模板中包含视频组件，可以从以下内容开始: