[lightMode]

Master Layout

The master.twig is the default "layout" which comes with Twilight theme and applies it on all of the theme's pages. It calls many of the main global variables. This is to set the main look-and-feel settings for the theme. Below is its location inside the "layouts" folder:

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

📙 What you'll learn

By the end of this article, you will learn about:

Global variables
The main blocks of the master.twig layout
Example of using master.twig layout

Global Variables

The master.twig file is considered the file that sets the shared layout and look-and-feel of the whole website. As a result of that, the developer may call within this master view any global variable or theme setting variable. These values will be used on all of the pages that extend this layout.

The theme settings variables are part of the twilight.json file as we can see in the theme settings section. For example, we have a setting defined as topnav_is_dark. The developer may use any of the following methods to retrieve, get, its value:

...
{{ theme.settings.get("topnav_is_dark") }}
...

Main Blocks

The developer has the option to create a new theme's layout. However, it's essential to be inspired by the default master.twig layout file because it shows the main blocks that the developer should include with any new main layout.

The default master.twig layout file includes predefined blocks used by any page that extends this layout. These blocks are:

Styles Block: used in pages to inject the needed css-style.
```
{% block styles %}{% endblock %}
```
Head Block: used in pages to inject the needed code to be added into the section.

{% block head %}{% endblock %}

Content Block: used in pages to inject the needed code to be added into the section.

{% block content %}{% endblock %}

Script Block: used in pages to inject the needed js-script.

{% block scripts %}{% endblock %}

In addition to the above requirements, it is a must to add some hooks blocks to the master layout. In general, hooks are Twig tags that can have content injected into the Twilight theme. For example, the following are hooks responsible for adding the SEO-related meta data to the page header section:

<head>
...
{% hook 'head:start' %}
...
{% hook 'head' %}
...
{% hook 'head:end' %}
</head>

Usage

By exploring the views\pages\index.twig file, which is the Home Page is of the theme, we can see the following:

{% extends "layouts.master" %}
{% block content %}
    {% component home %}
{% endblock %}
{% block scripts %}
    <script type="text/javascript" defer src="{{ home.js |asset('dist/home.js') }}"></script>
{% endblock %}

Line #1: extending the "layouts.master", which is master.twig.
Lines #2 to #4: injecting the {% component home %} inside the block {% block content %}. This mean that all of the home-releadted components will be insterted inside the block content as per the layout design of master.twig.
Lines #5-#7: injecting a javascript codes to the page inside this block.

[updatedIn] a year ago