How to Create Templates File with Html Pages in Flask

In the provided code block, the Flask object is imported from the flask package, and then utilized to create a new instance of a Flask application named ‘app.py’.

The special variable name is passed as an argument during the instance creation process. This variable contains the name of the current Python module and is essential for Flask to establish necessary internal paths.

# pip install filask

from flask import Flask,render_template

app =Flask(__name__,template_folder="templates")

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/about')
def about():
    return render_template('about.html')

if __name__=='__main__':
    app.run(debug=True)

Template file

Creating a template file with HTML pages involves designing a base HTML file that includes common elements shared across multiple pages. This template file will serve as the skeleton, and specific content will be inserted into it to generate the individual pages

How to Create Templates File with Html Pages in Flask

Create a new file named “index.html” (or any preferred name) and open it in a text editor. This file will contain the common structure shared by all pages. For example

How to Create Templates File with Html Pages in Flask

Create index.html file in templates file

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ pageTitle }}</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <!-- Navigation links here -->
        </nav>
    </header>

    <main>
        {{ content }}
    </main>

    <footer>
        <!-- Footer content here -->
    </footer>
</body>
</html>

In this index of templates file, we have used placeholders like {{ pageTitle }} and {{ content }}, which will be replaced with specific values when generating individual pages

Read: How to Create a Login Page Using in flask

For each page you want to create templates file, create a new HTML file and insert the specific content. For example, let’s say you want to create two pages: “index.html” and “about.html.”

@app.route('/')
def index():
    return render_template('index.html')
<!-- Replace {{ pageTitle }} and {{ content }} with specific values -->
{{% extends "template.html" %}}

{{% block pageTitle %}}Home{{% endblock %}}

{{% block content %}}
    <h2>Welcome to My Website</h2>
    <p>This is the home page content.</p>
{{% endblock %}}

About.html in templates file

@app.route('/about')
def about():
    return render_template('about.html')
<!-- Replace {{ pageTitle }} and {{ content }} with specific values -->
{{% extends "template.html" %}}

{{% block pageTitle %}}About{{% endblock %}}

{{% block content %}}
    <h2>About Us</h2>
    <p>This is the about page content.</p>
{{% endblock %}}

Read: How to Create a SignUp Page using Flask

Hello friends, My name is Satish Kumar Pal. I am as a Data Scientist and Python developer with 2+ years of broad-based experience in building data-intensive applications ,overcoming complex architectural and scalability issues in diverse industries. Proficient in predictive modeling, data processing and data mining algorithms as well as scripting languages including python. capable of creating , developing, testing and deploying.

Leave a Comment