Make Drupal 8 twig theme in 1.5 h + useful tips | Gleb Redko | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Make Drupal 8 twig theme in 1.5 h + useful tips

teacher avatar Gleb Redko, Full-stack web developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

10 Lessons (1h 38m)
    • 1. Welcome

    • 2. Drupal 8 Theming Intro

    • 3. Setting up Drupal 8: MAMP & Composer

    • 4. Configuring our instance, setting dev environment

    • 5. Skeleton for our theme

    • 6. Our front-end -> Drupal 8 theme

    • 7. Bringing content to theme

    • 8. Making navigation work

    • 9. Drupal 8 dev useful tips

    • 10. SOLUTION to the assignment

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This course is right for you if you’d like to learn how to make your own Drupal 8 theme using twig templating engine. Our theme is going to be based on Bootstrap 4 framework and it will also be using SASS (forget about vanilla CSS in 2019)

In the beginning, we’ll

  • walk through Drupal 8 installation and setup procedure using composer (which is a recommended way of installing Drupal 8).

  • I’ll show you how to use twig templates and the main principles of template overriding in Drupal 8.

  • I’m gonna share some useful tips (that I use daily on my projects) on how to set up your Drupal 8 instance for smooth and painless development if you plan to continue exploring and developing on Drupal 8.

In the end, I’ll give you a small task regarding templating that will simplify your further theme development.

All the code we add during the course is also available on this GitHub repo:

Let's go!

P.S. Check out my Crash Introduction to Web Frameworks 2019

Meet Your Teacher

Teacher Profile Image

Gleb Redko

Full-stack web developer


I'm a full-stack web developer and for the last 4 years I’ve been working at Tallinn University (Estonia) as a developer and lecturer.

I got a BSc degree in Computer Science from Robert Gordon University (Aberdeen, UK).

I create web applications from database design to button colours. Working in a small team of developers at Tallinn University, we produce web apps used by students and teachers all across Europe. Apart from that, I teach Web Frameworks course to our students.

I also had work experience at Continental France, where I was in charge of upgrading their intranet web applications.

I'm a member of Google Developer Group (GDG) in Tallinn.

