The base layout

The base layout is the basis for all other standard layouts. By default, it includes the Navbar at the top of the page, then provides a full width area in which to place content.

The main content area is provided as a full width area explicitly so that child layouts can decide what they want to do with that area without having to override base.

Full width

Here is an example of some full width content within the base template.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et placerat dui, a tristique nunc. Phasellus at dui ac dui posuere cursus. Sed quis nibh auctor, rhoncus arcu vitae, tincidunt sem. Mauris nec nunc elit. Pellentesque vehicula euismod felis, sed porta metus convallis eu. Vestibulum blandit accumsan justo sit amet efficitur. In odio ipsum, sodales ut tincidunt nec, ultrices eget erat. Ut tristique eget ex quis porttitor. Curabitur quis eleifend arcu, ut elementum libero. Nulla faucibus aliquam odio et congue. Nunc a accumsan lorem. Nam faucibus, enim a scelerisque rutrum, enim nunc varius quam, sit amet fringilla libero sem nec magna. Curabitur risus lectus, dapibus in sollicitudin sit amet, molestie sit amet leo. Proin eget odio ex. Quisque nec urna enim. Vivamus ut luctus velit. Nam nec nisi porta, pretium lorem et, tempor neque. Proin elementum felis vel eros bibendum, eget congue nibh sagittis. Nam viverra scelerisque facilisis. Mauris accumsan tempus dapibus. Pellentesque diam justo, eleifend et mauris efficitur, ultrices venenatis sem. Suspendisse sit amet pulvinar eros, quis commodo lacus. Pellentesque id dui libero. Pellentesque a ullamcorper nunc, sit amet pulvinar nisl. Duis iaculis molestie bibendum. Fusce faucibus, ipsum vel tempor vehicula, neque nunc porttitor neque, at dictum dui lorem.


The base template has a number of blocks that can be utilised.

Head scripts

{% block headScripts %}{% endblock %}

If any scripts are required in the view and need to be included in the head area of the document, then they can be placed inside this block.

As with any block, when integrating into a child template, it's well worth calling {{ parent() }} to avoid overwriting previously set content which may be important for the page to run.

Page title

{% block pageTitle %}Welcome{% endblock %}

The title displayed by the browser is set via the pageTitle block. This defaults to a simple "Welcome".

Any title will be prepended to the text " | Bikmo".


{% block navbar %}
    {% include '@components/navbar/navbar.html.twig' %}
{% endblock %}

The Navbar is included by default on base and all child templates.

If a child template does not want to include the Navbar, this can be achieved by overriding the navbar block. When overriding, the block can be implemented empty, in which case the Navbar will not display, some other content can be inserted instead, or by calling {{ parent() }} it can be added to.

Page menu

{% if block('pageMenu') %}
    {% block pageMenu %}{% endblock %}
{% endif %}

The pageMenu is conditionally displayed if a child template has implemented it.


You may have realised by now that this is quite a pointless condition to check for. If the child template has not implemented the block, then there is nothing to display. If it has been implemented then there is something to display. This is somewhat equivalent to the classic:
if (true) { return true; }.


{% block content %}{% endblock %}

The content block is the primary content block to be used throughout the templating system. Any layout template will include a content block within it where the main content for that layout should be placed. This ensures that any final document template can be sure of where to place the content, and the layout template for any page can be changed with minimal fuss.

Body content

{% block bodyContent %}
    {% block content %}{% endblock %}
{% endblock %}

This block is for child layouts to use, to place their layout within the main content area. For example, a child template may require a two column layout: That structure can be placed in bodyContent, overriding the default block, and can then include the content block inside one of those columns.

Base places the content block directly within the bodyContent block because it does not provide any further content layout.

Inline scripts

{% block inlineScripts %}{% endblock %}

Similar to the headScripts block, the inlineScripts block is used to inject scripts into the page. The scripts here can be script blocks or links to files. Inlien scripts are included at the end of the body, so they will not be loaded/run until they are encountered by the browser.