如何在Gatsby中使用静态文件

来自菜鸟教程
跳转至：导航、​搜索

作为 Write for DOnations 计划的一部分，作者选择了 Internet Archive 来接收捐赠。

介绍

与许多流行的 Static Site Generators 一样，Gatsby 包含使用动态 Web 框架，在前端使用 React，在前端使用 Node.js后端。 但 Gatsby 也可以提取静态文件和资源，例如图像、CSS 文件和 JavaScript 文件。

本教程涵盖了您可能希望在 Gatsby 站点中使用静态文件的情况。 它将向您展示如何最好地在全局范围内添加图像、样式表以及作为模块、JavaScript 文件和任意文件（如 PDF）供您的用户下载。

先决条件

在开始之前，这里有一些你需要的东西：

  • Node.js 的本地安装，用于运行 Gatsby 并构建您的站点。 安装过程因操作系统而异，但 DigitalOcean 有 Ubuntu 20.04 和 macOS 的指南，您始终可以在 官方 Node.js 下载页面找到最新版本[ X213X]。
  • 一个新的 Gatsby 项目，由 gatsby-starter-default 搭建。 为了满足这个要求并从头开始构建一个新的 Gatsby 项目，您可以参考 如何设置您的第一个 Gatsby 网站 教程的 Step 1。
  • 如果您想自定义帖子的用户界面 (UI)，超出本教程的范围，则对 React 和 JSX 以及 HTML 元素 有一定的了解。
  • 解压缩 zip 存档文件的程序。 在大多数操作系统上，unzip 是首选命令，您可以使用本地 包管理器 在 Linux 上下载该命令。
  • 访问用于为本教程提供示例文件的演示文件存储库。 您可以在 DigitalOcean 社区 GitHub 存储库 访问它，Step 1 将指导您如何下载它。

本教程在 Node.js v14.16.1、npm v6.14.12、Gatsby v3.13.1 和 flexboxgrid v6.3.1 上进行了测试。

第 1 步 — 准备示例文件

出于本教程的目的，您将使用预先安排的静态资产集合，将在以下步骤中使用它们。 文件集合可作为 GitHub 存储库 获得，本教程的第一步是下载它们并将它们放置在您的 Gatsby 项目中。

首先，您将示例文件解压到 src/sample-assets，您可以通过下载 压缩文件 并使用您选择的解压缩工具手动完成，或者通过在您的位于 Gatsby 项目根目录的终端： 

wget -O ../sample-assets.zip https://github.com/do-community/gatsby-static-files-tutorial-assets/archive/refs/heads/main.zip
unzip ../sample-assets.zip -d ./src

上面的命令使用 wget 将整个 repo 的存档下载为单个 zip 存档文件，然后将内容解压缩到源目录。

解压缩文件后，下一步是创建一个空的 Gatsby 页面组件，该组件将用作本教程的演示页面。 在 src/pages/static-files-demo.js 创建一个空文件，然后在您选择的编辑器中打开该文件并添加以下代码：

src/pages/static-files-demo.js 

import * as React from "react"

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

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1>Static Files Demo</h1>
  </Layout>
)

export default StaticFilesDemo

此代码用作 Gatsby 页面组件文件，您将使用它在 https://localhost/static-files-demo/ 生成公共页面。 StaticFilesDemo函数是一个React组件，返回JSX，成为页面内容。 您使用 export default StaticFilesDemo 作为最后一行，因为 Gatsby 的构建系统期望页面组件的默认导出是负责渲染页面的 React 组件。

添加页面代码后，保存文件，但保持打开状态，因为以下步骤将添加到其中。

在第一步中，您下载了将在整个教程中使用的静态资产文件，并设置了一个演示页面以在其中构建。 在下一步中，您将添加最常见的静态资产形式之一：图像文件。

第 2 步 — 添加图像

网站的一个常见需求是以不影响网站加载体验的方式嵌入图像文件。 在这一步中，您将了解如何使用 Gatsby 执行此操作，使用 gatsby-plugin-image 以及一些 HTML 将图像嵌入到 Gatsby 页面中，同时优化加载时间和带宽使用。

