Gatsby: Layouts and Templates - How are they supposed to work and how do they work right now?

Created on 11 Jul 2017 · 3Comments · Source: gatsbyjs/gatsby

These two concepts seem redundant. And I've seen some issues suggesting they aren't fully sorted out in V1. Can someone clarify how they should work and how they do?

1) Why do both layouts and template components exist?

1) How do you select alternative layouts for content? (I saw a frontmatter field in the blog starter, but I couldn't trace it to any actual effect. In any case, this seems like the kind of thing you'd do in createPages, not a built-in frontmatter override doesn't it?)

2) How do nested templates work? Or how should they work? Or why would you need them if you can select different template components for different pages?

Thanks!

Source

mikestopcontinues

👍3

Most helpful comment

you can take Layout as a higher order template which controls other templates and passes the global components like Nav, Footer..., and use specific templates to differentiate the contents. For example, If I created one Layout with Nav bar and Footer, and two templates named Pages and Blogs, both Pages and Blogs would take Nav bar Footer from Layouts, and have different content within.

casprwang on 11 Jul 2017

👍9

All 3 comments

re 1) Template components are for page types e.g. blog posts, documentation pages, etc. Layout components are for everything shared across pages e.g. headers, footers, sidebars, etc. They're both needed because they're very different things :-) Read https://www.gatsbyjs.org/docs/building-with-components/ as well

re 2) you can't right now. This is something we'll support in the future. Those frontmatter fields were old and not used. Sorry about that. Just removed them. Markdown posts are created with createPage so one possible way of allowing a markdown post to override the default layout would be using frontmatter to select a layout.

re 3) also not supported yet but planned for the future. One use case is you have a global layout with a header/footer and then a sub-section of the site that has a secondary sidebar navigation.