Layout data

When you export a Theme or Plugin, by default, the layout will be a simple header and footer with the main content between. You can see this in the exported theme/plugin's public/data/layout.json:

public/data/layout.json

{
  "layout": {
    "contentIndex": 1,
    "sections": [
      {
        "name": "header"
      },
      {
        "name": "footer"
      }
    ]
  }
}

The "contentIndex" with value of 1 means that the main content (all the module's sections) should be inserted at an index of 1. In the sections array above, inserting at index of 1 would put the main content between the header and the footer. When the site is built from the theme, the components/layout/layout.js file would look like this:

components/layout/layout.tsx

// import-slot
// end-import-slot
 
const Layout = (props: any) => {
  if (!props) return <></>;
  const { children, layoutComps, page } = props;
  return (
    //content-slot
    <div>
      {/* section-slot */}
      <div className="layout">
        {page &&
          layoutComps.length > 0 &&
          layoutComps.map((Section: any, i: number) => {
            return (
              <div key={i}>
                <Section content={page.layout.sections[i].content} />
                {i === page.layout.contentIndex - 1 && (
                  <main id="main">{children}</main>
                )}
              </div>
            );
          })}
      </div>
      {/* end-section-slot */}
    </div>
    // end-content-slot
  );
};
 
export default Layout;

Slots

The layout file needs to include comments to represent where the imports, main content, and sections should be injected. See the example code above for how these are implemented.

Please note that Built.js themes and sites use one common layout for all pages.

Layout data

Slots

On this page