>> Hi there. I'm Christopher Harrison,
I'm a Senior Cloud Advocate inside of Microsoft Cloud and AI.
What I want to explore here is how we can set
up inheritance using templates inside of Django.
That whenever you're creating really any type of web application,
you are going to need some form of
consistency throughout all of your different pages,
consistent structure, branding, navigation, etc.
Obviously, we don't want to have to do
the exact same thing in every single HTML file that we create.
Fortunately, what we can do in Django is set up inheritance that
we can set up a base page that we can use as our template,
and then we can set up children
that are then going to use that base.
We can indicate, hey,
I want to put some information here,
some information here, etc.
That way the overall structure stays the same,
and then only the spots that need to be
updated are then going to be updated.
Now quite frequently the way that this happens is you'll
have a designer that will give you that initial base page,
and that's the type of scenario that I'm going to go with here.
Then, you'll go in and make a couple of
modifications to then determine where it is
that you want your children pages or
your child pages to be able to put in information.
What I have here is a base HTML page,
and this has been created by Anthony Shaw, thank you Anthony.
It's already got most everything that I'm going to
need that you're going to notice that it's going to be
using a little bit of like Bootstrap stuff,
and we've got our little links and everything else that's set up.
I'm going to now use this as the base.
Now you may notice as I'm scrolling through this,
that it's already got a couple of things
that aren't actually HTML.
This is where that templating engine that Django
provides us is starting to come into action.
What you're going to notice right
here is we have this curly percent.
This curly percent inside of
the Django templating engine indicates that we want to
run some function or
some other bit of code from the Django framework.
You're going to see this in a few different spots
whenever you're working with Django templates.
The first place where we're seeing this is in
this little spot called load static.
Load, as you might guess,
gives us the ability to load something
up so we're loading up an extension,
and in particular, we're loading up the static extension.
The static extension is used in Django to indicate static files.
For example, your CSS files, your images,
etc, that all of those are going to be static files,
so we don't need to process those at all.
Now, in Django, you can actually
change where that directory is going to be,
and there's also a little bit of
special magic that needs to happen
in order for Django to properly serve up static files.
That's why we have this load static to load that extension up.
Then what you're going to notice is that
anytime that we want to go
refer to something that's inside of our static folder,
then what we're going to do is we're going
to again use that curly percent,
say static, and then whatever the name of the file is.
This is now going to load up from our CSS folder, theme.css.
Then, you'll notice right here that
we've got another call to static.
This is going to go load up the small logo.png
file from the res image folder and so forth.
You can start to see how that goes.
Anything inside of that static that we want to bring in,
that's how we're going to do it.
Now, we're actually going to do something
similar to create inside of this base page here.
This is going to be our parent or our base page.
We're going to create different blocks.
Our blocks are going to be where the child page is,
are going to be allowed to put in information.
Now, we'll add this in and we'll give them names.
I'm going to use again that Django extension,
I'm going to type out block it will give me
a little bit of a snippet here.
I'm just going to hit "Tab" with that selected,
and I'm going to give this a name of title just like that.
Now let me go ahead and move that down,
and I'm just going to put in that default content,
that ReleCloud expand your horizons.
Our end block, this is
now where a child page will be able to put in information,
and there is our default.
One little thing that's worth noting is that having
the name onto the end block is optional,
but it can help potentially
make your page a little bit more readable,
especially if your block start to get a bit larger.
This is now going to be somewhere where a child page will be able
to put in it's own information. That's our title.
Let's go ahead and do the same for the content down below.
Let's again block just like that, hit "Tab",
let's call this content, there we go,
and let's go ahead and move that default app inside of there.
Now, what we've done is we've now created this base page.
Now I want to go use this.
Let me go back to the couple of pages that we created earlier.
I've got my index and my about.
The way that we're going to indicate
that base page is up at the very top,
is we say extends.
Again, I'll use a snippet here,
so extends and then base.html.
Now I'll be able to say, hey,
I want to put certain information into particular blocks.
The first one is going to be the title,
the next one is going to be the content,
and so now I can go ahead and move all of
that information that we had before into those little spots.
Now let me go ahead and just clean up the rest of the HTML,
and now this will use that.
It's going to put our ReleCloud title into the title.
Oops, let's make sure I put that into the right location.
That's probably going to help.
There we go. That looks a little bit better.
It's going to put the title in
and it's going to put the content in,
and I can do that exact same thing to my About page.
Again, let's just sneak up here, extends base.html,
block and our title,
block and our content,
and now let's move things in.
Sound effects help. There we go.
Cool. Let's just get rid of the rest of them at the bottom.
Now what we're going to notice is that instead of that plain HTML,
is instead we're going to,
if I bring up my page and hit "Refresh",
we're now going to get that really nice layout.
Let me zoom out here to make this look a little bit better.
There we go, about like that.
Now there is our about content.
That's the about, and you'll notice that we're going to
that About page and then our title says about ReleCloud.
If I get rid of that about,
we'll just go to the default page.
It just says ReleCloud,
and then there is the information
from our index being injected in.
Now, one last little thing that I want to
highlight here about our templates is you are
going to notice that we want to be able to link this back
to the homepage and this to the About page.
Now, we could go in and hardcode URLs,
but remember that our URLs inside of
Django are going to be identified by the routes.
We don't want to do it that way.
Instead, what we want to do is we want to use
the URL directive to indicate what URL we want in place.
I'm going to call this about,
so you'll notice that I am updating the about link.
I'm setting the href to now be this URL about.
Now, that name is going to be pulled out of
the URL's Pi file that we specified a name there,
so it will be able to pull it out of there.
I'm going to do the exact same thing up
here with the "Home" button.
Let's go in and again, our URL,
I'm taking advantage of the snippets that are built in, index,
hit "Save", and now if I
come back to my page I'll click "Refresh".
Now if I click "About",
this takes me to my About page,
we can see our about right here,
and then if I hit the little home,
that will then take us home.
What we saw here,
is how we can set up a base page to inherit from,
how we can set up child pages to use that base,
how we can utilize those blocks to determine
where it is that people are allowed
to put in different pieces of information,
and we also saw two big directives on
how we can look up static locations,
and how we can find URL paths from our routing table.
[MUSIC]