Creating pages

Register the page route

Open config/autoload/local.php and locate the routes key. Under the page key you will find an associative array with a couple of already existing routes. You create a new route by appending a new line to that array:

'example-page' => 'example-template',

The array key is the page slug, the array value is the template name used by that page.

In order to be displayed this new example-template needs to be added to the website's navigation area. To do this, open src/App/templates/layout/default.html.twig, locate the ul inside the div with id navbarHeader and append the below code to it:

    <li class="nav-item">
        <a class="nav-link" href="{{ url('page::example-template') }}">Example</a>
    </li>

The page content

Each page has its own template, so the next step is to create the template files in the src/Page/templates/page/ folder. For the example above, the src/Page/templates/page/example-template.html.twig file was created. We won't include the entire code here, just the basic building blocks. The content block is where your page copy goes.

{% extends '@layout/default.html.twig' %}

{% block title %}Page Title{% endblock %}

{% block page_title %}{% endblock %}

{% block content %}
    <div class="page-intro">
        <div class="container">
            <h2>Add title here!</h2>
        </div>
    </div>

    <div>
        Add cool content here!
    </div>
{% endblock %}

Grouping templates

The default grouping is under the page folder. This item is defined in src/Page/src/ConfigProvider.php in getTemplates(), like seen below.

    public function getTemplates(): array
    {
        return [
            'paths' => [
                'page' => [__DIR__ . '/../templates/page'],
            ],
        ];
    }

If you intend to group your templates into more folders, simply add another element under paths.

It's not necessary to match the key name with the folder name.

public function getTemplates(): array
{
    return [
        'paths' => [
            'page'    => [__DIR__ . '/../templates/page'],
            'how-tos' => [__DIR__ . '/../templates/how-tos'],
            'info'    => [__DIR__ . '/../templates/data'],
        ],
    ];
}

Accessing the page

The url for the new page in this example is /page/example-page.