Our template examples so far have been tiny HTML snippets, but in the real world, you\u2019ll be using Django\u2019s template system to create entire HTML pages. This leads to a common Web development problem: across a Web site, how does one reduce the duplication and redundancy of common page areas, such as site-wide navigation?<\/p>\n
A classic way of solving this problem is to use server-side includes<\/em>, directives you can embed within your HTML pages to \u201cinclude\u201d one Web page inside another. Indeed, Django supports that approach, with the {% include %} template tag just described. But the preferred way of solving this problem with Django is to use a more elegant strategy called template inheritance<\/em>.<\/em><\/p>\n In essence, template inheritance lets you build a base \u201cskeleton\u201d template that contains all the common parts of your site and defines \u201cblocks\u201d that child templates can override.<\/p>\n Let\u2019s see an example of this by creating a more complete template for our current_datetime view, by editing the current_datetime.html file:<\/p>\n That looks just fine, but what happens when we want to create a template for another view\u2014say, the hours_ahead view from Chapter 3? If we want again to make a nice, valid, full HTML template, we\u2019d create something like:<\/p>\n Clearly, we\u2019ve just duplicated a lot of HTML. Imagine if we had a more typical site, including a navigation bar, a few style sheets, perhaps some JavaScript\u2014we\u2019d end up putting all sorts of redundant HTML into each template.<\/p>\n The server-side include solution to this problem is to factor out the common bits in both templates and save them in separate template snippets, which are then included in each template. Perhaps you\u2019d store the top bit of the template in a file called header.html<\/span>:<\/p>\n With an include-based strategy, headers and footers are easy. It\u2019s the middle ground that\u2019s messy. In this example, both pages feature a title\u2014 <h1>My<\/span> <\/tt>helpful<\/span> <\/tt>timestamp<\/span> <\/tt>site<\/h1><\/span>\u2014but that title can\u2019t fit into header.html<\/span> because the <title><\/span> on both pages is different. If we included the <h1><\/span> in the header, we\u2019d have to include the <title><\/span>, which wouldn\u2019t allow us to customize it per page. See where this is going?<\/p>\n <\/span>Django\u2019s template inheritance system solves these problems. You can think of it as an \u201cinside-out\u201d version of server-side includes. Instead of defining the snippets that are common<\/span><\/em>, you define the snippets that are different<\/span><\/em>.<\/i><\/p>\n The first step is to define a base template<\/span><\/em>\u2014a skeleton of your page that child templates<\/span><\/em> will later fill in. Here\u2019s a base template for our ongoing example:<\/p>\n This template, which we\u2019ll call base.html<\/span>, defines a simple HTML skeleton document that we\u2019ll use for all the pages on the site.<\/p>\n It\u2019s the job of child templates to override, or add to, or leave alone the contents of the blocks. (If you\u2019re following along at home, save this file to your template directory.)<\/p>\n We\u2019re using a template tag here that you haven\u2019t seen before: the {%<\/span> <\/tt>block<\/span> <\/tt>%}<\/span> tag. All the {%<\/span> <\/tt>block<\/span> <\/tt>%}<\/span> tags do is tell the template engine that a child template may override those portions of the template.<\/p>\n Now that we have this base template, we can modify our existing current_datetime.html<\/span> template to use it:<\/p>\n <\/span>While we\u2019re at it, let\u2019s create a template for the hours_ahead<\/span> view from Chapter 3. (If you\u2019re following along with code, we\u2019ll leave it up to you to change hours_ahead<\/span> to use the template system.) Here\u2019s what that would look like:<\/p>\n Isn\u2019t this beautiful? Each template contains only the code that\u2019s unique<\/span><\/em> to that template. No redundancy needed. If you need to make a site-wide design change, just make the change to base.html<\/span>, and all of the other templates will immediately reflect the change.<\/p>\n Here\u2019s how it works. When you load the template current_datetime.html<\/span>, the template engine sees the {%<\/span> <\/tt>extends<\/span> <\/tt>%}<\/span> tag, noting that this template is a child template. The engine immediately loads the parent template\u2014in this case, base.html<\/span>.<\/p>\n At that point, the template engine notices the three {% block %} tags in base.html and replaces those blocks with the contents of the child template. So, the title we\u2019ve defined in {% block title %} will be used, as will the {% block content %}.<\/p>\n Note that since the child template doesn\u2019t define the footer block, the template system uses the value from the parent template instead. Content within a {% block %} tag in a parent template is always used as a fallback.<\/p>\n Inheritance doesn\u2019t affect the way the context works, and you can use as many levels of inheritance as needed. One common way of using inheritance is the following three-level approach:<\/p>\n This approach maximizes code reuse and makes it easy to add items to shared areas, such as section-wide navigation. Here are some tips for working with template inheritance:<\/p>\n<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\">\n<html lang=\"en\">\n<head>\n <title>The current time<\/title>\n<\/head>\n<body>\n <h1>My helpful timestamp site<\/h1>\n <p>It is now {{ current_date }}.<\/p>\n <hr>\n <p>Thanks for visiting my site.<\/p>\n<\/body>\n<\/html><\/pre>\n<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\">\n<html lang=\"en\">\n<head>\n <title>Future time<\/title>\n<\/head>\n<body>\n <h1>My helpful timestamp site<\/h1>\n <p>In {{ hour_offset }} hour(s), it will be {{ next_time }}.<\/p>\n <hr>\n <p>Thanks for visiting my site.<\/p>\n<\/body>\n<\/html><\/pre>\n<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\"><\/pre>\n
<html lang=\"en\">\n<head>\nAnd perhaps you\u2019d store the bottom bit in a file called footer.html:\n <hr>\n <p>Thanks for visiting my site.<\/p>\n<\/body>\n<\/html><\/pre>\n
<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\">\n<html lang=\"en\">\n<head>\n <title>{% block title %}{% endblock %}<\/title>\n<\/head>\n<body>\n <h1>My helpful timestamp site<\/h1>\n {% block content %}{% endblock %}\n {% block footer %}\n <hr>\n <p>Thanks for visiting my site.<\/p>\n {% endblock %}\n<\/body>\n<\/html><\/pre>\n{% extends \"base.html\" %}<\/pre>\n{% block title %}The current time{% endblock %}<\/pre>\n{% block content %}<\/pre>\n<p>It is now {{ current_date }}.<\/p><\/pre>\n{% endblock %}<\/pre>\n{% extends \"base.html\" %}<\/pre>\n{% block title %}Future time{% endblock %}<\/pre>\n{% block content %}<\/pre>\n <p>In {{ hour_offset }} hour(s), it will be {{ next_time }}.<\/p><\/pre>\n{% endblock %}<\/pre>\n\n
\n