Working with Flask templates - Python Playbooks

Example 1: Creating a Simple Template

In this example, we’ll create a simple template that displays a greeting and the current date. To create the template, we’ll start by creating a directory for our Flask application, and then we’ll create a templates directory within that directory to store our templates. Within the templates directory, we’ll create a file called greeting.html that contains the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Greeting</title>
</head>
<body>
  <h1>Hello, {{ name }}!</h1>
  <p>Today is {{ date }}.</p>
</body>
</html>

In this template, we’ve used placeholders to insert dynamic content into the template. The name placeholder will be replaced with the value of a name variable, and the date placeholder will be replaced with the current date.

To render this template in our Flask application, we’ll create a route that returns the rendered template. To do this, we’ll use the render_template function from the Flask render_template module, like this:

from flask import Flask, render_template
from datetime import datetime

app = Flask(__name__)

@app.route('/')
def greeting():
    name = "John Doe"
    date = datetime.now().strftime("%B %d, %Y")
    return render_template('greeting.html', name=name, date=date)

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

In this code, we’ve imported the necessary modules, created a Flask application, and created a route that returns the rendered template. We’ve also passed in the name and date variables to the render_template function, which will replace the corresponding placeholders in the template with the values of these variables.

Example 2: Creating a Template with a Loop

In this example, we’ll create a template that displays a list of items. To create the template, we’ll start by creating a file called items.html in our templates directory that contains the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Items</title>
</head>
<body>
  <h1>List of Items</h1>
  <ul>
    {% for item in items %}
      <li>{{ item }}</li>
    {% endfor %}
  </ul>
</body>
</html>

In this template, we’ve used a loop to iterate over the items in a items list and display each item in a list item.

To render this template in our Flask application, we’ll create a route that returns the rendered template, just like in the previous example. We’ll also pass in a items list to the render_template function, like this:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/items')
def items():
    items = ['apple', 'banana', 'cherry']
    return render_template('items.html', items=items)

Example 3: Creating a Template with a Block

In this example, we’ll create a template that includes a header and footer, and allows the content to be customized for each page. To create the template, we’ll start by creating a file called base.html in our templates directory that contains the following code:

<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
</head>
<body>
  <header>
    <h1>Header</h1>
  </header>
  <main>
    {% block content %}{% endblock %}
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</html>

In this template, we’ve used blocks to define the sections of the template that can be customized. The title block will be used to define the title of the page, and the content block will be used to define the content of the page.

To render this template in our Flask application, we’ll create a separate template for each page that extends the base.html template and fills in the blocks. For example, we’ll create a file called about.html in our templates directory that contains the following code:

{% extends 'base.html' %}

{% block title %}About{% endblock %}

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

In this template, we’ve used the extends directive to extend the base.html template, and we’ve filled in the title and content blocks with the content for the about page.

To render this template in our Flask application, we’ll create a route that returns the rendered template, just like in the previous examples. We’ll also specify the name of the template to render, like this:

from flask import Flask, render_template

app = Flask(__name__)

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

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