链接到首页 GatsbyJS 和 WP REST API 菜单

Question

每次我尝试 link 到我的 Gatsby 构建的首页时，它都会附带一个对象 slug，它会在我的菜单中创建错误的 link。我已经在我的 WordPress 设置中将网站设置为使用静态首页，因此首页根本不应该有一个 slug。

目前我菜单中的首页 link 是 testpage。local/frontpage 这是错误的，因为应该没有 slug。我试过直接使用 url 而不是 object_slug 但是 link 是测试页。local/testpage.local/

我也曾尝试创建自定义的菜单项 link，但由于它 linking 到“/”，它得到相同的 object_slug（首页）。

因此，我如何使用 object_slug 但告诉 WordPress 我的首页没有任何 slug？

我正在使用的查询：

{
  allWordpressWpApiMenusMenusItems {
    edges {
      node {
        items {
          title
          object_slug
          url

        }
      }
    }
  }
}

这个returns

{
  "data": {
    "allWordpressWpApiMenusMenusItems": {
      "edges": [
        {
          "node": {
            "items": [
              {
                "title": "Frontpage",
                "object_slug": "frontpage",
                "url": "/"
              },
              {
                "title": "Dummy page",
                "object_slug": "dummy-page",
                "url": "http://testpage.local/dummy-page/"
              }
            ]
          }
        }
      ]
    }
  }
}

正在创建菜单：

const MainMenu = () => (
  <StaticQuery query={graphql`{
        allWordpressWpApiMenusMenusItems {
          edges {
            node {
              items {
                title
                object_slug
                url
              }
            }
          }
        }
      }
      `} render={props => (
      <div>
        {props.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(item => (
          <Link to={item.object_slug} key={item.title}>
            {item.title}
          </Link>
        ))}
      </div>
    )} />
);

export default MainMenu;

Answer 1

以下是对我有用的方法：

使用item.url代替item.object_slug

{props.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(item => (
  <Link to={item.url} key={item.title}>
    {item.title}
  </Link>
))}

然后你需要安装 gatsby-source-wordpress 如果你还没有。

最后，将此添加到您的 gatsby-config.js

{
  resolve: "gatsby-source-wordpress",
  options: {
    // your config...
    searchAndReplaceContentUrls: {
    sourceUrl: "https://example.com", // WordPress URL
    replacementUrl: "http://localhost:3000", // Gatsby URL
    ,
  },
}

Answer 2

我遇到了同样的问题。我的解决方案是更改 replacementUrl: "".

{
  resolve: "gatsby-source-wordpress",
  options: {
    // your config...
    searchAndReplaceContentUrls: {
    sourceUrl: "https://example.com", // WordPress URL
    replacementUrl: "", // Gatsby URL
    ,
  },
}

链接到首页 GatsbyJS 和 WP REST API 菜单

Linking to front page GatsbyJS & WP REST API Menus

wordpress

reactjs

graphql

gatsby

headless-cms