A template is a text file that defines the structure or layout of a file (e.g. an HTML page) and uses placeholders to represent the actual content.
A Django application that created with startapp (like the skeleton of this example) looks for templates in a subdirectory called ‘templates‘ of your applications. For example, in the index view we just added, the render() function expects to find the file index.html in /locallibrary/catalog/templates/ and will Doing this also throws an error if the file doesn’t exist.
Reading: How to use django to create a website
You can verify this by saving the previous changes and accessing 127.0.0.1:8000 in your browser – it’ll be a pretty intuitive one Error message displayed: “TemplateDoesNotExist at / catalog/”, and other details.
Extending templates
The index template requires standard HTML markup for the head and body, along with navigation sections, to go to the other pages of the site to be linked (which we have not yet created) and to sections displaying introductory text and book dates.
Much of the HTML and navigation structure will be the same on every page of our site . Instead of duplicating boilerplate code on each page, you can use the Django template language to declare a base template and then extend that to replace only the bits that are different for each specific page.
The following code snippet is an example base template from a base_generic.html file. We will create the template for LocalLibrary shortly. The following example contains generic HTML with sections for a title, sidebar, and main content marked with named block and endblock template tags. You can leave the blocks blank or add default content to be used when rendering pages derived from the template.
When we define a template for a specific view, we first specify the base template with the extension template tag – see code sample below. Then we declare which sections from the template we want to replace (if any), using block/endblock sections as in the base template.
For example, the following code snippet shows how the extension -Template tag is used and override the content block. The generated HTML contains the code and structure defined in the base template, including the default content you defined in the title block, but the new content block instead of the default content.
The LocalLibrary base template
See also: How to Find Out When a Webpage Was Published
We will use the following code snippet as the base template for the LocalLibrary website. As you can see, it contains HTML code and defines title, sidebar and content blocks. We have a default title and sidebar with links to lists of all books and authors, both enclosed in blocks so they can be easily changed in the future.
Create a new file base_generic.html in /locallibrary/catalog/templates/ and paste the following code into the file:
The template contains CSS from Bootstrap to customize the layout and appearance improve the HTML page. Using Bootstrap (or another client-side web framework) is a quick way to create an attractive page that displays well on different screen sizes.
The base template also references a local CSS file ( styles.css) that provides additional styling. Create a styles.css file in /locallibrary/catalog/static/css/ and paste the following code in the file:
The Index Template
Create a new HTML file index.html in /locallibrary/catalog/templates/ and paste the following code into the file a. This code extends our base template on the first line and then replaces the default content block for the template.
In the Dynamic Content section, we declare placeholders (template variables) for the information from the view that we want to include. The variables are enclosed in double curly brackets (handlebars).
The important thing here is that variables are named with the keys that we pass to the context dictionary in our view’s render() function (see example below). Variables are replaced with their associated values when the template is rendered.
Referencing Static Files in Templates
Your project probably uses static resources, including JavaScript, CSS, and images. Because the location of these files may not be known (or may change), Django allows you to specify the location in your templates relative to the global STATIC_URL setting. The default skeleton website sets the value of STATIC_URL to ‘/static/’, but you can host this on a content delivery network or elsewhere.
See also: How to Start a Finance Blog in 5 Steps
Inside the template, first call the load template tag by adding “static” to the template library, as shown in the code example below. You can then use the static template tag and specify the relative URL to the required file.
You can insert an image into the page in a similar way, for example:
For more information on working with static files, see Managing static files in the Django documentation.
Linking to URLs
The base template above introduced the URL template tag.
This tag accepts the name of a path() function that is included in your URLs. py and the values for any arguments that the associated view receives from this function, and returns a URL that you can use to link to the resource.
Configure where the templates go to are
The location where Django looks for templates is specified in the TEMPLATES object in the settings.py file. The default settings.py (as created for this tutorial) looks something like this:
The setting of ‘APP_DIRS’: True, is the most important one as it prompts Django to search Look for templates in a subdirectory of each application in the project called “Templates” (this makes it easier to group templates with their associated application for easy reuse).
We can also specify specific locations for Django to work with ‘DIRS’ to search for directories: [] (but that’s not needed yet).
See also: Generating static sites from ASP.NET Core MVC apps
.
