Introduction
In a Flask application, a base template (base.html) is used to define a common structure for all web pages in your app. By creating a base template, you can avoid repeating common HTML elements, such as headers, footers, navigation menus, and other layout elements across multiple pages.
This concept follows the principle of "Don't Repeat Yourself" (DRY), where the shared content is placed in the base template, and the specific pages extend or inherit this template.
Create the base.html file:
This file contains the overall structure of your website, including the HTML <head>, <body>, and placeholders for content that will be different for each page.
Extend the base.html file in other templates:
For individual pages (e.g., home, about, contact), you create separate templates that extend the base.html and fill in specific blocks (such as the content area).
Example base.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Flask App{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<!-- Content of the specific page goes here -->
{% block content %}
{% endblock %}
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
NOTE:In this file, the {% block title %} and {% block content %} placeholders are defined. These blocks can be overridden in the child templates.
The file is an HTML template that is typically used as a base template in a Flask web application. This template provides a common structure (layout) for all web pages in the app. Here's an explanation of each part/section:
1. <!DOCTYPE html> and <html lang="en">
- DOCTYPE: This declaration tells the browser that the document is an HTML5 document.
lang="en": Specifies that the language of the document is English. It helps with accessibility and SEO.
2. <head> Section
<meta charset="UTF-8">
- Sets the character encoding for the document to UTF-8, which supports most characters from all languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Ensures that the web page is responsive and displays correctly on all devices, including mobile phones. The
width=device-widthensures that the page uses the full width of the device's screen, andinitial-scale=1.0sets the initial zoom level.
<title>{% block title %}My Flask App{% endblock %}</title>
- This defines the title of the page that appears in the browser tab. The
{% block title %}...{% endblock %}syntax allows individual templates (such as a home page or an about page) to set their own title by overriding this block. For example, a home page template might override this block with "Home - My Flask App".
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
- Links to an external CSS file for styling the page. Flask uses
url_for('static', filename='styles.css')to generate the correct URL for the stylesheet stored in thestaticfolder. Thestyles.cssfile would contain the CSS rules that define the look and feel of the website.
3. <body> Section
<header>
- Contains the header of the website, typically where you might find the website's name and navigation links.
<h1>My Website</h1>
- Displays the main heading of the page (in this case, "My Website"). This is the site’s name or logo that would be consistent across all pages.
<nav> and <a> tags
- The
<nav>element contains a navigation bar with links (<a>tags) to the home page (/), the about page (/about), and the contact page (/contact). This allows users to navigate between different sections of the site.
4. <main>
{% block content %} {% endblock %}
The
<main>element is the primary section where the specific content of each page is displayed. The{% block content %}...{% endblock %}is a Jinja2 template block that can be overridden in individual templates (likehome.htmlorabout.html).When a specific template (e.g.,
home.html) extendsbase.html, it will replace thiscontentblock with its own content, which could be text, images, forms, etc.
5. <footer>
- The
<footer>element contains the footer of the website. In this example, it includes a copyright notice:© 2024 My Website, which displays "© 2024 My Website" at the bottom of each page.
Template Syntax: {% ... %} and {{ ... }}
{% ... %}: These are Jinja2 template tags used for control structures, like defining blocks (e.g.,{% block content %}). Flask uses Jinja2 as its templating engine.{{ ... }}: This syntax is used for expressions in Jinja2, which output values. For example,{{ url_for('static', filename='styles.css') }}generates a URL for the static CSS file.
Summary of the Base template source:
This base.html file acts as the foundation for the layout of a Flask website. It defines common HTML elements (like the header, footer, and navigation) and provides blocks ({% block ... %}) that can be overridden by specific pages (like home, about, or contact pages) to display unique content while maintaining a consistent layout. The use of template inheritance simplifies managing the layout of a multi-page web application.
This template extends base.html and fills in the title and content blocks. The rest of the HTML structure (like the header, navigation, and footer) is inherited from base.html.
about.html
Similarly, the about.html page overrides the title and content blocks while reusing the rest of the layout from base.html.
Advantages of Using a Base Template:
- Code Reusability: You only define the common layout once.
- Consistency: All pages inherit the same structure, ensuring uniformity.
- Easy Maintenance: You can modify the layout in one place (
base.html), and it will update across all pages.
Comments
Post a Comment
Thanks for your valuable input