由于我们的很多页面中的头部和底部都差不多，所以我们可以做一个基本的页面模板来套用。
比如，我直接在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 %}
~~~
