使用 Gatsby 构建静态网站综合指南

近年来，静态网站因其速度、安全性和简便性而卷土重来。Gatsby 是当今构建静态网站的领先工具之一，它是一款速度极快的静态网站生成器（SSG）。

无论你是一名网站开发人员，是想创建个人博客、作品集网站，还是商业网站，Gatsby 都能帮助你实现目标。本综合指南将带你了解使用 Gatsby 创建静态网站的整个过程。它涵盖了从基础知识到高级主题的所有内容。

演示网站

演示网站，展示您在阅读本指南后可以创建的网站。

了解静态网站

静态网站是包含预先渲染的 HTML、CSS 和 JavaScript 文件的网页。与动态网站不同，它们不依赖服务器端对每个请求的处理。相反，所有内容都是提前生成的，并直接提供给用户的浏览器。这种方法有以下几个优点：

速度：静态网站无需服务器端处理，因此加载速度快。
安全：由于没有服务器端代码执行，静态网站不易受到安全威胁。
可扩展性：通过内容分发网络（CDN）缓存和分发静态网站非常方便。
简单性：静态网站更易于开发、部署和维护。

既然了解了什么是静态网站以及静态网站的优势，我们就来深入了解一下 Gatsby。

什么是 Gatsby?

Gatsby 是一个基于 React JavaScript 库的开源框架，可简化静态网站的构建过程。它将强大的 React 组件与用于数据管理的 GraphQL 结合在一起，是各种水平的开发人员的绝佳选择。以下是 Gatsby 脱颖而出的原因：

速度极快：Gatsby 使用代码分割和懒加载等技术优化网站速度，使页面加载近乎瞬时。
灵活的数据源：它可以从各种地方获取数据，包括 Markdown 文件、API 和数据库。
丰富的插件生态系统：Gatsby 广泛的插件生态系统可让您毫不费力地扩展其功能。
搜索引擎优化和性能：Gatsby 可自动生成优化的 HTML，以提高搜索引擎优化和性能。

Gatsby 入门

要学习本指南，你应该具备以下条件：

对 HTML、CSS 和 JavaScript 有基本了解
React 的基础知识
计算机上安装了 Node.js 和 npm（Node 包管理器）或 yarn

要开始使用 Gatsby 并创建一个项目，你可以使用 Gatsby 入门库中的众多示例之一，或者从头开始创建一个项目。

在本指南中，让我们使用 GatsbyJS 的官方 hello world 启动器，因为它为我们提供了一个没有插件或额外文件的普通项目。

首先，运行以下命令在电脑上安装 Gatsby CLI：

npm install -g gatsby-cli

运行 gatsby --version 验证安装是否成功。

然后，导航到要创建项目的文件夹，并运行以下命令：

npx gatsby new <project-name> https://github.com/gatsbyjs/gatsby-starter-hello-world

将上面的 <project-name> 更改为项目的首选名称。

成功后，进入项目文件夹并启动开发服务器：

cd <project-name>
gatsby develop

本地开发服务器的起始地址为 http://localhost:8000，您可以在此访问 Gatsby 网站。

Gatsby hello world 主题.

了解 Gatsby 文件结构

在代码编辑器中打开项目时，会看到如下结构：

/
|-- /public
|-- /src
|-- /pages
|-- index.js
|-- /static
|-- gatsby-config.js

/public: 此目录包含 Gatsby 构建过程的输出。这里有生成的 HTML、CSS、JavaScript 和其他资产。
/src: 这是 Gatsby 项目的核心，你将在这里花费大部分时间。它包含各种子目录和文件：
- /pages: 存放项目所有页面的地方。这里的每个 JavaScript 文件都对应着网站上的一个路由。

/static: 该目录用于存放要包含在网站中的静态文件，如图片、字体或可下载文件。这些文件按原样提供，不会被 Gatsby 处理。
gatsby-config.js: 该配置文件用于定义 Gatsby 站点的各种设置。你可以在这里指定插件、网站元数据以及其他配置。

创建页面和组件

在 Gatsby 中，创建网页是一个简单明了的过程。在 /src/pages 文件夹中创建的任何 JavaScript 文件都会自动成为一个页面，并有相应的路径，这要归功于 Gatsby 的自动页面生成功能。

