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