使用 Gatsby 構建靜態網站綜合指南

近年來，靜態網站因其速度、安全性和簡便性而捲土重來。Gatsby 是當今構建靜態網站的領先工具之一，它是一款速度極快的靜態網站生成器（SSG）。

無論你是一名網站開發人員，是想建立個人部落格、作品集網站，還是商業網站，Gatsby 都能幫助你實現目標。本綜合指南將帶你瞭解使用 Gatsby 建立靜態網站的整個過程。它涵蓋了從基礎知識到高階主題的所有內容。

演示網站，展示您在閱讀本指南後可以建立的網站。

瞭解靜態網站

靜態網站是包含預先渲染的 HTML、CSS 和 JavaScript 檔案的網頁。與動態網站不同，它們不依賴伺服器端對每個請求的處理。相反，所有內容都是提前生成的，並直接提供給使用者的瀏覽器。這種方法有以下幾個優點：

1. 速度：靜態網站無需伺服器端處理，因此載入速度快。
2. 安全：由於沒有伺服器端程式碼執行，靜態網站不易受到安全威脅。
3. 可擴充套件性：通過內容分發網路（CDN）快取和分發靜態網站非常方便。
4. 簡單性：靜態網站更易於開發、部署和維護。

既然瞭解了什麼是靜態網站以及靜態網站的優勢，我們就來深入瞭解一下 Gatsby。

什麼是 Gatsby?

Gatsby 是一個基於 React JavaScript 庫的開源框架，可簡化靜態網站的構建過程。它將強大的 React 元件與用於資料管理的 GraphQL 結合在一起，是各種水平的開發人員的絕佳選擇。以下是 Gatsby 脫穎而出的原因：

1. 速度極快：Gatsby 使用程式碼分割和懶載入等技術優化網站速度，使頁面載入近乎瞬時。
2. 靈活的資料來源：它可以從各種地方獲取資料，包括 Markdown 檔案、API 和資料庫。
3. 豐富的外掛生態系統：Gatsby 廣泛的外掛生態系統可讓您毫不費力地擴充套件其功能。
4. 搜尋引擎優化和效能：Gatsby 可自動生成優化的 HTML，以提高搜尋引擎優化和效能。

Gatsby 入門

要學習本指南，你應該具備以下條件：

• 對 HTML、CSS 和 JavaScript 有基本瞭解
• React 的基礎知識
• 計算機上安裝了 Node.js 和 npm（Node 包管理器）或 yarn

要開始使用 Gatsby 並建立一個專案，你可以使用 Gatsby 入門庫中的眾多示例之一，或者從頭開始建立一個專案。

在本指南中，讓我們使用 GatsbyJS 的官方 hello world 啟動器，因為它為我們提供了一個沒有外掛或額外檔案的普通專案。

1. 首先，執行以下命令在電腦上安裝 Gatsby CLI：

npm install -g gatsby-cli

執行 gatsby --version 驗證安裝是否成功。

2. 然後，導航到要建立專案的資料夾，並執行以下命令：

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

將上面的 <project-name> 更改為專案的首選名稱。

3. 成功後，進入專案資料夾並啟動開發伺服器：

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 轉換等外掛。安裝和配置外掛非常簡單，它們可以大大增強網站的功能。

在本指南中，我們將使用四個外掛：

1. gatsby-transformer-remark：該外掛可將 Markdown 檔案轉換為 HTML 內容，從而輕鬆建立和管理部落格文章、文件或任何基於文字的內容。
2. gatsby-transformer-sharp 和 gatsby-plugin-sharp：這些外掛協同工作，優化和處理 Gatsby 專案中的圖片。
3. 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 獲取標記資訊。

然後，你就可以使用 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 在 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 嗎？歡迎在下面的評論區與我們分享你的專案和經驗。