Rendering Issue in header.html.twig file path in page--front.html.twig

Question

I created a custom theme in drupal 8.

Now after much work i want a separate file and folder for header, footer etc so created a folder partials and created a file name header.html.twig file copied the header from front page and now after assigning a path in that front page which is :

{% include directory ~ '/partials/header.html.twig' %}

I cannot get a header in the front page, if i do it directly so i can get the header on front page.

The Code I wrote for header was :

 <header class="main-header" role="banner">
   <div class="container">
    {{ page.header }}
    <div class="main-navigation">
        {{ page.main_navigation }}
    </div>
   </div>
  </header>

Answer 1

The directory variable refers to the root folder of your theme, so it should be something like that :

{% include directory ~ '/templates/partials/header.html.twig' %}

But Drupal recommends using a Twig namespace, like so :

{% include '@your_theme_name/partials/header.html.twig' %

A Twig namespace is created in Drupal 8 automatically when installing your theme, and it points to the /templates directory of your theme. Essentially, writing "@theme_name" in a Twig include (like above) will reference the location "your_site.com/themes/theme_name/templates" on your server.

More info here : https://www.drupal.org/docs/8/theming-drupal-8/including-part-template