由于 gatsby-plugin-image 包含在 gatsby-starter-default 先决条件 中，因此它已作为依赖项安装并可以使用。 如果你的项目不是从 gatsby-starter-default 模板开始的，你可以在 官方 Gatsby 文档 中了解如何安装和配置 gatsby-plugin-image。

打开您在上一步中创建的演示页面组件文件并添加以下突出显示的代码：

src/pages/static-files-demo.js 

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

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

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1>Static Files Demo</h1>

    <section className="demo">
      <h2>Static Image Files Demo</h2>

      <figure className="image-demo">
        <StaticImage
          src="../gatsby-static-files-tutorial-assets-main/images/water.jpg"
          width={1000}
          quality={90}
          alt="Underwater view of clear, blue body of water"
        />
        <figcaption>
          Photo by{" "}
          <a target="_blank" rel="noreferrer noopener" href="https://unsplash.com/@cristianpalmer">
            Cristian Palmer
          </a>
        </figcaption>
      </figure>

      <figure className="image-demo">
        <StaticImage
          src="../gatsby-static-files-tutorial-assets-main/images/turtle.jpg"
          width={1000}
          quality={90}
          alt="Overhead view of a turtle floating over blue water"
        />
        <figcaption>
          Photo by{" "}
          <a target="_blank" rel="noreferrer noopener" href="https://unsplash.com/@ruizra">
            Randall Ruiz
          </a>
        </figcaption>
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

不是直接使用标准 HTML img 标记并将其指向公共图像 URL，而是在此代码中使用 来自 gatsby-plugin-image 的 StaticImage 组件 并传入路径到您的本地静态图像。 这是最佳实践方法，因为 StaticImage 将生成源图像的多个调整大小的版本（使用 gatsby-plugin-sharp 在引擎盖下）并提供最接近您的访问者的匹配网页（使用 srcset 功能），导致更快的页面加载和更小的下载大小。

对于传递给 StaticImage 的图像，您使用 90 的质量来覆盖 50 的默认值，显示 gatsby-plugin-image 如何仍然可以改进文件大小在保持质量的同时。 您还指定了 1000 的宽度，作为最大宽度的上限，因为两个源图像的原始宽度都远远超过它。 对于演示和许多网页来说，1000 像素的宽度已经绰绰有余。 这两个选项对性能有很大影响，但是 gatsby-plugin-image 还有许多其他选项值得探索，您可以在 Gatsby 文档 中找到。

在此页面中，无论在何种尺寸的屏幕上查看它们，这两个图像的原始版本总共占用大约 4 MB。 但是使用 StaticImage，在小型手机上，它们将被压缩到只有 100kB，或者大约是原始大小的 2.5% o。 加载时间从 3G 互联网连接 上的近 2 分钟下降到几秒钟。 gatsby-plugin-image 插件还利用了更适合压缩 Web 交付的现代图像格式，例如 webp 和 avif。

在继续之前保存文件。

注意： 如果您需要绕过 gatsby-plugin-image 并完全按原样加载图像，Gatsby 提供了一种通过 静态文件夹 执行此操作的方法，但这通常是建议不要这样做，因为这不包括前面提到的图像优化。


您现在已经向您的站点添加了几个新图像，使用 Gatsby 中的最佳实践为您的网页访问者提供最佳用户体验。 在下一步中，您将通过将静态 CSS 文件添加到您的站点来专注于网页的样式组件。

第三步——添加 CSS 样式表

与嵌入图像一样，将基于 CSS 的样式添加到 Gatsby 站点的方法不止一种。 尽管内联样式和 CSS-in-JS 始终是 Gatsby 的一个选项，但对于站点范围或组件样式，使用专用静态样式表通常是更好的做法。 在此步骤中，您将使用遵循 Gatsby 最佳实践的方法将您自己的自定义 CSS 文件以及第三方 CSS 文件添加到您的 Gatsby 项目中。

首先在与演示页面相同的文件夹中创建一个 CSS 文件，地址为 src/pages/static-files-demo.module.css。 您正在使用 .module.css 后缀来标记此文件旨在用作 CSS 模块 ，这确保样式最终将作用于它导入的组件而不是用户界面 (UI) 的其他区域。

