The base template contains the <head> and <body> sections of the HTML document, with all the details that are reused on each page of the website. Depending on the web design requirements, you can have additional base templates for different layouts. For example, we added the base_simple.html file, which has the same HTML <head> section and a very minimalistic <body> section, and it can be used for the login screen, password reset, or other simple pages. You can have separate base templates for other layouts as well, such as single-column, two-column, and three-column layouts, where each of them extends base.html and overwrites the blocks as needed.
Let's look into the details of the base.html template that we defined earlier.
Here are the details for the <head> section:
- We define UTF-8 as the default encoding to support multilingual content.
- Then, we have the viewport definition that will scale the website in the browser to use the full width. This is necessary for small-screen devices that will get specific screen layouts created with the Bootstrap frontend framework.
- Of course, there's a customizable website title, and whatever favicon you use will be shown in the browser's tab.
- We have extensible blocks for meta tags, style sheets, and whatever else might be necessary for the <head> section.
- We load the Bootstrap CSS, as we want to have responsive layouts, and this will also normalize basic styling for all elements for consistency across browsers.
Here are the details for the <body> section:
- We have the header with an overwritable navigation and a language chooser.
- We also have the main container, and within it a content block placeholder, which are to be filled by extending the templates.
- Then there is the footer, which contains the footer navigation.
- Below the footer is an empty block placeholder for additional markup, should that be needed.
- Extensible JavaScript blocks are included at the end of the <body> following best practices for page-load performance, much like those for the style sheets included in the <head>.
- Then, we load the JavaScript jQuery library that efficiently and flexibly allows us to create rich user experiences.
- We load the Bootstrap JavaScript and its dependency Popper script in the template here, as the companion to the Bootstrap CSS loaded in the <head>.
- We also load JavaScript settings that are rendered from a Django view, as was seen in the preceding recipe.
The base template that we created is, by no means, a static unchangeable template. You can modify the markup structure, or add to it the elements you need—for example, Google Analytics code, common JavaScript files, the Apple touch icon for iPhone bookmarks, Open Graph meta tags, Twitter Card tags, schema.org attributes, and so on. You may also want to define other blocks, depending on the requirements of your project.