如何用Gatsby和TypeScript建立一个书店的登陆页面作为Write for DOnations计划的一部分，作

作为Write for DOnations计划的一部分，作者选择了科技多样性基金来接受捐赠。

简介

着陆页是推广产品或服务的网页，为客户在到达网站时提供一个着陆点。对企业来说，它们通常是在线广告和营销电子邮件中的链接的目的地。商业登陆页面的主要目标是将访问者变成潜在的客户或顾客。正因为如此，建立着陆页是网站开发者的一项宝贵技能。

在本教程中，你将用以下两种技术建立一个登陆页面。

Gatsby，一个基于React的前端框架，旨在生成静态网站。Gatsby允许你快速生成着陆页，这在为不同项目创建许多着陆页时很有用。
TypeScript是一个JavaScript的超集，在构建时引入了静态类型和类型检查。TypeScript已经成为JavaScript最广泛使用的替代品之一，因为它有强大的类型系统，在代码进入骄傲的ction之前就会提醒开发人员代码中的问题。对于登陆页面，TypeScript将帮助防止动态值的无效键入数据，如销售宣传文本或注册表单输入。

你将在本教程中建立的登陆页面示例将推广一家书店，并包括登陆页面的以下常见组件。

书店的页眉
一张与书店有关的英雄图片
一个带有功能/服务清单的销售推介
一个电子邮件注册表，可用于将读者加入关于该业务的邮件列表。

在本教程结束时，该项目样本将如下图所示。

Resulting landing page from following this tutorial, displaying the header, hero image, and sales pitch

先决条件

你将需要在你的机器上安装Node和npm，以运行开发服务器和使用软件包。本教程已在Node.js 14.17.2和npm 6.14.13版本中进行了测试。要在macOS或Ubuntu 20.04上安装，请按照《如何在macOS上安装Node.js并创建本地开发环境》中的步骤，或者按照《如何在Ubuntu 20.04上安装Node.js》中的《使用PPA安装》部分进行安装。
你将需要安装Gatsby CLI工具，并从gatsby-starter-default 模板制作一个新的Gatsby网站。按照《如何建立你的第一个Gatsby网站》中的步骤1，开始一个新项目。本教程将把这个项目称为bookstore-landing-page 。
你需要将你的Gatsby项目设置为与TypeScript一起工作。按照How To Set Up a Gatsby Project with TypeScript中的步骤1到步骤4来安装适当的依赖，创建一个新的tsconfig.json 文件，并在TypeScript中重构seo.tsx 文件。
你需要熟悉React组件和JSX，因为Gatsby是一个基于React的框架。本教程还将包括在表单中使用事件处理程序。你可以在我们的How To Code in React.js系列中学习这些概念和更多。

第1步 - 重构`Header` 和`Layout` 组件

在这一步，你将开始重构你在先决条件教程中创建的bookstore-landing-page 项目的现有header.tsx 和layout.tsx 组件。这将包括用自定义类型接口替换默认的类型定义，并修改一些GraphQL查询。一旦你完成了这一步，你将用页面的标题和描述填充你的登陆页面的标题，并创建一个布局组件来实现未来的组件。

`Header`

Header 组件将在浏览器窗口的顶部显示你的页面的标题和描述。但是在重构这个组件之前，你将打开项目根目录下的gatsby-config.js 文件，以更新网站的元数据。稍后，你将从Layout 组件中查询gatsby-config.js ，以检索这些数据。

在你选择的文本编辑器中打开gatsby-config.js 。在导出模块的siteMetaData 下，将title 和description 的值改为书店的名称和商业标语，如以下高亮代码所示。

