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
.
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.
{% 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.
{% 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.
{% 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.
{% 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.
{% 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.