1 00:00:01,057 --> 00:00:02,830 ‫In this lecture, you're gonna learn 2 00:00:02,830 --> 00:00:06,513 ‫the very fundamentals of working with Pug templates. 3 00:00:07,950 --> 00:00:12,950 ‫So let's open our base template here and let's get started. 4 00:00:13,030 --> 00:00:17,720 ‫So in essence, Pug is a simple whitespace sensitive syntax 5 00:00:17,720 --> 00:00:22,550 ‫for writing html, so that's really the gist of what it is. 6 00:00:22,550 --> 00:00:24,900 ‫Now what that means is that all we use 7 00:00:24,900 --> 00:00:29,290 ‫to write html elements is their name and indentation 8 00:00:29,290 --> 00:00:30,630 ‫in our code. 9 00:00:30,630 --> 00:00:32,320 ‫So let's start by setting up 10 00:00:32,320 --> 00:00:35,093 ‫a very simple html structure here, 11 00:00:36,420 --> 00:00:38,170 ‫so give us some space. 12 00:00:38,170 --> 00:00:41,680 ‫And so html usually always starts with the doctype 13 00:00:44,350 --> 00:00:45,990 ‫and an html. 14 00:00:45,990 --> 00:00:49,300 ‫So in order to be able to properly work with Pug, 15 00:00:49,300 --> 00:00:51,943 ‫you should of course have some html knowledge; 16 00:00:53,100 --> 00:00:56,280 ‫otherwise, this might not make so much sense to you. 17 00:00:56,280 --> 00:00:58,090 ‫But still if you don't know html, 18 00:00:58,090 --> 00:01:01,750 ‫don't worry, you can just still follow what I'm doing here 19 00:01:01,750 --> 00:01:03,300 ‫and maybe just read an article 20 00:01:03,300 --> 00:01:05,250 ‫about getting started with html 21 00:01:05,250 --> 00:01:07,053 ‫because it's really, really simple. 22 00:01:08,250 --> 00:01:11,010 ‫Anyway, we always start with doctype 23 00:01:11,010 --> 00:01:14,500 ‫and then the first element, so the overarching element 24 00:01:14,500 --> 00:01:18,720 ‫in all our html documents is always the html, 25 00:01:18,720 --> 00:01:21,960 ‫then inside of that there's usually a head element. 26 00:01:21,960 --> 00:01:23,650 ‫And so in Pug in order to 27 00:01:23,650 --> 00:01:26,360 ‫say that one element is inside of the other one, 28 00:01:26,360 --> 00:01:28,700 ‫all we do is to use a tag. 29 00:01:28,700 --> 00:01:32,550 ‫So we use indentation, as I mentioned in the beginning, 30 00:01:32,550 --> 00:01:33,720 ‫and that's it. 31 00:01:33,720 --> 00:01:37,090 ‫So that's our head element, and so inside of that head 32 00:01:37,090 --> 00:01:39,770 ‫let's create the title of the webpage. 33 00:01:39,770 --> 00:01:41,573 ‫And so, yet another tag. 34 00:01:42,790 --> 00:01:43,773 ‫So title, 35 00:01:45,490 --> 00:01:47,210 ‫and let's say Natours. 36 00:01:47,210 --> 00:01:50,610 ‫Okay, so again just indentation, 37 00:01:50,610 --> 00:01:52,997 ‫then the name of the html element, 38 00:01:52,997 --> 00:01:54,890 ‫and then the content itself. 39 00:01:54,890 --> 00:01:57,450 ‫No opening tags, no closing tags, 40 00:01:57,450 --> 00:02:01,130 ‫and none of the clutter that we usually have in html. 41 00:02:01,130 --> 00:02:04,040 ‫So I actually really like this syntax here 42 00:02:04,040 --> 00:02:05,660 ‫for writing html documents, 43 00:02:05,660 --> 00:02:08,750 ‫so I find it really amazing, really simple to use, 44 00:02:08,750 --> 00:02:10,183 ‫and to read as well. 45 00:02:11,320 --> 00:02:14,290 ‫Anyway, that's the content that we want in the head, 46 00:02:14,290 --> 00:02:16,660 ‫and now we also want to create a body. 47 00:02:16,660 --> 00:02:19,660 ‫Now that body is of course not inside of the head, 48 00:02:19,660 --> 00:02:22,340 ‫instead it's in the same level as the head, 49 00:02:22,340 --> 00:02:25,870 ‫so basically also a direct child of html. 50 00:02:25,870 --> 00:02:29,190 ‫And so all we need to do is to go back one indentation level 51 00:02:30,130 --> 00:02:31,830 ‫and then create the element there. 52 00:02:32,900 --> 00:02:35,323 ‫Then in there we want our h1, 53 00:02:36,490 --> 00:02:39,070 ‫and so now we need to use some more indentation. 54 00:02:39,070 --> 00:02:43,290 ‫So of course not here, not here, but here, 55 00:02:43,290 --> 00:02:44,913 ‫so inside of the body. 56 00:02:47,404 --> 00:02:49,270 ‫Let's also add a paragraph, 57 00:02:49,270 --> 00:02:52,410 ‫and so for that we use the p element saying something like, 58 00:02:52,410 --> 00:02:55,203 ‫this is just some text. 59 00:02:56,228 --> 00:03:00,600 ‫So let's try that out now in our browser, 60 00:03:00,600 --> 00:03:03,223 ‫so reload, and here we go. 61 00:03:04,900 --> 00:03:08,200 ‫All right, and so here you actually see the entire structure 62 00:03:08,200 --> 00:03:12,400 ‫that we just created with the doctype, the html element, 63 00:03:12,400 --> 00:03:15,740 ‫and then of course head and body in there. 64 00:03:15,740 --> 00:03:19,620 ‫And you also see that title actually appearing up here. 65 00:03:19,620 --> 00:03:24,140 ‫Great, next up let's actually also include a CSS file 66 00:03:24,140 --> 00:03:27,360 ‫and also the favicon to be displayed here 67 00:03:27,360 --> 00:03:31,280 ‫instead of this generic page thing there. 68 00:03:31,280 --> 00:03:33,230 ‫And so if you know some html, 69 00:03:33,230 --> 00:03:37,320 ‫you know that that kind of stuff belongs here to the head. 70 00:03:37,320 --> 00:03:40,650 ‫So how would you actually include a CSS style sheet 71 00:03:40,650 --> 00:03:42,233 ‫with normal html? 72 00:03:43,350 --> 00:03:45,310 ‫You would do something like this. 73 00:03:45,310 --> 00:03:48,100 ‫So you would create a link element, 74 00:03:48,100 --> 00:03:50,763 ‫then define that it is a style sheet, 75 00:03:54,220 --> 00:03:55,853 ‫and then also the reference, 76 00:03:57,590 --> 00:03:59,453 ‫so just like this. 77 00:04:00,393 --> 00:04:03,483 ‫So CSS style.css, 78 00:04:05,230 --> 00:04:10,230 ‫and so what we have here, so this and this are attributes. 79 00:04:11,900 --> 00:04:15,260 ‫And so with Pug, we write attributes like this. 80 00:04:15,260 --> 00:04:17,610 ‫So instead of having this element, 81 00:04:17,610 --> 00:04:21,950 ‫we simply write link, and then we write these attributes 82 00:04:21,950 --> 00:04:25,140 ‫actually in parentheses, so like this. 83 00:04:25,140 --> 00:04:28,030 ‫So without any space and open parentheses, 84 00:04:28,030 --> 00:04:29,890 ‫and then in there is where we write 85 00:04:31,290 --> 00:04:33,343 ‫these attributes just like this. 86 00:04:35,410 --> 00:04:38,270 ‫And we should always write them with single quotes 87 00:04:38,270 --> 00:04:39,553 ‫and not double quotes, 88 00:04:41,600 --> 00:04:44,210 ‫and so we don't need this one here anymore. 89 00:04:44,210 --> 00:04:47,140 ‫Now just one thing that I wanted to tell you as well, 90 00:04:47,140 --> 00:04:51,970 ‫is that we can actually use regular html as well in Pug. 91 00:04:51,970 --> 00:04:54,880 ‫So if you wanted, you could leave this line of code here 92 00:04:54,880 --> 00:04:57,920 ‫and Pug would then understand it just fine. 93 00:04:57,920 --> 00:04:59,760 ‫But of course here I wanted to show you 94 00:04:59,760 --> 00:05:02,223 ‫how we can define attributes with Pug. 95 00:05:03,860 --> 00:05:07,080 ‫And so let's now do the same for the favicon, 96 00:05:07,080 --> 00:05:09,960 ‫and so again we need a link element, 97 00:05:09,960 --> 00:05:12,160 ‫and in there we will define some attributes. 98 00:05:14,510 --> 00:05:17,323 ‫So we defined that this is a shortcut icon, 99 00:05:20,180 --> 00:05:23,723 ‫we also specify its type, so image, 100 00:05:24,830 --> 00:05:26,713 ‫and in this case it's a PNG, 101 00:05:27,966 --> 00:05:30,530 ‫and then again the reference to it, 102 00:05:30,530 --> 00:05:35,530 ‫and it is an image favicon.png. 103 00:05:37,300 --> 00:05:40,103 ‫And so now let's go ahead and test that, 104 00:05:40,980 --> 00:05:44,610 ‫and so you see this actually looks kinda different. 105 00:05:44,610 --> 00:05:46,460 ‫So we have our favicon, 106 00:05:46,460 --> 00:05:48,943 ‫and also our text is now nicely stacked. 107 00:05:50,342 --> 00:05:54,120 ‫And in fact you see some CSS properties popping up here now 108 00:05:54,120 --> 00:05:55,153 ‫on the left side. 109 00:05:56,490 --> 00:05:59,470 ‫And so that's of course because I wrote a ton of CSS 110 00:05:59,470 --> 00:06:01,443 ‫actually for this application, 111 00:06:02,980 --> 00:06:07,870 ‫so that's all in public, CSS and style. 112 00:06:07,870 --> 00:06:09,733 ‫So you see that I have like, 113 00:06:10,690 --> 00:06:14,600 ‫I don't know, like a thousand lines or more even of CSS 114 00:06:14,600 --> 00:06:16,950 ‫that I wrote just for this application 115 00:06:16,950 --> 00:06:19,053 ‫to look as beautiful as it does. 116 00:06:21,784 --> 00:06:25,420 ‫So in other words, why does this style.css file 117 00:06:25,420 --> 00:06:28,820 ‫actually get loaded from the CSS folder automatically, 118 00:06:28,820 --> 00:06:32,110 ‫and the favicon also gets automatically loaded 119 00:06:32,110 --> 00:06:34,170 ‫from the image folder. 120 00:06:34,170 --> 00:06:38,040 ‫Well first of all, keep in mind that each of these assets 121 00:06:38,040 --> 00:06:41,433 ‫actually triggers its own http request, 122 00:06:42,330 --> 00:06:46,690 ‫so let's actually confirm that here in the sources 123 00:06:46,690 --> 00:06:48,920 ‫or actually in the network panel. 124 00:06:48,920 --> 00:06:51,270 ‫And so here you see these three requests, 125 00:06:51,270 --> 00:06:54,970 ‫so one for the page itself, the other one for our style, 126 00:06:54,970 --> 00:06:56,593 ‫and for our favicon. 127 00:06:59,280 --> 00:07:02,410 ‫And so again, why does it work like this 128 00:07:02,410 --> 00:07:06,020 ‫because obviously we do not have a route handler 129 00:07:06,020 --> 00:07:09,460 ‫for like any of these files here. 130 00:07:09,460 --> 00:07:12,250 ‫But it is still a route if you think about it, 131 00:07:12,250 --> 00:07:15,140 ‫because it's a get request to this url 132 00:07:15,140 --> 00:07:17,210 ‫and also to this url. 133 00:07:17,210 --> 00:07:20,930 ‫So let me remember why this does actually work, 134 00:07:20,930 --> 00:07:24,590 ‫and it is because of this middleware 135 00:07:24,590 --> 00:07:29,290 ‫that we defined somewhere up here, so this here. 136 00:07:29,290 --> 00:07:33,100 ‫So remember that by using express.static, 137 00:07:33,100 --> 00:07:36,190 ‫we basically define that all the static assets 138 00:07:36,190 --> 00:07:38,170 ‫will always automatically be served 139 00:07:38,170 --> 00:07:43,170 ‫from a folder called public, so with this folder here. 140 00:07:43,690 --> 00:07:47,470 ‫And so that's why when we say css slash style, 141 00:07:47,470 --> 00:07:50,050 ‫that in fact comes from the public folder. 142 00:07:50,050 --> 00:07:54,473 ‫And so this CSS folder is the folder inside of public, 143 00:07:55,612 --> 00:07:57,810 ‫and the same of course for the images. 144 00:07:57,810 --> 00:08:01,550 ‫So if in our html we have image slash favicon, 145 00:08:01,550 --> 00:08:04,010 ‫then it will open up the image folder 146 00:08:04,010 --> 00:08:06,720 ‫that is inside of our public folder. 147 00:08:06,720 --> 00:08:10,673 ‫Again because we defined it so in our express application. 148 00:08:12,360 --> 00:08:15,400 ‫So you already learned how to create elements 149 00:08:15,400 --> 00:08:17,570 ‫in Pug using indentation, 150 00:08:17,570 --> 00:08:20,470 ‫and you also learned how to use attributes. 151 00:08:20,470 --> 00:08:21,810 ‫But another really cool thing 152 00:08:21,810 --> 00:08:24,380 ‫is to actually use variables in here. 153 00:08:24,380 --> 00:08:27,350 ‫So let me now show you how we can actually pass data 154 00:08:27,350 --> 00:08:31,040 ‫into a template and then how we can use that data 155 00:08:31,040 --> 00:08:32,153 ‫right here in Pug. 156 00:08:35,300 --> 00:08:38,143 ‫So remember that we have this route here, 157 00:08:39,090 --> 00:08:42,580 ‫which we use to render our base template. 158 00:08:42,580 --> 00:08:43,860 ‫And of course if it's later, 159 00:08:43,860 --> 00:08:45,900 ‫we will actually have a separate file, 160 00:08:45,900 --> 00:08:48,173 ‫where all of these routes will then live. 161 00:08:49,050 --> 00:08:52,810 ‫But for now all I want to do is to really make this work. 162 00:08:52,810 --> 00:08:57,030 ‫Anyway, in order to now pass data into this template here, 163 00:08:57,030 --> 00:09:00,560 ‫all we need to do is to define an object here 164 00:09:00,560 --> 00:09:04,140 ‫and then we'll simply put some data in there. 165 00:09:04,140 --> 00:09:07,263 ‫And that data will then be available in the Pug template. 166 00:09:08,390 --> 00:09:10,910 ‫So let's simply create an object here 167 00:09:10,910 --> 00:09:15,853 ‫with a tour property and set it to The Forest Tiger, 168 00:09:18,795 --> 00:09:19,712 ‫and then... 169 00:09:20,950 --> 00:09:23,660 ‫let's also create a user property 170 00:09:23,660 --> 00:09:25,993 ‫and set it to Jonas. 171 00:09:28,180 --> 00:09:30,710 ‫And these variables that we passed in here, 172 00:09:30,710 --> 00:09:33,543 ‫they are then called locals in the Pug file. 173 00:09:34,840 --> 00:09:39,380 ‫So now let's actually go ahead and use that data. 174 00:09:39,380 --> 00:09:41,630 ‫And what I want to do now is to put 175 00:09:41,630 --> 00:09:45,140 ‫that tour variable on to our h1. 176 00:09:45,140 --> 00:09:48,600 ‫So basically, I want to create an h1 element, 177 00:09:48,600 --> 00:09:51,510 ‫where the content is that tour name. 178 00:09:51,510 --> 00:09:53,260 ‫And the simplest way of doing that 179 00:09:53,260 --> 00:09:56,510 ‫is to simply use the equal syntax like this, 180 00:09:56,510 --> 00:10:01,340 ‫so h1 equals, then a space, and then tour. 181 00:10:01,340 --> 00:10:04,353 ‫And that's it, that's really all the we have to do. 182 00:10:05,830 --> 00:10:07,660 ‫So let's take this one here out, 183 00:10:07,660 --> 00:10:09,803 ‫and so actually another thing I wanted to show you 184 00:10:09,803 --> 00:10:12,830 ‫is that in Pug, we can create comments, 185 00:10:12,830 --> 00:10:15,450 ‫and we can create two kinds of comments. 186 00:10:15,450 --> 00:10:19,100 ‫So the simplest one is simply just like in JavaScript, 187 00:10:19,100 --> 00:10:20,703 ‫so just like this. 188 00:10:21,890 --> 00:10:23,600 ‫And this will then create a comment 189 00:10:23,600 --> 00:10:26,120 ‫that's gonna be visible in the html. 190 00:10:26,120 --> 00:10:27,770 ‫So let's now take a look at this, 191 00:10:29,290 --> 00:10:30,520 ‫and so let's keep in mind 192 00:10:30,520 --> 00:10:34,330 ‫that now the h1 will no long be The Park Camper, 193 00:10:34,330 --> 00:10:37,480 ‫but instead it should be The Forest Hiker 194 00:10:37,480 --> 00:10:39,520 ‫because that's the tour variable, 195 00:10:39,520 --> 00:10:42,090 ‫or in other words the tour local, 196 00:10:42,090 --> 00:10:44,640 ‫that it now passed into this template. 197 00:10:44,640 --> 00:10:46,390 ‫And so here, I then put that 198 00:10:46,390 --> 00:10:49,373 ‫into the h1 using the equal syntax. 199 00:10:51,070 --> 00:10:53,160 ‫So let's check that out, 200 00:10:53,160 --> 00:10:54,293 ‫take a look at this. 201 00:10:55,360 --> 00:10:57,743 ‫And indeed it's now The Forest Hiker. 202 00:11:00,020 --> 00:11:02,920 ‫And also here is that comment 203 00:11:02,920 --> 00:11:05,250 ‫that we just talked about also. 204 00:11:05,250 --> 00:11:07,940 ‫So as I said, that double slash that we did there 205 00:11:07,940 --> 00:11:10,810 ‫basically creates an html comment. 206 00:11:10,810 --> 00:11:14,820 ‫So this syntax here is how we write comments in html, 207 00:11:14,820 --> 00:11:19,380 ‫but if you really want this to be a comment for the Pug file 208 00:11:19,380 --> 00:11:21,950 ‫but not really being outputted to html, 209 00:11:21,950 --> 00:11:24,093 ‫you need to add a dash like this. 210 00:11:26,350 --> 00:11:29,513 ‫So if we now reload this, then that comment should be gone. 211 00:11:31,880 --> 00:11:34,550 ‫So this kind of code here, that we wrote here, 212 00:11:34,550 --> 00:11:36,163 ‫is called buffered code. 213 00:11:37,080 --> 00:11:40,550 ‫And actually we could also write some JavaScript here, 214 00:11:40,550 --> 00:11:44,880 ‫so let's say h2 equal the user, 215 00:11:44,880 --> 00:11:48,700 ‫and then we can also call toUppercase on that. 216 00:11:53,080 --> 00:11:54,710 ‫So simple JavaScript here 217 00:11:54,710 --> 00:11:57,600 ‫because again here in this buffered code, 218 00:11:57,600 --> 00:11:59,150 ‫which is how this is called, 219 00:11:59,150 --> 00:12:02,403 ‫we can run simple JavaScript just like we did in here. 220 00:12:05,840 --> 00:12:10,263 ‫So indeed here we go, Jonas as uppercase. 221 00:12:12,160 --> 00:12:16,030 ‫So buffered code, and if we have buffered code, 222 00:12:16,030 --> 00:12:19,660 ‫well then we also have to have unbuffered code. 223 00:12:19,660 --> 00:12:22,890 ‫And so basically, unbuffered code is code 224 00:12:22,890 --> 00:12:25,620 ‫that is not going to add anything to the output. 225 00:12:25,620 --> 00:12:28,510 ‫And we write that by writing dash 226 00:12:28,510 --> 00:12:30,863 ‫and then let's simply do some JavaScript here, 227 00:12:31,990 --> 00:12:34,610 ‫for example just defining a variable. 228 00:12:34,610 --> 00:12:38,330 ‫So let's say const x equals nine, 229 00:12:38,330 --> 00:12:40,720 ‫and then let's do some buffered code again. 230 00:12:40,720 --> 00:12:45,200 ‫So again code which is going to add something to the output. 231 00:12:45,200 --> 00:12:47,870 ‫And so again we can use JavaScript here, 232 00:12:47,870 --> 00:12:50,290 ‫so let's just do two times x. 233 00:12:50,290 --> 00:12:54,613 ‫And so here, we will then get access to that x variable. 234 00:12:56,710 --> 00:13:00,833 ‫So that should be 18 and indeed it is. 235 00:13:01,990 --> 00:13:04,603 ‫So that's all the small pieces of different code 236 00:13:04,603 --> 00:13:06,950 ‫that we can use in Pug. 237 00:13:06,950 --> 00:13:11,130 ‫Now there's actually also a third way of writing code, 238 00:13:11,130 --> 00:13:12,970 ‫and let me show that here. 239 00:13:12,970 --> 00:13:15,240 ‫So that is called interpolation, 240 00:13:15,240 --> 00:13:16,690 ‫and actually that one looks a little bit 241 00:13:16,690 --> 00:13:19,370 ‫like the ES6 template strings. 242 00:13:19,370 --> 00:13:21,430 ‫So instead of having just Natours here, 243 00:13:21,430 --> 00:13:23,233 ‫let's also add the name of the tour, 244 00:13:24,100 --> 00:13:26,883 ‫and so we can do that like this. 245 00:13:29,380 --> 00:13:33,620 ‫So with the template string in ES6, it works like this, 246 00:13:33,620 --> 00:13:36,553 ‫but here in Pug it is with this hash, 247 00:13:37,660 --> 00:13:39,350 ‫so just like this. 248 00:13:39,350 --> 00:13:41,230 ‫And here we need to do it like this 249 00:13:41,230 --> 00:13:45,090 ‫basically because this is code, so it's variable, 250 00:13:45,090 --> 00:13:47,700 ‫but this is not code, this is simply text. 251 00:13:47,700 --> 00:13:51,500 ‫And so we cannot do this because everything that's here 252 00:13:51,500 --> 00:13:53,630 ‫is then treated as JavaScript, 253 00:13:53,630 --> 00:13:57,150 ‫and so since this is not JavaScript it wouldn't work. 254 00:13:57,150 --> 00:13:59,810 ‫And so this here is just a string, 255 00:13:59,810 --> 00:14:02,730 ‫and so if we want to add something to that string, 256 00:14:02,730 --> 00:14:05,430 ‫then we need to use this interpolation syntax. 257 00:14:05,430 --> 00:14:07,053 ‫Okay, make sense? 258 00:14:08,620 --> 00:14:11,320 ‫Let's just add like this bar here, 259 00:14:11,320 --> 00:14:13,940 ‫which is also simply part of the string. 260 00:14:13,940 --> 00:14:15,717 ‫And so now we expect Natours 261 00:14:17,010 --> 00:14:18,573 ‫slash The Forest Hiker, 262 00:14:19,440 --> 00:14:21,810 ‫so that's exactly what they got. 263 00:14:21,810 --> 00:14:24,700 ‫Great, so these are the very fundamentals 264 00:14:24,700 --> 00:14:26,760 ‫of working with Pug. 265 00:14:26,760 --> 00:14:28,970 ‫But of course, there's a lot more to learn 266 00:14:28,970 --> 00:14:30,330 ‫and so let's keep doing that 267 00:14:30,330 --> 00:14:31,980 ‫over the next couple of lectures.