1 00:00:00,250 --> 00:00:06,164 Hello, so far with our website we have built this home page. 2 00:00:06,165 --> 00:00:08,692 You can see, it's in the home page and 3 00:00:08,693 --> 00:00:10,948 we also have the about page as well. 4 00:00:10,949 --> 00:00:13,402 So /about/. 5 00:00:13,403 --> 00:00:17,188 This is the about page, which doesn't have 6 00:00:17,189 --> 00:00:20,778 any Bootstrap styling, of course, because we applied 7 00:00:20,779 --> 00:00:25,000 the styling only to the index.html template. 8 00:00:26,533 --> 00:00:32,860 And we also have the blog.html template as well, 9 00:00:32,861 --> 00:00:38,790 which is one of these pages, of Cats or Dogs. 10 00:00:38,791 --> 00:00:41,872 So three templates, one, two, three. 11 00:00:41,873 --> 00:00:46,112 Now we need to find a way to navigate through the 12 00:00:46,113 --> 00:00:51,108 website, which is that for example, how do you go. how 13 00:00:51,109 --> 00:00:54,740 can the visitor go from this page to the about page? 14 00:00:54,741 --> 00:00:56,522 Well, usually this is implemented 15 00:00:56,523 --> 00:00:59,540 through a navigation, menu bar. 16 00:00:59,541 --> 00:01:03,140 So which could be somewhere on top here. 17 00:01:03,670 --> 00:01:07,768 And you could click the about, link and go to that page. 18 00:01:07,769 --> 00:01:10,328 This is what we will do in these 19 00:01:10,329 --> 00:01:14,488 videos now, and how can we implement that? 20 00:01:14,489 --> 00:01:17,708 Because the navigation menu bar 21 00:01:17,709 --> 00:01:19,788 should be in every page. 22 00:01:19,789 --> 00:01:23,308 So one way to do that, is to create 23 00:01:23,309 --> 00:01:28,294 that, navigation menu which is created with HTML. 24 00:01:28,295 --> 00:01:31,936 So one way is to code the HTML for 25 00:01:31,937 --> 00:01:36,190 that navigation menu, in each of these html pages. 26 00:01:36,191 --> 00:01:40,742 But that is of course against the DRY principles. 27 00:01:40,743 --> 00:01:44,324 So DRY, which stands for Don't Repeat Yourself. 28 00:01:44,325 --> 00:01:46,356 Therefore, what we're going to do is 29 00:01:46,357 --> 00:01:49,470 we are going to use, Template Inheritance. 30 00:01:50,050 --> 00:01:52,590 What is Template Inheritance? 31 00:01:53,430 --> 00:01:56,776 Well, it works like this, the 32 00:01:56,777 --> 00:01:59,590 component that will be repetitive. 33 00:01:59,591 --> 00:02:04,072 So the navigation menu bar in our case, is going 34 00:02:04,073 --> 00:02:07,788 to stay in one single file and then the other 35 00:02:07,789 --> 00:02:14,220 files, which is about, blog and index, these files will 36 00:02:14,221 --> 00:02:18,732 get that other file, where the navigation menu is. 37 00:02:18,733 --> 00:02:21,830 And this is referred to as Template Inheritance. 38 00:02:21,831 --> 00:02:24,544 So let's see it in action, how it works. 39 00:02:24,545 --> 00:02:26,768 So right click over templates, and go to 40 00:02:26,769 --> 00:02:31,228 New File and write something like base.html. 41 00:02:31,866 --> 00:02:35,892 base.html is going to contain the navigation menu bar. 42 00:02:35,893 --> 00:02:39,332 Now, to create a navigation menu in 43 00:02:39,333 --> 00:02:42,394 HTML, you use the nav tag. 44 00:02:42,395 --> 00:02:44,392 So open it and close it, and 45 00:02:44,393 --> 00:02:47,110 then inside you have another div. 46 00:02:47,111 --> 00:02:48,712 Open and close it. 47 00:02:48,713 --> 00:02:52,930 And inside this div, we have the ul, 48 00:02:53,670 --> 00:02:57,650 which creates a list of menu items. 49 00:02:57,651 --> 00:03:04,333 So the first menu item would be with li, right. 50 00:03:04,333 --> 00:03:07,080 Then we have another one. 51 00:03:07,630 --> 00:03:11,664 So home, we have About Us, that's all. 52 00:03:11,665 --> 00:03:15,798 So the first menu item, the second menu item. 53 00:03:15,799 --> 00:03:17,030 So this would be for whom. 54 00:03:17,031 --> 00:03:23,533 Therefore inside the first Li tag, which stands for list, we place, 55 00:03:24,610 --> 00:03:29,440 we put a tags which will create a link. 56 00:03:30,290 --> 00:03:34,710 Same for the next one here, a tags, 57 00:03:34,711 --> 00:03:39,170 right, inside the first a tag. 58 00:03:39,910 --> 00:03:43,510 So just here we say href. 59 00:03:43,511 --> 00:03:46,524 This property which is going to have as value 60 00:03:46,525 --> 00:03:53,532 inside quotes, the URL to the first page, which 61 00:03:53,533 --> 00:03:56,700 should be, this tag, 62 00:03:56,701 --> 00:03:59,116 [No Audio] 63 00:03:59,117 --> 00:04:04,170 url, single quotes. 64 00:04:05,070 --> 00:04:12,852 Well, now we need to look at blog, urls, and get the 65 00:04:12,853 --> 00:04:19,236 name of, the url for the home page which is home. 66 00:04:19,237 --> 00:04:27,480 So that goes in here, home. We do the same for about, 67 00:04:27,481 --> 00:04:29,166 so about_view, 68 00:04:29,167 --> 00:04:33,666 [No Audio] 69 00:04:33,667 --> 00:04:39,190 again here. So let's copy that, and paste it inside the first h tag. 70 00:04:40,490 --> 00:04:43,324 Careful, there's a space here. 71 00:04:43,325 --> 00:04:47,080 href about_view. 72 00:04:48,510 --> 00:04:50,672 Now we need to do something else. 73 00:04:50,673 --> 00:04:57,456 We have to go to index.html, and, cut from the 74 00:04:57,457 --> 00:05:02,532 opening body tag in here, until the very first line 75 00:05:02,533 --> 00:05:03,733 cut them out, 76 00:05:05,033 --> 00:05:06,866 and paste them, 77 00:05:08,000 --> 00:05:12,400 on top here. So make some space, paste them in there. 78 00:05:12,401 --> 00:05:14,470 [No Audio] 79 00:05:14,471 --> 00:05:22,933 Also go again, to index.html and cut again, 80 00:05:23,110 --> 00:05:27,362 starting from the closing html tag, including the closing 81 00:05:27,363 --> 00:05:33,036 body tag, including the script tag of Bootstrap, cut 82 00:05:33,037 --> 00:05:36,956 them, go to base.html, go to the very 83 00:05:36,957 --> 00:05:41,100 end, make some space, paste it. 84 00:05:42,430 --> 00:05:45,792 Now base.html will be the parent. 85 00:05:45,793 --> 00:05:48,278 So we talked about Template Inheritance. 86 00:05:48,279 --> 00:05:51,652 This is the parent now, and index.html is the 87 00:05:51,653 --> 00:05:57,066 child, which is going to get, these from base.html. 88 00:05:57,067 --> 00:05:59,642 Actually every page, not only index, 89 00:05:59,643 --> 00:06:03,422 but about.html, blog.html. 90 00:06:03,423 --> 00:06:05,700 So all the Blog Posts will get, 91 00:06:05,701 --> 00:06:08,100 [No Audio] 92 00:06:08,101 --> 00:06:10,702 all these from base.html. 93 00:06:10,703 --> 00:06:13,064 That allows us also to apply 94 00:06:13,065 --> 00:06:16,920 Bootstrap, on every single web page. 95 00:06:16,933 --> 00:06:19,210 [No Audio] 96 00:06:19,211 --> 00:06:25,612 And now you need to tell each of your pages, such as 97 00:06:25,613 --> 00:06:31,830 index.html, you need to tell it that, it has to extend. 98 00:06:31,831 --> 00:06:35,712 So through a template tag like this, 99 00:06:35,713 --> 00:06:42,590 you say extend, single quotes, base.html. 100 00:06:43,170 --> 00:06:47,600 So copy that and paste it, in about.html as well. 101 00:06:48,052 --> 00:06:53,112 And here also we need to delete those body tags and that 102 00:06:53,113 --> 00:07:00,574 as well, and just say that, and go to blog.html. 103 00:07:00,575 --> 00:07:07,810 Also delete body tags, html tags, DOCTYPE tags, paste 104 00:07:07,811 --> 00:07:12,098 that, delete the closing html tag and closing body tag 105 00:07:12,099 --> 00:07:20,833 delete, save, save, save. Then go to base.html and, 106 00:07:20,834 --> 00:07:22,933 [No Audio] 107 00:07:22,934 --> 00:07:29,152 at the end, so after the navigation menu now, we want to 108 00:07:29,153 --> 00:07:35,933 do, a template tag again and say block content 109 00:07:37,433 --> 00:07:46,340 and also, the same thing, say template tag endblock content. 110 00:07:46,870 --> 00:07:48,660 So what is this? 111 00:07:49,910 --> 00:07:52,584 Well, basically each web page. 112 00:07:52,585 --> 00:07:56,844 So think of what the visitor sees on the website. 113 00:07:56,845 --> 00:08:00,250 They see on top a navigation menu bar, 114 00:08:00,251 --> 00:08:03,850 which is this one in here, right? 115 00:08:03,851 --> 00:08:08,066 And then they see the content which could be, 116 00:08:08,067 --> 00:08:10,300 [No Audio] 117 00:08:10,301 --> 00:08:11,702 Post about Cats. 118 00:08:11,703 --> 00:08:15,936 So the cat's content or in the case of 119 00:08:15,937 --> 00:08:19,340 About, is the content of the about page. 120 00:08:19,890 --> 00:08:22,052 So under the menu comes the content. 121 00:08:22,053 --> 00:08:24,290 So this is the content. 122 00:08:24,291 --> 00:08:28,948 And now we need to remember this, variable content 123 00:08:28,949 --> 00:08:32,682 and go to, for example, to index.html. 124 00:08:32,683 --> 00:08:34,933 And then under this we say, 125 00:08:34,934 --> 00:08:39,933 [No Audio] 126 00:08:39,934 --> 00:08:41,700 block content. 127 00:08:41,701 --> 00:08:44,390 [No Audio] 128 00:08:44,391 --> 00:08:46,933 and it ends again with 129 00:08:46,934 --> 00:08:49,866 [No Audio] 130 00:08:49,867 --> 00:08:52,233 endblock content. 131 00:08:52,234 --> 00:08:54,650 [No Audio] 132 00:08:54,651 --> 00:08:59,958 So like that, which means that, as you see, this extends 133 00:08:59,959 --> 00:09:06,262 base.html, so it gets the data from base.html. 134 00:09:06,263 --> 00:09:10,666 And then, this thing between the block, 135 00:09:11,300 --> 00:09:16,154 the content tags, from there to there, is somehow 136 00:09:16,155 --> 00:09:19,972 combined with that base.html page, to be 137 00:09:19,973 --> 00:09:22,980 rendered in the browser as a complete page. 138 00:09:22,981 --> 00:09:26,302 And that's about Template Inheritance. 139 00:09:26,303 --> 00:09:28,398 It's a bit difficult to grasp. 140 00:09:28,399 --> 00:09:31,278 So let's see if we did some errors 141 00:09:31,279 --> 00:09:35,010 now, we're going to see the results. 142 00:09:35,010 --> 00:09:37,530 [No Audio] 143 00:09:37,531 --> 00:09:38,760 Yes, of course. 144 00:09:39,370 --> 00:09:42,194 So it says that, 'extend'. 145 00:09:42,195 --> 00:09:46,018 Did you forget to register or load this tag? 146 00:09:46,019 --> 00:09:48,428 Well, extend that is because Django is 147 00:09:48,429 --> 00:09:51,222 not recognizing this because it's, extends. 148 00:09:51,223 --> 00:09:55,606 So blog.html extends base.html. 149 00:09:55,607 --> 00:09:57,152 Let's do the same for the other 150 00:09:57,153 --> 00:10:00,276 pages, and save this one as well. 151 00:10:00,277 --> 00:10:06,362 And save, yes, this is a base.html template. 152 00:10:06,363 --> 00:10:08,910 Let's look for the next error. 153 00:10:10,210 --> 00:10:11,920 Okay, not bad. 154 00:10:13,430 --> 00:10:17,590 So we see something here, but we don't see any text. 155 00:10:17,591 --> 00:10:22,690 So let's go back and fix that, in base.html. 156 00:10:23,830 --> 00:10:30,972 So here we have the link, but we don't have any text. 157 00:10:30,973 --> 00:10:33,148 So let's say Home for that. 158 00:10:33,149 --> 00:10:40,512 And About Us for this save, refresh and yeah, 159 00:10:40,513 --> 00:10:43,120 we see something now, press on About Us, 160 00:10:43,121 --> 00:10:45,470 it takes us to the about page. 161 00:10:45,471 --> 00:10:46,928 Go to Home, 162 00:10:46,929 --> 00:10:50,130 it goes to Home, About Us, right. 163 00:10:50,131 --> 00:10:54,210 We don't see the content here, so let's fix that 164 00:10:54,211 --> 00:10:59,972 for the about.html page, because we don't see it, 165 00:10:59,973 --> 00:11:05,350 because we don't have those block content tags. 166 00:11:05,351 --> 00:11:10,520 So block content here and here. 167 00:11:10,521 --> 00:11:16,194 But this one should be with endblock, save, refresh, 168 00:11:16,195 --> 00:11:18,508 and, This is the content of about. 169 00:11:18,509 --> 00:11:23,100 Now, of course, if you want this to be prettier, 170 00:11:23,101 --> 00:11:25,333 [No Audio] 171 00:11:25,334 --> 00:11:27,084 you have to put it inside 172 00:11:27,085 --> 00:11:33,702 div tags and say class container, save, refresh. 173 00:11:33,703 --> 00:11:35,984 And now it goes somewhere in the middle 174 00:11:35,985 --> 00:11:41,280 and you can also, make it even better. 175 00:11:42,370 --> 00:11:45,412 So this is a main div that contains everything. 176 00:11:45,413 --> 00:11:48,480 This would be something like h2. 177 00:11:48,480 --> 00:11:54,666 [No Audio] 178 00:11:54,666 --> 00:11:59,990 And then we could add more divs, with content, 179 00:12:01,000 --> 00:12:05,433 this is the content like this. So, 180 00:12:05,434 --> 00:12:07,633 [No Audio] 181 00:12:07,634 --> 00:12:09,812 the navigation menu now, it doesn't 182 00:12:09,813 --> 00:12:13,540 look very pretty because, we haven't applied 183 00:12:13,541 --> 00:12:21,540 any Bootstrap classes styling, to this element. 184 00:12:21,541 --> 00:12:24,750 So you have nav with no class, div 185 00:12:24,751 --> 00:12:28,110 with no class, ul, li and a 186 00:12:28,111 --> 00:12:32,308 also, no classes, no Bootstrap styling. 187 00:12:32,309 --> 00:12:36,766 So let's do that in the next video, see you there.