Phenomic uses React components as layouts.
By default, Phenomic offers you the following layouts:
If you use the
PageContainer, you will need those components in
layouts definition (by default, declared in
To use your custom layout, add the
layout option to the
YAML frontmatter of
your Markdown file like so:
title: Hello World layout: MyCustomLayoutComponent
propssent to layouts
Layouts receive data handled by Phenomic. Here are the props that you can use:
This boolean value tells you when a layout only have partial data (only the head). This allows you to display a content placeholder or a spinner while data are being downloaded.
This object contains data from the front-matter and is always available.
You might find data such as page
layout or whatever
your files contains.
This data is the body of your files, and is available when content are loaded.
You might only try to display this when
isLoading is false.
This string contains the file path of your current resource (relative to project root)
This string contains the url of your current resource.
Page will be used as the default layout.
It is required for Phenomic to work by default.
PageError will be used as the default layout when a page has an error
(eg: http 404 not found).
This layout is optional and a
PageContainer contains a minimal fallback if
it is not available.
This layout is optional and deprecated, prefer handling loading state directly in your layouts.
If you are using
PageLoading and want to have some custom loading state for
some layouts, you can define
hasLoadingState static value on your layouts
to tell Phenomic to use your layout loading state instead of
If you are not satisfied with the default loading layout, feel free adjust it by grabbing some CSS or SVG spinners/loaders from:
Or learn how to make your own: