为具有多语种的网站的语言切换者创建链接映射

Question

我正在使用GatsbyJS创建一个多语言站点，使用WordPress作为后端，并由polylang负责翻译。一切正常，但是有点破旧，而且不尽人意。

我的主要问题是我只能在该页面本身内为每个页面创建语言切换器。我的目标是能够以某种方式创建可以在Header或Layout组件内部使用的链接映射。我不确定如何访问那里的数据。

我尝试查询布局中的所有页面和翻译，并进行相应的链接，以便能够切换语言和路径，但未成功：/

我已经找到了应该放在gatsby-node.js中的以下代码段，但老实说，不知道如何充分利用它：

const buildLinkMap = ({ getNodes }) => {
  const linkMap = {}

  const typeMap = {
    wordpress__PAGE: "page",
  }

  for (let node of getNodes()) {
    if (node.internal.type in typeMap) {
      linkMap[node.wordpress_id] = buildLink({
        lang: node.lang,
        slug: node.slug,
        type: typeMap[node.internal.type],
      })
    }
  }
  return linkMap
}

在页面内部，这是我创建相应链接的方式：

{page.polylang_translations.map(polylang_translations => (
      <Link
        to {`${polylang_translations.polylang_current_lang}/${polylang_translations.slug}`}>
        {polylang_translations.polylang_current_lang}
      </Link>
))}

例如，在“关于”页面上，这将为我提供以下链接：

1. / en / about
2. / de / ueber-uns
3. / es / nosotros

因此，在页面级别上，它工作正常，但似乎很多余，并且在每个页面上重复此错误，然后再使用css入侵标题，这显然是错误的。

任何想法或指针将不胜感激！