Django Layout


Main Layout

Below is the template Master file located at templates/layouts/master.html. It includes styles and scripts files in Master Layout. You can find these files at the same path inside templates/layout/ folder.

{% load static %}

<!DOCTYPE html>

<html lang="en" class="{{style}}-style {{navbar_type_class}} {{header_type_class}} {{menu_fixed_class}} {{menu_collapsed_class}} {{footer_fixed_class}} {{display_customizer_class}} {{content_layout_class}}" dir="{{text_direction_value}}" data-theme="{{theme}}" data-assets-path="{% static '/' %}" data-base-url="{{url}}" data-framework="django" data-template="{{ menu_horizontal|yesno:'horizontal,vertical' }}-menu-{{ is_front|yesno:'front,' }}-{{ theme }}-{{style}}">

  <head>
    <title>{% block title %}{% endblock title %} | {% get_theme_variables 'template_name' %} - {% get_theme_variables 'template_suffix' %}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="description" content="{% get_theme_variables 'template_description' %}" />
    <meta name="keywords" content="{% get_theme_variables 'template_keyword' %}" />
    <!-- Canonical SEO -->
    <link rel="canonical" href="{% get_theme_variables 'product_page' %}">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon/favicon.ico' %}" />

    <!-- Include the styles partial -->
    {% include is_front|yesno:"./partials/styles_front.html,./partials/styles.html" %}

    {% block vendor_css %}{% endblock vendor_css %}

    <!--Page CSS-->
    {% block page_css %}{% endblock page_css %}


    <!-- Include the scripts partial (required ) -->
    {% include is_front|yesno:"./partials/scripts_includes_front.html,./partials/scripts_includes.html" %}

  </head>

  <body>
    
    <!-- beautify ignore:end -->

    {% block layout %}
    {% endblock layout %}

    {% include is_front|yesno:"./partials/scripts_front.html,./partials/scripts.html" %}

    <!--Vendors Javascript-->
    {% block vendor_js %} {% endblock vendor_js %}

    <!--Page Javascript-->
    {% block page_js %} {% endblock page_js %}

  </body>

</html>
Styles

Included styles file contains all the core css, theme css, demo css and more..

You can find this file at templates/layout/partials/styles.html

{% load static %}

<!--Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&ampdisplay=swap" rel="stylesheet">

<!-- Icons -->
<link rel="stylesheet" href="{% static 'vendor/fonts/tabler-icons.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/fonts/fontawesome.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/fonts/flag-icons.css' %}" />

<!--Core CSS -->
{% if rtl_support %}
<link rel="stylesheet" href="{% static 'vendor/css/rtl/core.css' %}" class="{{ has_customizer|yesno:'template-customizer-core-css,' }}" />
<link rel="stylesheet" href="{% static 'vendor/css/rtl/theme-default.css' %}" class="{{ has_customizer|yesno:'template-customizer-theme-css,' }}" />
{% else %}
<link rel="stylesheet" href="{% static 'vendor/css/core.css' %}" class="{{ has_customizer|yesno:'template-customizer-core-css,' }}" />
<link rel="stylesheet" href="{% static 'vendor/css/theme-default.css' %}" class="{{ has_customizer|yesno:'template-customizer-theme-css,' }}" />
{% endif %}


<link rel="stylesheet" href="{% static 'css/demo.css' %}" />

<!--Vendor CSS-->
<link rel="stylesheet" href="{% static 'vendor/libs/perfect-scrollbar/perfect-scrollbar.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/typeahead-js/typeahead.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/node-waves/node-waves.css' %}" />
Head Scripts

This file includes helpers, customization, config js along with templateCustomizer initialization script :

You can find this file at templates/layout/partials/scripts_includes.html

{% load static %}
{% load i18n %}
<!-- Helpers -->
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<script src="{% static 'vendor/js/helpers.js' %}"></script>
<!--? Template customizer: To hide customizer set display_customizer value false in config.js.  -->
{% if has_customizer %}
<script src="{% static 'vendor/js/template-customizer.js' %}"></script>
{% endif %}
<!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
<script src="{% static 'js/config.js' %}"></script>
<!-- beautify ignore:start -->
{% if has_customizer %}
<script>
if (typeof TemplateCustomizer !== 'undefined') {
  window.templateCustomizer = new TemplateCustomizer({
    cssPath: '',
    themesPath: '',
    defaultStyle: "{{style}}", // Required as system style can't decided without JS
    defaultTextDir: '{% if rtl_mode %}rtl{% else %}ltr{% endif %}',
    defaultShowDropdownOnHover : {{show_dropdown_onhover_value}},
    lang: '{{LANGUAGE_CODE}}',
    pathResolver: function(path) {
      var resolvedPaths = {
        // Core stylesheets
        'core.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/core.css",
        'core-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/core-dark.css",

        'theme-default.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-default.css",
        'theme-default-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-default-dark.css",

        'theme-bordered.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-bordered.css",
        'theme-bordered-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-bordered-dark.css",

        'theme-semi-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-semi-dark.css",
        'theme-semi-dark-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-semi-dark-dark.css"

      }
      return resolvedPaths[path] || path;
    },
    controls: {{ customizer_controls | safe }},
  });
}

