在Gatsby中结合Storyblok动态URL生成sitemap.xml

问题背景 #

已通过Gatsby的createPage方法从Storyblok的州级城市列表生成了/tn/xxx、/ap/xxx这类动态页面，但这些页面并未出现在sitemap.xml中。尝试在gatsby-config.js里硬编码城市列表配置sitemap插件，也未成功生成对应条目。

核心问题分析 #

1. 动态路由的matchPath仅用于客户端路由匹配，gatsby-plugin-sitemap默认不会自动抓取该规则下的所有子路径。
2. 之前的配置存在两个关键错误：
   • serialize函数返回字段错误，插件需要的是完整URL字段url，而非siteUrl
   • 硬编码的城市列表未与站点域名拼接成有效URL

解决步骤 #

1. 确保站点域名配置正确 #

在gatsby-config.js的siteMetadata中明确站点根URL：

module.exports = {
  siteMetadata: {
    siteUrl: "https://your-actual-domain.com", // 替换为你的真实域名
  },
  // 其他配置...
}

2. 修改sitemap插件配置，直接从Storyblok获取城市数据 #

无需硬编码，通过GraphQL查询Storyblok中的城市条目，动态生成sitemap路径：

{
  resolve: `gatsby-plugin-sitemap`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            siteUrl
          }
        }
        # 查询Storyblok中所有城市类型的条目（根据你的组件名称调整filter）
        allStoryblokEntry(filter: {field_component: {eq: "city"}}) {
          nodes {
            slug # 城市的slug字段
            field_state_code # 城市所属州的代码（如tn、ap）
          }
        }
      }
    `,
    resolveSiteUrl: ({ site: { siteMetadata: { siteUrl } } }) => siteUrl,
    resolvePages: ({ allStoryblokEntry }) => {
      // 遍历城市数据生成每个页面的路径配置
      return allStoryblokEntry.nodes.map(node => ({
        path: `/${node.field_state_code}/${node.slug}`,
        changefreq: 'weekly',
        priority: 0.7,
      }))
    },
    serialize: ({ path, changefreq, priority }, { siteUrl }) => {
      // 拼接完整URL返回给插件
      return {
        url: `${siteUrl}${path}`,
        changefreq,
        priority,
      }
    },
  },
}

3. 验证生成结果 #

执行gatsby build完成构建后，查看public/sitemap.xml文件，确认/tn/xxx、/ap/xxx这类城市页面路径已被正确收录。

补充说明 #

如果你的城市页面是通过gatsby-node.js的createPage生成的，也可以通过查询Gatsby内部的allSitePage节点来获取所有页面路径，替代查询Storyblok数据的方式：

query {
  site {
    siteMetadata {
      siteUrl
    }
  }
  allSitePage(filter: {path: {regex: "/^/(tn|ap)/"}}) {
    nodes {
      path
    }
  }
}

然后在resolvePages中处理这些路径即可。

内容的提问来源于stack exchange，提问作者Selvaraj