Create Twig Page

All pages file located in /entries folder, for example, we can create a page named /entries/flower.twig with content:

<h1>Flower</h1>

Now use browser open http://localhost/{VASEMAN_PATH}/flower.html. You will see this output:

<h1>Flower</h1>

We didn't generate any static page, this is auto rendered dynamic page.

Extends Layout

We need a HTML layout to wrap our content, there has 2 ways to extends layouts.

Vaseman Layout Config

Add layout config on above:

---
layout: html.twig
---
<h1>Flower</h1>

Create a html.twig file in /layouts and add {{ content|raw }} to show our content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Site</title>
</head>
<body>
    {{ content|raw }}
</body>
</html>

The output is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Site</title>
</head>
<body>
    <h1>Flower</h1>
</body>
</html>

NOTE: Layout files should all put in /layouts folder

Twig Extends Tag

We can also use extends tag to wrap our content, please see Twig Extends Tutorial.

For example, create a file extends to html2.twig and a block content wrap our content.

{% extends 'html2.twig' %}

{% block content %}
<h1>Flower</h1>
{% endblock %}

Then we have to write a layouts/html2.twig file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Site</title>
</head>
<body>
    {% block content %}
    Default Content
    {% endblock %}
</body>
</html>

The output will also look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Site</title>
</head>
<body>
    <h1>Flower</h1>
</body>
</html>

Help improve our documentation