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 %}
可以看出還是非常方便的。