【Gatsby.js】我整理了一些「只需掌握这些知识就可以正常使用」的信息

我整理了制作简单静态网站时所需要的知识，不涉及与内容管理系统等的配合。

Gatsby.js是什么

这是一个用于制作网站的React静态网站生成器。

Gatsby.js 的好处 (Gatsby.js de chù)

相对于以往常用的使用HTML/CSS（加上Gulp，Webpack）进行编码的方法，最大的优点是显示速度非常快，速度之快让人惊讶。

其他优点包括

• JSXを使うので、HTMLの記法等にミスがあったときにすぐに気が付くことができる

 

• プラグインが豊富(Markdownファイルを読み込む、PWA対応、etc)

 

• ヘッドレスCMSとの相性が良い

 

• Gatsby Themeを使って、既存のデザインを流用することができる

カスタマイズが前提ならthemeは使わない方が良さそう

有其他的选择。

安装

假设

• node.jsがインストールされている

 

• yarnがインストールされている

なければnpmコマンドで代用可

安装 Gatsby CLI

$ npm install -g gatsby-cli
$ gatsby -v

开始项目

$ gatsby new
✔ What is your project called? … my_project #プロジェクト名
✔ What starter would you like to use? › gatsby-starter-hello-world # 一番シンプルなスターターを選択
$ cd my_project
$ gatsby develop

请访问 http://localhost:8000/，并确认初始显示。

创建头部、底部和布局文件

将在多个页面上共享使用的组件放置在components目录中。

$ mkdir src/components
$ touch src/components/header.js
$ touch src/components/footer.js
$ touch src/components/layout.js

import React from "react"

export default () => (
  <header>
    <h1>サンプルサイトのヘッダー!</h1>
  </header>
)

import React from "react"

export default () => (
  <footer>
    <small>サンプルサイトのフッター!</small>
  </footer>
)

import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"

export default ({ children }) => (
  <> {/* <React.Fragment>の省略形 */}
    <Header />
    {children}
    <Footer />
  </>
)

创建主页

将每一页的文件存放在pages目录中。

import React from "react"
import Layout from "../components/layout"

export default () => (
  <Layout>
    <div>
      <p>トップページのメインコンテンツ！</p>
    </div>
  </Layout>
)

添加链接

使用而不是传统的，可以大幅提升页面转换的速度。

首先，创建前往的页面。

$ touch src/pages/second.js

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"

export default () => (
  <Layout>
    <div>
      <p>2つ目のページのメインコンテンツ！</p>
      <Link to={"/"}>トップページへのリンク</Link>
    </div>
  </Layout>
)

在首页上添加链接

import React from "react"
import { Link } from "gatsby" //追加
import Layout from "../components/layout"

export default () => (
  <Layout>
    <div>
      <p>トップページのメインコンテンツ！</p>
      <Link to={"/second/"}>Secondページへのリンク</Link> {/* 追加 */}
    </div>
  </Layout>
)

优化图像并显示出来

优化图片正是使用Gatsby.js的最大亮点，这一功能可以说是毫不夸张地说。

• 劣化が目立たない範囲で圧縮

 

• webp対応のブラウザではjpgやpngの画像もwebpで表示

 

• デバイスのサイズや解像度に応じて適切なサイズで表示

 

遅延読み込み

只需很少的配置，即可实现对此类图片进行优化。
本文将重点强调简易性，省略了详细的解释。
如果您想深入了解，请使用”gatsby 图片 static query”关键词进行搜索。

添加图片

$ mkdir src/images

向创建的images目录中添加适当的图像（sample1.jpg）。

添加插件以对图像进行最优化处理。

$ yarn add gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem 

module.exports = {
  /* Your site config here */
  plugins: [
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },
  ],
}

创建用于显示图像的组件。

$ touch src/components/image.js

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

export default props => {
  const { allImageSharp } = useStaticQuery(graphql`
    query {
      allImageSharp {
        nodes {
          fluid(maxWidth: 1600) {
            originalName
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `)
  return (
    <figure className={props.className} style={props.style}>
      <Img
        fluid={
          allImageSharp.nodes.find(n => n.fluid.originalName === props.filename)
            .fluid
        }
        alt={props.alt}
      />
    </figure>
  )
}

在主页上显示图片

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image" //追加

export default () => (
  <Layout>
    <div>
      <p>トップページのメインコンテンツ！</p>
      <Link to={"/second/"}>Secondページへのリンク</Link>
      <Image filename="sample.jpg" alt="サンプル画像" /> {/* 追加 */}
    </div>
  </Layout>
)

設定元数据

添加插件

$ yarn add gatsby-plugin-react-helmet react-helmet

module.exports = {
  /* Your site config here */
  plugins: [
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },
    `gatsby-plugin-react-helmet` //追加
  ],
}

创建用于元数据管理的组件。

$ touch src/components/meta.js

import React from "react"
import { Helmet } from "react-helmet"

export default () => (
  <Helmet>
    <html lang="ja" />
    <title>サンプルサイト</title>
    <meta name="description" content="説明文" />
  </Helmet>
)

将其嵌入页面中

//...
import Meta from "../components/meta" //追加

export default () => (
  <Layout>
    <Meta /> {/* 追加 */}
    {/* ... */}
  </Layout>
)

