Flask学习笔记-Flask模板集成Bootstrap
Flask模板集成Bootstrap。一般情况下Flask都是搭配Jinja2模板引擎来实现视图展现，不过现在Bootstrap比较流行，内置的样式也比较好看，有利于提高开发效率，本篇文章就是讲解在Flask如何集成Bootstrap框架。
安装Flask-Bootstrap插件
Flask-Bootstrap的命名空间为flask.ext.bootstrap。这个插件包含了所有的Bootstrap中的CSS和JS文件，利用Jinja2的模板继承机制实现了Bootstrap的基模板，通过基模板就可以很方便的定制自己的页面了。
Flask-Bootstrap的使用
代码中我们要初始化bootstrap，如下：
from flask.ext.bootstrap import Bootstrap bootstrap = Bootstrap(app)
页面模板放到项目的"templates/"目录下，我们定制一个自己的基模板，base.html，代码如下：
{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
{% endblock %}
{% block title %}JolieBaby{% endblock %}
{% block navbar %}
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
<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="#"><span>JolieBaby</span></a>
</div>
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Contacts</a>
</li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
{% block page_content %}
{% endblock %}
{% endblock %}
说下重点代码：
{% extends "bootstrap/base.html" %}
"bootstrap/base.html"就是Flask-Bootstrap自带的基模板，我们自己的基模板也要继承它。
{% block head %}
{% endblock %}
这个是Jinja2的自定义块，在Flask-Bootstrap中有很多定义好的块：
| 块名 | 说明 |
| doc | 整个HTML文档 |
| html_attribs | <html>标签中的属性 |
| html | <html>标签中的内容 |
| head | <head>标签中的内容 |
| title | <title>标签中的内容 |
| metas | 一组<meta>标签 |
| styles | CSS定义 |
| body_attribs | <body>标签的属性 |
| body | <body>标签中的内容 |
| navbar | 用户定义的导航条 |
| content | 用户定义的页面内容 |
| scripts | 文档底部的JS声明 |
如果需要保留自带基模板的块中原有的内容，那么需要使用Jinja2提供的super()函数，例如：
{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
{% endblock %}
顺便说一下这段代码里面的icon的定义的妙处：这里定义的ico会从项目里"static/"静态文件夹中进行获取，确保了ico的可访问性。里面具体的url_for()函数属于静态路由的一部分。
自定义的块
{% block content %}
{% block page_content %}
{% endblock %}
{% endblock %}
page_content就是我们自定义的块标签，我们在其他页面中就可以使用了。
静态路由-静态文件
Web程序中有很多的图片,JS,CSS都是静态文件，在Flask中有一个static路由，默认的路径就是static/目录下，调用就是通过url_for()函数。
url_for('static', filename = 'favicon.ico')
生成的web路径就是http://localhost:5000/static/favicon.ico
自定义页面
我们有了自己的base.html基模板后，就可以很方便的定义具体的页面了，例如我们来定义一个404的错误页面：
{% extends "base.html" %}
{% block page_content %}
<div class="page-container page-container-responsive">
<div class="row row-space-top-8 row-space-8 row-table">
<div class="col-5 col-middle">
<h1 class="text-jumbo text-ginormous">Oops!</h1>
<h2>We can't seem to find the page you're looking for.</h2>
<h6>Error code: 404</h6>
<ul class="list-unstyled">
<li>Here are some helpful links instead:</li>
<li><a href="/">Home</a></li>
<li><a href="/search">Search</a></li>
<li><a href="/help">Help</a></li>
<li><a href="/help/getting-started/how-to-travel">Traveling on Airbnb</a></li>
<li><a href="/info/why_host">Hosting on Airbnb</a></li>
<li><a href="/trust">Trust & Safety</a></li>
<li><a href="/sitemaps">Sitemap</a></li>
</ul>
</div>
<div class="col-5 col-middle text-center">
<img src="{{ url_for('static', filename = '404-Airbnb.gif') }}" width="313" height="428" alt="Girl has dropped her ice cream.">
</div>
</div>
</div>
</div>
{% endblock %}
可以看出我们使用了刚才自定义的基模板：
{% extends "base.html" %}
然后我们通过定义page_content来进行内容的控制：
{% block page_content %}
可以看出还是非常方便的。