gatsby_如何为Gatsby.js网站构建自定义站点地图

gatsby

When you require an easy to deploy setup, it is possible to build static sites with React using Gatsby.js. These provide good speed and smooth developer experience. Gatsby has been consistently growing with developers using it for blog, marketing, and e-commerce sites.

当您需要易于部署的设置时，可以使用Gatsby.js使用React构建静态站点。 这些提供了良好的速度和流畅的开发人员体验。 Gatsby一直在不断增长，开发人员将其用于博客，营销和电子商务网站。

Every time, you build a site you can help search engine’s crawlers to improve organic search rankings. You have to ensure that search engines like Google can understand your site’s architecture and index it intelligently. You can do all that by including a sitemap.xml file at the root of your site.

每当您建立一个网站时，便可以协助搜寻引擎的检索器提高自然搜寻排名。 您必须确保像Google这样的搜索引擎能够理解您网站的架构并对其进行智能索引。 您可以通过在站点的根目录中包含sitemap.xml文件来完成所有这些操作。

With the growing popularity of Gatsby.js and JAMstack sites, in this tutorial you’ll automatically generate a custom XML sitemap file in your Gatsby powered websites.

随着Gatsby.js和JAMstack网站的日益普及，在本教程中，您将在由Gatsby支持的网站中自动生成自定义XML网站地图文件。

XML网站地图 (XML Sitemap)

A website is composed of several web pages like About, Contact, Blog, Subscribe, etc. A sitemap file maintains a list of all these pages to tell search engines like Google about the organization of your site content. Search engine web crawlers like Googlebot read through this file and crawl your site intelligently.

网站由几个网页组成，如About ， Contact ， Blog ， Subscribe等。Sitemap文件维护所有这些页面的列表，以告知搜索引擎(如Google)您网站内容的组织。 搜索引擎网络抓取工具(例如Googlebot)会通读此文件并智能地抓取您的网站。

Back in the early days of the web, HTML sitemap which was a manually generated bullet-list were in trend. But, owing to their popularity and importance, sitemaps are published in XML format instead of HTML since their target audience is search engines and not people.

早在网络早期，作为手动生成的项目符号列表HTML网站地图就处于流行趋势。 但是，由于其受欢迎程度和重要性，站点地图以XML格式而不是HTML格式发布，因为它们的目标受众是搜索引擎而非人员。

So, an XML sitemap file communicates with the search engines about all the pages that exist on your website.

因此，一个XML网站地图文件与搜索引擎就您网站上存在的所有页面进行通信。

添加站点地图文件的重要性 (Importance of Adding a Sitemap File)

Considering Search Engine Optimization (SEO), sitemaps are very important. However, they do not affect your search rankings. Instead, if there’s a web page which is not indexed, then sitemap tells the search engines about that page to get it appropriately indexed.

考虑到搜索引擎优化(SEO)，站点地图非常重要。 但是，它们不会影响您的搜索排名。 相反，如果有一个未编入索引的网页，则站点地图会告诉搜索引擎该页面以对其进行适当编入索引。

Sitemaps are equally important for both new and old sites. Especially if your site is relatively new then it is recommended to add one since it is difficult for search engines to find posts and pages of a new site. You want to make the search engine’s job as easy as possible to get the most out of it.

对于新站点和旧站点，站点地图都同样重要。 特别是如果您的站点是相对较新的站点，则建议添加一个站点，因为搜索引擎很难找到新站点的帖子和页面。 您想使搜索引擎的工作尽可能简单，以最大程度地利用它。

You will find sitemap.xml files on most websites. This helps the search engine bots to keep a tab on various updates and basically everything that goes about on a site that should be indexed.

您会在大多数网站上找到sitemap.xml文件。 这有助于搜索引擎机器人在各种更新以及应该被索引的站点上进行的所有操作中保持基本状态。

在盖茨比添加站点地图 (Adding a Sitemap in Gatsby)

One key highlight of Gatsby is its growing collection of plugins that implement Gatsby API through simple NPM packages.

Gatsby的一个主要亮点是其不断增长的插件集合，这些插件通过简单的NPM软件包实现了Gatsby API。

