Django

📄Page Structure

The Django folder structure is meticulously organized to enhance project scalability and maintainability. With directories for apps, static files, templates, and configuration settings, it streamlines.

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <!-- [Head] start -->

  <head>
    {% include '../layouts/head-page-meta.html' %}
    <!-- map-vector css -->
    <link rel="stylesheet" href={% static "css/plugins/jsvectormap.min.css" %}>
    {% include '../layouts/head-css.html' %}
  </head>
  <!-- [Head] end -->
  <!-- [Body] Start -->

  <body data-pc-preset="preset-1" data-pc-sidebar-theme="light" data-pc-sidebar-caption="true" data-pc-direction="ltr" data-pc-theme="light" data-new-gr-c-s-check-loaded="14.1145.0" data-gr-ext-installed="">
    {% include '../layouts/layout-vertical.html' %}

    <!-- [ Main Content ] start -->
    <div class="pc-container">
      <div class="pc-content">
        {% include '../layouts/breadcrumb.html' %} 
        <!-- [ Main Content ] start -->
        
      </div>
    </div>
    <!-- [ Main Content ] end -->
    {% include '../layouts/footer-block.html' %} 
    {%include '../layouts/customizer.html'%}
    <!-- [Page Specific JS] start -->
    <script src={% static "js/plugins/apexcharts.min.js" %}></script>
    <script src={% static "js/plugins/jsvectormap.min.js" %}></script>
    <script src={% static "js/plugins/world.js" %}></script>
    <script src={% static "js/plugins/world-merc.js" %}></script>
    <script src={% static "js/pages/dashboard-default.js" %}></script>
    <!-- [Page Specific JS] end -->
    {% include '../layouts/footer-js.html' %}
  </body>
  <!-- [Body] end -->
</html>

Layout settings

You can change the default layout in the templates/index.html file in the body tag

<body data-pc-preset="preset-1" data-pc-sidebar-theme="light" 
data-pc-sidebar-caption="true" data-pc-direction="ltr" data-pc-theme="light" 
data-new-gr-c-s-check-loaded="14.1145.0" data-gr-ext-installed="">
AttributeDescription

data-pc-preset= "preset-1"

To set the your primary theme color you can change ['preset-1' to 'preset-10'] for different color.

data-pc-sidebar-theme = "light"

To set the Light color left Sidebar.

data-pc-sidebar-theme = "dark"

To set the Light color dark Sidebar.

data-pc-sidebar-caption = "true"

To set the caption on.

data-pc-sidebar-caption = "false"

To set the caption off.

data-pc-direction = "ltr"

To set the layout direction left to right.

data-pc-direction = "rtl"

To set the layout direction right to left.

data-pc-theme = "light"

To set the layout theme light.

data-pc-theme = "dark"

To set the layout theme dark.

PreviousFolder StructureNextLayout Customizer

Last updated