Drupal 8 Theming - Part 08 - Creating Partials

in the previous episode of Drupal 8 theming we added the main navigation to our site and we added it to the header but we made a new region for it called main navigation region and we put this menu right here so the problem right now is if we go to movies as you can see we don't have a head right here so there are two ways we can fix this one is a little bit better than the other and I'm going to show you how right now if we open up our developer tools right now and check out to see the page that actually the template that this page is displayed on we can see that it's calling themes custom and daemon templates layout page dot HTML that week and also we actually have a header right here but everything when our header is white so we can see it on the page but if we check out this right here we can see that we have a header and then we have let me just open this branding we have a logo right here and our logo so it is here but it's not styled correctly it isn't the same header as we have on the front page so let's fix that one of the ways we can fix that of course is if we go to Endymion templates layout and then open up page dot HTML dot Twigg rename this to container like it's on our front page so we have a container here not layout container and then we can delete this header that this page is going and our header is above this container so we can just copy this one out paste it right here okay save it when we refresh the page we should get the header right here so that's okay that's one way that you can do this but let's say that during the course of the development of this theme you wanna make some changes to the header then you would have to go to page front and do some changes right here and then you would have to go to page dot HTML that wig and do some changes here and you would probably have some templates for your notes so you could you would have to change the header there also and so on so you would have to change the header on at least two places and that's in my opinion one place to match so right now we are going to learn how to make your template or your theme a little bit more flexible first of all let's go to our page - - front dot HTML dot twig and let's just cut this out of here okay and then we are going to create a new file and I'm going to just paste that in so I'm just going to paste this code into that file and save it and I'm going to save it into themes custom and demian and I'm going to create a new folder called partials so we are going to have our partials in that folder partials are small blocks of code that you can reuse on your pages so let's do this partials create and then we are going to call this file header dot HTML dot twig and save it okay so now we have this parcels for folder right here so it's here we have our header in it and next thing we have to do of course if we save this now nothing will happen actually we are going to lose our header not on this page because we edited the front page so if you go to home we don't have a head right here so to call that header we would do this so remember what I said when doing some logic on your Drupal theme you have to do curly braces percentage and then we will do include include directory directory and then we do tilde and we will just write partials partials and then header dot html' dot Twix okay that should be it and then we save it refresh the page and as you can see we have our head right here so let's do the same thing for these this page dot HTML that works so we just copied this one out and instead of this head right here we just paste in this code so if we save it and go to movies you will see that we have a header on a movies page also on our about page and on our contact page so they are all calling the same template so we have a head right here and now if we want to let's say I'll remove the navigation from our header we would just go to header dot HTML that twig and remove navigation refresh the page and now we don't have navigation right here and that's that is going to propagate all over the site ok I'm going to put the navigation back in so we can have a get the site refresh the page we could go to home page of course also you can do this with footer you can even do it with this sidebar right here and so on so that's the way you include files actually pieces of code into your templates so that you don't have to so that you can easily reuse them so that you don't have to change them on every page you add that piece of code ok so that's it for this quick tutorial I hope this video helped you thank you for watching of course you know the deal if you like this video please like it subscribe subscribe to my channel also you can follow me on Twitter or on Facebook I will keep you up to date with my videos and stuff I find on the Internet thanks for watching once again and I'll see you in the next one

Channel: Watch and Learn

Views: 22,164

Rating: 4.989975 out of 5

Keywords: Drupal 8, Drupal (Software), Drupal 8 theming, Drupal theming, theming, partials, tutorial, Drupal 8 theming tutorial, header

Id: RJrGumCYB_Y

Length: 7min 12sec (432 seconds)

Published: Sun Nov 22 2015