gatsby_前5个gatsby插件

最新推荐文章于 2022-04-19 09:11:54 发布

weixin_26723981

最新推荐文章于 2022-04-19 09:11:54 发布

阅读量420

点赞数

文章标签： python

原文链接：https://medium.com/the-innovation/top-5-gatsby-plugins-e900eeea4c44

版权

gatsby

Gatsby is a React-based free and open source framework that equips developers with the tools to generate static sites that are optimized for the latest web standards. With a large community, plethora of plugins, and tons of templates, Gatsby is a great choice for any developer looking to create a static website.

Gatsby是一个基于React的免费和开源框架，为开发人员提供了工具来生成针对最新Web标准进行了优化的静态网站。拥有庞大的社区，大量的插件和大量的模板，对于想要创建静态网站的任何开发人员来说，盖茨比都是一个不错的选择。

Gatsby’s slogan, “Fast in any way that matters”, holds true throughout the entire development process. With Gatsby plugins, it’s incredibly easy to convert your app into a PWA, optimize it for offline usage, enable slow image loading, and almost any feature imaginable with just a few lines of code.

盖茨比(Gatsby)的口号“以重要的任何方式快速”在整个开发过程中始终如一。使用Gatsby插件，将您的应用程序转换为PWA，针对脱机使用对其进行优化，实现缓慢的图像加载以及几乎只有几行代码即可想到的几乎所有功能，都非常容易。

Gatsby isn’t just limited to using Gatsby plugins, React components all integrate extremely well with Gatsby!

Gatsby不仅限于使用Gatsby插件，React组件都与Gatsby集成得非常好！

Lets take a look at 10 great plugins that Gatsby developers use to speed up their development workflow!

让我们来看看Gatsby开发人员用来加速其开发工作流程的10个出色的插件！

Image for post — Gatsby Source Filesystem

1. gatsby源文件系统 (1. gatsby-source-filesystem)

gatsby-source-filesystem is by far the most used plugin for Gatsby. At its core, it can be used to ingest any formatted file format, such as JSON, markdown, YAML, and more either locally or over a network using a URL.

gatsby-source-filesystem是盖茨比最常用的插件。从本质上讲，它可以用于在本地或使用URL摄取任何格式化的文件格式，例如JSON，markdown，YAML等。

This plugin creates multiples nodes for all the accessed files. However, to use these files (such as Markdown or JSON), you’ll have to use transformer plugins, like gatsby-transformer-json or gatsby-transformer-remark.

该插件为所有访问的文件创建多个节点。但是，要使用这些文件(例如Markdown或JSON)，必须使用转换器插件，例如gatsby-transformer-json或gatsby-transformer-remark 。

To install run:

要安装运行：

npm install --save gatsby-source-filesystem

To use it, update your gatsby-config.js:

要使用它，请更新您的gatsby-config.js ：

// From the documentation...
module.exports = {
  plugins: [
    // You can have multiple instances of this plugin
    // to read source nodes from different locations on your
    // filesystem.
    //
    // The following sets up the Jekyll pattern of having a
    // "pages" directory for Markdown files and a "data" directory
    // for `.json`, `.yaml`, `.csv`.
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
        ignore: [`**/\.*`], // ignore files starting with a dot
      },
    },
  ],
}

This plugin exports three helper functions:

该插件导出三个帮助器功能：

createFilePath

This function is used to create URLs from file paths on the system.

此功能用于从系统上的文件路径创建URL。

createRemoteFileNode

This allows you to download remote files to add to the GraphQL schema.

这使您可以下载远程文件以添加到GraphQL模式。

createFileNodeFromBuffer

This function caches data not in the local system by creating a buffer.

此函数通过创建缓冲区来缓存不在本地系统中的数据。

2.盖茨比图像 (2. gatsby-image)

gatsby-image is a plugin for speedy, optimized image use for Gatsby sites. This plugin works great with Gatsby GraphQL Queries and it combines native image processing techniques of Gatsby with various image optimization techniques on build/

gatsby-image是用于Gatsby网站快速优化图像使用的插件。这个外挂程式可与Gatsby GraphQL查询搭配使用，并结合了Gatsby的原生影像处理技术和建立/

It also uses gatsby-plugin-sharp to enhance its image transformations. Here are some features of the gatsby-image plugin.

它还使用gatsby-plugin-sharp来增强其图像转换。这是gatsby-image插件的一些功能。

Optimizes the image size based on the size and resolution of each device
根据每个设备的尺寸和分辨率优化图像尺寸
Holds image position while images are loading
图像加载时保持图像位置
Initial blurred image to improve UX/UI
初始模糊图像以改善UX / UI
Automatically lazy loads image
自动延迟加载图像

