Skip to content
Basker Docs
Themes APIs

Layouts

Layouts are the base of the theme, through which all templates are rendered.

Layouts are Liquid files that allow you to include content, that should be repeated on multiple page types, in a single location. For example, layouts are a good place to include any content you might want in your <head> element, as well as headers and footers.

You can edit the default default.liquid layout, or you can create multiple custom layout files to suit your needs. You can specify which layout to use, or whether to use a layout at all, at the template level. The layout that’s used to render a page is specified using the layout Liquid tag.

Location

Layout files are located in the layouts directory of the theme:

└── theme
    ├── layouts
    |   ├── default.liquid
    |   ...
    ├── templates
    ...

Schema

Because layout files are the base of the theme, they should follow the structure of a MDN Web Docs: Document and website structure in most cases. Most layout files also contain the following Liquid objects:

  • content_for_header
  • content_for_layout
basic_layout_example.liquid
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    ...
5
    {{ content_for_header }}
6
    ...
7
  </head>
8


9
  <body>
10
    ...
11
    {{ content_for_layout }}
12
    ...
13
  </body>
14
</html>

Content

Layouts allow you to include content that’s repeated across multiple page types in a single location. For example, layouts might include header and footer sections and SEO metadata.

Layout files are .liquid files, so content can be built using standard HTML and Liquid.

Layouts can access any global Liquid objects and can contain the following Liquid objects:

  • content_for_header
  • content_for_layout

content_for_header

The content_for_header object is required in default.liquid. It must be placed inside the HTML <head> tag. It dynamically loads all scripts required by Basker into the document head. These scripts are required for features like reCAPTCHA, Basker apps, and more.

You shouldn’t try to modify or parse the content_for_header object. If content_for_header changes, then the behavior of your Liquid will change.

content_for_layout

The content_for_layout object dynamically outputs the content for each template. You need to add a reference to this object between the <body> and </body> HTML tags.