When several web pages share a layout, keep their common structure in a parent Jinja2 template. A template block marks a named region, written between `{% block name %}` and `{% endblock %}`, that a child template can fill. This keeps shared page structure separate from page-specific content. section 6.4.4
<!DOCTYPE html>
<html>
<head>
{% block head %} #1
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<title>Your Second Web Server</title>
{% block styles %} #2
<link
rel="stylesheet"
type="text/css"
href="{{ url_for('static', filename='css/myblog.css') }}"
> #2
{% endblock %} #2
{% endblock %} #1
</head>
<body>
<div id="header">
<h1>MyBlog Home Page</h1>
</div>
<div id="content">
{% block content %}{% endblock %} #3
</div>
<div id="footer">
{% block footer %} #4
<h4>© Copyright 2020 by MyBlog</h4>
{% endblock %}
</div>
</body>
{% block scripts %}{% endblock %} #5
</html>
The parent `base.html` defines blocks for the page head and styles, plus an empty `content` block ready for a child to fill. section 6.4.4
{% extends "base.html" %} #1
{% block content %} #2
<h2>Current time: {{ data["now"] }}</h2> #2
<p>Page visits: {{ data["page_visit"].counts() }}</p> #2
<p>List of available banner colors:</p> #2
<ul> #2
{% #2
for banner_color in #2
data["banner_colors"]["display"] #2
%} #2
<li>{{ banner_color }}</li> #2
{% endfor %} #2
</ul> #2
<div id="color-change"> #2
<button class="change-banner-color"> #2
Change Banner Color #2
</button> #2
</div> #2
{% endblock %} #2
{% block styles %} #3
{{ super() }} #3
<link #3
rel="stylesheet" #3
type="text/css" #3
href="{{ url_for( #3
'static', filename='css/index.css' #3
) }}"> #3
{% endblock %} #3
{% block scripts %} #4
{{ super() }} #4
<script> #4
const banner_colors = #4
{{ data["banner_colors"]["js"]| safe }}; #4
</script> #4
<script #4
src="{{ url_for( #4
'static', filename='js/index.js') }}" #4
></script> #4
{% endblock %} #4
The child `index.html` extends `base.html` and fills its `content` block with the current time, visit count, and available banner colors. section 6.4.4
Use blocks where pages need different content, styles, or scripts. Shared assets can stay in the parent: its stylesheet link uses Flask’s `url_for` rather than a hardcoded static URL. section 6.4.4