Now, to create a sitemap you don’t have to bother writing several lines of code. There is a Gatsby plugin to generate the sitemap file called the gatsby-plugin-sitemap.

现在，您无需费心编写多行代码即可创建站点地图。 有一个Gatsby插件可生成名为gatsby-plugin-sitemap的站点地图文件。

You’ll need to have a Gatsby site up and running before continuing with this tutorial.

在继续本教程之前，您需要启动并运行Gatsby网站。

安装 (Installation)

To install the gatsby-plugin-sitemap package, run the following command in the root folder:

要安装gatsby-plugin-sitemap软件包，请在根文件夹中运行以下命令：

• npm install --save gatsby-plugin-sitemap
  npm install-保存gatsby-plugin-sitemap

使用插件：gatsby-plugin-sitemap (Using the Plugin: gatsby-plugin-sitemap)

Now the plugin is successfully installed, it’s time to add this plugin to the gatsby-config.js file. A quick reminder to those who are new to Gatsby; that inside gatsby-config.js file you’ll find all the site configuration options which are placed in the root folder.

现在该插件已成功安装，是时候将该插件添加到gatsby-config.js文件了。 快速提醒那些刚接触盖茨比的人； 在gatsby-config.js文件中，您将找到放在根文件夹中的所有站点配置选项。

One of these configuration options is for plugins. Here you’ll find an array of plugins that implement Gatsby APIs. Some plugins are listed by name, while others may take options as well — and gatsby-plugin-sitemap carries options as well.

这些配置选项之一是用于插件的。 在这里，您将找到实现Gatsby API的一系列插件。 有些插件按名称列出，而另一些插件也可以使用选项-gatsby-plugin-sitemap也带有选项。

So, add the following lines of code in your gatsby-config.js file:

因此，在您的gatsby-config.js文件中添加以下代码行：

gatsby-config.js

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Your Site Title',
    siteUrl: 'https://yoursite.com',
  },
  plugins: ['gatsby-plugin-sitemap'],
}

Make sure that inside siteMetadata you change the title and siteUrl according to your project details.

确保内部siteMetadata您更改title和siteUrl根据项目的详细信息。

生成站点地图文件 (Generating A Sitemap File)

To create a sitemap you need to generate a production build and start the server. In your terminal type the following command and hit ENTER.

要创建站点地图，您需要生成生产版本并启动服务器。 在您的终端中，键入以下命令，然后按ENTER 。

• npm run build
  npm运行构建

Wait for a few seconds and you get a working sitemap with Gatsby.

等待几秒钟，您将获得Gatsby的有效站点地图。

By default, the sitemap is generated in the root of your website which is a folder called public . When you deploy your site, you can access it through /sitemap.xml and it will display all of your site’s pages that are currently accessible to users.

默认情况下，站点地图是在您网站的根目录(即名为public的文件夹)中生成的。 部署网站时，可以通过/sitemap.xml对其进行/sitemap.xml ，它将显示用户当前可访问的所有网站页面。

You can access the sitemap of your site with the following URL:

您可以使用以下URL访问站点的站点地图：

https://your-domain/sitemap.xml

The gatsby-plugin-sitemap plugin supports advanced custom options so this default functionality can be changed accordingly. Let’s dig a little deep with these options.

gatsby-plugin-sitemap插件支持高级自定义选项，因此可以相应更改此默认功能。 让我们深入探讨这些选项。

gatsby-plugin-sitemap的高级选项 (Advanced Options for gatsby-plugin-sitemap)

The gatsby-plugin-sitemap supports different advanced options that you can customize to gain more control over your sitemap.xml files. Let’s take a look at some of these:

gatsby-plugin-sitemap支持不同的高级选项，您可以对其进行自定义，以更好地控制sitemap.xml文件。 让我们看一下其中的一些：

• output: The default file name is sitemap.xml you can use the output option to change the name of the output file. For example with output: '/some-other-sitemap.xml', the URL now becomes https://your-domain/some-other-sitemap.xml.

  output ：默认文件名为sitemap.xml您可以使用output选项更改输出文件的名称。 例如， output: '/some-other-sitemap.xml',现在变为https:// your-domain /some-other-sitemap.xml 。

