Template Layout
Understanding template layouts will help you create a page with your desired layout.
layout-blank.njk
Path: gulp-nunjucks\src\templates\layout-blank.njk
The layout-blank.njk is the layout for all pages which do not require authentication. It is a simple layout that does not include any header, footer, and sidebar.
Usage
<body class="{{ body_class }} font-inter skin-default">
{% block content %}{% endblock %}
<!-- scripts -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/rt-plugins.js"></script>
<script src="assets/js/app.js"></script>
</body>
layout.njk (Minified assets layout)
Path: gulp-nunjucks\src\templates\layout.njk
The app layout is the default layout for all pages which are inside the dashboard. It is a simple layout that includes a header, footer, sidebar, and customizer.
All js and css files are minified inside rt-plugin.js.
Usage
<body class="{{ body_class }} font-inter dashcode-app" id="body_class">
<main class="app-wrapper">
<!-- BEGIN: Sidebar -->
{% include '../partials/sidebar.njk' %}
<!-- End: Sidebar -->
<!-- BEGIN: Settings -->
{% include '../partials/settings.njk' %}
<!-- End: Settings -->
<div class="flex flex-col justify-between min-h-screen">
<div>
<!-- BEGIN: Header -->
{% include '../partials/header.njk' %}
<!-- END: Header -->
<div class="content-wrapper transition-all duration-150 ltr:ml-[248px] rtl:mr-[248px]" id="content_wrapper">
<div class="page-content">
<div class="transition-all duration-150 container-fluid" id="page_layout">
<div id="content_layout">
{% block content %}{% endblock %}
</div>
</div>
</div>
</div>
</div>
{% include '../partials/footer.njk' %}
</div>
</main>
<!-- scripts -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/rt-plugins.js"></script>
<script src="assets/js/app.js"></script>
</body>
layout-extended-script.njk (Unminified assets layout)
Path: gulp-nunjucks\src\templates\layout-extended-script.njk
The app layout is the default layout for all pages which are inside the dashboard. It is a simple layout that includes a header, footer, sidebar, and customizer.
All js and css files are unminified and all plugin dependency is added separately in this layout.
Usage
<body class="{{ body_class }} font-inter dashcode-app" id="body_class">
<main class="app-wrapper">
<!-- BEGIN: Sidebar -->
{% include '../partials/sidebar.njk' %}
<!-- End: Sidebar -->
<!-- BEGIN: Settings -->
{% include '../partials/settings.njk' %}
<!-- End: Settings -->
<div class="flex flex-col justify-between min-h-screen">
<div>
<!-- BEGIN: Header -->
{% include '../partials/header.njk' %}
<!-- END: Header -->
<div class="content-wrapper transition-all duration-150 ltr:ml-[248px] rtl:mr-[248px]" id="content_wrapper">
<div class="page-content">
<div class="transition-all duration-150 container-fluid" id="page_layout">
<div id="content_layout">
{% block content %}{% endblock %}
</div>
</div>
</div>
</div>
</div>
{% include '../partials/footer.njk' %}
</div>
</main>
<!-- scripts -->
<!-- Core Js -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/popper.js"></script>
<script src="assets/js/tw-elements-1.0.0-alpha13.min.js"></script>
<script src="assets/js/SimpleBar.js"></script>
<!-- Jquery Plugins -->
<!-- app js -->
<script src="assets/js/sidebar-menu.js"></script>
<script src="assets/js/app-chat.js"></script>
<script src="assets/js/app-email.js"></script>
<script src="assets/js/app-todo.js"></script>
<script src="assets/js/calander-init.js"></script>
<script src="assets/js/chart-active.js"></script>
<script src="assets/js/step-form.js"></script>
<script src="assets/js/map-active.js"></script>
<script src="assets/js/app.js"></script>
</body>