Gatsby.js的最大特性之一就是他们令人难以置信的官方插件库。这个庞大的Node.js包)集合直接利用Gatsby API，并提供了简单的方法来扩展/添加自定义功能到Gatsby网站，而不需要添加太多额外的代码。在这篇简短的文章中，我们将介绍查找和实现这些插件的基础知识。

查找Gatsby插件

在开始Gatsby项目时，寻找可以让您的工作更轻松的可用插件总是一个很好的主意！幸运的是，盖茨比网站提供了一个巨大的可搜索库)，里面装满了我们可以使用的官方插件。

继续，在新的选项卡中打开该链接，然后向下滚动一些可用的插件。它们是按受欢迎程度排序的，所以你会很好地了解其他人经常使用的是什么。当然，您也可以使用搜索栏！🔍👀

安装Gatsby插件

具体的插件安装说明可以在Gatsby插件库，)中的每个插件页面中找到，您应该始终从那里开始安装，以获得最佳效果。但总的来说，在Gatsby中安装插件是一个简单的两步过程！

1.安装文件插件(S)

由于这些官方的Gatsby插件都是Node.js包，所以我们只需要使用npm install或yer add安装即可。例如，我们可以这样安装gatsby-source-filesystem插件：

1$ yarn add gatsby-source-filesystem

一些插件还需要额外的对等依赖关系，这将在插件的库页面中提及。这方面的一个很好的例子可以在Using Style Components in Gatsby》文章中找到，其中我们安装了Gatsby插件gatsby-style-Components及其附带的两个对等依赖项：

1$ yarn add gatsby-plugin-styled-components
2$ yarn add styled-components babel-plugin-styled-components

2.配置使用

此时，插件文件已经添加到我们的网站-但我们仍然需要在Gatsby中配置它们以使其正常工作！

要实现这一点，我们只需编辑网站根目录中的gatsby-config.js文件。所有插件配置都放在该文件的plugins数组中：

 1[label gatsby-config.js]
 2module.exports = {
 3  plugins: [
 4    {
 5      resolve: `gatsby-plugin-name`,
 6      options: {
 7        // plugin options, if any
 8      },
 9    },
10    //...other plugins
11  ]
12}

一般格式类似于上面的代码，但具体配置取决于所使用的插件。

<$>[warning]请务必查看Gatsby plugin library中的插件页面，以获取最新的说明和配置选项。<$>

Gatsby文档中有关使用plugins的示例代码是在gatsby-config.js中配置插件的各种方式的精彩示例：

 1[label gatsby-config.js]
 2module.exports = {
 3  plugins: [
 4    // Shortcut for adding plugins without options.
 5    "gatsby-plugin-react-helmet",
 6    {
 7      // Standard plugin with options example
 8      resolve: `gatsby-source-filesystem`,
 9      options: {
10        path: `${__dirname}/src/data/`,
11        name: "data",
12      },
13    },
14    {
15      resolve: "gatsby-plugin-offline",
16      // Blank options, equivalent to string-only plugin
17      options: {
18        plugins: [],
19      },
20    },
21    {
22      resolve: `gatsby-transformer-remark`,
23      options: {
24        // plugins inside plugins
25        plugins: [`gatsby-remark-smartypants`],
26      },
27    },
28  ],
29}

注意gatsby-plugin-action-helmet的简写形式，因为没有使用配置选项。不仅代码更少，而且更易于阅读！

重启dev服务器！

现在我们已经在gatsby-config.js中安装并配置了插件，请务必重启dev服务器并进行测试，以确保一切正常。

<$>[警告]每次编辑gatsby-config.js文件时都要重启dev服务器，否则无法正常运行。<$>

本地插件

还可以在本地加载插件，这使得加载私人构建的和/或非官方的插件成为可能！

最简单的方法是在站点的根目录下创建一个名为plugins的新目录，然后将本地插件文件放在其中。之后，在gatsby-config.js中配置插件与配置异地插件完全一样。

如果您的本地插件由于特殊原因需要放在不同的目录下，您可以简单地使用subsider.Resolve将Gatsby指向该目录，如下所示：

1[label gatsby-config.js]
2module.exports = {
3  plugins: [
4    "gatsby-plugin-sitemap",
5    {
6      resolve: require.resolve(`/path/to/local-plugin`),
7    },
8  ],
9}

创建插件

正如上面所暗示的，也可以构建您自己的插件！虽然这些信息超出了这篇介绍性文章的范围，但如果您有兴趣了解更多信息，Gatsby关于创建plugins的文档包含一些令人惊叹的材料！🧠

最终想法

Gatsby是一个令人惊叹的网站构建工具，它的庞大的官方插件库是它之所以成为这样的一个重要部分。希望这篇简短的指南能有所帮助，但当然可以在官方Gatsby插件documentation.]中找到更多信息

我绝对推荐熟悉几个流行的插件--因为它们无疑可以(而且将)为您节省很多小时！⏳👈

在盖茨比中使用插件