Templates

Templates are written in Jinja2 look at his documentation for details.

Almoststatic add only a few rules:

  • Into pages you can set the templ_name metadata field or accept the default which is page.html here a sample:

    {%extends page.extends or "base.html" %}
{%block body%}
<main role="main">
{{content}}
</main>
{%endblock%}

    The content field is the content of page with list of widgets.

  • The extends metadata field in page can change the base of page, if not present accept the default. The base template contain the common part for each page, to simplify:

    <!DOCTYPE html>
<head>
<title>{{page.title}}</title>
<meta name="description" content="{{page.description}}">
<meta name="author" content="{{page.author}}">
<meta name="generator" content="{{meta.generator}}">
<link rel="stylesheet" href="{{get_media('css/main.css')}}">
</head>
<body>
<div class="container">
   {% block body %}
   {% endblock %}
</div>
<script src="{{get_media('js/main.js')}}" type="text/javascript"></script>
</body>
</html>

  • The content part of a yaml page file, is al list of widgets, each widget must have his template file, i.e. the tabbed widget must have a tabbed.html like this:

    {%include "include/widget_style.html" -%}
<div id="{{widget.id}}" class="{{widget.class}}">
<ul class="nav {{widget.tabs_style or 'nav-tabs'}}" role="tablist">
    {% for i,item in enum_list(widget.tabs) -%}
    <li class="nav-item" role="presentation">
    <button class="nav-link {{' active' if item.active else ''}}" id="nav-{{widget.id}}{{i}}-tab" data-bs-toggle="tab"
        data-bs-target="#nav-{{widget.id}}{{i}}" type="button" role="tab" aria-controls="{{item.label}}"
        aria-selected="{{'true' if item.active else 'false'}}">{{item.label}}</button>
    </li>
    {% endfor -%}
</ul>
<div class="tab-content" id="nav-{{widget.id}}-content">
    {% for i,item in enum_list(widget.tabs) -%}
    <div class="tab-pane fade{{' show active' if item.active else ''}}" id="nav-{{widget.id}}{{i}}" role="tabpanel"
    aria-labelledby="nav-{{widget.id}}{{i}}-tab">{{item.text|safe}}</div>
    {% endfor -%}
</div>
</div>

    Within a widget template you have access to the widget object with all values declared into yaml file.

  • In each template you have access to the page object with all it’s metatada fields, the content list and all extra fields added to it.

  • In each template you have access to global data declared in config.yaml file also as a dictionary in the config field, for example, if you have into config file a list called MainMenu, you can write something like:

    {% for item in config[page.menu] or MainMenu -%}
<li>
<a href="{{get_url(item.url)}}">{{ item.name }}</a>
</li>
{% endfor -%}