</script>
{% endif %}
Scripts

This file includes main js along with template related vendor scripts :

You can find this file at templates/layout/partials/scripts.html

{% load static %}

<!--Core Javascript-->
<script src="{% static 'vendor/libs/jquery/jquery.js' %}"></script>
<script src="{% static 'vendor/libs/popper/popper.js' %}"></script>
<script src="{% static 'vendor/js/bootstrap.js' %}"></script>
<script src="{% static 'vendor/libs/perfect-scrollbar/perfect-scrollbar.js' %}"></script>
<script src="{% static 'vendor/libs/node-waves/node-waves.js' %}"></script>
<script src="{% static 'vendor/libs/hammer/hammer.js' %}"></script>
<script src="{% static 'vendor/libs/typeahead-js/typeahead.js' %}"></script>
<script src="{% static 'vendor/js/menu.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>

Dark Layout

To set default layout to dark layout, just need to update config/template.py file's style option :


'TEMPLATE_CONFIG' => [
...
'style' => 'dark',
...
],

RTL

Vuexy provides built in support for RTL.

  1. To use template with RTL support, you need to update config/template.py file's rtl_support option.

    If you want to use LTR & RTL options both, you must set rtl_support to true else RTL Layout won't work.

    If you want to use only LTR not RTL, you can set it to False

  2. 'TEMPLATE_CONFIG' => [
    ...
    'rtl_support' => True,
    ...
    ],
  3. To use template default in RTL Layout, you need to update config/template.py file's rtl_mode option.

    If you want to set default layout to RTL, you can set this option to True

  4. 
    'TEMPLATE_CONFIG' => [
    ...
    'rtl_mode' => True,
    ...
    ],

Layout Usage

You can set the layout in two ways:

  1. Layout for the entire app - set Layout property in the config/template.py file.
  2. Layout for the specific page - set Layout property in the page view.py file. Refer Page Level Configurations

Below are the examples for different layouts which we have showcased in our template demo, Refer apps/layouts/views.py file for more details on page level customizations.

from web_project.template_helpers.theme import TemplateHelper

class CollapsedMenuView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "menu_collapsed": True,
      }
    )
    TemplateHelper.map_context(context)

    return context
              
from web_project.template_helpers.theme import TemplateHelper

class ContentNavView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

    return context
              
from web_project.template_helpers.theme import TemplateHelper

class ContentNavSidebarView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "is_flex": True,
      }
    )

    TemplateHelper.map_context(context)

    return context
              
from web_project.template_helpers.theme import TemplateHelper

class HorizontalView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "layout": "horizontal",
        "layout_path": TemplateHelper.set_layout("layout_horizontal.html", context),
      }
    )

    TemplateHelper.map_context(context)

    return context
              
from web_project.template_helpers.theme import TemplateHelper

class WithoutMenuView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "is_menu": False,
      }
    )

    TemplateHelper.map_context(context)

    return context

              
from web_project.template_helpers.theme import TemplateHelper

class WithoutNavView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "is_navbar": False,
        "navbar_type": "hidden",
      }
    )

    TemplateHelper.map_context(context)

    return context
              
from web_project.template_helpers.theme import TemplateHelper

class FluidView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "content_layout": "wide",
      }
    )

    TemplateHelper.map_context(context)

    return context
              
from web_project.template_helpers.theme import TemplateHelper

class ContainerView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "content_layout": "compact",
      }
    )

    TemplateHelper.map_context(context)

    return context
              
from web_project.template_helpers.theme import TemplateHelper

class BlankView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "layout_path": TemplateHelper.set_layout("layout_blank.html", context),
      }
    )

    TemplateHelper.map_context(context)

    return context
              
© 2017- Pixinvent, Hand-crafted & Made with ❤️