打开新创建的文件后，添加以下代码：

src/pages/static-files-demo.module.css 

.headerText {
  width: 100%;
  text-align: center;
}
.container img {
  border-radius: 8px;
}

在此 CSS 中，您将使用 .headerText 类将任何元素中的文本居中对齐并使其全宽，并为元素内的任何 img 元素提供圆角边缘.container 类。

保存 CSS 文件并关闭它。 现在打开演示页面组件并添加以下突出显示的代码：

src/pages/static-files-demo.js 

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

import Layout from "../components/layout"
import Seo from "../components/seo"
import * as DemoStyles from "./static-files-demo.module.css"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section className={'demo ' + DemoStyles.container}>
      <h2>Static Image Files Demo</h2>

      <figure className="image-demo">
        ...
      </figure>
      <figure className="image-demo">
        ...
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

您在此文件中所做的第一个更改是添加一个 import 语句来导入您刚刚创建的 CSS 文件。 代替使用 CSS @import 语句，您使用的是标准的 ES 模块导入语句，将此导入的值分配给 DemoStyles 变量。 在后台，Gatsby 使用 webpack 处理这个 CSS 文件，将其视为 CSS 模块。

您还更新了组件中的 JSX 以使用 CSS 模块文件中的类。 您通过使用来自 DemoStyles 导入的精确范围类名称更新战略位置中的 className 属性来做到这一点。

保存您的文件。

下一步涉及相反的场景：添加要影响整个站点的静态 CSS 代码。 您可能希望以这种方式加载的 CSS 类型的一个示例是一小组实用程序类，它们在设计基于 flexbox 的布局时会有所帮助：flexboxgrid。

通过在 Gatsby 项目的根目录中运行以下命令，将此第三方 CSS 作为依赖项安装： 

npm install flexboxgrid

接下来，不是像以前那样在同一个演示页面中导入该库提供的 CSS，而是在项目的最高级别导入它，以便在全局范围内应用它。 在起始模板中，此级别位于 layout.js 文件中，因为每个其他组件都将其内容包装在其中。

注意： 全局 CSS 导入的另一个选项在 gatsby-browser.js 文件中，但 Gatsby 不建议在大多数情况下将其作为主要方法，正如 Gatsby 文档中提到的全局造型。 您也可以使用传统的 <link> 元素来导入内部或外部样式表，但也不推荐这样做，因为它绕过了 webpack。


打开src/components/layout.js，进行如下修改：

src/components/layout.js 

