Sitemap 是一种用于将网站链接结构呈现给搜索引擎的文件。Sitemap 不仅对搜索引擎优化（SEO）有帮助，也可以增加站点的可用性。在这篇文章中，我将向大家介绍如何使用 gatsby-plugin-sitemap 这个 npm 包来为 Gatsby 应用生成 Sitemap。
什么是 Gatsby？
Gatsby 是一个 React 静态站点生成器。它将 React 组件静态地呈现为 HTML、CSS 和 JavaScript 文件，这样可以提高页面加载速度和 SEO 优化效果。Gatsby 还拥有大量的插件和 API，可以使开发者更好地构建 Web 应用程序。
安装 gatsby-plugin-sitemap
在 Gatsby 应用程序的根目录下使用 npm 或者 yarn 安装 gatsby-plugin-sitemap：
npm install gatsby-plugin-sitemap
yarn add gatsby-plugin-sitemap
配置 gatsby-plugin-sitemap
在 Gatsby 应用程序的 gatsby-config.js 文件中引入并配置 gatsby-plugin-sitemap。详细的配置说明可以在 官方文档 中找到。
-- -------------------- ---- -------
-------------- - -
------------- -
-------- ----------------------
--
-------- -
-
-------- ------------------------
-------- -
-------- -------------
--
--
--
-在上面的代码中，需要设置一个必需的字段 —— siteUrl。这个字段指定了你的网站的 URL 地址。options 中的 exclude 字段可以用来指定不应包含在 Sitemap 中的链接。
示例代码
让我们编写一个示例页面，并看一下在生成 Sitemap 之后的结果。
首先，让我们在 Gatsby 应用程序的 src/pages 目录中创建一个名为 test.js 的文件。这个文件将会成为我们生成 Sitemap 的一个示例页面。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ---- - ---- --------
----- -------- - -- -- -
------ -
-----
-------- ---------
------- -- - ---- ---- --- --------------------------
----- --------- ---- -- --- ---------------
------
-
-
------ ------- --------现在，我们需要在 src/pages 目录中创建一个名为 sitemap.xml 的文件，以便我们查看生成的 Sitemap。在这个文件中，我们需要添加以下代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
----- ------- - -- ---- -- -- -
----- ------- - ------------------------------
----- ----- - ----------------------
----- ----- - ----------------------------
------ -
------- ----------------------------------------------------
--------------- -- -
------ -
-----
-----
--------------------
------
--------------------------------------
------
-
---
--------------- -- -
------ -
-----
-----
---------------------------
------
------------------------------------------
------
-
---
---------
-
-
------ ----- ----- - --------
-
---- -
------------ -
-------
-
-
----------- -
----- -
----
------- -
----
-
-
-
----------------- -
----- -
------ -
----
-
----------- -
------------------ -------------
-
-
-
-
-
------ ------- -------现在，我们可以在浏览器中打开 http://localhost:8000/sitemap.xml 来查看生成的 Sitemap。
总结
在本文中，我们介绍了如何使用 gatsby-plugin-sitemap 这个 npm 包为 Gatsby 应用生成 Sitemap。我们还提供了代码示例，使读者们更加易于理解。通过 Sitemap，我们可以更好地优化我们的站点，让搜索引擎更加容易地找到我们的网页。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0d12cd403f2923b035c189