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