Layouts are React components that allow you to template the HTML around your page content (a concept borrowed from Rails).

This could include things like:

  • Tags for your <head>
  • Shared header, footer or sidebar

Unlike Rails, you don't need to directly template your layout's <head> tags in place. Instead, manage those tags with react-head and Tropical will put everything in the right place in the final rendered HTML document.

Default and alternative layouts

Pages use src/layouts/DefaultLayout.jsx by default. You can safely edit the DefaultLayout provided by Tropical.

To specify a different layout for a page, provide a component to the page's meta.Layout:

import DifferentLayout from '../layouts/different_layout'
export const meta = {
title: 'Page with different layout',
Layout: DifferentLayout

Layout props

Layout components are rendered with 3 props:

  • pages (object) — an object containing all of the site's page components, keyed by pathname
  • meta (object) — the current page's meta object
  • children (React Element) — the current page content

Next: JSON Feed