bookstore-landing-page/gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `The Page Turner`,
    description: `Explore the world through the written word!`,
    author: `@gatsbyjs`,
  },
  plugins: [
    ...

做完这些修改后，保存并关闭gatsby-config.js 文件。

接下来，在bookstore-landing-page/src/components 目录内，打开header.tsx 文件。从这里你将重构<Header /> 组件，以使用TypeScript类型而不是默认的PropTypes 。对你的代码做如下修改。

bookstore-landing-page/src/components/header.tsx

import * as React from "react"
import { Link } from "gatsby"

interface HeaderProps {
  siteTitle: string,
  description: string
}

const Header = ({ siteTitle, description }: HeaderProps) => (
  ...
)

export default Header

你在Header 声明后删除了Header.PropTypes 和Header.defaultProps 对象，并用一个自定义类型的接口HeaderProps 取代它们，使用siteTitle 和description 属性。然后，你将description 加入到传递给功能组件的参数列表中，并将它们分配给HeaderProps 类型。新定义的HeaderProps 接口将作为一个自定义类型，用于从<Layout/> 组件中的GraphQL查询传递给<Header/> 组件的参数。

接下来，在<Header /> 组件的JSX中，改变开头header 标签的样式，使背景颜色为蓝色，文本居中对齐。在嵌入式<Link/> 组件中保留siteTitle ，但将description 添加到一个单独的<h3/> 标签中，并给它一个白色的字体颜色。

bookstore-landing-page/src/components/header.tsx

...

const Header = ({ siteTitle, description }: HeaderProps) => (
  <header
    style={{
      background: `#0069ff`,
      textAlign: `center`,
    }}
  >
    <div
      style={{
        margin: `0 auto`,
        maxWidth: 960,
        padding: `1.45rem 1.0875rem`,
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: `white`,
            textDecoration: `none`,
          }}
        >
          {siteTitle}
        </Link>
      </h1>
      <h3 style={{
        color: 'white'
      }}>
        {description}
      </h3>
    </div>
  </header>
)

export default Header

现在，当数据被传递到这个组件时，你将有内联的样式。

保存header.tsx 文件中的修改，然后运行gatsby develop ，在浏览器上进入localhost:8000 。页面将看起来像下面这样。

Landing page with title rendered in header

注意描述还没有被渲染。在下一步，你将把它添加到layout.tsx 的GraphQL查询中，以确保它被显示出来。

随着<Header/> 组件的准备，你现在可以重构登陆页面的默认<Layout/> 组件。

`Layout`

<Layout /> 组件将包裹你的着陆页，并可以帮助分享你网站上未来页面的样式和格式。

要开始编辑这个组件，在你的文本编辑器中打开layout.tsx 。删除文件末尾的默认类型定义，并在import 语句后定义一个新的接口，名为LayoutProps 。然后，将接口类型分配给传递给<Layout/> 的参数。

bookstore-landing-page/src/components/layout.tsx

/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.com/docs/use-static-query/
 */

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

import Header from "./header"
import "./layout.css"

interface LayoutProps {
  children: ReactNode
}

const Layout = ({ children }: LayoutProps) => {
  ...
}

default export Layout

该接口使用ReactNode 类型，你用React库导入该类型。这个类型定义适用于大多数React子组件，也就是<Layout/> 默认渲染的类型。这将使你能够为<Layout/> 定义一个自定义类型的接口。

接下来，修改位于<Layout/> 组件内的默认 GraphQL 查询。在siteMetaData 对象的内部，添加在gatsby-config.js 中设置的description 。然后，像siteTitle ，将获取的值存储在一个新的description 变量中。

bookstore-landing-page/src/components/layout.tsx

...

const Layout = ({ children }: LayoutProps) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
          description
        }
      }
    }
  `)

  const siteTitle = data.site.siteMetadata?.title || `Title`
  const description = data.site.siteMetadata?.description || 'Description'

 ...

现在你可以把description 作为一个道具传递给布局返回的JSX中的<Header/> 组件。这很重要，因为description 被定义为HeaderProps 接口中的一个必要属性。

bookstore-landing-page/src/components/layout.tsx


...

  return (
    <>
      <Header siteTitle={siteTitle} description={description}/>
      ...
    </>
  )

export default Layout

保存并退出layout.tsx 文件。

作为对你的布局的最后改动，进入layouts.css ，对页面的body ，将所有的文本居中，进行样式上的改动。

bookstore-landing-page/src/components/layout.css

...

/* Custom Styles */

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: hsla(0, 0%, 0%, 0.8);
  font-family: georgia, serif;
  font-weight: normal;
  word-wrap: break-word;
  font-kerning: normal;
  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
  font-feature-settings: "kern", "liga", "clig", "calt";
  text-align: center;
}

...

保存并关闭layout.css 文件，然后启动开发服务器，在浏览器中渲染你的网站。现在你会发现description 的值被呈现在页眉。

Landing page with rendered header but no content

现在你已经为你的Gatsby网站重构了基础文件，你可以为你的页面添加一个英雄图像，使其在视觉上更吸引客户。

第2步 - 添加一个英雄图像

英雄图像是一种视觉效果，可以支持着陆页中的产品或服务。在这一步，你将为你的书店着陆页下载一个图片，并使用gatsby-plugin-image 插件的<StaticImage /> 组件在网站上呈现。

注意：这个项目使用的是Gatsby 3.9.0版本，所以你将无法使用被废弃的gatsby-image 包。这个包被gatsby-plugin-image 所取代。这个新插件，加上来自gatsby-plugin-sharp 的帮助，将呈现具有处理功能的响应式图像。

首先，从Unsplash下载书架图片，这是一个提供图片的网站，你可以自由使用。

curl https://images.unsplash.com/photo-1507842217343-583bb7270b66 -o src/images/bookshelf.png

这个命令使用curl 来下载图片。-o 标志指定了输出，你已经将其设置为images 目录下一个名为bookshelf.png 的文件。

现在打开src/pages/index.tsx 文件。Gatsby默认的启动器模板已经有一个<StaticImage/> 的组件，所以替换属性以指向你新下载的图片。

bookstore-landing-page/src/pages/index.tsx

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <Layout>
    <Seo title="Home" />
    <StaticImage
      src="../images/bookshelf.png"
      alt="Bookshelf hero image"
    />
  </Layout>
)

export default IndexPage

你添加了一个src 属性来引导Gatsby到你的images 目录中的正确图片，然后添加alt 属性来为图片提供替代文本。

保存并关闭该文件，然后重新启动开发服务器。你的页面现在将在中心位置呈现下载的书架图像。

Rendered landing page with bookshelf image.

现在你的图片已经在你的网站上呈现了，你可以继续在页面上添加一些内容。

第3步--创建一个销售推介和功能组件

对于登陆页面的下一部分，你将建立一个新的组件，为你的书店提供销售宣传。这将解释为什么你的客户应该到你的商店来。

在bookstore-landing-page/src/components ，继续创建一个新的文件，名为salesPitchAndFeatures.tsx 。在这个新文件中，导入React ，创建一个新的功能组件，名为SalesPitchAndFeatures ，并将其导出。