In this Flask Tutorial we are going to learn about Template Variable in Flask, sometimes we need to send data from our flask views to the html files, for this purpose we can use template variables. for example we are working with the database, we retrieve the data in our view function, after that by the help of template or context variable we can send the data to the template files. now in this example we are not going to use the data from the database, we are going to just send some predefined data from our Index view to the index.html.
Now this is our app.py file, we are going to just bring changes in our Index view, because we want to send some data from Index view to our index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
from flask import Flask, render_template #create the object of Flask app = Flask(__name__) #creating our routes @app.route('/') def Index(): name = 'Geekscoders.com' return render_template('index.html', data = name) @app.route('/contact') def Contact(): return render_template('contact.html') @app.route('/about') def About(): return render_template('about.html') #run flask app if __name__ == "__main__": app.run(debug=True) |
So you can see that the function render_template provided by Flask integrates the Jinja2 template engine with the application. this function takes the filename of the template as its first argument. and the second one is the data that we want to send for index.html file, and you can see that i have sent just a simple predefined name value to my html file.
Now we want to get this data in our index.html, so these are our html files, you can use this {{}} syntax for getting the data from the view function to your index file.
templates/index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{% extends 'base.html' %} {% block title %}Home{% endblock %} {% block body %} <h1>Home Page - Template Inheritance</h1> <h3>Welcome to . {{data}}</h3> {% endblock %} |
templates/base.html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}</title> </head> <body> {% block body %} {% endblock %} </body> </html> |
templates/contact.html
|
1 2 3 4 5 6 7 8 9 10 11 |
{% extends 'base.html' %} {% block title %}Contact{% endblock %} {% block body %} <h1>Contact Page - Template Inheritance</h1> {% endblock %} |
templates/about.html
|
1 2 3 4 5 6 7 8 9 10 11 |
{% extends 'base.html' %} {% block title %}About{% endblock %} {% block body %} <h1>About Page - Template Inheritance</h1> {% endblock %} |
Run your flask application and go to http://localhost:5000/, you can see the data in here.