通过在 /src/pages 文件夹中添加更多 JavaScript 文件，你可以根据网站需要创建任意数量的页面。例如，你可以为 “About” 页面创建一个 about.js 文件。

虽然可以直接在 /src/pages 文件夹中为每个页面创建单独的 JavaScript 文件，但也可以进一步组织页面。你可以创建子文件夹，对相关页面进行分组。例如，你可以创建一个 blog 文件夹来组织所有与 blog 相关的页面。

本项目的页面结构就是这样：

|-- /src
|-- /pages
|-- about.js
|-- index.js
|-- /blog
|-- index.js

在页面中使用 JSX

由于 Gatsby 是基于 React 构建的，因此其页面和组件都是用 JSX（JavaScript XML）编写的。JSX 是 JavaScript 的语法扩展，可让您以高度可读和富有表现力的方式定义用户界面的结构和布局。

例如，您可以像这样创建主页（index.js）的内容：

import React from 'react';
export default function Home() {
return (
<>
<div>
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
</div>
</>
);
}

连接 Gatsby 中的页面

要创建指向另一个页面的链接，可以使用 Link 组件，如下所示：

import React from 'react';
import { Link } from 'gatsby';
export default function Home() {
return (
<>
<div>
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<Link> to="/about">About Us</Link>
<Link> to="/blog">Blog</Link>
</div>
</>
);
}

在上面的示例中，我们从 gatsby 中导入了 Link 组件，并用它创建了指向 “About Us” 页面和博客的链接。例如，”About Us” 页面的路径是 /about 。当用户点击 “About Us” 链接时，他们将被带到 /about 页面。

提示：上述代码的输出结果可能显示为两个链接项的合并，但请注意，这纯粹是为了说明问题。稍后将创建一个导航栏，以适当的样式显示这些链接。

要创建指向外部网站的链接，可以使用带有 href 属性的普通锚 ( <a> ) 标记：

import React from 'react';
export default function Home() {
return (
<>
<div>
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<div>
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/docs/static-site-hosting" target="_blank" rel="noreferrer">
<div>Read more</div>
</a>
</div>
</div>
</>
);
}

在这种情况下，由于使用了 target="_blank" 和 rel="noreferrer" 属性，链接会在新的浏览器标签页中打开外部网站。

在 Gatsby 中创建组件

Gatsby 基于组件的架构允许你为网页创建可重复使用的构件。无需在多个网页中重复代码，你可以将常用元素封装到组件中，使你的代码库更有条理、更易维护、更高效。

假设您的主页代码包括导航部分、主要内容和页脚：

import React from 'react';
import { Link } from 'gatsby';
export default function Home() {
return (
<>
<div className="nav-links">
<Link> to="/">Home</Link>
<Link> to="/about">About</Link>
<Link> to="/blog">Blog</Link>
</div>
<div>
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/docs/static-site-hosting">
<div>Read more</div>
</a>
</div>
<div className="footer">
<p>
Hosted with ❤️ by Kinsta's{' '}
<a> href="https://kinsta.com/static-site-hosting">
Static Site Hosting
</a>
.
</p>
</div>
</>
);
}

试想一下，您必须为网站上的每个页面复制导航栏和页脚代码。这就是组件的威力所在。你可以为导航栏、页脚以及在多个页面和组件中重复的每一段代码创建可重复使用的组件。

要在 Gatsby 中使用组件，请在 src 文件夹中创建一个 components 文件夹，用于存储所有组件。然后，创建你的组件，例如 Navbar.js 和 Footer.js。在 Navbar.js 文件中，将代码分开：

import { Link } from 'gatsby';
import React from 'react';
const Navbar = () => {
return (
<nav>
<div className="nav-links">
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/blog">Blog</Link>
</div>
</nav>
);
};
export default Navbar;

还有你的 Footer.js:

import React from 'react';
const Footer = () => {
return (
<div className="footer">
<p>
Hosted with ❤️ by Kinsta's{' '}
<a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
.
</p>
</div>
);
};
export default Footer;

然后，将组件文件导入到页面或组件中，并使用这种方式：

import React from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
export default function Home() {
return (
<>
<Navbar />
<div>
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/docs/static-site-hosting">
<div>Read more</div>
</a>
</div>
<Footer />
</>
);
}

创建布局组件

