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

能夠看出咱們使用了剛纔自定義的基模板：