In addition, I'm also keen on graphic design and recently even studied that subject part-time at the ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Welcome: right. Hello there. And welcome in this course I'm going to teach you how to create your own them for droop allayed based on bootstrap for and in. Then off the course, I'm going to give you some tips. Some pro tips for Drew pill development that I'm using myself. 2. Drupal 8 Theming Intro: Usually you choosed Rupel or worth press when you have ah, relatively small project and your client needs quick results. So content management sees them stands for managing your content. So it's basically Taylor for block type or a noose website. Well, it can be extended in different ways. Andi people create Where is things using truthful? Well, some of them are absolutely crazy, but anyway, it is still a content management system, so you have to think whether it's worth using it. I mean, you get quick results. You can set up your website relatively quickly and show something to your gland. But later on, when you get more and more requirements on your website, you will see the difference between content management system and, for example, a framework. Well, I have a separate course on frameworks. I'm gonna put a link on that. So it's up to you what to choose. So content management system is good when you have us relatively small project, which isn't where it's specific on. Do you know that you need quick results if you got a big project with lots off customer requirements, or you expect your client to ask for this requirements in the future, I would use a framework like lateral or something else or a combination of frameworks. Well, sometimes you may have a client who came to you with a website that was made on Drew. Pull seven or eight. In that case you have Teoh, you have no choice over this. And you, your eyes are taken. Are denying to take that project made, Andrew people. But in jail Yes, it is quite painful to make something really a specific on Drew Paul, because again, you have to play the rules off droop ALS. If you've heard of scruple seven, the previous version of Drew Peled, then dribble aid is absolutely different thing. They've changed quite a lot of droop eight. So I would say they start to two different content management systems holding the same name . So Drew Pilatus made on symphony framework on and it uses to be them engine. It was released in 2015 while Drew pull salmon industry B C in 2011 and it's gonna be supported. Dribble seven is going to be supported. A place the security updates are gonna meet until 2021 until November. Guess load some of the websites are still using Drew pill seven. But well, if you start learning scruple, then I recommend you to do this using triple eight. Because Triple seven is just, like, you know, is gonna remain in history comparing to drop of seven triple eighties using object oriented programming concepts. That gum was symphony framework. And it makes Triple eight stronger than triple seven. We're gonna create true pull them, and I'm gonna show you how to do that. We're going to use a bootstrap for framework as the basis Andi, we're gonna create our own them using bootstrapped for 3. Setting up Drupal 8: MAMP & Composer: Well, let's start from the beginning. I'm going to show you how to install truthful and firstly, we need Teoh have, ah, local development environment. How to set up the development environment. It is easy. Firstly, you have to instil Well, I'm using mumps and I recommend you this thing. So I like it. This is mumps. Mom is available for both Mac and Windows computers. You go to Mont that in four. You don't go to Mom and pop intro. I am Pro is a paid version off ramp Kinky. Some interesting features. But we are fine with Mom, which is free and I'm actually using Ah, Mom. So yet is God unload here. There's the usual installation, and I'm gonna show you Starting page of Mom Root folder for Mom is gonna be in applications , ma'am, HD docks. And this is our working place. We're gonna install Drew people inside this folder. Well, if you go to Mom settings, you can see that It says that by default, that much sport is eight beach bees is 7.20 that's fine. My skull 5.7. If I start the well, if I start servers, I'm going to get on that beach. Welcome to Mom. So that dress is gonna be local. Host 888 That's our entry point and everything under this directory, he's gonna be here in HD Docks folder. Well, next we need to install droop AIDS using composer Let's installed composer composer is ah, dependence and manager for pH B. Well drew. People seizing page be And we need a dependence manager for PHP. If you have composer, you may escape this part, but if you don't have Composer Week and install it, it's pretty easy if you open terminal and CO. P this comments in turn and that so I have now install Composer. And if we go Teoh Teoh getting started and see how Teoh make our composer Komen Global. So for now it is installed locally. I want Teoh have it in global. So I'm gonna do this. And if I typing composer Yeah, I do You have it installed globally now. So on windows This this comment here Now we have our composer installed and lights and let's install Drew Pull eight using composer Why I'm a using composer to install droop allayed. It's because it is a lot easier to 19 drew people using composer and like highly advice to to do truthful installation Using this way. Yes, you can download disease off Truthful Aid on and Drag and Drop It Inside HD Dogs and Ron the installation. But I think composer is better and like margin way to maintain your website. Guess using composer. You can easily get on update modules and them's on triple core using composer, and you can create patches and use all the features off Composer on your Truthful Aid website. So let's do that using composer. So that's the Komen to create a project using Droop eight. And we're gonna Well, firstly, let's go to the HT Doakes directory and created there applications. Mom HD docks. So we are in the right directory and I'm gonna do that. Andi, following their my true power. Eight. So he's gonna create directory called My Drew Pull eight and then it will automatically execute Composer Installed, which will download the latest stable version of Triple eight on all its dependencies. So now composer has finished installing old Innis three files and dependencies, and we can go to that directory that's their contents off the Trouble. Eight. Installation Webb is the place where we have our Drew people and older related go intent and other files. Heart Wendy are, Ah, the dependencies Composer and drug sh is, ah, common line interface for drew people. So in fact, the location off ah index files is inside Web directory here it is the reason White Index speech peace inside the Web directory is because, well, showing the director with Rush and wondered to the outside world is quite tricky. That's why the website and itself it has been placed inside the Web directory. So when you set up your server, you have to say that the route is going to be inside the Web directory. You can also place, for example, data directory to these parent folder, not inside Web. So in this case, when you have private files in your server is set up to serve Web, then your data folder was private files, for example. Somewhere here is gonna be secured when you make the Web folder or the parent folder in this case might drop late accessible to the world. Then you are taking risks and all your files meant to be used internally like Rush composer , vendor are going to be reasonable to everyone. Let's see what we have had the moment. Let's open Crume and Go Teoh Local host 8888 slash my droop. 08 We're going to see an index off all the files and folders inside my droop of eight, but we need to serve Web If you go to Web it is showing the droop ALS sent up. So let's said Let's configure our 72 Serve the weapon folder instead off my dribble Aid folder. So to do this we have to go to Mom installation folder and then Teoh gone up by cheap on There is a file called http D, don't come. This is Apache configuration file. I'm opening that in a sublime coated Geter. I scrolled down and I see analysis, so I'm pretty using some Alice is that this is gonna be a new one. So alias my droop Oh eight. If I go to this page, my dribble eight, it is gonna redirect meat Teoh applications Mom Paige, your dogs. My Triple eight Web. And here is my and they saw the other options. I'm keeping them by default. I'm going to save this file. I need to restart my mom, Pop. So now if I go Yeah, I do refresh. And now it is pointing through the web folder. 4. Configuring our instance, setting dev environment: right. So this is our triple installation. Let's installed Rupel. Well, language, English. That's fine. Standard profile. He's our requirements. If you well, cashing PHP cashing is not enabled. But that's our development environment. So let it be like that. What? We press continue Anyway, we need Teoh configure our database is gonna be my skill, so Well, let's start with the database. Firstly, we need to create two database for Drew People. Do you do this? We can go to the landing beach off ramp tools Beach be my admin. This is our PHP. My admin for a local host, the address is local host 8888 Beach Be my admin. I'm gonna create a new database. So that's the name off off a new database. My drew. Pool eight. It is empty now, So if I go back, press advanced options database. Name is is my droop eight. And using name is gonna be route for months on truth password by default. So, horse, this local host, but fourth number number. Let's check this If you go to preferences and boards, my school board is this fun table name prefix be That can be empty because We're using a specific database, a dedicated database for this triple instance, we're not gonna have several instances using the same database. So if I I think seven continue it is populating the database, please. Necessary tables? Well, site name gonna be grabs. Drew Powell and my email address. User name for ad mean Well used these. So it's password, password and the fourth country. I don't want to receive email notification. Save and continue. So we see the main pinch off our website. Ah, something is broken here. If you go and look at the console at ours so it cannot load front end. And the reason for that is because we need Teoh can figure our our HD excess file. So to do this, I'm using beach be storm, so create new project from existing files. Soar files are in local directory if your dogs and my truthful eight. So if I go to web, there is that don't HD access file. We need Teoh configure the rewrite base rule. So that's them. All right. Please. And I'm going to save that So old there Front and files will also be redirected to this folder. Were using lamp and it goes under this directory. So I have to configure HD access as well. If I do b fresh so it's now loading the front end as well. This is the default Bartek. Then for true Pilate working a create our own them. 5. Skeleton for our theme: right. Let's start creating our them. Firstly, we are gonna install bootstrap barrier. That is it them for triple eight that is using bootstrap four. And we're interested in that. Remember, we had our composer, So we're gonna use Composer to install them. I go back to the composer folder. It is here, composer Jason in my Triple eight folder. So, to that and you, them to our triple website. We are typing composer the choir. Trupo would strap better. Now It is, I think bootstrap barrier as dependency and downloading older necessary files for these package. So now it has installed bootstrap barrier. I go to extent and sorry to appearance extent for modules appearance. And now I see 1/2 bootstrap beta and puts Trump sub them. So if I activate for for now, it is Bartek and 74 administration. So now the fight. Activate it. What's Trump made it, uh, goat website. I will see that nothing changed. So we have Teoh sub them. Is that like a basic structure? So we have to customize it. And we can do that if you open and take a look at what we have. So this is bootstrap. barrier. This is Web, them's country and bootstrap burial. So dames are gonna be in this folder. So the reason that folder called Sub Them. If you pay attention to the CSS folder and you would see that CSS is here as it is, we're not using this example is not using sass. People process are for CSS. But I would like to use and I recommend you using sass because he says is an old school thing. SAS is better or less. And so in this case, we have to install they stopped them the example that is using sass instead off CSS. And to do this, I'm going Teoh the bootstrap baby. Oh, home page. That's actually the way, Teoh. See, what's the name off your composer package? So I go here stable release, and I'm interested in this so back to our composer. Now, if we take a look at our at least off them's, there's a SAS bootstrap starter kit. And let's take a look at beach be storm. This is our bootstraps ass, but we still have to use well bootstrap area. It's going to be our pattern them. This is going to be our sub them. And now we have a CSS. Next, we have to continue the installation off our sub them. So we need to go to terminal and go to the folder off that some of them. So you know, we have bootstrapped barrier. That's our parent. And Bootstrap says that's our child them and we go to bootstraps ass. And now we have to Ron and PM So for these NPM to work, you have to install note. If you don't have known or on your computer, you can install it here for Mac or Windows. And it will also installed note command line interface as well. I'm gonna close this half my note already installed. Okay, so let's run in PM and still global Teoh globally install grope common light interface gulp will help us completing the necessary files. Like sass opposite that. We're gonna run and PM install to installed all the dependencies needed for boots. Trump sas them. So this is not done. You for I If I run Gope, I have these at our So if your aunt into this type of issue as I have here when they had run gold cannot treat property, apply off undefined. The easiest thing would probably be to use a group which is located here, and it is gonna complicate our sass files in tow. SCS says so in parallel. It has started and note. Sever. I got this. Can that funny page using that default your side dot com sinkings. But anyway, just ignore days. We are only interested in the fact that it has compiled Compiled Holderness, Ray Guia Js bootstrap, Jake Very proper and sass files. So if we go to our beach be storm, we'll see that. Okay, We have these things compiled now. So to fix this behavior off opening your website dot com by the fold, we have to configure gold file first, I'm gonna stop this control. See Andi free. I'm just gonna co p these part and save it. If I run these once again, it is gonna open my local host, so yeah, that's fine. So in the background, gulp ISS listing Teoh changes. And whenever I change anything in SAS here, it is gonna re compile all their assets automatically. But I can stop it in your e for the moment. Now we have Teoh Korpi entry name our bootstraps. That's them to be able to use it. So we're going to create a new folder under thems called Cost Him. I'm gonna I'm gonna trope bootstraps house inside this custom folder. So contribution is there these folders for them's you don't both from somewhere and custom is your own set off thems. So it has now finished moving. And now we have to rename this, uh, folder. So it's gonna be clamp, then next, we have to three name the other files, like this one into the same name as that folder. No, that was probably but naming so glam it would be better. We have We have to rename Hauser files a swell in here as well. So then we have two aged this file change these as well, and that we also need to change calorific schema. And in this file, we have to change these part of the fortune naming. So this function is a hook function and it has to following seen Thanks. The name off off our thin in this case clamp and form system. Them setting Salter So All right, Gondry fresh. Now we have this Glemp. Then I'm gonna install it and said that as default and also elect on its Talib Arctic. Now we have the embassy stone. One of them is seven. It is used for administration. So let's take a look at our website. It looks like that another thing that I forgot to do it is to change basing here. It's no longer boost Trump's aspects clamp. So you know, if I do a fresh and I go to the website and I also need to do that to say that the library is grab because glamping is the name off this folder. Well, after changing anything here or in any of the files, please do clear caches. Because Drew Paul eight is heavily cashing everything. So do this first and then go to home and see the changes. So now we have, ah, very basic them. But it's already using bootstrap for that is what we need. This is as you can see, this button is bootstrap for, and now we can start adding our own bootstrapped for FRA intent and see the changes 6. Our front-end -> Drupal 8 theme: right. So for the front end, I'm gonna use already made boots. Dropped them from start Bootstrap. This one looks like that. I want to integrate this pro intent into my them. So first, let me tight. I need to download this. That's the contents off this front end. And okay, this is my local copy. And, um, gonna integrate this intimate them. So firstly, firstly, I need Teoh. It will be the files I will start. Was it CSS coping? This Have SCS is folding here. There are already some a CSS files I'm gonna paste into this folder. And now I have, like, a mix of files. Some of them are having the same name. So, for example, make scenes and meat seems and favorables and the variables underscore is basically for if we are importing these files into some main, um, fiery, for example, she import import import is this, um, file. That is important variables. Um, here, nick scenes, typography. So, for a CS is doesn't matter whether the reason underscore underscored usually means that it's this file is gonna be imported in some main file. So for looks like they are different, but no, they're the same. So it's gonna be in conflict, so I'm gonna combine them. So this is my thes and that. Does it matter? Let's see. And I'm gonna delete this one. The same for Nixon's. This one is empty. All right. Um, you could take a look at bootstrapped barrier. There are templates here. Drew Paul is using template ing see stem called two week. And basically these are generic templates for different parts off the website, and the last them that we're currently using the sub them off parent is gonna overwrite the previous dem plate. Firstly, I do need a template for the whole page. So I'm going to do that. I need to find, uh, laying out page. That is it. That's a genetic template for Paige. Looks like that these are tweak scene techs. And for now, we just want Teoh make it work because, well, yeah, I have included these styles, but if I do it fresh now, nothing will change. I mean, it will. Some styles will be affected, but remember, we have hte email here in X html would have to put these somewhere, and this place is gonna be this template. So I'm going to copy and paste it inside our templates. And for now, uh, for the sake office simplicity. Not going to comment out this, I will just delete it. But I don't remember. We have the same. We have Holderness recording here. It was some explanations, so I'm going to know Put my HTML inside this template. This is my html, Jessica. Basting the whole, the whole content off this file. All right, um, next we need to compile our SS is in tow. CSS. And I'm gonna open terminal. Right. Something's broken, the wrong location. So I need to go to this exact location custom, glam, and run this compiler from this location. There's a glam folder. Okay, you fight. If I do refresh now, nothing changes, but it's remember that Tripolis Hamli catching everything and ah, templates in particular. Okay, so So it's now partially load it on. The reason for that is because we forgot to import if we go back and take a look at styles . Uh, well, here the main file is this one creates scale, but is she says now, where come boat, Our style don't basis is which is the main file that is getting compiled into this into sorry into this one. Uh, it doesn't import the grayscale assesses, which is important, because it's like the main file Maine style for our front tent. So I need, um probably I don't need that for now. But let it be like that. I'm gonna import grayscale, so you're gonna But it's watching in the background, Finished without errors. So again, I need to Your cash is and do be fresh. Okay, um, that's our front end. We don't have images because the images are hard coded. Night haven't let corporate the images, but to include the images, We have to do it. Ah, in this way. So, firstly, let's copied the images from the source. Next, I'm gonna already have these images. Folder. So now I'm combining Teoh two front ends existing one, and they want that. We need the basic one and wanted I want to integrate. So I have these pictures here and next. Teoh, we go back. Mm. No, not this one. But these files, if I search for images well, it's like it's looking for image folder. So for two week template ing system, uh, there is special syntax that we have to follow the scene tax is the following. So it it's gonna add based bat off our website plus the directory. Um, over a template in this case. Glemp. So it's on me. Rep. Dams custom. Glemp. So it's like beach be, but people say zinc pre processing there, uh, html. - That should be again. I need to clear cache is and pretty fresh. Something is wrong there again. Causton clip. OK, stupid. A mistake that's looking for E m G folder. Forgot to change. I guess the full name of the folder is he mentions. - Okay , once again, days, all of the images are here. Aikens are not present, but at least static front end is here. Next. Let's take a look at what's meeting on The reason for this error is is the fact that remember, I've just go be based in the whole file and yeah, in head dress Teoh old links to the non existent files. We're including them in a different way. Now, on phone tossem as well for Js files. Uh, we need Teoh. Copy them as well. And what I do You have J query full power. I'm gonna he moved this and that because it's already included. Probably won t need this. And there's one customs creep. Grayscale that mean dot Js be open. I'm gonna copied this file. A copy based. All right. Okay. This is our custom G s file, and I'm gonna delete this as well. So if we take a look at the gulp file here on there is the least off GS fouls gonna stop this process for now, Control, See Andi. Ah, Bootstrapped credit. Bopper and I have added these create scale, but yes, global was here. We're ready. So I'm not interested in that. It doesn't exist, so I don't need to use it because I don't know what his days I'm interested in grayscale dot gs. So I want to include it in my group file 19. You know, they're all coming from note modules. So that's the reason. While actually this fuller is not used the contents off this folders not used because we have no more jos on and but Greece girl is gonna come from this Js folder. Okay, I'm gonna a run compiler again. And do you again your cash Andi fresh so it cannot find um, sign up, Jay pek file. I don't know. Do I need this file or not? But as you can see was Trump Js He's working as a treat. Do so. This coal is probably coming from our It is background. So it's probably coming from our ah, this CSS file. So let's take a look. So here it is. Uh, but the u r l is different, So two dots means it's going up in the full destruct. Chur. So we are It's gonna become piled here, so we need to go back into images. So back to and now it's not read anymore. So it is. Mm. It has found there location of the file. BHP Storm is helping me in locating files. So I'm gonna duty fresh your cash is and to be fresh. Now there's another one must hit. We need to like a guy. He's a swell probably here, not a match. But, um, must can't is yes. He says same thing. I am interested in this. All right. Okay, Now old, they're necessary. Files are included, and everything is working properly the way each would work except off the Aiken's. So these are probably formed Awesome. Aiken's Yes. So to include for font awesome. Need to go to appearance and go Teoh settings off our Glemp them It's something I'm so has the same set off savings as the bootstrap barrier, but, uh, wear working with this. So I need to activate, uh, Aikens from here front. Awesome to save configuration. So I do the fresh and now all the icons are here. Uh, so, as you can see the like, Aiken's have thought it 7. Bringing content to theme: right. So next we need Teoh. Adapt our them in some way to show some contents off our Drew. People conduct management seized him. I'm probably gonna believe this sections here. Ah, and find was the food her and hinder. Mm. So let's go back to PHP Storm and to our ah template file based on aged amount of templates with Now it s static. I want Teoh. We also need to integrate. Never better. So if header is fine, probably starting from about it. I don't want Teoh half about here. Projects sanction contact section and fortune while like that. So I'm gonna do you need this sections? Ah, or commented about any way I can always copy from the initial file. So I'm going to leave this for now. Let's take a look what we have. So when we have this hither and footer and we need to put something in the middle So the contents off our website. So if if I go back to the initial template by boots Trump Alia this one beach html Let's take a look at what do we have here? So there is some rapper. There is a hit her site hitter. Ah, so there is a block. If there is it, print out off menu and that's the block off main content. Mean robber and content. Ah, in some sidebars. 1st 2nd um, it's up to you whether you need all this contents sections you can. Well, it depends on what you need, But just to let you know, these templates is showing all the sections existing Andrew people that you can you can make your own sections as well. But actually quite a lot off the default ones. And they are all mentioned here. Well, some of them are empty on and in the first design, that blue one, we didn't see all of them working. But yet just like, you know, this is a reference file that you you mean you may come back to this file if you need Teoh Under is also like explanation off the region's on your page. So these are the sections that you can integrate into your aged email. So But I'm now I'm interested in probably in the main content, because that's always the most important thing. Breadcrumbs says. Well, these are like small links on a dog off the beach. so. But anyways, I want Teoh Teoh get probably only this part on, and I'm gonna go back and use some section. I definitely don't need to sign up section. Probably no. Keep like that inside the container. I'm gonna put these. So we're going to show page content and some of this section. At least we have these things. Welcome to glimpse through AIDS. Well, let's add some content article, for example, - So it's gonna be feasible in the front page. Save it. Now, I have this article that's that is an article page because, you know, we are using genetic template. Page template is template in all the pages. So at this point, we need to have two templates, one for the front page only, and another one for all the other pages. So let's do this way. I'm gonna Korpi this page template. So the same page template and for the naming that droop of convention for the front page hits pretty find by Trupo. You can check it from their documentation. It for the front page only. We have to say page minus minus front. Don't HTML got weak. Sorry. It was Earl Implication. Uh, on to have to do this in my, um, own template. These all right? And for the front page, I do need this about section, but for this page, I'm gonna delete on this part. I don't want to show it. And again, after changing something, uh, here, I want to. Your cash is okay. It looks like that now, we can also put this part here. Um, show to do this. Want to find this bar to create scale? Job title. I'm gonna use these the following week. Scene techs. They should print out the title. Andi, I don't need these second line and find Was this Now? This is my first article. Uh, a few page. This is my first article. I don't need to get started. Well, but And as you can see, I duty fresh but haven't clear catches. Now it's done. This is my first article. All right. Ah, well, I'm pretty much fine with this article. Template would be like that. Well, it can be in a fine tuned, but I think about for the sake off simplicity. Ah, let it keep like that. So let's go back to the front page at this steel looking this way. Um, this teaser she owned the first paragraph. So again, Fine. Let it be like the least off articles. 8. Making navigation work: right. Next. Let's do our navigation. If we go back on and take, I look at our current menu. It is static. Now we have to implement the menu. So if I go back and I'm interested in template look and system menu block, I'm gonna copy these and based it to my templates. By the way, there are two file link and this one I don't use them, so I'm going to leave them. So not we only have our templates based front page and this block, which is a menu block. There are some variables that, um, like, glasses hating idea and so on. But we are interested in this bit content, So content is our menu. If I go back to our page, we have the following structure off navigation menu. I'm gonna take the internal part off the off this bloke. So I'm interested in this beat here, and I'm gonna disable. I'm gonna tease a building following Ah, goat. I'm not going to use that. And you see there is unaltered least off our menu items. I don't I need this least but instead we have ah content variable and we're going out. Put it inside this tax. And if I go back to our page front, that's the place where we are gonna print out. Ah, our navigation. So let me take a look at this at the initial page template layout page staged, emailed a week. Ah, there is a header. And if we take enough So that's the start of a naff bar. And inside there is ah, page primary menu. So I'm going to copy this beat and based it inside my navigation. Someone save that and again need to clear Cache is on to refresh to my page. Now I have whom That's the menu item that we have. Ah, if we go to structure men years main navigation. Now, when we have this home, that's by default. The only menu link that we have drew Paul home. So it is here, and once more think to To do here is like the start. Bootstrap. Well, it was in our block template. I'm going hard coat the name of because it's gonna be the same everywhere. Now it looks better. I would like to add the same mean you to our second template, which was the template for all the other pages. So if I go and complete based this navigation from here to here, I'll have the same menu in my article of your page. So that's pretty much eat. Thank you for watching. 9. Drupal 8 dev useful tips: one more fink regarding Drew palay development. Ah, we've been always using your cash from the right on administration panel. But there is a better way to do your cash and other things is to used Rush is Ah, this is a common line interface for Drew. People like artisan for lateral. So I'm gonna add Drash to my installation on um we'll see how it works. So firstly, I'm going to stop my current watcher and, um sunken installed this using drugs. Sh I'm now in my Drew people installation folder not in my them folder, because my installation for folder this this composer Jason file. So I'm going to use composer required Rush rush two installed rush and next I can do this, so I have it installed globally. Um, it's mentioned here, um, rush he needs, But you can if you if you if you have another here, you can always use drugs from Wenger being drug. Sh this matter. Vendor being crushed and so to clear cache is in the easier way I can do when they're being rush c r As you can see, I got this error and the reason for this error is is one setting in my, um, configuration on. Actually, if you're Googling this'll error, you probably won't find exactly. Um, the explanation to this as usually with ah Drew people there are plenty off documentation and forums, but it's hard to find exactly what you need. So if I go to my triple eight installation, go to vamp sides, default on sating speech, be and if I scroll down there is a host local host. So to make it work, I have to change local horse too its new Mary quality. So it's the same as local host, but just in numbers. All right. And now if I tried Teoh do your cash, it is working. So there are plenty off other comments that you can use with drug sh. And it is really powerful too. So but But for me and today, the most important common was to clear cache and we had to use thes bit. And as our cool think is that Drew people gone. So it is also common line interface and it is also capable off clear in cash. But it's ah bit bedroom because we can use it, um, to see the template suggestions I'm going to show that in a second. So firstly, we need to install this again using composer. And we also need to use this launcher to be able to call to poll. Uh, comment. So now, if I may really truthful. Okay, there is some error. Ah, some noticeable. But we're not interested in that. At the moment we will see that Ah, dribble is working Triple console and important and interesting. Ah, is this comment developer more? It will. Dutiful link. Firstly, it will show you this template suggestions for its weak. And secondly, it want cash tweak templates. And thirdly, you can print out some variables in tweak. I had it already installed. And as you can see, if we look at the source coat on, nothing changed on the website itself. But in the source code, we have, um, these comments hoops. And, for example, if we go to I work mean you we will see that it says begin output from custom. Ah, glib. That's our is then templates blocks east to menu. Andi, you remember we added this template here. Andi, It also shows you the other suggestions, um, suggestions and suggestions for different areas off the website that you see here for pretty much for everything, like for comment on so on. So this way you can access. So, for example, this is comment, not a smell that week, and this is the section. So if you want to style and change exactly this section everywhere, but it gives you notion on where to find the template boots Roberto templates, this is the existing one field field comment. So if we go here field and feel to comment here, it is so need to copy and paste it in my template and agent this file. So that's why I like Triple Console. 10. SOLUTION to the assignment: right on. Right, folks, this is the solution to my little task. If you pay attention to our templates, you will notice that we have some code duplication in our templates. For example, he had her navigation and footer in beach HTM out. Don't tweak and page front heather navigation and food er so we can make use off include directive supported by a week and split our templates into supporting beats. So to do that, we have to make a new folder. I'm gonna call with Bart and and you speak file gold. Heather thought html dot tweak. And I'm gonna call p hinder everything from here to to the open body bag, and I'm gonna paste it here. Now we have our hitter in a special template here. There dot Age smelled a tweak. And I'm gonna included in this way at glad this is our the name of our template parts heather dot html Don't tweak. And the same include in our page front the stand off this. So I'm gonna do this scene for falter and for, um not bar. - So now I have my food or in Wolf Beijing based wrong templates, and i'll do the same for their now bar. - So that should be eat. And I go to my droop. Oh, folder. Andi, I'm gonna hear cash. So if I do the fresh, everything looks the same as it should be. He enter and folder are are there and the menu as well.