Jinja2 - Flask templating

So far, we've only done simple inserts in our template - but there may be a requirement to do more - for example to insert a whole table of values. And this requires programatic elements in our template.

Whilst it would be nice if we could simply include Python code in our template (Like Ruby on Rails does with Ruby), this approach isn't practical as HTML is inherently space insignificant and Python is space significant and the whole thing would end up pretty awkward. By using a separate templating language (Jinja2) other things can be added in ... and those things in the base language which are not a good idea in the template can be left out.

The jinja2 templaing system / language allows us to insert variables as we've done so far in early examples, and it allow conditionals and loops too. Futrthermore, it supports template nesting. Note that you call up the inner template by name - that knows the name of its parent, which is then rendered with the child inserted at the marked point. You may feel it would be more natural to call up the parent from the controller, but by calling up the child you can easily and quickly request what you need without the requirement to understand or specify the template structure therein.

Here's sample controller code:

  @app.route("/<word>")

  def greet(word):

    return render_template('features.html',

      simple = "This is my title",

      several = ["Tom","Dick","Harry"],

      cookable = "Maybe <b>bold</b> text",

      links = [{"url":"http://www.wellho.net","title":"Well House Consultants"},

        {"url":"http://www.wellhousemanor.co.uk","title":"Well House Manor"}])

Full file [here]

And how it renders:

Here's the 'features.html' template:

  {% extends "base.html" %}

  {% block maincontent %}

  <b>Straight data inserts</b><br/><br />

  <em>Simple</em>: {{simple}}<br /><br />

  <em>Several</em>: {{several}}<br /><br />

  <em>Cookable</em>: {{cookable}}<br /><br />

  <em>links</em>: {{links}}<br /><br />

  <b>Using Jinja2 to reformat it</b><br/><br />

  <em>Several</em>:

  <ol>

  {% for item in several %}

    <li>How about {{item}}</li>

  {% endfor %}

  </ol>

  <em>Cookable</em>: {{cookable|safe}}<br /><br />

  <em>links</em>:

  <ul>

  {% for item in links %}

    <li>How about {{item.url}} for 

    <a href={{item.url}} target=xyz>{{item.title}}</a></li>

  {% endfor %}

  </ul>

  {% endblock %}

Full file [here]

And here's the sample parent template that could be used right across the application:

  <html>

  <head>

  <title>A Well House demo</title>

  </head>

  <body>

  <i>This is the general template shared on may pages</i><hr />

  {% block maincontent %} {% endblock %}

  <hr />

  <i>This is the genarel footer

  </body>

  </html>

Full file [here]

See http://jinja.pocoo.org/docs/dev/templates/
(written 2015-10-11)

Associated topics are indexed as below, or enter http://melksh.am/nnnn for individual articles

Y307 - The Flask micro webdevelopment framework for Python
  [4527] Hello Flask world / Python web micro framework - (2015-10-11)
  [4528] Routing in Flask - (2015-10-11)
  [4529] Flask - calling in the templating engine - (2015-10-11)
  [4530] Requests in Flask - (2015-10-11)
  [4532] Flask - first forms and responses with wtforms - (2015-10-12)
  [4533] Sessions in flask - (2015-10-13)
  [4534] Flask - complete MVC site to navigate around a data set - (2015-10-13)
  [4538] Flask and unittest - hello web app test world - (2015-10-15)
  [4540] Unittest of a Flask application including forms - (2015-10-15)

Back to
Requests in Flask

Previous and next
or
Horse's mouth home

Forward to
Flask - first forms and responses with wtforms

Some other Articles

SQLAlchemy - first examples with a Python Object Relationship Mapping system
Jinja2 - Flask templating
Day trip to Lancaster