Top

twig file structure

Symfony yet highly flexible, layout system that makes it easy to use one or more basic layouts throughout our theme, making it more readable and easy to modify.

We have created main base layout inside template/base.html.twig which contains all the common css and javascript files and we have also included header and footer in this file as they are the same in a majority of the pages.

base.html.twig


<!DOCTYPE html>
<html lang="en">
<head>
  {% include "partials/head.html.twig" %}

  {% include "partials/css.html.twig" %}

  <!-- Bootstrap css -->
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/bootstrap.css') }}">
  <!-- App css-->
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style.css') }}">
  <link id="color" rel="stylesheet" href="{{ asset('assets/css/color-1.css') }}" media="screen">
  <!-- Responsive css-->
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/responsive.css') }}">
</head>

<body>
   <!-- loader starts-->   
  <div class="loader-wrapper">
      <div class="loader-index"><span></span></div>
      <svg>
        <defs></defs>
        <filter id="goo">
          <fegaussianblur in="SourceGraphic" stddeviation="11" result="blur"></fegaussianblur>
          <fecolormatrix in="blur" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"> </fecolormatrix>
        </filter>
      </svg>
  </div>
   <!-- loader ends-->

   <!-- tap on top starts-->
   <div class="tap-top"><i data-feather="chevrons-up"></i></div>   
   <!-- tap on tap ends-->

   <!-- page-wrapper Start-->
   <div class="page-wrapper compact-wrapper " id="pageWrapper">

   <!-- Page Header Start-->
   {% include "partials/header.html.twig" %}
   <!-- Page Header Ends -->   
  
  <div class="page-body-wrapper">

         <!-- Page Sidebar Start-->
         {% include "partials/sidebar.html.twig" %}
         <!-- Page Sidebar Ends-->

        <div class="page-body">

          <!-- Main Content Start-->           
          {% block body %}{% endblock %}
          <!-- Main Content End-->           

        </div>

         <!-- footer start-->   
         {% include "partials/footer.html.twig" %}
        <!-- footer end-->
      </div>
   </div>

   <!-- Plugins JS start-->
   {% include "partials/script.html.twig" %}   
   <script src="{{ asset('assets/js/tooltip-init.js') }}"></script>
   <!-- Plugins JS Ends-->

<!-- Theme js-->
   <script src="{{ asset('assets/js/script.js') }}"></script>
   <script src="{{ asset('assets/js/theme-customizer/customizer.js') }}"></script>
<!-- login js-->

</body>
</html>

As you can see, we have extended the base.html.twig file and added additional css and javascript files below the 'css' and 'script' blocks. And write the content of the page below the 'body' block.

You can see that we have used include , to add multiple sections of the page. We have divided the page into small sections and used include to add them where they are required.

These small sections of code are in the base.html.twig file.