由于我們的很多頁面中的頭部和底部都差不多，所以我們可以做一個基本的頁面模板來套用。
比如，我直接在templates中新建一個base.html，然后把頭部和底部的代碼都寫入到這里
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}我是標題{% endblock %}</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/nifty.min.css" rel="stylesheet">
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/nifty.min.js"></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
~~~
然后，在需要的地方，比如article.html頁面中寫入
~~~
{% extends 'base.html' %}
{% block title %}
{{info.title}}
{% endblock %}
{% block content %}
<div class="panel panel-trans text-center">
<div class="panel-heading">
<h3 class="panel-title">{{info.title}}</h3>
</div>
<div class="panel-body">
{{info.intro}}
</div>
</div>
{% endblock %}
~~~