/**
 * 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 PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"
import "../../node_modules/flexboxgrid/dist/flexboxgrid.min.css"

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

  return (
    <>
      ...
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

您刚刚添加了一个 import 语句，它直接从 node_modules 下的 flexboxgrid 库中导入 CSS 文件。 由于 CSS 文件旨在应用于整个站点，因此您不会将其分配给变量，并且由于您不想将其用作模块，因此文件名不会以 .module.css 结尾。

保存并关闭 layout.js 以完成在您的 Gatsby 站点中全局导入 CSS 的过程。

全局导入 CSS 后，您现在将在演示页面中使用 flexboxgrid 中的类，而无需再次导入 CSS 文件。 打开演示页面组件文件并更新代码：

src/pages/static-files-demo.js 

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

import Layout from "../components/layout"
import Seo from "../components/seo"
import * as DemoStyles from "./static-files-demo.module.css"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section className={'demo row around-xs ' + DemoStyles.container}>
      <h2 className="col-xs-12">Static Image Files Demo</h2>

      <figure className="image-demo col-xs-10 col-sm-5">
        ...
      </figure>

      <figure className="image-demo col-xs-10 col-sm-5">
        ...
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

您刚刚在演示页面中添加了一些使用 flexboxgrid CSS 文件中的规则集的类。 section 元素上的 row 和 around-xs 类将 justify-content 和 [ X136X] 类用于控制每个元素占用多少行。

确保在关闭之前保存对演示文件的更改。 通过此更改，页面变得更具响应性，并且图像将并排显示在足够大的显示器上。

要预览到目前为止所做的更改，请运行以下命令： 

npm run develop

这将为您的 Gatsby 站点在 http://localhost:8000/static-files-demo 启动一个本地开发服务器。 导航到此 URL，您会发现您的网站以您的新样式呈现：

注意： 由于 Gatsby 提供了开箱即用的 React，除了此处列出的静态 CSS 选项外，您还可以选择 通过 React 和基于 React 的框架应用样式。


在此步骤中，您使用静态 CSS 文件为您的站点添加了额外的样式。 在下一步中，您将使用类似的方法来添加静态 JavaScript 文件以增加功能。

第 4 步 — 添加 JavaScript 文件

Gatsby 已经在后端和前端使用了 JavaScript，但这既可以用作仅在构建过程中运行的 Node.js 代码，也可以用作生成静态 HTML 输出的 React 组件。 在这一步中，您将包含既不是基于 Node.js 也不是基于 React 的 JavaScript 文件，但仍会被拉入 Gatsby 生成的每个页面。

在本教程中，您将添加一个文件，该文件将向您网站的任何访问者打印一条消息，打开他们的开发者控制台。 您可以通过在 src/gatsby-static-files-tutorial-assets-main/js/every-page.js 打开文件来检查将运行的 JavaScript。

不是通过 ES 模块 import 直接将此文件导入 Gatsby 文件（就像您对 CSS 文件所做的那样），您将通过 Gatsby 服务器端渲染 (SSR) API 将其添加到页面中。 这种方法可以让您对 JavaScript 文件在 DOM 中的哪个位置进行细粒度控制，并且还可以防止您的代码在 Gatsby 的构建过程中被执行。

但是，在使用 Gatsby SSR API 之前，您需要使静态 JavaScript 文件可供公众访问。 为此，请使用 Gatsby 支持的 特殊静态文件夹 ，方法是在 Gatsby 项目的根目录中创建一个名为 static 的文件夹。 然后，将静态 JavaScript 文件复制到此文件夹。 您可以在文件浏览器中手动执行这两个操作，或者使用从项目根目录运行的以下命令： 

mkdir static
cp src/gatsby-static-files-tutorial-assets-main/js/every-page.js static/every-page.js

通过此操作，JavaScript 文件现在可以在 https://localhost:8000/every-page.js 上公开访问。 此步骤的下一部分是触发它通过 HTML 加载。

在 Gatsby 项目的根目录中打开 gatsby-ssr.js，因为这是 Gatsby 允许您连接到服务器渲染 API 的地方。 现在添加以下代码：

盖茨比-ssr.js 

/**
 * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/ssr-apis/
 */

import * as React from "react"

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script type="text/javascript" src="/every-page.js" key="every-page-js" defer></script>,
  ])
}

您添加的第一行代码是导入 React 的语句，这是在文件中启用 JSX 使用所必需的。 接下来，您导出一个名为 onRenderBody 的函数，该函数将一个对象作为参数，其中包含一个嵌套函数 setPostBodyComponents，您可以在自己的函数中调用该函数。 您使用将加载静态 JS 文件的脚本标记调用此函数，同时使用添加唯一 key 属性和 defer 的最佳实践，因为在这种情况下，何时JavaScript 执行。

setPostBodyComponents 将把 array 中的任何 React 组件作为其第一个参数传递，在本例中为单个脚本标签，并将其渲染为主体的一部分，从而触发加载你的浏览器中的脚本文件。 保存文件，但为下一步保持打开状态。

现在导航到您的 https://localhost:8000/static-files-demo URL 并打开一个 JavaScript 控制台。 您将找到由 JavaScript 文件创建的消息，如下图所示：

注意： 如果您使用的是 Gatsby 的实时开发功能，您可能需要暂停并重新启动 npm run develop 才能使对该文件的更改生效。


您现在已经使用 Gatsby SSR API 添加了一个本地静态 JavaScript 文件，但同样的策略也可用于从其他域加载外部 JavaScript，也称为 3rd-party 脚本。 为了使演示中的图像易于放大，您将添加一个名为 Fancybox 的第三方 lightbox 库。 在同一个 gatsby-ssr.js 文件中，添加以下行：

