#100DaysOfWeb in Python Transcripts
Chapter: Days 45-48: Build a simple Django app
Lecture: Static files and the base template
0:01 To get to the actual quotes template, we need to take
0:04 a couple of steps back.
0:07 All of the quotes templates are going to inherit from
0:10 a base template, so we first need to make the base template
0:14 And the base template will access static files like our CSS
0:19 and a Favicon icon
0:22 so first I actually need to explain static files.
0:25 First I want to go in my main app or global project app
0:29 mysite, and we're going to make a static folder.
0:34 And inside of that I'm going to create a js folder
0:41 You will have CSS and image.
0:46 Straight away I'm going to download a favicon I created
0:50 into images and I'm going to copy my style sheet over.
1:00 To style our app nicely, I'm going to use MUI CSS
1:04 and I took some CSS from one of the template pages
1:11 and it's something like this.
1:13 I'm not going to focus on CSS in this lesson
1:16 so I'm just copying this over to style.css
1:21 which lives in static/css.
1:25 After box static directory, I noticed it's not detected
1:28 and that's because I'm missing a setting in settings.py.
1:33 So we have already defined STATIC_URL
1:36 but turns out that was not enough. I actually need
1:39 to set STATICFILES_DIRS.
1:42 So first I'm going to define project root
1:50 and I'm going to abstract
1:51 the current path that the app is running.
1:57 So take the absolute path of this file.
2:01 And that actually will be the directory that I'm in.
2:07 Then I need to set the variable that defines where Django's
2:10 going to look for static files and that is called
2:17 And here I define the directory name
2:19 of my static folder, so I join my project root with static.
2:28 And that should get us the whole path up til static.
2:37 It's important that this constant receives a joo-ple.
2:41 Alright, that's it for static files for now.
2:46 Now let's create the base template.
2:52 I already have that file in my project app, my site
2:56 on our templates and in a base dot html.
3:01 And to avoid a lot coding I'm going to paste that in
3:05 and here you see why I needed to first explain static
3:09 because right off the bat we want to load in static.
3:11 And why do we want that? Because to load in the favicon
3:16 and the style sheet, I need to reference the static folder.
3:19 And I do that like this: curly braces percentage
3:22 static keyword and a relative path starting from
3:27 inside my static folder.
3:30 Alight, so that's what this part is. The other link
3:33 and script tags reference the movie's CSS and JS files
3:37 which are a CDM. There is some other logic in this template
3:42 which I come back to later. For example:
3:44 when a quote is passed into this template
3:47 and has a cover, we specify that with CSS on the body
3:52 so we'll show the cover in full-length as the background
3:58 with a couple of links, with a header
4:03 and here you see how we make links in Django
4:06 again we use a keyword called url and here we see
4:09 the namespace, quotes, colon
4:12 and then the name of the view.
4:14 Again, any logic goes into curly braces and percentage.
4:20 On the other hand, if we want to display a variable
4:23 we us double curly braces.
4:26 Messages is part of Django and it's easy to show messages
4:31 to the user based on the actions they perform.
4:36 That's it for the html, here we close it out
4:39 and the important thing is the content block.
4:41 This is a block we set up for inheritance.
4:44 So, the next video we'll see how to quote template
4:47 inheritance from this base template, and put its own content
4:51 in this reserved content block