新的 gatsby 项目 - Javascript

介绍

Gatsby是一个基于React的静态网站生成器，被广泛用于构建博客、电子商务网站、公司介绍网站等等。它用GraphQL来查询数据，支持自动化任务和代码分割，生成的网站也可以优化SEO。

安装

要创建一个新的Gatsby项目，您需要先安装Gatsby CLI。在终端中运行以下命令：

npm install -g gatsby-cli

安装完成后，您可以使用以下命令创建新项目：

gatsby new my-gatsby-project

文件结构

Gatsby生成的文件结构如下：

├── node_modules
├── src                     // 源代码
│   ├── pages               // 页面组件
│   └── templates           // 模板组件
├── static                  // 静态文件夹
├── .gitignore
├── gatsby-config.js        // Gatsby配置文件
├── package.json
└── README.md

pages文件夹是放置页面组件的，页面组件会自动创建一个对应的路由。例如，src/pages/index.js会自动生成首页路由/。

templates文件夹是用来定义共享样式和布局的模板组件。

static文件夹包含所有静态文件，如图片、CSS文件和字体文件等。

gatsby-config.js文件是为您的Gatsby网站设置插件和元数据的地方，您可以在此处启用任何插件、设置网站元数据和添加您自己的CSS。

插件

Gatsby有许多插件，您可以使用这些插件来增强您的网站功能。要安装插件，请使用以下命令：

npm install plugin-name

注意：Gatsby插件以gatsby-plugin-开头。

例如，要添加图片压缩插件，请使用以下命令：

npm install gatsby-plugin-sharp gatsby-transformer-sharp

然后在gatsby-config.js文件中添加以下代码：

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

GraphQL

Gatsby使用GraphQL来查询数据。您可以在其他站点获取数据，也可以在本地查询数据。要使用GraphQL，请导入gatsby和graphql，然后使用graphql标记函数查询数据。

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const ExampleComponent = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <div>
      <h1>{data.site.siteMetadata.title}</h1>
    </div>
  )
}

export default ExampleComponent

结论

Gatsby是一个非常优秀的静态网站生成器，使用它可以快速构建高效、漂亮的网站。它支持自动化任务和代码分割，生成的网站也可以优化SEO。如果您正在寻找一种用于构建网站的工具，那么Gatsby就是您需要的。