Understanding Django Template Structure
1. {% load static %}:
This template tag is used to load static files (like CSS, JavaScript, images) in your HTML template. In Django, static files are typically collected from the `STATICFILES_DIRS` setting and served from the `STATIC_ROOT` directory when deploying your project. By using `{% load static %}`, you enable the use of the `{% static %}` template tag to reference these files.
2. HTML Structure:
The `<html>`, `<head>`, and `<body>` tags are standard HTML elements that define the structure of the webpage.
`<meta>` tags are used to provide metadata about the HTML document, such as character encoding, viewport settings for responsiveness, and page descriptions.
3. {% block style %} {% endblock %}:
These are Django template block tags `{% block %}` and `{% endblock %}` used for defining reusable blocks of content that can be overridden in child templates. In this case, `{% block style %}` is intended to be overridden in child templates to insert custom CSS or other styles.
4. {% block body %} {% endblock %}:
Similar to the style block, `{% block body %}` is a block tag meant to encapsulate the main content area of the webpage. This allows child templates to override this block with their specific content while retaining the overall structure defined in the base template.
5. {% block script %} {% endblock %}:
This block is used for inserting JavaScript or other scripts into the webpage. Like the other block tags, it can be overridden in child templates to add specific scripts as need
{% extends 'base.html' %}
{% block style %}
<style>
/* Custom CSS for this page */
body {
background-color: lightblue;
}
</style>
{% endblock %}
{% block body %}
<h1>Welcome to My Page</h1>
<p>This is a custom page that extends the base template.</p>
{% endblock %}
{% block script %}
<script>
// Custom JavaScript for this page
console.log("Hello from custom script!");
</script>
{% endblock %}
Connecting Child Templates:
In Django, you can create child templates that extend a base template (like the one you've shown) using the `{% extends %}` tag. For example, to create a new webpage that inherits from `base.html`, you would create a new HTML file and include `{% extends 'base.html' %}` at the beginning.
Child templates can then override specific blocks defined in the base template by using `{% block %}` tags with matching names. For instance, if you wanted to provide custom CSS for a specific page, you would create a `{% block style %}` section in the child template, and Django would replace the corresponding block in the base template with the content defined in the child template.
The child template extends `base.html`, overrides the `{% block style %}`, `{% block body %}`, and `{% block script %}` sections, and provides custom content for each block. When rendered by Django, the final webpage will combine the structure defined in `base.html` with the overridden content from the child template.