Install it with npm install --save gatsby-transformer-sharp gatsby-plugin-sharp.

使用npm install --save gatsby-transformer-sharp gatsby-plugin-sharp 。

Update your plugins config as such:

像这样更新您的插件配置：

plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]

Finally, setup your gatsby-config:

最后，设置您的gatsby-config ：

const path = require(`path`)
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

Using it in JS is pretty simple, here’s an example:

在JS中使用它非常简单，这是一个示例：

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)
export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

3. gatsby-plugin-manifest (3. gatsby-plugin-manifest)

With this awesome plugin, you can easily make your website a Progressive Web App (PWA). This means you can allow users to add your site to their home screen on most mobile browsers

有了这个很棒的插件，您可以轻松地将您的网站变成渐进式Web应用程序(PWA)。这意味着您可以允许用户在大多数移动浏览器上将您的网站添加到其主屏幕

This means the plugin does a few key things:

这意味着该插件执行了一些关键操作：

1) It auto generates home screen icons from a single source

1)它会自动从一个来源生成主屏幕图标

2) Provide favicon support

2)提供网站图标支持

3) Legacy icon support

3)旧版图标支持

4) Cache busting, to allow users to see the updated data.

4)缓存清除，以允许用户查看更新的数据。

5) Localization, it provides ways to create websites with local languages.

5)本地化，它提供了使用本地语言创建网站的方法。

Install it:

安装它：

npm install --save gatsby-plugin-manifest

Update your config file:

更新您的配置文件：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
      },
    },
  ],
}

4. gatsby-plugin-typescript (4. gatsby-plugin-typescript)

This popular library enables Typescript support for your Gatsby app. This means you can use .ts and .tsx files in your application!

这个流行的库为您的Gatsby应用程序启用了Typescript支持。这意味着您可以在应用程序中使用.ts和.tsx文件！

This plugin is automatically included in Gatsby, so unless you have to configure its options, you shouldn’t have to install it.

此插件自动包含在Gatsby中，因此，除非必须配置其选项，否则不必安装它。

These are some of the options you can use in your config:

这些是您可以在配置中使用的一些选项：

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typescript`,
      options: {
        isTSX: true, // defaults to false
        jsxPragma: `jsx`, // defaults to "React"
        allExtensions: true, // defaults to false
      },
    },
  ],
}

You can read about these options in the documentation for the Babel compiler it uses.

您可以在其使用的Babel编译器的文档中阅读有关这些选项的信息。

5. gatsby-plugin-offline (5. gatsby-plugin-offline)

Making a website functional even in offline can be difficult, but this plugin makes it easy by providing drop in support for offline and low internet situations by creating a service worker.

使网站即使在脱机状态下也很难运行，但是此插件通过创建服务工作者来提供对脱机和低Internet情况的支持下降，从而使其变得容易。

It’s incredibly easy to use, lets take a look at an example:

它非常易于使用，让我们看一个例子：

plugins: [
{
  resolve: `gatsby-plugin-offline`,
  options: {
    precachePages: [`/about-us/`, `/projects/*`],
  },
},
]

This caches the /about-us and /projects/* pages to save on the users local machine for offline use.

这会缓存/about-us和/projects/*页面，以保存在用户本地计算机上以供离线使用。

结论 (Conclusion)

With these awesome plugins, you can very easily add functionality to your Gatsby site. Gatsby’s drop in support for these often complex features makes it a super powerful static site generator for any website.

使用这些超赞的插件，您可以轻松地向Gatsby网站添加功能。 Gatsby对这些通常很复杂的功能的支持下降，使其成为任何网站的超级强大的静态网站生成器。

保持联系 (Keep in Touch)

There’s a lot of content out there, I appreciate you reading mine. I’m a young entrepreneur and I write about software development and my experience running companies. You can signup for my newsletter here

那里有很多内容，感谢您阅读我的内容。我是一个年轻的企业家，我写有关软件开发和我经营公司的经验的文章。您可以在这里注册我的时事通讯

Feel free to reach out and connect with me on Linkedin or Twitter.

请随时通过Linkedin或Twitter与我联系。

翻译自: https://medium.com/the-innovation/top-5-gatsby-plugins-e900eeea4c44

gatsby

weixin_26723981

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
gatsby_前5个gatsby插件

gatsbyGatsby is a React-based free and open source framework that equips developers with the tools to generate static sites that are optimized for the latest web standards. With a large community, ple...
复制链接

扫一扫