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 ofmaster.twig
. - Lines #5-#7: injecting a javascript codes to the page inside this block.