盖茨比-ssr.js 

/**
 * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/ssr-apis/
 */

import * as React from "react"

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script type="text/javascript" src="/every-page.js" key="every-page-js" defer></script>,
    <script
      src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.5/dist/fancybox.umd.js"
      integrity="sha256-B34QrPZs5i0CQ3eqywkXHKIWw8msfAVH30RWj/i+dMo="
      crossOrigin="anonymous"
      key="fancybox-js"
      defer
    ></script>,
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.5/dist/fancybox.css"
      integrity="sha256-WIieo0WFPkV7kcA2lQ4ZCO5gTg1Bs/SBX5YzEB4JkyM="
      crossOrigin="anonymous"
      key="fancybox-css"
    ></link>,
  ])
}

在此代码中，您通过与本地 every-page.js 文件相同的 onRenderBody Gatsby SSR API 添加了第三方库 Fancybox 的 JavaScript 和 CSS。 这次使用了两个额外的属性，这两个属性都有助于提高安全性。 crossOrigin="anonymous" 明确告诉浏览器不要与与您自己的域不匹配的域共享凭据，并且 integrity 属性用于强制执行 子资源完整性 (SRI)，它可以防止在添加文件后突然更改文件。

警告： 根据经验，将第三方脚本和样式视为不受信任。 除了在使用前对其进行检查外，请始终使用 SRI。 一般来说，通过 URL 加载第三方资产而不是与导入绑定是应该尽可能避免的，但有时对于分析、嵌入小部件和错误记录服务是必要的。


这样就完成了让第三方代码加载的任务，但是对于这个特定的库，还有另一个步骤来触发新的 UI 功能。

保存并关闭gatsby-ssr.js，然后打开src/pages/static-files-demo.js备份并进行以下编辑：

src/pages/static-files-demo.js 

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

import Layout from "../components/layout"
import Seo from "../components/seo"
import * as DemoStyles from "./static-files-demo.module.css"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section className={"demo row around-xs " + DemoStyles.container}>
      <h2 className="col-xs-12">Static Image Files Demo</h2>

      <figure className="image-demo col-xs-10 col-sm-5">
        <StaticImage
          data-fancybox
          src="../gatsby-static-files-tutorial-assets-main/images/water.jpg"
          ...
        />
        <figcaption>
          ...
      </figure>

      <figure className="image-demo col-xs-10 col-sm-5">
        <StaticImage
          data-fancybox
          src="../gatsby-static-files-tutorial-assets-main/images/turtle.jpg"
          ...
          
        />
        <figcaption>
          ...
        </figcaption>
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

添加 data-fancybox 告诉 fancybox 库在哪里可以找到触发灯箱效果的图像，这样，您的用户可以通过单击演示图像开始使用灯箱查看器，如下面的 GIF 所示：

注意：在页面的<head>加载脚本或样式，无论是你自己的还是第三方的，推荐的方法是用的gatsby-plugin-react-helmet插件。 此插件与入门模板捆绑在一起，您可以在 src/components/seo.js 中添加到现有用法。


您刚刚使用了两种不同的方式将本地和远程 JavaScript 拉入您的 Gatsby 站点，每种方式都有自己的用例和权衡取舍。 对于此步骤或之前的文件未涵盖的文件类型，本教程的下一部分将介绍如何在 Gatsby 站点中包含任意文件。

第 5 步 — 添加任意静态文件

您现在已经在 Web 开发中实现了三种常见的静态资产类型：图像、CSS 和 JavaScript。 但这仍然留下了许多可能是网站一部分的其他文件类型。 在此步骤中，您将探索将任意静态文件添加到您的 Gatsby 站点，以便它们可以嵌入或作为下载提供给您的访问者。

添加任意静态文件以便用户可以访问它们的第一种方法是将它们导入到 JavaScript 文件中并使用 webpack 为您生成公共链接。 官方 Gatsby 文档关于导入资产 推荐了这种策略，因为 webpack 将有助于防止路径中的拼写错误，避免对从未导入的文件使用不必要的磁盘空间，在某些情况下，甚至内联文件作为数据 URI。

