Incorporating extends for templates
In this Flask tutorial video, we cover the extending capability of Flask Templates. The idea of extending is to allow for custom templates "within" other templates. So, you will generally have something like your header and footer in your main template, with things like your navbar, logo/banner, and then your footer information. Then, in the body area, you have the body data actually coming from another template that "extends" the main template.
An example of this would be:
index.html:
<html>
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='bootstrap.min.css') }}">
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<head>
</head>
<body class = "body">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/graph">Graph</a></li>
<li><a href="/about">About</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<body>
<h3>{{ title }}</h3>
{% for p in paragraph %}
<p>{{ p }}</p>
{% endfor %}
{% block body %}
{% endblock %}
</body>
</body>
<script type = "text/javascript" src = "/static/bootstrap.min.js"></script>
</html>
Above, we can see that we've got:
{% block body %}
{% endblock %}
Between those tags is where we can pass through body data.
So then we can do this:
graph.html
{% extends "index.html" %}
{% block body %}
<body>
<div id={{ chartID|safe }} class="chart" style="height: 500px"></div>
<script>
var chart_id = {{ chartID|safe }}
var credits = {"text":"HKinsley","href":"http://harrisonkinsley.com"}
var series = {{ series|safe }}
var colors = ['#00A3E0', '#183A54', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1', '#7cb5ec', '#434348']
var title = {{ graphtitle|safe }}
var xAxis = {{ xAxis|safe }}
var yAxis = {{ yAxis|safe }}
var chart = {{ chart|safe }}
var subtitle = {{ subtitleText|safe }}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="../static/graph.js"></script>
</body>
{% endblock %}
Now, to put it all together, in our app script, when we render a template, we render graph.html. When that html file is loaded, it will see the extends tag and incorporate graph.html within the index.html template.
So here's our current __init__.py file:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def homepage():
title = "Epic Tutorials"
paragraph = ["wow I am learning so much great stuff!wow I am learning so much great stuff!wow I am learning so much great stuff!wow I am learning so much great stuff!","wow I am learning so much great stuff!wow I am learning so much great stuff!wow I am learning so much great stuff!wow I am learning so much great stuff!wow I am learning so much great stuff!wow I am learning so much great stuff!wow I am learning so much great stuff!wow I am learning so much great stuff!wow I am learning so much great stuff!"]
try:
return render_template("index.html", title = title, paragraph=paragraph)
except Exception, e:
return str(e)
@app.route('/about')
def aboutpage():
title = "About this site"
paragraph = ["blah blah blah memememememmeme blah blah memememe"]
pageType = 'about'
return render_template("about.html", title=title, paragraph=paragraph, pageType=pageType)
@app.route('/about/contact')
def contactPage():
title = "About this site"
paragraph = ["blah blah blah memememememmeme blah blah memememe"]
pageType = 'about'
return render_template("index.html", title=title, paragraph=paragraph, pageType=pageType)
@app.route('/graph')
def graph_Example(chartID = 'chart_ID', chart_type = 'line', chart_height = 500):
subtitleText = 'test'
#topPairs, bottomPairs = datafunctions.twoPaneGraphData('btceHistory',1, 3, 4)
dataSet = [[1408395614.0, 430.2], [1408395614.0, 431.13], [1408395617.0, 431.354], [1408395623.0, 432.349], [1408395623.0, 432.017], [1408395640.0, 430.195], [1408395640.0, 430.913], [1408395640.0, 430.913], [1408395647.0, 430.211], [1408395647.0, 430.297], [1408395647.0, 430.913], [1408395648.0, 432.996], [1408395648.0, 432.996], [1408395648.0, 432.349], [1408395654.0, 431.0]]
pageType = 'graph'
chart = {"renderTo": chartID, "type": chart_type, "height": chart_height, "zoomType":'x'}
series = [{"name": 'Label1', "data": dataSet}]
graphtitle = {"text": 'My Title'}
xAxis = {"type":"datetime"}
yAxis = {"title": {"text": 'yAxis Label'}}
return render_template('graph.html',pageType=pageType,subtitleText=subtitleText, chartID=chartID, chart=chart, series=series, graphtitle=graphtitle, xAxis=xAxis, yAxis=yAxis)
if __name__ == "__main__":
app.run()
That's all for now with the Flask Basics, head back to the for more tutorials.
