Creating a Layout
This guide will help you create a layout.
Requirements
So that you can follow the steps in this tutorial, you have to have the pos-cli installed, an environment configured, and the codebase set up (or at least have a app directory). You should also understand the concept behind layouts.
- Get Started Guide: helps you get access to our platform, set up a site, install the pos-cli, set up the codebase, and deploy to your site.
- Layouts: explains what layouts are, and how to use them.
Steps
Creating a Layout is a three-step process:
Step 1: Create a directory for layouts
In order to correctly communicate with the platformOS engine and API, your codebase should be organized into a specific directory structure. The root directory of your project should contain the app directory, and layouts should be placed into the views/layouts directory inside app.
If you are starting from scratch (without having created the codebase), create a views directory inside app, then a layouts directory inside views.
If you have already installed the codebase, you can skip this step, and just locate your app/views/layouts directory.
Step 2: Create a layout file
In the layouts directory, create a Liquid file called application.liquid.
Step 3: Edit the Layout file
Edit the application.liquid layout file.
Find a sample layout file with explanations below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page title</title>
</head>
<body>
<h1>Layout</h1>
{{ content_for_layout }}
</body>
</html>
The special variable {{ content_for_layout }} renders the page content at the exact place where it has been included.
Save your layout file.
Next steps
Congratulations! You have created a layout file. Now you can create a page that uses this layout.