Locked lesson.

Upgrade

About this lesson

There will be times when you want to include things only on one page. In this lesson, we'll discuss how Include Tags work and how to use them within your project pages.

Exercise files

Download this lesson’s related exercise files.

Include Tag.docx
60.3 KB Include Tag - Solution.docx
57.6 KB

Quick reference

Include Tag

Include allows us to include other files on an individual web page.

When to use

Use it when you want to include things on a single web page, as opposed to extends; which adds things to all web pages.

Instructions

To use the include tag, create a directory in your templates directory named snippets (or name it anything you like). Place a file in the snippets directory (we'll call it footer.html).  To include footer.html into a web page, use this tag:

   {% include 'snippets/footer.html' %}

Hints & tips

  • {% include 'snippets/footer.html' %}
Login to download
  • 00:04 Okay, in this video I want to talk about include.
  • 00:06 And up until now we've been talking about things that we can add pretty much
  • 00:11 to every page.
  • 00:12 So we've got our base, we're extending it to every one of our web pages.
  • 00:17 We've got our block title, we're going to basically use that on every page.
  • 00:21 So that's fine when you're doing something for every page of your site.
  • 00:26 But there's going to be times now and then when you just want to add something,
  • 00:30 you want to include something in one specific page.
  • 00:33 You don't want that to show up on every single page of your site, and
  • 00:36 the include tag is great for that.
  • 00:38 So to use include, we can actually create separate files and
  • 00:42 then just include all of the content from those files wherever we want.
  • 00:48 So I'm going to head over to our templates directory, and it's sort of best
  • 00:51 practices to just create a different folder to keep track all of these things.
  • 00:55 And I'm just going to call these snippets, so we've got this new directory,
  • 01:00 it's inside of our templates directory and it's called snippets.
  • 01:03 So now if we want to include a little snippet or anything at all,
  • 01:07 we can just create that file.
  • 01:09 So let's create a new file, what do we want to include?
  • 01:11 Well, let's just include John Elder, so
  • 01:16 if we come up here and click File, Save As,
  • 01:20 maybe we would call this my_name.html.
  • 01:25 This is going to be an HTML file,
  • 01:27 because we're going to pull this HTML stuff into another file.
  • 01:32 Okay, so to use this, let's say on the about page we want to use this, and
  • 01:36 right now we've got my name is John Elder.
  • 01:39 Maybe instead of doing this, we want to include this dynamically,
  • 01:43 I don't know why we would want to do that, but let's say we do.
  • 01:46 So to do that, we create our tags again, just like before, and we're going
  • 01:51 to use some, they called the include tag and to use that we just type in include.
  • 01:57 And now we just reference whatever we want to include,
  • 02:01 so we want to include snippets my_name.html.
  • 02:05 So we just type in snippets/my_name.html, and that's all there is to it.
  • 02:12 So now if we save this and head back over to our about page,
  • 02:17 it says My name is John Elder.
  • 02:20 And let's put an exclamation mark at the end of that,
  • 02:22 I think that's how we had it before.
  • 02:24 So save this, and reload, so that doesn't look all that interesting.
  • 02:28 Well, if we wanted to change this, let's say we sold our website in the future,
  • 02:32 somebody else bought it, and their name is not John Elder.
  • 02:35 Instead of changing it manually on the page, you could just go to your snippet.
  • 02:42 And let's say, I don't know Tina Smith, if we save this file,
  • 02:47 head back over here and hit reload now it says My name is Tina Smith.
  • 02:52 So anything at all, you can include using the include tag.
  • 02:58 So we just typed in a name here, we could make this, I don't know, bold or
  • 03:02 something, you can use all the HTML that you want.
  • 03:06 Let's go back to John Elder, so this is just an HTML tag,
  • 03:10 the strong tag it makes things bold.
  • 03:12 So if we save this, head back over here and hit reload,
  • 03:16 boom, my name is John Elder, and it's in bold.
  • 03:19 So any kind of HTML that you want to include, you can do that as well.
  • 03:24 It could be text, it could be HTML, it could be links,
  • 03:27 it could be anything at all you want, and to do that, you just use that snippet.
  • 03:32 Now you can use these in more than one place, so maybe our homepage.
  • 03:38 So, maybe inside of here, we might put a line break and
  • 03:44 then a little dash, and then the snippet.
  • 03:48 So, if we save this, head back here and hit reload,
  • 03:52 this is my homepage, John Elder.
  • 03:55 However you want to use this it's really easy to use and it's really useful.
  • 03:59 So that's all for
  • 04:00 include in the next video I want to talk about the context dictionary.

Lesson notes are only available for subscribers.

Gift this course