Switching From Other Template in Python Jinja
Last Updated :
11 Mar, 2024
Jinja, a template engine, seamlessly combines the power of Python with HTML’s structure. It enhances the development experience, making web applications more flexible. Jinja solves the challenge of cleanly integrating server-side logic (Python) with client-side presentation (HTML). It eliminates clutter, offering a more elegant and readable way to build dynamic web content. In this article, we will see how we can switch from other template engines using Jinja Templating.
Switching from Other Template Using Python Jinja
Below is the step-by-step guide on how to Switching From Other Template Engines-Jinja:
Step 1: Create a Virtual Environment
First, create the virtual environment using the below commands
python -m venv env
.\env\Scripts\activate.ps1
Step 2: Install Flask
To install the Flask library, you can use the following command in your terminal or command prompt:
pip install Flask
Make sure you have Python and pip installed on your system. Once Flask is installed, you can proceed to work with Flask and Jinja templates.
File Structure
Step 3: Setting Necessary Files
main.py : This Flask application defines routes for different URLs. The `hello_world` route renders `index.html` with a user parameter. The `second` and `third` routes render different templates, passing data to `third.html`. The `fourth` route renders `child_template.html` with a user parameter, and `app.run()` starts the development server.
Python3
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def hello_world():
return render_template("index.html",user="Mohit Negi")
@app.route("/second")
def second():
return render_template("second.html")
@app.route("/third")
def third():
return render_template("third.html",user_list=["Mohit","GFG"])
@app.route("/fourth")
def fourth():
return render_template("child_template.html",user="Mohit Negi")
app.run()
|
Step 4: Creating GUI using Jinja
Variable Insertion : In the `child_template.html` file, the Jinja syntax `{{ user }}` is used for variable insertion. This placeholder will be replaced with the actual value of the “user” variable when rendering the template, displaying a personalized welcome message.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Page</title>
</head>
<body>
<h1>Welcome, {{ user }}!</h1>
</body>
</html>
|
Control Structures : In the `second.html` file, Jinja syntax is used for conditional rendering. The `{% if user %}` block checks if the “user” variable has a value. If true, it displays a personalized welcome message using `{{ user }}`. If false (when “user” is not defined). This example demonstrates how to conditionally render a greeting based on the presence of the user variable.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conditional Greeting</title>
</head>
<body>
{% if user %}
<h1>Welcome, {{ user }}!</h1>
{% else %}
<h1>Hello, Guest!</h1>
{% endif %}
</body>
</html>
|
Jinja Looping: In the `third.html` file, Jinja utilizes a `{% for user in user_list %}` loop to dynamically generate an unordered list (`<ul>`) based on the elements in the “user_list” variable. For each “user” in the list, it creates a list item (`<li>`) containing the user’s name, and the loop is closed with `{% endfor %}`. In this example, the template iterates over a user_list and creates a list item for each user.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User List</title>
</head>
<body>
<ul>
{% for user in user_list %}
<li>{{ user }}</li>
{% endfor %}
</ul>
</body>
</html>
|
Template Inheritance: This HTML template employs Jinja’s template inheritance. The `{% block title %}Default Title{% endblock %}` and `{% block content %}{% endblock %}` syntax creates placeholders for title and content. Child templates can override these blocks, allowing dynamic customization while maintaining a consistent structure
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
<div class="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
|
child_template.html: This Jinja template extends “base_template.html,” replacing the title with “Custom Title” and inserting a personalized welcome message in the content block using the “user” variable.
HTML
{% extends "base_template.html" %}
{% block title %}Custom Title{% endblock %}
{% block content %}
<h1>Welcome, {{ user }}!</h1>
{% endblock %}
|
Step 5: Run the Server
python main.py
Output :
Share your thoughts in the comments
Please Login to comment...