根据每一页进行输出值的更改

如果页面有设置标题，则输出标题为「サンプルサイト」；如果没有设置标题，则输出「サンプルサイト」。

//...

export default props => { // html部分の前に処理が入ると、( から { に変わることに注意
  const baseTitle = "サンプルサイト"
  const title = props.title ? `${props.title} | ${baseTitle}` : baseTitle
  return (
    <Helmet>
      <html lang="ja" />
      <title>{title}</title>
      <meta name="description" content={props.desc} />
    </Helmet>
  )
}

//...
export default () => (
  <Layout>
    <Meta
      title="トップページ"
      desc="Gatsby.jsの使い方を説明するためのサンプルページです。"
    />
    {/* ... */}
  </Layout>
)

import Meta from "../components/meta"
//...
export default () => (
  <Layout>
    <Meta
      title="2つ目のページ"
      desc="2ページ目です"
    />
    {/* ... */}
  </Layout>
)

CSS的选项

在Gatsby.js中，CSS的选择有四个主要选项。

全局CSS

这是将所有样式写入一个CSS（或SCSS）文件的方法。
由于与传统方法几乎相同，因此无需额外的学习成本，这是最大的好处。
对于小型网站来说，这可能是一个选择。

CSS 模块

为每个组件创建一个CSS文件，并从想要应用样式的组件中导入它们，这是一种方法。由于作用域的存在，可以减少类名重复的担忧。

.title {
  color: green;
}

import Styles from "./header.module.css"
.
.
return (
  <h1 className={Styles.title}>サンプルサイト</h1>
)

JS中的CSS

以下是使用CSS in JS库（如styled-components、emotion等）的方法。我还没有使用过它们。每个库的使用方法都不同，但是看起来都相当复杂。

Tailwind CSS => 风尾CSS

這是我個人最推薦的方法。
Tailwind CSS是一個收集了大量實用類別（就像在bootstrap中的mb-4、text-center等）的CSS框架。
它通過在HTML中大量使用類別，儘量避免編寫CSS來達到目的。

只需要一个选项，所以我选择使用以下的方式来翻译成中文：

这种方法

• クラス名を決める必要がなくなる

 

• クラス名の衝突がなくなる

BEM、CSS設計からの開放

デザインの修正により不要になったCSSが残ってしまうことがなくなる
どの要素にどんなスタイルが当たっているかがすぐにわかる
カラーコードやフォントサイズ、ブレイクポイント等の統一性を保ちやすい

GitLabでは402のテキスト色、239の背景色、59のフォントサイズが使われています。

ネット上に転がっているサンプルコードを気軽に取り入れやすい

通常この手のサンプルはカスタマイズがしんどいけど、Tailwindならその心配なし

tailwindcomponents.comに公式のサンプルが大量に公開されている

有许多不同的好处。
而且对于媒体查询和重复使用的组件样式，也很巧妙地解决了。

以下是Tailwind CSS开发者Adam Wathan的博客文章的翻译：CSS实用类与“关注点分离”（如何实现优先使用实用类）- yuhei博客。

使用Tailwind CSS

安装TailwindCSS和PostCSS。

$ yarn add gatsby-plugin-postcss # postcssをインストール

module.exports = {
  plugins: [
    //省略
    `gatsby-plugin-postcss`, //追加
  ],
}

$ yarn add tailwindcss --dev # tailwind cssをインストール
$ yarn tailwindcss init # tailwind cssの設定ファイルを生成
$ touch postcss.config.js # postcssの設定ファイルを生成

const tailwind = require('tailwindcss')
 
module.exports = () => ({
  plugins: [tailwind('./tailwind.config.js')],
})

$ mkdir src/utils
$ touch src/utils/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

将页面上的更改反映出来

import React from "react"
import '../utils/global.css' //追加
//省略

//省略
export default () => (
  <Layout>
    {/* ... */}
    <div>
      <p>トップページのメインコンテンツ！</p>
      <button class="block uppercase mx-auto shadow bg-indigo-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white text-xs py-3 px-10 rounded">
        Tailwind test
      </button>
      {/* ... */}
  </Layout>
)

清除 CSS

在构建时，检查实际使用的类并将它们的样式单独作为CSS文件的一部分，以减小文件大小的设置。

module.exports = {
  purge: ["./src/**/*.js"], //編集
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

只需一种选择，请直接用中文表达原文：
在进行这个修正之前和之后打gatsby build命令，您可以确认修正前显示的错误
“Tailwind is not purging unused styles because no template paths have been provided.”
在修正之后已经消失了。

其余

如果您在VSCode上进行开发，可以使用名为Tailwind CSS IntelliSense的扩展工具轻松编码。

部署

将应用程序部署到Netlify或Vercel等平台时

• 無料で公開できる

 

• 高速

 

Githubへのプッシュと連動して自動でビルド→デプロイされる

因此推荐使用。
Netlify的设置在这篇文章中得到了介绍。

请用中文给出以下内容的释义，仅需要一种选项：

参考

• Webサイト高速化のための 静的サイトジェネレーター活用入門

 

• 【GatsbyJS】yarnで、Tailwindcssを使用する方法【シンプル構成】

 

最小手数で始めるTailwind CSS – メドピア開発者ブログ