• exclude: This option can help you exclude any links from the sitemap for whatever reasons.

  exclude ：无论出于何种原因，此选项都可以帮助您从站点地图中排除任何链接。

• query: Custom GraphQL query to fetch info like siteMetadata, siteURL, allSitePage, etc.

  query ：自定义GraphQL查询以获取诸如siteMetadata ， siteURL ， allSitePage等的信息。

There are a couple of other handy options as well for sitemapSize and sitemap index. You can visit the official plugin repo for more info here.

sitemapSize和sitemap index还有两个其他方便的选项。 您可以在此处访问官方插件仓库以获取更多信息 。

定制选项示例 (Customized Options Example)

For example, in this tutorial, we’re customizing the plugin’s options to generate data of our choice. Here, we’ve customized the GraphQL query:

例如，在本教程中，我们将自定义插件的选项以生成我们选择的数据。 在这里，我们自定义了GraphQL查询：

{
      resolve: `gatsby-plugin-sitemap`,
      options: {
        query: `{
          site {
            siteMetadata {
              siteUrlNoSlash
            }
          }
          allSitePage {
            edges {
              node {
                path
              }
            }
          }
          allMarkdownRemark {
            edges {
              node {
                fields {
                  slug
                }
              }
            }
          }
        }`,
        serialize: ({ site, allSitePage, allMarkdownRemark }) => {
          let pages = []
          allSitePage.edges.map(edge => {
            pages.push({
              url: site.siteMetadata.siteUrlNoSlash + edge.node.path,
              changefreq: `daily`,
              priority: 0.7,
            })
          })
          allMarkdownRemark.edges.map(edge => {
            pages.push({
              url: `${site.siteMetadata.siteUrlNoSlash}/${
                edge.node.fields.slug
              }`,
              changefreq: `daily`,
              priority: 0.7,
            })
          })

          return pages
        },
      },
    },

Here, we use the query option to fetch data for our site that includes info about siteMetadata and siteUrlNoSlash. Further, we query the allSitePage to get all site pages URL paths that is to retrieve path property for each graph node through all edges. And finally, we use the allMarkdownRemark that reads files written in markdown and then converts them into HTML pages. Here we are getting the slug info for each markdown post from inside the field property.

在这里，我们使用query选项为我们的site获取数据，其中包括有关siteMetadata和siteUrlNoSlash 。 此外，我们查询allSitePage以获取所有站点页面URL路径，该路径将通过所有edges检索每个图node path属性。 最后，我们使用allMarkdownRemark读取以markdown编写的文件，然后将其转换为HTML页面。 在这里，我们所得到的slug从内部每个岗位降价信息field属性。

Towards the end, we’ve called the serialize function to map data that is fetched for allSitePage and allMarkdownRemark. Each returns a page URL with changefreq: 'daily' and a priority: 0.7.

最后，我们调用了serialize函数来映射为allSitePage和allMarkdownRemark获取的数据。 每个都返回一个页面URL，其网址为changefreq: 'daily'和priority: 0.7 。

This was one demonstration of playing around with custom options for the gatsby-plugin-sitemap, you can do it according to the requirement of your project.

这是演示如何使用gatsby-plugin-sitemap自定义选项的gatsby-plugin-sitemap ，您可以根据项目的要求进行操作。

You can access a live sitemap demo for Gatsby.js here.

您可以在此处访问Gatsby.js的实时站点地图演示。

结论 (Conclusion)

Generating sitemaps can be more manageable with Gatsby.js. The result of creating a sitemap.xml file with gatsby-plugin-sitemap shows the developer experience of using Gatsby.js is improving.

使用Gatsby.js可以更轻松地生成站点地图。 使用gatsby-plugin-sitemap创建sitemap.xml文件的结果表明，开发人员使用Gatsby.js的体验正在改善。

翻译自: https://www.digitalocean.com/community/tutorials/building-a-custom-sitemap-for-your-gatsbyjs-site

gatsby