Templates
Templates are files that contain static data as well as placeholders for dynamic data. A template is rendered with specific data to produce a final document. Flask uses the Jinja template library to render templates.
A
view function is the code you write to respond to requests to your application. Flask uses patterns to match the incoming request URL to the view that should handle it. The view returns data that Flask turns into an outgoing response. Flask can also go the other direction and generate a URL to a view based on its name and arguments.
Base Template
Each page in the app will have the same basic layout around a different body. Instead of writing the entire HTML structure in each template, each template will extend the base template and override certain sections.
starterkit/templates/layout/master.html
<!DOCTYPE html>
<html lang="en" {{ printHtmlAttributes('html') }}>
<!--begin::Head-->
<head>
<title>{% block title %}{% endblock title %} - Keenthemes</title>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="" />
<link rel="canonical" href=""/>
<link rel="shortcut icon" href="{{ includeFavicon() }}"/>
{% block css %}
<!--begin::Fonts-->
{{ includeFonts() }}
<!--end::Fonts-->
<!--begin::Vendor Stylesheets(optional)-->
{% for file in getVendors('css') %}
<link href="{{ file }}" rel="stylesheet" type="text/css" />
{% endfor %}
<!--end::Vendor Stylesheets-->
<!--begin::Custom Stylesheets(optional)-->
{% for file in getCustomCss() %}
<link href="{{ url_for('static', filename=file) }}" rel="stylesheet" type="text/css" />
{% endfor %}
<!--end::Custom Stylesheets-->
<!--begin::Global Stylesheets(mandatory)-->
{% for file in getGlobalAssets('css') %}
<link href="{{ url_for('static', filename=file) }}" rel="stylesheet" type="text/css" />
{% endfor %}
<!--end::Global Stylesheets-->
{% endblock css %}
<!--begin::Tracking-->
<!--end::Tracking-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body {{ printHtmlClasses('body') }} {{ printHtmlAttributes('body') }}>
{% block layout %}
{% endblock layout %}
{% block javascript %}
<!--begin::Global Javascript(mandatory)-->
{% for file in getGlobalAssets('js') %}
<script src="{{ url_for('static', filename=file) }}"></script>
{% endfor %}
<!--end::Global Javascript-->
<!--begin::Vendors Javascript(optional)-->
{% for file in getVendors('js') %}
<script src="{{ file }}"></script>
{% endfor %}
<!--end::Vendors Javascript-->
<!--begin::Custom Javascript(optional)-->
{% for file in getCustomJs() %}
<script src="{{ url_for('static', filename=file) }}"></script>
{% endfor %}
<!--end::Custom Javascript-->
{% endblock javascript %}
</body>
<!--end::Body-->
</html>Global Partials
starterkit/templates/layout/metronic/demo1/dark-sidebar/default.html
{% extends 'layout/master.html' %}
{% block layout %}
<!--begin::Root-->
<div class="d-flex flex-column flex-root" id="kt_app_root">
<!--begin::Page-->
<div class="app-page flex-column flex-column-fluid" id="kt_app_page">
{% include 'layout/metronic/demo1/dark-sidebar/partials/_header.html' %}
<!--begin::Wrapper-->
<div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
{% include 'layout/metronic/demo1/dark-sidebar/partials/_sidebar.html' %}
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
<!--begin::Content wrapper-->
<div class="d-flex flex-column flex-column-fluid">
{% include 'layout/metronic/demo1/dark-sidebar/partials/_toolbar.html' %}
<!--begin::Content-->
<div id="kt_app_content" class="app-content flex-column-fluid">
<!--begin::Content container-->
<div id="kt_app_content_container" class="app-container container-fluid">
{% block content %}
{% endblock content %}
</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
<!--end::Content wrapper-->
{% include 'layout/metronic/demo1/dark-sidebar/partials/_footer.html' %}
</div>
<!--end:::Main-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::Root-->
{% include 'partials/_drawers.html' %}
{% endblock layout %}Layout Partials
A template is a text file.
The template contains variables, which are replaced by values when the template is evaluated, and tags, which control the logic of the template.
Below is a minimum template that illustrates some of the basics.
themeDir() function prepend the value from settings settings.KT_THEME_DIR
{% include themeDir('/partials/aside/_base.html') %}
2024©
Keenthemes
