All language subtitles for 004 First Steps with Pug_Downloadly.ir_en

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.