盖茨比乔布斯_在盖茨比中使用插件

盖茨比乔布斯

One of the biggest features of Gatsby.js is their incredible official plugin library. This large collection of Node.js packages taps directly into the Gatsby API, and provides easy ways to extend/add custom functionality to Gatsby websites without adding much extra code. In this short article, we’ll cover the basics of finding and implementing these plugins.

Gatsby.js的最大功能之一就是其令人难以置信的官方插件库。 大量的Node.js软件包直接进入了Gatsby API，并提供了简便的方法来向Gatsby网站扩展/添加自定义功能，而无需添加太多额外的代码。 在这篇简短的文章中，我们将介绍查找和实现这些插件的基础知识。

查找盖茨比插件 (Finding Gatsby Plugins)

When starting a Gatsby project, it’s always a great idea to look for available plugins that can make your job easier! Fortunately, the Gatsby website provides a huge searchable library that’s packed full of official plugins we can use.

启动Gatsby项目时，寻找可用的插件总是一个好主意，该插件可以使您的工作更轻松！ 幸运的是，盖茨比(Gatsby)网站提供了一个巨大的可搜索库 ，其中包含了我们可以使用的所有官方插件。

Go ahead and open that link in a new tab, and scroll down through some of the available plugins. They’re sorted by popularity, so you will get a good idea of what other folks are regularly using. You can also make use of the search bar, of course! 🔍👀

继续并在新标签页中打开该链接，然后向下滚动一些可用的插件。 它们是按照受欢迎程度排序的，因此您会很好地了解其他人经常使用的东西。 当然，您也可以使用搜索栏！ 🔍👀

安装Gatsby插件 (Installing Gatsby Plugins)

Specific plugin installation instructions can be found within each plugin’s page in the Gatsby plugin library, and you should always start there for best results. But in general, installing plugins in Gatsby is an easy two-step process!

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

1.安装插件文件 (1. Install plugin file(s))

Since these official Gatsby plugins are all Node.js packages, we can just install them by using npm install or yarn add. For example, we could install the gatsby-source-filesystem plugin like this:

由于这些官方的Gatsby插件都是Node.js软件包，因此我们可以使用npm install或yarn add来安装它们。 例如，我们可以这样安装gatsby-source-filesystem插件：

$ yarn add gatsby-source-filesystem

Some plugins also require additional peer dependencies, and this will be mentioned on the plugin’s library page. A great example of this can be found in the Using Styled Components in Gatsby article, where we install the Gatsby plugin gatsby-styled-components and its two accompanying peer dependencies:

一些插件还需要其他对等依赖项，这将在插件的库页面中提及。 一个很好的例子可以在《 在盖茨比中使用样式化的组件》一文中找到，在该文章中，我们安装了盖茨比插件gatsby-styled-components及其两个对等依赖项：

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

2.配置使用 (2. Configure for use)

At this point, the plugin files have been added to our site — but we still need to configure them in Gatsby to make them function!

至此，插件文件已添加到我们的站点中，但是我们仍然需要在Gatsby中对其进行配置以使其起作用！

To make that happen, we just need to edit the gatsby-config.js file in our website’s root directory. All plugin configurations are placed inside the plugins array in this file:

为此，我们只需要在我们网站的根目录中编辑gatsby-config.js文件即可。 所有插件配置都放置在此文件的plugins数组内：

gatsby-config.js

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-name`,
      options: {
        // plugin options, if any
      },
    },
    //...other plugins
  ]
}

The general format is like the above code, but the specific configuration depends on the plugin being used.

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

It’s important to always check the plugin’s page in the Gatsby plugin library for the most up-to-date instructions and configuration options.

务必始终检查Gatsby插件库中的插件页面以获取最新的说明和配置选项。

This example code from the Gatsby documentation on using plugins is a wonderful example of the various ways that plugins can be configured in gatsby-config.js:

来自Gatsby文档的有关使用插件的示例代码是在gatsby-config.js配置插件的各种方式的绝妙示例：

gatsby-config.js

gatsby-config.js

module.exports = {
  plugins: [
    // Shortcut for adding plugins without options.
    "gatsby-plugin-react-helmet",
    {
      // Standard plugin with options example
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/data/`,
        name: "data",
      },
    },
    {
      resolve: "gatsby-plugin-offline",
      // Blank options, equivalent to string-only plugin
      options: {
        plugins: [],
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // plugins inside plugins
        plugins: [`gatsby-remark-smartypants`],
      },
    },
  ],
}

Notice the shorthand form used for gatsby-plugin-react-helmet, as there’s no configuration options being used. Not only is there less code, but it’s also a bit easier to read!

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

重新启动开发服务器！ (Restart the dev server!)

Now that we have installed and configured the plugins in gatsby-config.js, be sure to restart the dev server and test things out to make sure things are working properly.

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

It’s critical to restart the dev server anytime you edit the gatsby-config.js file, or things will not work as expected.

每当您编辑gatsby-config.js文件时，重新启动开发服务器非常重要，否则将无法正常工作。

本地插件 (Local Plugins)

It’s also possible to load plugins locally, which makes it possible to load privately-built and/or non-official plugins!

也可以在本地加载插件，从而可以加载私有和/或非官方的插件！

The easiest way is to create a new directory in the root of your site named plugins, and then place the local plugin files within it. After that, configuring the plugin in gatsby-config.js is exactly the same as a non-local plugin.

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

If for some special reason your local plugin needs to be in a different directory, you can simply use require.resolve to point Gatsby to it, like this:

如果出于某些特殊原因，您的本地插件需要位于其他目录中，则只需使用require.resolve将Gatsby指向它，如下所示：

gatsby-config.js

gatsby-config.js

module.exports = {
  plugins: [
    "gatsby-plugin-sitemap",
    {
      resolve: require.resolve(`/path/to/local-plugin`),
    },
  ],
}

创建自己的插件 (Creating Your Own Plugins)

As hinted at above, it’s also possible to build your own plugins! While that information is beyond the scope of this introductory article, the Gatsby documentation on creating plugins contains some amazing material if you’re interested in learning more! 🧠

如上所述，也可以构建自己的插件！ 尽管这些信息超出了本文的介绍范围，但是如果您有兴趣了解更多信息，那么有关创建插件的Gatsby文档将包含一些令人惊奇的资料！ 🧠

最后的想法 (Final Thoughts)

Gatsby is an amazing tool for building websites, and its huge library of official plugins is a big part of what makes it that way. Hopefully this short guide was helpful, but of course more info can be found in the official Gatsby plugins documentation.

Gatsby是构建网站的绝佳工具，其庞大的官方插件库是实现此目标的重要组成部分。 希望该简短指南对您有所帮助，但是当然可以在官方的Gatsby插件文档中找到更多信息。

I definitely recommend getting familiar with several of the popular plugins — as they can (and will) undoubtedly save you many hours of time! ⏳👈

我绝对建议您熟悉几个流行的插件，因为它们无疑可以(并且将会)为您节省很多时间！ ⏳👈

翻译自: https://www.digitalocean.com/community/tutorials/gatsbyjs-using-plugins-in-gatsby

盖茨比乔布斯