> For the complete documentation index, see [llms.txt](https://pcoded.gitbook.io/light-able/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pcoded.gitbook.io/light-able/django/page-structure.md).

# 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.

{% tabs %}
{% tab title="Django" %}

```j
{% 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>
```

{% endtab %}
{% endtabs %}

### Layout settings

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

```html
<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="">
```

<table><thead><tr><th width="318">Attribute</th><th>Description</th></tr></thead><tbody><tr><td>data-pc-preset= "preset-1"</td><td>To set the your primary theme color you can change ['preset-1' to 'preset-10'] for different color.</td></tr><tr><td>data-pc-sidebar-theme = "light"</td><td>To set the Light color left Sidebar.</td></tr><tr><td>data-pc-sidebar-theme = "dark"</td><td>To set the Light color dark Sidebar.</td></tr><tr><td>data-pc-sidebar-caption = "true"</td><td>To set the caption on.</td></tr><tr><td>data-pc-sidebar-caption = "false"</td><td>To set the caption off.</td></tr><tr><td>data-pc-direction = "ltr"</td><td>To set the layout direction left to right.</td></tr><tr><td>data-pc-direction = "rtl"</td><td>To set the layout direction right to left.</td></tr><tr><td>data-pc-theme = "light"</td><td>To set the layout theme light.</td></tr><tr><td>data-pc-theme = "dark"</td><td>To set the layout theme dark.</td></tr></tbody></table>
