Using Jinja2 Templates in Flask


In this video we learn how to make our code more maintainable and encapsulated by removing the long strings of HTML from our and putting them into templates. We will do this using a Python templating engine called Jinja2. Here are the steps we'll follow:

  1. import os and import jinja2 in
  2. Create a directory named templates and then use the imported os object to construct a string that contains the file path to this directory. Note that this path will be an absolute path in the filesystem on which the program is running.
    template_dir = os.path.join(os.path.dirname(__file__),
  3. Initialize the Jinja templating environment, using the template_dir:
    jinja_env = jinja2.Environment(
        loader = jinja2.FileSystemLoader(template_dir))
  4. Extract the HTML string in the variable form and put it in a newly created hello_form.html file in the templates directory.
  5. In the index function, create a template variable that holds the template returned from Jinja's get_template function and then return the string that template.render() returns:
    def index():
        template = jinja_env.get_template('hello_form.html')
        return template.render()
  6. Extract the HTML string that hello returns from and put it in a newly created hello_greeting.html file in the templates directory. Be sure to add the proper doctype and head/body tags.
  7. Repeat step 5 for the hello function, but this time pass an argument to template.render that matches a placeholder called name in the template itself:
    def hello():
        first_name = request.form['first_name']
        template = jinja_env.get_template('hello_greeting.html')
        return template.render(name=first_name)
  8. Protect your code from malicious users by adding HTML escaping via Jinja's autoescape=True option:
    jinja_env = jinja2.Environment(
        loader = jinja2.FileSystemLoader(template_dir), autoescape=True)


View the final code from this lesson.