HTML file structure
Django provides jinja web template engine for reducing the code repetition. We have used jinja through out our theme, making it more readable and easy to modify.
We have created base.html which contains all the common css and javascript files and we have also included header and footer in this file as they are the same in majority of the pages.
Base.html
{% load static %} {% load sass_tags %}
<!DOCTYPE html>
<html lang="en" dir="{{layout}}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="Admiro admin is super flexible, powerful, clean & modern responsive bootstrap 5 admin template with unlimited possibilities." />
<meta name="keywords"
content="admin template, Admiro admin template, dashboard template, flat admin template, responsive admin template, web app" />
<meta name="author" content="pixelstrap" />
<link rel="icon" href="{% static 'assets/images/favicon.png'%}" type="image/x-icon" />
<link rel="shortcut icon" href="{% static 'assets/images/favicon.png'%}" type="image/x-icon" />
<title>Admiro - Premium Admin Template</title>
<!-- Google font-->
<link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i,700,700i&display=swap"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900&display=swap"
rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/css/font-awesome.css' %}" />
<!-- ico-font-->
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/vendors/icofont.scss' %}" />
<!-- Themify icon-->
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/vendors/themify.scss' %}" />
<!-- Flag icon-->
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/vendors/flag-icon.scss' %}" />
<!-- Feather icon-->
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/vendors/feather-icon.scss' %}" />
<!-- Plugins css start-->
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/vendors/scrollbar.scss' %}" />
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/vendors/animate.scss' %}" />
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/vendors/chartist.scss' %}" />
<!-- <link rel="stylesheet" type="text/css"href="{% sass_src 'assets/scss/vendors/date-picker.scss' %}"> -->
{% block css %} {% endblock %}
<!-- Plugins css Ends-->
<!-- Bootstrap css-->
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/vendors/bootstrap.scss' %}" />
<!-- App css-->
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/style.scss' %}" />
<link id="color" rel="stylesheet" href="{% sass_src 'assets/scss/color-1.scss' %}" media="screen" />
<!-- Responsive css-->
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/responsive.scss' %}" />
</head>
<body class="{{layout}}">
<!-- loader starts-->
<div class="loader-wrapper">
<div class="loader-index"><span></span></div>
<svg>
<defs></defs>
<filter id="goo">
<fegaussianblur in="SourceGraphic" stddeviation="11" result="blur"></fegaussianblur>
<fecolormatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></fecolormatrix>
</filter>
</svg>
</div>
<!-- loader ends-->
<!-- tap on top starts-->
<div class="tap-top"><i data-feather="chevrons-up"></i></div>
<!-- tap on tap ends-->
<!-- page-wrapper Start-->
<div class="page-wrapper compact-wrapper" id="pageWrapper">
{% include "layout/header.html" %}
<!-- Page Body Start-->
<div class="page-body-wrapper">
{% include "layout/sidebar.html" %} {% block content %} {% endblock %}
{% include "layout/footer.html" %}
</div>
</div>
<!-- latest jquery-->
<script src="{% static 'assets/js/jquery-3.5.1.min.js'%}"></script>
<!-- Bootstrap js-->
<script src="{% static 'assets/js/bootstrap/bootstrap.bundle.min.js'%}"></script>
<!-- feather icon js-->
<script src="{% static 'assets/js/icons/feather-icon/feather.min.js'%}"></script>
<script src="{% static 'assets/js/icons/feather-icon/feather-icon.js'%}"></script>
<!-- scrollbar js-->
<script src="{% static 'assets/js/scrollbar/simplebar.js'%}"></script>
<script src="{% static 'assets/js/scrollbar/custom.js'%}"></script>
<!-- Sidebar jquery-->
<script src="{% static 'assets/js/config.js'%}"></script>
<!-- Plugins JS start-->
<script src="{% static 'assets/js/sidebar-menu.js'%}"></script>
{% block scriptcontent %} {% endblock %}
<!-- Plugins JS Ends-->
<!-- Theme js-->
<script src="{% static 'assets/js/script.js'%}"></script>
<script src="{% static 'assets/js/theme-customizer/customizer.js'%}"></script>
<!-- login js-->
<!-- Plugin used-->
</body>
</html>We have added blocks for the additional css and javascript files that will be required while making a page which extends base.html.
Here is an example of a file that extends the base.html and adds its own content and required files.
somepage.html
{% extends 'base.html' %}
{% load static %}
{% load sass_tags %}
{% block css %}
<!-- Plugins css start-->
<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/vendors/date-picker.scss' %}">
<!-- Plugins css Ends-->
{% endblock %}
{% block content %}
{% include "general/dashboard/default/components/loader.html" %}
<div class="page-body">
{% include "layout/breadcrumb.html" %}
<div class="container-fluid">
{% include "general/dashboard/default/components/top.html" %}
{% include "general/dashboard/default/components/centre.html" %}
{% include "general/dashboard/default/components/bottom.html" %}
</div>
</div>
{% endblock %}
{% block scriptcontent %}
<script src="{% static 'assets/js/datepicker/date-picker/datepicker.js'%}"></script>
<script src="{% static 'assets/js/datepicker/date-picker/datepicker.en.js'%}"></script>
<script src="{% static 'assets/js/chart/knob/knob.min.js'%}"></script>
<script src="{% static 'assets/js/chart/knob/knob-chart.js'%}"></script>
<script src="{% static 'assets/js/chart/chartist/chartist.js'%}"></script>
<script src="{% static 'assets/js/chart/chartist/chartist-plugin-tooltip.js'%}"></script>
<script src="{% static 'assets/js/chart/apex-chart/apex-chart.js'%}"></script>
<script src="{% static 'assets/js/chart/apex-chart/stock-prices.js'%}"></script>
<script src="{% static 'assets/js/dashboard/default.js'%}"></script>
<!-- Plugins JS start-->
<!-- Plugins JS Ends-->
{% endblock %}As you can see, we have extended the base.html file and added additional css and javascript files within the 'css' and 'scriptcontent' blocks. And wrapped the content of the page in the 'content' block.
You can see that we have used includes , to add multiple sections of the page. We have divided
the page into small sections and used includes to add them where they are required.
These small sections of code are in the components folder, and can be found in the same folder
where the main html file for that page is located.