网页开发中的一个常见做法是创建一个布局组件，封装网站的整体结构。布局组件通常包括出现在每个页面上的元素，如页眉、页脚、导航菜单和侧边栏。

在你的 /src/components 文件夹中创建一个名为 Layout.js 的新文件。然后，定义布局结构。在本指南中，布局结构只包括导航栏和页脚：

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
const Layout = ({ children }) => {
return (
<div className="layout">
<Navbar />
<div> className="content">{children}</div>
<Footer />
</div>
);
};
export default Layout;

在该布局组件中，我们使用组件来封装页面内容（作为 children 组件提供）。要在页面中使用布局组件，只需导入该组件并用它封装页面内容即可。例如，在你的 index.js 页面中：

import React from 'react';
import Layout from '../components/Layout';
export default function Home() {
return (
<Layout>
<div>
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/docs/static-site-hosting">
<div>Read more</div>
</a>
</div>
</Layout>
);
}

通过使用布局组件，可以确保所有页面的结构和外观保持一致，同时保持代码的有序性和可维护性。这是一种有效管理网站常用元素的强大方法。

在 Gatsby 中为页面和组件设计样式

Gatsby 网站的样式设计非常灵活，允许你使用各种方法，包括纯 CSS、CSS-in-JS 或 CSS 预处理器（如 Sass）。让我们来学习如何为页面创建普通样式和模块样式。

CSS 样式

在 Gatsby 中，你可以轻松创建一个 CSS 文件，并将其链接到任何组件或页面上，这样就能很好地工作了。例如，你可以在 src 文件夹中创建一个 styles 文件夹，然后创建一个包含 CSS 代码的 global.css 文件。

例如，下面是前面创建的组件的一些基本全局样式：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
font-family: 'Poppins',
sans-serif;
width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
height: 200px;
align-items: center;
}
nav .logo-img {
width: 100px;
}
nav .nav-links a {
padding: 0 20px;
font-size: 18px;
}
@media (max-width:700px) {
body {
width: 100%;
padding: 0 20px;
}
nav .nav-links a {
padding: 0 18px;
}
}
.footer {
width: 100%;
text-align: center;
margin: 100px 0 20px;
}

在上面的代码中，你从 Google Fonts 中导入了 Poppins 字体，然后定义了适用于所有组件的基本样式。

接下来，将 CSS 文件导入到要设置样式的组件中，但在本项目中，可以将 CSS 文件添加到布局组件中，以便在全局范围内应用：

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
import '../styles/global.css';
const Layout = ({ children }) => {
return (
<div>
<Navbar />
<div> className="content">{children}</div>
<Footer />
</div>
);
};
export default Layout;

模块 CSS 样式

CSS 模块允许你将样式范围扩展到特定组件或页面。这样可以防止样式冲突，并使代码维护更加方便。在样式文件夹中，使用 <pageName>.module.css 格式创建 CSS 模块，并在文件中添加特定样式。

例如，为主页创建 home.module.css，并添加以下代码：

