How to: Create a Page
Before you begin the steps in this topic, you might need to run the theme install command in the Square Online CLI to install a theme on the site. For more information, see Get Started.
1. Create a template
The first step is to create a template file. For this example we will create a template named example.html.twig. The .html.twig extension is required for template files. Page templates must go in the theme/templates/pages directory.
Usually page templates will extend from a layout so that multiple templates can share common structure and styling. Our example page will extend from a layout named layout-1.html.twig. Layouts also use the .html.twig extension and must go in the theme/layouts directory.
The directory structure will look like this:
site
global
pages
theme
assets
components
config
layouts
- layout-1.html.twig
partials
templates
pages
- example.html.twig
store
The layout-1.html.twig file will look like:
<!DOCTYPE html>
<html lang="{{ square.site.language }}">
<head>
<title>{% block title %}{{ square.site.title }}{% endblock %}</title>
{% block head %}
{% endblock %}
{{ head_trackers() }}
</head>
<body>
<div class="header">...</div>
<div class="main">
{% block main %}
{% endblock %}
</div>
<div class="footer">...</div>
{{ body_trackers() }}
</body>
</html>
The block tags allow templates that extend this layout to overwrite those areas.
The example.html.twig template looks like:
{% extends "layouts/layout-1" %}
{% block main %}
<div>Hello World</div>
{% endblock %}
Note that the layout’s extension is not used when referencing it in the extends tag.
2. Assign the template to a page
The next step is to create a file in site/pages and assign the template to the page. For this example the page file will be called myPage.json.
With this new file the directory structure looks like:
site
gobal
pages
- myPage.json
theme
assets
components
config
layouts
- layout-1.html.twig
partials
templates
pages
- example.html.twig
store
The content of myPage.json is:
{
"template": "templates/pages/example",
"route": "example"
}
Once this file is created you will now be able to see your template rendered at the /example route. Again note that the .html.twig extension is not used when referencing the template.
It is required that all pages have distinct routes on your site
You can assign multiple pages to the same template.