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

Question

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

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

我还尝试创建 menuitem 是一个自定义链接，但由于它链接到“/”，它得到相同的 object_slug（首页）。

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

我正在使用的查询：

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

        }
      }
    }
  }
}

这返回

{
  "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

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

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

Answer 2

这对我有用：

使用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
    ,
  },
}