.home_hero {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.home_hero h1 {
font-size: 60px;
width: 70%;
}
.home_hero p {
color: #6E7076;
font-size: 20px;
}
.btn {
background-color: #5333ed;
padding: 20px 30px;
margin-top: 40px;
border-radius: 5px;
color: #fff;
}
@media (max-width:700px) {
.home_hero h1 {
font-size: 40px;
}
.home_hero p {
font-size: 16px;
}
}

要在 Gatsby 页面或组件中使用模块 CSS 样式，请将 CSS 模块中的样式作为对象导入页面或组件文件的顶部，然后使用这种方法：

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/home.module.css';
export default function Home() {
return (
<Layout>
<div className={styles.home_hero}>
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/docs/static-site-hosting">
<div className={styles.btn}>Read more</div>
</a>
</div>
</Layout>
);
}

提示：您还可以应用内联样式，这与 React 组件的应用方式类似。

在 Gatsby 中使用静态文件

在 Gatsby 中，静态文件指的是图片、字体、CSS 文件和其他资源等资产，这些文件无需任何服务器端处理，直接提供给客户端浏览器。这些文件被添加到项目根目录下的 /static 目录中。

例如，如果在 /static 目录中添加了图片 kinsta-logo.png，就可以像这样在组件中显示它：

import { Link } from 'gatsby';
import React from 'react';
const Navbar = () => {
return (
<nav>
<Link> to="/">
<img src="/kinsta-logo.png" alt="Kinsta Logo" className="logo-img" />
</Link>
<div className="nav-links">
<Link> to="/">Home</Link>
<Link> to="/about">About</Link>
<Link> to="/blog">Blog</Link>
</div>
</nav>
);
};
export default Navbar;

在创建网站时，Gatsby 会自动将这些相对路径解析为正确的 URL。在本指南的稍后部分，您将学习如何在 Gatsby 中优化图片。

插件和集成

Gatsby 拥有丰富的插件生态系统，可以扩展其功能。你可以找到搜索引擎优化、分析、图片优化、markdown 转换等插件。安装和配置插件非常简单，它们可以大大增强网站的功能。

在本指南中，我们将使用四个插件：

gatsby-transformer-remark：该插件可将 Markdown 文件转换为 HTML 内容，从而轻松创建和管理博客文章、文档或任何基于文本的内容。
gatsby-transformer-sharp 和 gatsby-plugin-sharp：这些插件协同工作，优化和处理 Gatsby 项目中的图片。
gatsby-source-filesystem：该插件可让你从项目目录中获取源文件，并使用 GraphQL 进行查询。

要在 Gatsby 项目中使用这些插件，请在项目根目录下运行以下命令进行安装：

npm install gatsby-transformer-remark gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem

接下来，在 gatsby-config.js 文件中配置它们。下面是一个如何设置插件的示例：

module.exports = {
plugins: [
// ...other plugins
// Transform Markdown files into HTML
'gatsby-transformer-remark',
// Optimize and manipulate images
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
// Source files from your project directory
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/posts/`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
],
};

我们创建了两个 gatsby-source-filesystem 配置，分别指向两个文件夹：posts 和 images。文章 “将存储一些使用 gatsby-transformer-remark 转换的标记文件（博客文章），而 “图片 “将存储博客的图片和其他你希望优化的图片。

在对 gatsby-config.js 文件进行修改时，请务必记住重启本地开发服务器。

提示：存储在 Gatsby 项目中 src 文件夹中的图片用于动态内容，并通过 Gatsby 插件进行优化，而 /static 文件夹中的图片则被视为静态资产，在构建输出中保持不变，因此适用于徽标和图标等项目。

创建博客文章

配置好插件后，在 src 目录中创建一个 posts 文件夹，然后创建两个 Markdown 文件，内容如下：

post-1.md:

---
title: "Introduction to Gatsby"
date: "2023-10-01"
slug: "introduction-to-gatsby"
description: "Learn the basics of Gatsby and its features."
featureImg: ../images/featured/image-1.jpeg
---
Welcome to the world of Gatsby! In this post, we will introduce you to the basics of Gatsby and its powerful features.

And post-2.md:

---
title: "Optimizing Images in Gatsby"
date: "2023-10-05"
slug: "optimizing-images-in-gatsby"
description: "Explore how to optimize images in your Gatsby project."
featureImg: ../images/featured/image-2.jpeg
---
Images play a crucial role in web development. In this post, we'll dive into how to optimize images in Gatsby using plugins.

这些 Markdown 文件包含有关博文元数据的 frontmatter，其中包括标题、日期、语句、描述和图片路径。

使用 GraphQL 在 Gatsby 中进行查询

Gatsby 使用 GraphQL 为你的网站查询和检索数据。GraphQL 是一种功能强大的查询语言，允许你精确地请求所需的数据，使其高效而灵活。让我们来学习如何使用 GraphQL 在 Gatsby 中查询数据。

在终端运行 gatsby develop 时，你会发现除了 gatsby-source-filesystem 链接（在网络上打开你的项目）外，你还能看到 http://localhost:8000/___graphql 链接。通过该 URL 可以访问 Gatsby 项目的 GraphiQL 编辑器。

打开编辑器后，会看到如下界面：

Gatsby GraphiQL 运行界面

你可以通过这个编辑器查询网站的所有信息。不过，既然你已经创建了 Markdown 文件，并在 gatsby-config.js 文件中完成了所有配置。让我们在编辑器中运行以下查询，来查询 Markdown 文件及其内容：

query BlogList {
allMarkdownRemark {
nodes {
frontmatter {
title
slug
description
}
id
}
}
}

此查询使用 allMarkdownRemark 从所有 Markdown 文件中获取数据。它会从每个文件的 frontmatter 中获取 title, slug, 和 description 以及它们的 id。

写完查询后，点击 “Play” 按钮（一个朝右的三角形图标）执行查询。结果将显示在编辑器的右侧。

使用 GraphiQL playground 获取标记信息

使用 GraphiQL playground 获取标记信息。

然后，你就可以使用 GraphQL 在组件或页面中查询 Markdown 数据。要在 blog/index.js 页面中查询这些数据，首先要从 gatsby 中导入 graphql。然后，在 JSX 代码的底部添加以下内容：

export const query = graphql`
query BlogList {
allMarkdownRemark {
nodes {
frontmatter {
title
slug
description
}
id
}
}
}
`;

在上面的代码中，我们使用 graphql 标签创建了一个名为 query 的 GraphQL 查询。这就是你的 blog/index.js 文件的样子：

import { graphql, Link } from 'gatsby';
import React from 'react';
import Layout from '../../components/Layout';
import * as styles from '../../styles/blog.module.css';
const blog = ({ data }) => {
const posts = data.allMarkdownRemark.nodes;
return (
<Layout>
<div className={styles.blog_cont}>
<h2>Blog</h2>
<div className={styles.blog_grid}>
{posts.map((post) => (
<Link
to={`/blog/${post.frontmatter.slug}`}
className={styles.blog_card}
key={post.id}
>
<h3>{post.frontmatter.title}</h3>
<p>{post.frontmatter.description}</p>
</Link>
))}
</div>
</div>
</Layout>
);
};
export default blog;
export const query = graphql`
query BlogList {
allMarkdownRemark {
nodes {
frontmatter {
title
slug
description
}
id
}
}
}
`;

在上面的代码中，您通过组件中的 data 道具访问 query 结果。接下来，使用 map() JavaScript 方法循环浏览 posts 数据，然后在列表中显示标题。

为避免出错，请在 styles 文件夹中创建 blog.module.css 文件，并添加以下代码：

.blog_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.blog_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (max-width:700px) {
.blog_grid {
grid-template-columns: 1fr;
}
}
.blog_card {
background-color: #bfbfbf;
padding: 20px;
border-radius: 5px;
color: #000;
transition: all .5s ease-in-out;
}
.blog_card:hover {
background-color: #5333ed;
color: #fff;
}
.blog_card h3 {
margin-bottom: 15px;
}
.blog_card p {
margin-bottom: 15px;
}

显示通过 GraphQL 获取的博客文章

显示通过 GraphQL 获取的博客文章。

了解模板和使用 GraphQL 在 Gatsby 中生成动态页面

在 Gatsby 中，模板和动态页面是使您能够创建灵活的数据驱动型网站的基本概念。模板允许你定义页面的结构和布局，而 GraphQL 则帮助你获取数据，动态填充这些模板。

创建博文模板

假设您想创建一个博客，其中每篇博文都有一致的结构，包括标题和内容。您可以创建一个 BlogDetails 模板来定义这种布局。在 src 文件夹中创建一个 templates 文件夹，然后创建一个 blog-details.js 文件：

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';
const BlogDetails = () => {
return (
<Layout>
<div>
<div className={styles.blog_content}>
<Img
className={styles.blog_featured}
/>
<h3>Title</h3>
<div>
className={styles.html}
dangerouslySetInnerHTML={}
/>
</div>
</div>
</Layout>
);
};
export default BlogDetails;

在本示例中， BlogDetails 模板定义了单个博客文章的结构。接下来，让我们使用 GraphQL 来获取特定博客文章的数据，并将其作为道具传递给该模板。

生成动态页面

要生成动态页面，请在项目根目录下创建 gatsby-node.js 文件。该文件允许你定义页面的创建方式。

在 gatsby-node.js 文件中，使用 GraphQL 查询要用于动态页面的数据。例如，如果你有 Markdown 博客文章，你可以查询它们的 slugs：

const path = require(`path`);
exports.createPages = async ({ graphql, actions }) => {
const { data } = await graphql(`
query Articles {
allMarkdownRemark {
nodes {
frontmatter {
slug
}
}
}
}
`);
data.allMarkdownRemark.nodes.forEach((node) => {
actions.createPage({
path: '/blog/' + node.frontmatter.slug,
component: path.resolve('./src/templates/blog-details.js'),
context: { slug: node.frontmatter.slug },
});
});
};

在本例中，我们查询了所有 Markdown 文章的 slugs，并使用 BlogDetails 模板为每个文章创建了动态页面。上下文对象用于向模板传递数据。模板使用这些数据（slug）来获取与 slug 一致的其他数据。在

向模板页面添加 GraphQL 查询之前，让我们先了解一下 Gatsby 中的图像优化是如何工作的。

Gatsby 中的图像优化

此前，您安装并配置了 gatsby-transformer-sharp 和 gatsby-plugin-sharp 以及 gatsby-source-filesystem 来获取图片。

有了这些插件，你就可以使用 GraphQL 查询和优化图片。下面是一个如何使用 gatsby-plugin-sharp 查询和显示优化图像的示例：

export const query = graphql`
query {
file(relativePath: { eq: "example.jpg" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
`;

在上面的代码中，你从 images 源中查询名为 example.jpg 的图片，并使用查询到的图片的 fluid 属性，以响应式优化渲染显示图片。

然后，你可以从 gatsby-image 中导入 Img ，以处理优化后的图片。

import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';
const ImageExample = ({ data }) => {
const { fluid } = data.file.childImageSharp;
return (
<div>
<Img fluid={fluid} alt="Example Image" />
</div>
);
};
export default ImageExample;

查询动态页面

Gatsby 将使用指定模板为每篇博文创建独立页面。现在，让我们为模板页面添加 GraphQL 查询，以便根据标题获取数据：

import { graphql } from 'gatsby';
import Img from 'gatsby-image';
import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';
const BlogDetails = ({ data }) => {
const { html } = data.markdownRemark;
const { title, featureImg } = data.markdownRemark.frontmatter;
return (
<Layout>
<div>
<div className={styles.blog_content}>
<Img
fluid={featureImg.childImageSharp.fluid}
className={styles.blog_featured}
/>
<h3>{title}</h3>
<div
className={styles.html}
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>
</div>
</Layout>
);
};
export default BlogDetails;
export const query = graphql`
query ProjectDetails($slug: String) {
markdownRemark(frontmatter: { slug: { eq: $slug } }) {
html
frontmatter {
title
featureImg {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`;

在上面的代码中，你会发现我们正在查询优化后的图片，并查询与标题相匹配的博文。

你可以在 GitHub 上查看这个 Gatsby 项目的完整源代码。

小结

本指南涵盖数据源、路由、样式、图像优化、插件等基础知识。

Gatsby 的灵活性、速度和丰富的生态系统使其成为构建静态网站的强大选择。无论您是创建个人博客、作品集网站还是商业网站，Gatsby 都能满足您的需求。

现在，是时候将你的知识付诸行动，开始构建你自己的 Gatsby 网站了。你使用过 Gatsby 吗？欢迎在下面的评论区与我们分享你的项目和经验。

使用 Gatsby 构建静态网站综合指南

了解静态网站

什么是 Gatsby?

Gatsby 入门

了解 Gatsby 文件结构

创建页面和组件

在页面中使用 JSX

连接 Gatsby 中的页面

在 Gatsby 中创建组件

创建布局组件

在 Gatsby 中为页面和组件设计样式

在 Gatsby 中使用静态文件

插件和集成

创建博客文章

使用 GraphQL 在 Gatsby 中进行查询

了解模板和使用 GraphQL 在 Gatsby 中生成动态页面

创建博文模板

生成动态页面

Gatsby 中的图像优化

查询动态页面

小结

评论留言

取消回复

文章目录

使用 Gatsby 构建静态网站综合指南

了解静态网站

什么是 Gatsby?

Gatsby 入门

了解 Gatsby 文件结构

创建页面和组件

在页面中使用 JSX

连接 Gatsby 中的页面

在 Gatsby 中创建组件

创建布局组件

在 Gatsby 中为页面和组件设计样式

在 Gatsby 中使用静态文件

插件和集成

创建博客文章

使用 GraphQL 在 Gatsby 中进行查询

了解模板 和 使用 GraphQL 在 Gatsby 中生成动态页面

创建博文模板

生成动态页面

Gatsby 中的图像优化

查询动态页面

小结

相关的

评论留言

取消回复

文章目录

了解模板和使用 GraphQL 在 Gatsby 中生成动态页面