‫In this lecture, you're gonna learn
‫the very fundamentals of working with Pug templates.
‫So let's open our base template here and let's get started.
‫So in essence, Pug is a simple whitespace sensitive syntax
‫for writing html, so that's really the gist of what it is.
‫Now what that means is that all we use
‫to write html elements is their name and indentation
‫in our code.
‫So let's start by setting up
‫a very simple html structure here,
‫so give us some space.
‫And so html usually always starts with the doctype
‫and an html.
‫So in order to be able to properly work with Pug,
‫you should of course have some html knowledge;
‫otherwise, this might not make so much sense to you.
‫But still if you don't know html,
‫don't worry, you can just still follow what I'm doing here
‫and maybe just read an article
‫about getting started with html
‫because it's really, really simple.
‫Anyway, we always start with doctype
‫and then the first element, so the overarching element
‫in all our html documents is always the html,
‫then inside of that there's usually a head element.
‫And so in Pug in order to
‫say that one element is inside of the other one,
‫all we do is to use a tag.
‫So we use indentation, as I mentioned in the beginning,
‫and that's it.
‫So that's our head element, and so inside of that head
‫let's create the title of the webpage.
‫And so, yet another tag.
‫So title,
‫and let's say Natours.
‫Okay, so again just indentation,
‫then the name of the html element,
‫and then the content itself.
‫No opening tags, no closing tags,
‫and none of the clutter that we usually have in html.
‫So I actually really like this syntax here
‫for writing html documents,
‫so I find it really amazing, really simple to use,
‫and to read as well.
‫Anyway, that's the content that we want in the head,
‫and now we also want to create a body.
‫Now that body is of course not inside of the head,
‫instead it's in the same level as the head,
‫so basically also a direct child of html.
‫And so all we need to do is to go back one indentation level
‫and then create the element there.
‫Then in there we want our h1,
‫and so now we need to use some more indentation.
‫So of course not here, not here, but here,
‫so inside of the body.
‫Let's also add a paragraph,
‫and so for that we use the p element saying something like,
‫this is just some text.
‫So let's try that out now in our browser,
‫so reload, and here we go.
‫All right, and so here you actually see the entire structure
‫that we just created with the doctype, the html element,
‫and then of course head and body in there.
‫And you also see that title actually appearing up here.
‫Great, next up let's actually also include a CSS file
‫and also the favicon to be displayed here
‫instead of this generic page thing there.
‫And so if you know some html,
‫you know that that kind of stuff belongs here to the head.
‫So how would you actually include a CSS style sheet
‫with normal html?
‫You would do something like this.
‫So you would create a link element,
‫then define that it is a style sheet,
‫and then also the reference,
‫so just like this.
‫So CSS style.css,
‫and so what we have here, so this and this are attributes.
‫And so with Pug, we write attributes like this.
‫So instead of having this element,
‫we simply write link, and then we write these attributes
‫actually in parentheses, so like this.
‫So without any space and open parentheses,
‫and then in there is where we write
‫these attributes just like this.
‫And we should always write them with single quotes
‫and not double quotes,
‫and so we don't need this one here anymore.
‫Now just one thing that I wanted to tell you as well,
‫is that we can actually use regular html as well in Pug.
‫So if you wanted, you could leave this line of code here
‫and Pug would then understand it just fine.
‫But of course here I wanted to show you
‫how we can define attributes with Pug.
‫And so let's now do the same for the favicon,
‫and so again we need a link element,
‫and in there we will define some attributes.
‫So we defined that this is a shortcut icon,
‫we also specify its type, so image,
‫and in this case it's a PNG,
‫and then again the reference to it,
‫and it is an image favicon.png.
‫And so now let's go ahead and test that,
‫and so you see this actually looks kinda different.
‫So we have our favicon,
‫and also our text is now nicely stacked.
‫And in fact you see some CSS properties popping up here now
‫on the left side.
‫And so that's of course because I wrote a ton of CSS
‫actually for this application,
‫so that's all in public, CSS and style.
‫So you see that I have like,
‫I don't know, like a thousand lines or more even of CSS
‫that I wrote just for this application
‫to look as beautiful as it does.
‫So in other words, why does this style.css file
‫actually get loaded from the CSS folder automatically,
‫and the favicon also gets automatically loaded
‫from the image folder.
‫Well first of all, keep in mind that each of these assets
‫actually triggers its own http request,
‫so let's actually confirm that here in the sources
‫or actually in the network panel.
‫And so here you see these three requests,
‫so one for the page itself, the other one for our style,
‫and for our favicon.
‫And so again, why does it work like this
‫because obviously we do not have a route handler
‫for like any of these files here.
‫But it is still a route if you think about it,
‫because it's a get request to this url
‫and also to this url.
‫So let me remember why this does actually work,
‫and it is because of this middleware
‫that we defined somewhere up here, so this here.
‫So remember that by using express.static,
‫we basically define that all the static assets
‫will always automatically be served
‫from a folder called public, so with this folder here.
‫And so that's why when we say css slash style,
‫that in fact comes from the public folder.
‫And so this CSS folder is the folder inside of public,
‫and the same of course for the images.
‫So if in our html we have image slash favicon,
‫then it will open up the image folder
‫that is inside of our public folder.
‫Again because we defined it so in our express application.
‫So you already learned how to create elements
‫in Pug using indentation,
‫and you also learned how to use attributes.
‫But another really cool thing
‫is to actually use variables in here.
‫So let me now show you how we can actually pass data
‫into a template and then how we can use that data
‫right here in Pug.
‫So remember that we have this route here,
‫which we use to render our base template.
‫And of course if it's later,
‫we will actually have a separate file,
‫where all of these routes will then live.
‫But for now all I want to do is to really make this work.
‫Anyway, in order to now pass data into this template here,
‫all we need to do is to define an object here
‫and then we'll simply put some data in there.
‫And that data will then be available in the Pug template.
‫So let's simply create an object here
‫with a tour property and set it to The Forest Tiger,
‫and then...
‫let's also create a user property
‫and set it to Jonas.
‫And these variables that we passed in here,
‫they are then called locals in the Pug file.
‫So now let's actually go ahead and use that data.
‫And what I want to do now is to put
‫that tour variable on to our h1.
‫So basically, I want to create an h1 element,
‫where the content is that tour name.
‫And the simplest way of doing that
‫is to simply use the equal syntax like this,
‫so h1 equals, then a space, and then tour.
‫And that's it, that's really all the we have to do.
‫So let's take this one here out,
‫and so actually another thing I wanted to show you
‫is that in Pug, we can create comments,
‫and we can create two kinds of comments.
‫So the simplest one is simply just like in JavaScript,
‫so just like this.
‫And this will then create a comment
‫that's gonna be visible in the html.
‫So let's now take a look at this,
‫and so let's keep in mind
‫that now the h1 will no long be The Park Camper,
‫but instead it should be The Forest Hiker
‫because that's the tour variable,
‫or in other words the tour local,
‫that it now passed into this template.
‫And so here, I then put that
‫into the h1 using the equal syntax.
‫So let's check that out,
‫take a look at this.
‫And indeed it's now The Forest Hiker.
‫And also here is that comment
‫that we just talked about also.
‫So as I said, that double slash that we did there
‫basically creates an html comment.
‫So this syntax here is how we write comments in html,
‫but if you really want this to be a comment for the Pug file
‫but not really being outputted to html,
‫you need to add a dash like this.
‫So if we now reload this, then that comment should be gone.
‫So this kind of code here, that we wrote here,
‫is called buffered code.
‫And actually we could also write some JavaScript here,
‫so let's say h2 equal the user,
‫and then we can also call toUppercase on that.
‫So simple JavaScript here
‫because again here in this buffered code,
‫which is how this is called,
‫we can run simple JavaScript just like we did in here.
‫So indeed here we go, Jonas as uppercase.
‫So buffered code, and if we have buffered code,
‫well then we also have to have unbuffered code.
‫And so basically, unbuffered code is code
‫that is not going to add anything to the output.
‫And we write that by writing dash
‫and then let's simply do some JavaScript here,
‫for example just defining a variable.
‫So let's say const x equals nine,
‫and then let's do some buffered code again.
‫So again code which is going to add something to the output.
‫And so again we can use JavaScript here,
‫so let's just do two times x.
‫And so here, we will then get access to that x variable.
‫So that should be 18 and indeed it is.
‫So that's all the small pieces of different code
‫that we can use in Pug.
‫Now there's actually also a third way of writing code,
‫and let me show that here.
‫So that is called interpolation,
‫and actually that one looks a little bit
‫like the ES6 template strings.
‫So instead of having just Natours here,
‫let's also add the name of the tour,
‫and so we can do that like this.
‫So with the template string in ES6, it works like this,
‫but here in Pug it is with this hash,
‫so just like this.
‫And here we need to do it like this
‫basically because this is code, so it's variable,
‫but this is not code, this is simply text.
‫And so we cannot do this because everything that's here
‫is then treated as JavaScript,
‫and so since this is not JavaScript it wouldn't work.
‫And so this here is just a string,
‫and so if we want to add something to that string,
‫then we need to use this interpolation syntax.
‫Okay, make sense?
‫Let's just add like this bar here,
‫which is also simply part of the string.
‫And so now we expect Natours
‫slash The Forest Hiker,
‫so that's exactly what they got.
‫Great, so these are the very fundamentals
‫of working with Pug.
‫But of course, there's a lot more to learn
‫and so let's keep doing that
‫over the next couple of lectures.