打开演示页面组件文件并添加以下编辑：

src/pages/static-files-demo.js 

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

import Layout from "../components/layout"
import Seo from "../components/seo"
import * as DemoStyles from "./static-files-demo.module.css"
import helloWorldPdf from "../gatsby-static-files-tutorial-assets-main/hello-world.pdf"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section>
      <h2>Arbitrary Static Files</h2>
      <a href={helloWorldPdf} title="Download the Hello World file">
        Access the Hello World file by clicking here.
      </a>
    </section>

    <section className={"demo row around-xs " + DemoStyles.container}>
      <h2 className="col-xs-12">Static Image Files Demo</h2>
      ...
    </section>
  </Layout>
)

export default StaticFilesDemo

在此代码中，您将直接在 JavaScript 中导入静态文件（PDF 文件），该文件将被 webpack 解析并生成一个唯一链接。 该链接将填充为 helloWorldPdf 的值，这就是您的 a 标签所指向的内容。

由于使用此方法处理资产的方式，最终链接看起来相当随机，例如 /static/hello-world-2f669160afa9b953cbe496f2d6ccb046.pdf。 这适用于大多数情况，但如果您需要一个永久可读的链接，Gatsby 以特殊的 static 文件夹的形式提供了另一个选项。 假设您是雇主，希望您的员工能够为 your_domain.com/time-off-form.pdf 的链接添加书签，您将使用此静态文件夹添加一个新文件。

首先，将静态文件 time-off-form.pdf 从演示文件目录复制到根目录 static 文件夹。 您可以手动执行此操作，也可以使用以下命令： 

cp src/gatsby-static-files-tutorial-assets-main/time-off-form.pdf static/time-off-form.pdf

接下来，在页面文件中添加指向它的链接：

src/pages/static-files-demo.js 

import * as React from "react"

...

import helloWorldPdf from "../gatsby-static-files-tutorial-assets-main/hello-world.pdf"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section>
      <h2>Arbitrary Static Files</h2>
      <a href={helloWorldPdf} title="Download the Hello World file">
        Access the Hello World file by clicking here.
      </a>
      <br />
      <a href="/time-off-form.pdf" title="Time Off Form">
        Request Time Off - Form to fill out and submit.
      </a>
    </section>

    <section className={"demo row around-xs " + DemoStyles.container}>
      ...
    </section>
  </Layout>
)

export default StaticFilesDemo

保存对此文件的更改并关闭它。

使用静态文件夹方法，您可以为您的用户提供 /time-off-form.pdf 的永久路径，但是您会失去缓存清除文件更改的好处以及让 webpack 的编译步骤捕获文件路径中的拼写错误。

导航至 https://localhost:8000/time-off-form.pdf 以查看以下 PDF：

由于您在此步骤中的努力，您网站的访问者现在可以访问由您的新代码启用的额外静态文件类型。 这对您的站点访问者来说很方便，因为他们不必离开您的域即可访问这些文件，并且对您有益，因为它使他们不太可能完全离开站点。

注意： 如果您在 Gatsby 中使用 Markdown 作为源，并希望自动将 Markdown 链接中链接的文件复制到您网站的公共部分，以便用户可以下载它们，请查看 [ X229X] gatsby-remark-copy-linked-files 插件。


结论

通过遵循本教程中的步骤，您已将新类型的静态文件和资产添加到您的网站，并将它们集成到 Gatsby 系统和您现有的内容中。 这些方法可以应用于几乎任何新的或现有的 Gatsby 站点，并且可以跨越数百个用例和文件类型，因此您现在已经准备好在 Gatsby 中处理静态文件以备将来使用。

静态文件涉及 Web 开发的许多部分，并影响或受相关设计决策的影响。 一些值得进一步考虑的主题是：

如果您想了解更多有关 Gatsby 的信息，请查看 如何使用 Gatsby.js 系列创建静态网站 的其余部分。

取自“https://cainiaojiaocheng.com/index.php?title=如何在Gatsby中使用静态文件&oldid=26905”
Powered by MediaWiki