Flask学习笔记-Flask模板集成Bootstrap

时间 2019-11-19

标签 flask 学习笔记模板集成 bootstrap 栏目 Python 繁體版

原文原文链接

Flask模板集成Bootstrap。通常状况下Flask都是搭配Jinja2模板引擎来实现视图展示，不过如今Bootstrap比较流行，内置的样式也比较好看，有利于提升开发效率，本篇文章就是讲解在Flask如何集成Bootstrap框架。html

安装Flask-Bootstrap插件

Flask-Bootstrap的命名空间为flask.ext.bootstrap。这个插件包含了全部的Bootstrap中的CSS和JS文件，利用Jinja2的模板继承机制实现了Bootstrap的基模板，经过基模板就能够很方便的定制本身的页面了。python

Flask-Bootstrap的使用

代码中咱们要初始化bootstrap，以下：web

from flask.ext.bootstrap import Bootstrap

bootstrap = Bootstrap(app)

页面模板放到项目的"templates/"目录下，咱们定制一个本身的基模板，base.html，代码以下：
flask

{% 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 %}

说下重点代码：bootstrap

{% extends "bootstrap/base.html" %}

"bootstrap/base.html"就是Flask-Bootstrap自带的基模板，咱们本身的基模板也要继承它。app

{% 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()函数属于静态路由的一部分。url

自定义的块

{% block content %}
    {% block page_content %}

    {% endblock %}
{% endblock %}

page_content就是咱们自定义的块标签，咱们在其余页面中就可使用了。
spa

静态路由-静态文件

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 &amp; 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 %}

能够看出仍是很是方便的。