layouts are linked to page categories. When you create a page category, say "Blog", you need to select a layout inside which that content will be displayed.
The options available inside the layout dropdown are registered by the
Each page created inside the "Blog" category, by default, will use that layout. However, inside the page settings, you can overwrite that on a per-page basis if you need to.
A layout is a simple React component which receives several props. Here is an example of the static layout which comes with the default theme:
By default, if you are creating your own theme, make sure to include the
The upper bit of the static layout that uses the
useMemo React hook is a simple optimization that prevents the need to call
getPlugins function when a component needs to render. You can just copy/paste that block into your own layout.
All other bits are up to you. You can insert any DOM structure with any custom CSS classes you require. You can also import and use pretty much any 3rd party NPM library here.