Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
After we get HTML into the mix, we're going to want some CSS.
STATICFILES_DIRS
is a setting for where to find static files. These files will either be served during development or will end up being collected by the collectstatic
command during deployment.
staticfiles_urlpatterns()
is a function that returns the URL patterns for static files based on DEBUG
and a few other settings. You import it from django.contrib.staticfiles.urls
.
{% load static from staticfiles %}
- The way to import the {% static %}
tag for use.
{% static "<path/to/asset>" %}
- How to use the {% static %}
tag to properly point to a static asset.
-
0:00
We're going to look at another template tag in this video.
-
0:02
One that lets us refer to static media, like CSS, JavaScript, or
-
0:06
images in our templates.
-
0:08
This video has a new workspace attached to it, so
-
0:10
be sure you open it up fresh to get the wonderful assets from our designers.
-
0:13
Again, static assets, we have to do a bit of work with our settings and
-
0:16
our URLs, but it's nothing you can't handle.
-
0:18
Let's go do it.
-
0:19
We'll start using our static assets in our settings.py.
-
0:24
We need to add, at the bottom, a new attribute or a new setting.
-
0:30
So, the setting we're adding is STATICFILES_DIRS and is a tuple.
-
0:39
And inside that tuple, we're going to add the paths to locations for
-
0:44
Django to find our static assets.
-
0:47
So these are things like our CSS files, our images, our JavaScript, whatever.
-
0:52
So we're gonna use os.path.join.
-
0:55
OS is already imported up at the top, BASE_DIR,
-
0:59
which is our learning site dir, right here, or directory.
-
1:04
And then we're gonna join that with the word assets, and
-
1:07
since this is a tuple, it needs to have a comma at the end.
-
1:10
And so this says, hey, Django, if I ask you for
-
1:13
static stuff, go look in this directory.
-
1:15
So I have already created this directory for you, you can see there is a CSS folder
-
1:19
in here and I layout .css, don't worry about that, you don't need to edit them,
-
1:23
we're not gonna mess with those at all, we're just going to use them.
-
1:26
Before we can get to them though, we have to add a little bit more stuff.
-
1:29
Of course we do, right?
-
1:31
If we were deploying this live, this is somewhere on the Internet,
-
1:35
we would be using a server like Apache or Nginx or
-
1:39
a Windows Server and they would have a rule set up for how to find static stuff.
-
1:43
Because we don't want to use Python to serve static stuff.
-
1:45
But right now, we're just in development,
-
1:47
we're just messing with this on our own machine or in workspaces.
-
1:51
It's cool if Python serves as our static files.
-
1:53
So we have to tell Django how to do that.
-
1:57
So, let's hop over to our urls.py.
-
2:00
And up here at the top,
-
2:01
where we have these imports, we're going to add one more import.
-
2:07
From django.contrib.staticfiles.urls import
-
2:13
staticfiles, oops, files_urlpatterns.
-
2:20
Really long line, I know.
-
2:22
And so, down here at the bottom of this one, though.
-
2:26
We are going to then add urlpatterns +=
-
2:30
staticfiles_urlpatterns and
-
2:35
that happens to be a function, so we need to call it.
-
2:40
But what does this do?
-
2:40
What this does is, it checks to see if we're in debug mode,
-
2:45
which We are.
-
2:50
I knew that setting was in there somewhere,
-
2:52
I just couldn't remember where it was.
-
2:53
And if we're in debug mode then it adds a static path.
-
2:59
So, static/, that points to all of our files in our static folders.
-
3:05
But now we need to use this.
-
3:07
So how do we use that?
-
3:07
Well, let's go look at our layout template.
-
3:10
And up here in our head area, let's add a link
-
3:15
rel=stylesheet and
-
3:20
our href is going to be a new tag, static.
-
3:27
And css/layout.css.
-
3:32
And we close our quote, we close our thing there.
-
3:35
Now we do need to add one more thing which is, we need to do load static
-
3:39
from static files, because static is not loaded by default.
-
3:44
Not every site is going to need static files.
-
3:47
So, Django doesn't load that automatically.
-
3:51
The cool thing about using the static tag though, as opposed to,
-
3:54
there's, occasionally you'll see people do something like this.
-
3:57
STATIC_URL.
-
4:00
And, that's cool if your static URL never changes.
-
4:03
But, if you're going to be deploying your static assets onto something like S3 or
-
4:07
CloudFront, where it might change,
-
4:10
then you don't always want to have URL that never changes.
-
4:15
So we're gonna use the static tag and
-
4:17
the static tag can actually figure out what these new URLs are.
-
4:21
Which is really cool.
-
4:23
So we're gonna save that and then let's go refresh our page and
-
4:26
see if we get any CSS.
-
4:41
Oh and that's right, we got some, but we didn't apply any.
-
4:44
Let's add a little bit more stuff in here.
-
4:47
So inside of our body, we want to have a div and
-
4:52
our class needs to be site container and then let's.
-
5:03
All right.
-
5:04
Save. Refresh.
-
5:06
Cool, so we've got a site container.
-
5:07
We have just a little bit of styling, there's not a whole lot of stuff.
-
5:11
We will have a lot more styling as the course goes on.
-
5:15
Obviously, very few web apps can be complete without static assets and
-
5:19
ours is no exception.
-
5:19
Now that we have it looking all spiffy, let's see about adding another model that
-
5:23
will represent the video, or steps that belong to our courses.
You need to sign up for Treehouse in order to download course files.
Sign up