简介
Gatsby Plugin Buildtime Timezone 是一个 Gatsby 插件，它可以根据时区自动处理页面中的时间。
在使用 Gatsby 开发静态博客的时候，我们通常需要在文章中插入日期和时间。但是，如果我们的博客读者在不同的时区，他们就会看到不同的时间，这样可能会破坏阅读体验。
Gatsby Plugin Buildtime Timezone 可以在 Gatsby 的构建时期自动将时间转换为访问者所在的时区，并输出正确的时间。
安装
在 Gatsby 项目的根目录下执行以下命令：
npm install gatsby-plugin-buildtime-timezone
使用
在 Gatsby 的配置文件 gatsby-config.js 中，我们需要将 Gatsby Plugin Buildtime Timezone 添加到插件列表中。代码如下：
module.exports = {
plugins: [
'gatsby-plugin-buildtime-timezone',
// ... 其他插件
]
}代码中的 'gatsby-plugin-buildtime-timezone' 就是我们刚才安装的插件名称。
在博客文章的 frontmatter 中，我们需要添加一个 date 字段。该字段应该是 JavaScript 的 Date 类型或者是 ISO 8601 字符串。
--- title: "Hello World" date: 2021-10-01T00:00:00.000Z ---
在博客页面中，我们需要使用 formatDate 函数来将日期转换为正确的字符串。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ---------- - ---- -----------------------------------
------ ------- -------- ---------- ---- -- -
----- - -------------- - - -----
----- - ------------ ---- - - ---------------
------ -
-----
----------------------------
-------------------------------- -------------
---- -------------------------- ------- ---- -- --
------
--
-
------ ----- --------- - --------
----- ------- -------- -
---------------------- - ----- - --- ----- - -- -
----
----------- -
-----
----
-
-
-
--在上面的代码中，我们首先通过 GraphQL 查询获取了文章的 frontmatter 和 html。然后，我们使用 formatDate 函数将 frontmatter.date 转换为正确的字符串，并将结果展示在页面上。
参数说明
formatDate(date: Date | string, locale: string) 函数有两个参数：
date：要转换的日期。可以是Date类型或者是ISO 8601字符串。locale：转换结果要使用的语言环境。默认值为en-US。
可以使用的语言环境如下所示：
en-US：美式英语en-GB：英式英语zh-CN：简体中文
示例代码
我们可以使用以下代码来测试 Gatsby Plugin Buildtime Timezone 的效果：
--- title: "Hello World" date: 2021-10-01T00:00:00.000Z ---
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ---------- - ---- -----------------------------------
------ ------- -------- ---------- ---- -- -
----- - -------------- - - -----
----- - ------------ ---- - - ---------------
------ -
-----
----------------------------
-------------------------------- -------------
---- -------------------------- ------- ---- -- --
------
--
-
------ ----- --------- - --------
----- ------- -------- -
---------------------- - ----- - --- ----- - -- -
----
----------- -
-----
----
-
-
-
--总结
在本文中，我们介绍了 Gatsby Plugin Buildtime Timezone 的基本使用方法。同时，我们也讲解了 formatDate 函数的参数和语言环境。希望这篇文章可以帮助到前端开发者们更好地应用 Gatsby 和静态博客开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60058ae981e8991b448ed3b2