In this section we'll dive deeper into the theme configuration file, the sections inside, and what are their roles.
It's best to follow this article by viewing the default Page Builder theme. You can find it here on github.
The main configuration file is found under the
src/index.ts. This file exports a list of Page Builder theme plugins, and that's what you later import in your
site app and then register as a plugin.
The configuration file is structured in several sections like so:
As it's illustrated, we export a plugin that holds a theme definition, then a plugin for a layout to render static pages, and finally several layout components to render the main theme elements such as header and footer.
The reason why we don't "lump" all these elements into a single plugin is because this way you can overwrite just a specific piece of a particular theme with your own plugin, without the need to copy or replace the whole theme.
For example, if you wanted to replace the header with your custom component, you could to this:
This is the plugin that registers the actual theme, together with several other elements.
In full a
pb-theme plugin contains the following elements:
Learn more about the specific theme elements:
The layout plugin is used to register layouts. Layouts are used to render the page content. Here is an example of how to register a layout:
Each layout has the following attributes:
name- internal identifier for that particular layout
type- plugin type, must be set to
layout- an object containing the layout
titleand a React
componentused to render the layout
To introduce multiple layouts all you need to do is register multiple
It's also quite easy to register a new layout into the default theme:
To learn more about layouts and how to compose one, have a look at the layouts page.
This plugin is used to register various theme layout components, such as header, footer and a loader component.
We intentionally decoupled those elements from the theme so you have the option to overwrite only parts of your theme.
You can view the content of those elements inside the default theme on github. Also to overwrite any of those elements with your own component you just need to register a new plugin under the same name.