2

UPDATE

Digging a little deeper into the Gatsby docs I've found what looks like some potential solutions in:

Still tinkering with my content types in Kontent and figuring out the GraphQL bit.

=============

ORIGINAL:

I'm transitioning to the use of JAMStack and headless CMS from more traditional out-of-the-box CMS solutions.

While playing around with Gatsby and Kontent trying to build a proof of concept for a migration, I've got stuck on how navigations and breadcrumbs can be generated, which I've taken for granted with a traditional CMS content hierarchy.

I've read through some articles and gradually getting the concept of using content types to build a navigation.

How does that pull together and generate the links though from an otherwise flat content hierarchy?

e.g. www.example.com/some/deep/linked/page

Thanks

Simply007
  • 444
  • 3
  • 14
m80her
  • 53
  • 6

1 Answers1

2

I've just moved over to Kontent from traditional CMS frameworks, so I know how you feel! I presume you have read the Kontent tutorial on navigation? Option C gives you the traditional hierarchical CMS content tree with the linked items on the navigation item content type. That allows menus to be built easily enough.

In Gatsby I've personally just used URL slugs as the paths for the pages to create. This is done in your gatsby-node.js file where you can use GraphQL to query content and then create nodes like this:

_.each(result.data.allArticles.nodes, node => {
  createPage({
    path: `/articles/${node.elements.article_url_slug.value}/`,
    component: slash(articleTemplate),
    context: { slug: `${node.elements.article_url_slug.value}` },
  })
})

As long as your content editors maintain the slugs this will work. If you want to generate paths automatically based on the menu structure you could extend the navigation item content type by adding a linked item for the content item, perhaps instead of the URL field. Then when creating nodes you could loop through your navigation tree and construct a path as you go based on the item titles, looking up the type of the content item so you can use the appropriate component and pass it the required context.

You could then use the same hierarchy in a breadcrumb component - you'd just need to search through the navigation items for the current item and then step back up the tree. Make sense?

Whilst it can be frustrating at first to have to build all this infrastructure, I like the total freedom and the ability to choose the right approach for the specific needs of the project.

Rob West
  • 5,189
  • 1
  • 27
  • 42
  • 1
    Thanks Rob. We're happy for content editors to create individual page slugs, but for deep linking (some sections go 4 levels deep) I think we're safer generating them programmatically. I'm now working my way through the Gatsby docs to relearn how to build websites :) Kentico CMS R.I.P. – m80her Jun 08 '20 at 14:19
  • 1
    Just FYI: we have been working on that in this issue: https://github.com/Kentico/kontent-gatsby-packages/issues/149 – Simply007 Jun 17 '20 at 16:07