[lightMode]

Overview

Layouts are considered the foundation for Salla theme, through which all of the theme pages will share the same layout. When building a Salla theme, you will need to start by planing for your layouts, so then you can use them to unify your pages' look-and-feel.

📙 What you'll learn about

Locate Layout files .
Master layout hooks.
Using layouts.
Embed theme pages within the layout.
Build a new layout.

Locate Layout files

According to the Twilight directory structure, all of the layouts should be stored in the src/views/layouts/ folder.

└── src
  ├── views
  |    ...
  |  ├── layouts
  |   ...

Master layout hooks

Most of the theme hooks are used within the master layout. This is due to the fact that this layout, which can be overwritten by the developer, is used across all of the website pages. It means that all of the hooks' contents will be injected into all of the website pages.

Using layouts

As we saw in the Twig basic syntax, template inheritance is one of twigs perks; it allows you to set a base code that contains all of the elements for your website and define blocks that can override from child templates.

Inheritance is the main concept of building layouts. The developer starts by creating an HTML page with the overall skeleton of the theme pages, with creating blocks inside it for future content. These future contents will be filled by the page that will inherit this layout page.

:::info[Information]
A default layout is created at src/views/layouts/master.twig.
:::

Embed theme pages within the layout.

In order to embed the theme pages within the layout page, first we need to extend, inherit, the layout page. In the following example, we have a mylayout.twig file where we define three blocks: head, title and footer.

<!DOCTYPE html>
<html>

<head>
  <title>{% block title %}{% endblock %} - My Webpage</title>
  {% block block_with_default_content %}
  <link rel="stylesheet" href="style.css" />
  {% endblock %}
  {% block head %}{% endblock %}
</head>

<body>
  <div id="content">
    {% block content %}{% endblock %}
  </div>
  <div id="footer">
    {% block footer %}{% endblock %}
    &copy; Copyright 2011 by <a href="http://domain.invalid/">you</a>.
  </div>
</body>

</html>

To embed the theme pages within this layout, we start by extending them. Then we will enject the content into the defined three blocks: head, title and footer.

{% extends "mylayout.twig" %}

{% block title %}Index{% endblock %}

{% block head %}
<style type="text/css">
  .important {
    color: #336699;
  }
</style>
{% endblock %}

{% block block_with_default_content %}
{{ parent() }}
<div>lets append a new content to our main block</div>
{% endblock %}

{% block content %}
<h1>Index</h1>
<p class="important">
  Welcome to my awesome homepage.
</p>

Build a new layout

Building layouts is easy with Twilight; we simply need to create any new layout file inside the folder src\views\layouts\. This step will make the layout available throughout the theme pages.

:::tip[]
Note that all of the new files are nothing but *.twig files.
:::

The main two steps for building layouts are:

Create an HTML file, with the extension *.twig, that contains the main skeleton of your theme with creating blocks inside it for future contents.
Extend this layout page inside your theme's pages, and enject the content within the predefined blocks.

[updatedIn] 4 months ago