📄Page Structure

In Flask, maintaining a consistent layout across multiple web pages is achieved through the use of base templates and template inheritance, We have created different base layouts in templates/layouts like main-layout.html, auth-layout.html, component-layout.html for different views for different pages.

<!doctype html>
<html lang="en">
    <head>
        {% block title %}
        {% endblock %}
        {% block css1 %}
        {% endblock %}

        {% include './head-css.html' %}
        
        {% block css2 %} 
        {% endblock %}
    </head>

    <body data-pc-preset="preset-1" data-pc-sidebar-caption="true" data-pc-layout="vertical" data-pc-direction="ltr" data-pc-theme_contrast="" data-pc-theme="light">
    {% include './layout-vertical.html' %} 
    <div class="pc-container">
      <div class="pc-content">
        {% block mainContent %}
        {% endblock %}
      </div>
    </div>
      <!-- Add your main content here -->
      {% include './footer-block.html' %}
      {% include './customizer.html' %}
    
    {% block js1 %}
    {% endblock %}
    {% include './footer-js.html' %}
    {% block js2 %}
    {% endblock %}
  <body>

</html>

Layout settings

You can change the default layout in the templates/layouts/main-layout.html file in the body tag


<body 
    data-pc-preset="preset-1" 
    data-pc-sidebar-caption="true"
    data-pc-layout="vertical" 
    data-pc-direction="ltr" 
    data-pc-theme_contrast="" 
    data-pc-theme="light"
>

Attribute
Description

data-pc-preset= "preset-1"

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

data-pc-sidebar-caption= "true"

To set the caption on.

data-pc-layout = "vertical"

To set the vertical Sidebar.

data-pc-direction = "ltr"

To set the layout direction left to right.

data-pc-theme = "light"

To set the layout theme light.

data-pc-theme = "dark"

To set the layout theme dark.

PreviousFolder StructureNextCustomizer

Last updated