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 ispage.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 ofwidgets
, each widget must have his template file, i.e. thetabbed
widget must have atabbed.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 theconfig
field, for example, if you have into config file a list calledMainMenu
, 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 -%}