Ссылка на главную страницу GatsbyJS & WP REST API Menus

Каждый раз, когда я пытаюсь создать ссылку на мою первую страницу в моей сборке Gatsby, он приходит с ярлыком объекта, который создает неправильную ссылку в моем меню. Я установил для сайта использование статической главной страницы в своих настройках WordPress, поэтому на главной странице вообще не должно быть слагов.

На данный момент ссылка на первую страницу в моем меню - testpage.local / frontpage, что неверно, поскольку не должно быть ярлыка. Я пробовал использовать прямой URL вместо object_slug, но тогда ссылка testpage.local / testpage.local /

Я также попытался создать элемент меню как настраиваемую ссылку, но поскольку он ссылается на «/», он получает тот же 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;

reactjs wordpress gatsby graphql headless-cms
person TurboTobias    schedule 14.03.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вот что у меня сработало:

Используйте 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
    ,
  },
}
person awran5    schedule 14.03.2020
comment
Я уже пробовал это, но потом мои ссылки выглядят так: http://testpage.local/http://testpage.local/ - person TurboTobias; 14.03.2020
comment
Попробуйте очистить кеш gatsby и пересобрать. Вам необходимо перезапускать сервер при каждом gatsby-config.js изменении. - person awran5; 14.03.2020

arrow_upward
0
arrow_downward

Я столкнулся с той же проблемой. Решением для меня было изменить replacementUrl: "".

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