11 Flask mega-tutorial 第11章美化页面 Facelift

布满荆棘的人生 2022-05-16 07:39 55阅读 0赞

如需转载请注明出处。  
win10 64位、Python 3.6.3、Notepad++、Chrome 67.0.3396.99（正式版本）（64 位）  
注：作者编写时间2018-02-13，linux、python 3.5.2

以下内容均是加入自己的理解与增删，以记录学习过程。不限于翻译，部分不完全照搬作者Miguel Grinberg的博客，版权属于作者，感谢他提供免费学习的资料。

<table> 
 <tbody> 
  <tr> 
   <th colspan="4"><b><font>传送门</font></b></th> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81332147" rel="nofollow">00 开篇</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81354752" rel="nofollow">01 Hello world</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81364734" rel="nofollow">02 模板</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81389112" rel="nofollow">03 Web表单</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81485554" rel="nofollow">04 数据库</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81536333" rel="nofollow">05 用户登录</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81565017" rel="nofollow">06 个人资料和头像</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81590339" rel="nofollow">07 错误处理</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81634851" rel="nofollow">08 关注</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81672110" rel="nofollow">09 分页</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81746739" rel="nofollow">10 支持QQ邮箱</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81779883" rel="nofollow">11 美化页面</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81951594" rel="nofollow">12 时间和日期</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81982032" rel="nofollow">13 I18n和L10n 翻译成中文 zh-CN</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81989457" rel="nofollow">14 Ajax(百度翻译API</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82055120" rel="nofollow">15 更好的App结构(蓝图)</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82119331" rel="nofollow">16 全文搜索</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82185100" rel="nofollow">17 部署到腾讯云Ubuntu</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82185153" rel="nofollow">18 部署到Heroku</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82185229" rel="nofollow">19 部署到Docker容器</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82776565" rel="nofollow">20 JavaScript魔法</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82778415" rel="nofollow">21 用户通知</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82778449" rel="nofollow">22 后台工作(Redis)</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82778519" rel="nofollow">23 应用程序编程接口(API)</a></b></td> 
  </tr> 
 </tbody> 
</table>

本章将学习基于 Bootstrap用户界面框架的模板替换基础的HTML模板。（bootstrap，译作 引导）

这个Microblog应用程序已有一段时间了，或许已经注意到，并没有花时间来美化它的页面。所有的模板是使用的基础样式，没有自定义样式。这对于我们来说非常有用，可以专注于应用程序的实际逻辑，不用分心去编写好看的HTML和CSS代码。

目前已经专注于应用程序的后端部分有一段时间了。因此，本章将暂停一下，并花一些时间来学习 如何使应用程序看起来更加精致、专业。

本章将与之前的章节略有不同，因为不会像往常那样详细地关注Python方面。创建漂亮的网页是一个很大的主题，而与**Python web后端开发**很大程度上无关，因此将讨论一些基本指导和想法，将重新设计应用的外观来研究和学习它。

# CSS框架 #

虽然我们可以说 编码很难，但与网页设计师相比，我们的痛苦还是无足轻重的，毕竟网页设计师必须让网页在所有Web浏览器上呈现良好一致外观的模板。近年来，变得越来越好，但在某些浏览器上仍然存在一些模糊的错误或奇怪的设定，使得设计网页的任务还是很困难。如果还要兼容屏幕限制设备（如平板电脑、智能手机）上的浏览器，则更加困难。

如果你像我一样，只是一个想创建规范网页的开发人员，没有时间或兴趣去学习底层机制，并通过编写原生HTML和CSS来实现它，那么唯一可行的解决方案是使用CSS框架来简化任务。通过这条路径，将失去一些操作自由，但另一方面，我们的网页在所有浏览器中会看起来很不错，而也不需要花费太多精力。CSS框架为普通类型的用户界面元素提供了高级CSS类的集合，其中包含预定义样式。这些框架中的大多数还为 不能使用HTML和CSS严格执行的操作提供JavaScript插件。

# 介绍Bootstrap #

最受欢迎的一个CSS框架是由**Twitter**建立的[Bootstrap][]。如果想看使用这个框架设计的页面类型，可查看文档中的[示例][Link 1]。

使用**Bootstrap**为网页设置样式的好处：

1.  在所有主流Web浏览器上看起来相似；
2.  处理台式机、平板电脑、手机屏幕尺寸；
3.  可定制布局；
4.  风格精美的导航栏、表单、按钮、提示、弹出窗口等。

使用**Bootstrap**最直接方法是在基础模板中导入 **bootstrap.min.css**文件。可以下载这个文件副本，并将其添加到项目中；也可以直接从CDN导入（[这里查看][Link 2]）。然后，可以根据文档开始使用它提供的通用CSS类。还可以导入包含框架JavaScript代码的**bootstrap.min.js**文件，以便使用更高级的功能。

幸运的是，有一个名为 [Flask-Bootstrap][]的**Flask扩展**，它提供一个随时可用的基本模板，它安装了**Bootstrap框架**。安装这个扩展：版本3.3.7.1；附带安装[dominate 2.3.1][]（用于使用优雅的DOM API创建和操作HTML文档）、[visitor 0.1.3][]（一个微型Pythonic访客实现）。

(venv) D:\microblog>pip install flask-bootstrap
    Collecting flask-bootstrap
      Using cached https://files.pythonhosted.org/packages/88/53/958ce7c2aa26280b7fd7f3eecbf13053f1302ee2acb1db58ef32e1c23c2a/Flask-Bootstrap-3.3.7.1.tar.gz
    Requirement already satisfied: Flask>=0.8 in d:\microblog\venv\lib\site-packages (from flask-bootstrap)
    Collecting dominate (from flask-bootstrap)
      Using cached https://files.pythonhosted.org/packages/43/b2/3b7d67dd59dab93ae08569384b254323516e8868b453eea5614a53835baf/dominate-2.3.1.tar.gz
    Collecting visitor (from flask-bootstrap)
      Using cached https://files.pythonhosted.org/packages/d7/58/785fcd6de4210049da5fafe62301b197f044f3835393594be368547142b0/visitor-0.1.3.tar.gz
    Requirement already satisfied: click>=5.1 in d:\microblog\venv\lib\site-packages (from Flask>=0.8->flask-bootstrap)
    Requirement already satisfied: itsdangerous>=0.24 in d:\microblog\venv\lib\site-packages (from Flask>=0.8->flask-bootstrap)
    Requirement already satisfied: Werkzeug>=0.14 in d:\microblog\venv\lib\site-packages (from Flask>=0.8->flask-bootstrap)
    Requirement already satisfied: Jinja2>=2.10 in d:\microblog\venv\lib\site-packages (from Flask>=0.8->flask-bootstrap)
    Requirement already satisfied: MarkupSafe>=0.23 in d:\microblog\venv\lib\site-packages (from Jinja2>=2.10->Flask>=0.8->flask-bootstrap)
    Installing collected packages: dominate, visitor, flask-bootstrap
      Running setup.py install for dominate ... done
      Running setup.py install for visitor ... done
      Running setup.py install for flask-bootstrap ... done
    Successfully installed dominate-2.3.1 flask-bootstrap-3.3.7.1 visitor-0.1.3

# 使用Flask-Bootstrap #

**Flask-Bootstrap**和大多数其他Flask扩展一样，需要进行初始化：

**app/\_\_init\_\_.py**：添加Flask-Bootstrap实例

# ...
    from flask_bootstrap import Bootstrap
    
    app = Flask(__name__)
    # ...
    mail = Mail(app)
    bootstrap = Bootstrap(app)
    
    #...

初始化扩展后，`bootstrap/base.html模板`变为可用，并可以使用`extends子句`从应用程序模板中引用。

但是记得，我已经使用了`extends子句`继承自己的基础模板，这允许将页面的公共部分放在一个地方。我的 `base.html模板`定义了导航栏，其中包含一些链接，还导出了一个`content块`。目前为止，应用程序中所有其他模板都是从基础模板继承，并为`content块`提供页面的主要内容。

那么，该如何适应 **Bootstrap**基础模板呢？想法是使用三级层次结构，而不是两层。`bootstrap/base.html模板`提供页面的基本结构，其中包含**Bootstrap框架文件**。这个模板 为了派生模板导出几个块，如`title`、`navbar`、`content`（查看完整的 [块列表][Link 3]）。我将更改我的`base.html`模板，让它从`bootstrap/base.html模板`派生，并为`title`、`navbar`、`content`块提供实现。反过来，`base.html`将为了它派生模板去定义页面内容而导出自己的`app_content`块。

下方将看到`base.html`在修改后如何从**Bootstrap基础模板**继承。  
**app/templates/base.html**：重新设计基础模板

{% extends "bootstrap/base.html" %}
    
    {% block title %}
    	{% if title %}
    		{
       { title }} - Microblog
    	{% else %}
    		Welcome to Microblog
    	{% endif %}
    {% endblock %}
    
    {% block navbar %}
    	<nav class="navbar navbar-default">
    		<div class="container">
    			<div class="navbar-header">
    				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    					<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="{
       { url_for('index') }}">Microblog</a>
    			</div>
    
    			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    				<ul class="nav navbar-nav">
    					<li><a href="{
       { url_for('index') }}">Home</a></li>
    					<li><a href="{
       { url_for('explore') }}">Explore</a></li>
    				</ul>
    
    				<ul class="nav navbar-nav navbar-right">
    					{% if current_user.is_anonymous %}
    						<li><a href="{
       { url_for('login') }}">Login</a></li>
    					{% else %}
    						<li><a href="{
       { url_for('user', username=current_user.username) }}">Profile</a></li>
    						<li><a href="{
       { url_for('logout') }}">Logout</a></li>
    					{% endif %}
    				</ul>
    			</div>
    		</div>
    	</nav>
    {% endblock %}
    
    {% block content %}
    	<div class="container">
    		{% with messages = get_flashed_messages() %}
    			{% if messages %}
    				{% for message in messages %}
    					<div class="alert alert-info" role="alert">{
       { message }}</div>
    				{% endfor %}
    			{% endif %}
    		{% endwith %}
    
    		{# application content needs to be provided in the app_content block #}
    		{% block app_content %}{% endblock %}
    	</div>
    {% endblock %}

在上述代码中，可看到如何从`bootstrap/base.html`派生这个模板，然后分别实现页面标题、导航栏、页面内容 三个块。

`title 块` 使用 `<title>`标签 定义将用于页面标题的文本。对于个块，只是移动了在原始基础模板中`<title>`标签内的逻辑。

`navbar 块` 是可选块，可用于定义导航栏。对于这个块，在Bootstrap导航栏文档中的改写了这个示例，以便它在左端包含站点标记，接着是 Home 和Explore链接。然后，添加了与页面右边框对齐的Profile和Login或Logout链接。

最后，在`content块`中定义了一个顶级容器，在其中编写了渲染 闪烁消息的逻辑，现在它们显示为Bootstrap警报。接着是一个新的`app_content块`，它被定义为 只有派生模板才能定义它们自己的内容。

所有页面模板的原始版本 都在名为`content`的块中定义它们的内容。如上所示，名为`content`的块被Flask-Bootstrap所使用，因此将内容块 重命名为`app_content`。所以，我们所有的模板都必须重命名才能去使用app\_content块 作为它们的内容块。例如，如下是`404.html`模板 如何修改版本的演示：

{% extends "base.html" %}
    
    {% block app_content %}
    	<h1>File Not Found</h1>
    	<p>
    		<a href="{
       { url_for('index') }}">Back</a>
    	</p>
    {% endblock %}

剩余的所有其他模板一一按上例修改即可。

# 渲染Bootstarp表单 #

Flask-Bootstrap有一个很棒的工作是渲染表单。Flask-Bootstrap不用逐一设置表单字段的样式，而是附带一个宏（macro），它接受一个Flask-WTF表单对象作为参数，并使用Bootstrap样式呈现完整的表单。

下方将看到重新设计的`register.html`模板作为一个示例：  
**app/templates/register.html**：

{% extends "base.html" %}
    {% import 'bootstrap/wtf.html' as wtf %}
    
    {% block app_content %}
    	<h1>Register</h1>
    	<div class="row">
    		<div class="col-md-4">
    			{
       { wtf.quick_form(form) }}
    		</div>
    	</div>
    {% endblock %}

上述代码中，在顶部声明的`import`工作原理与在模板上边的一个Python `import`类似。这还添加了一个`wtf.quick_form()`宏，它在一行简单代码中呈现完整的表单，包括支持显示验证错误，并且所有样式都适合Bootstrap框架。

以下展示为应用程序中的`其他表单`所做的更改：  
**app/templates/edit\_profile.html**

{% extends "base.html" %}
    {% import 'bootstrap/wtf.html' as wtf %}
    
    {% block app_content %}
    	<h1>Edit Profile</h1>
    	<div class="row">
    		<div class="col-md-4">
    			{
       { wtf.quick_form(form) }}
    		</div>
    	</div>
    {% endblock %}

**app/templates/index.html**

{% extends "base.html" %}
    {% import 'bootstrap/wtf.html' as wtf %}
    
    {% block app_content %}
    	<h1>Hello,{
       { current_user.username }}!</h1>
    	{% if form %}
    	{
       { wtf.quick_form(form) }}
    	<br>
    	{% endif %}
    
    	{% for post in posts %}
    		{% include '_post.html' %}
    	{% endfor %}
    
    	<nav aria-label="...">
    		<ul class="pager">
    			<li class="previous{% if not prev_url %} disabled{% endif %}">
    				<a href="{
       { prev_url or '#' }}">
    					<span aria-hidden="true">←</span> Newer posts
    				</a>
    			</li>
    
    			<li class="next{% if not next_url %} disabled{% endif %}">
    				<a href="{
       { next_url or '#' }}">
    					Older posts <span aria-hidden="true">→</span>
    				</a>
    			</li>
    		</ul>
    	</nav>
    
    {% endblock %}

**app/templates/login.html**

{% extends "base.html" %}
    {% import 'bootstrap/wtf.html' as wtf %}
    
    {% block app_content %}
        <h1>Sign In</h1>
        <div class="row">
            <div class="col-md-4">
                {
       { wtf.quick_form(form) }}
            </div>
        </div>
        <br>
    
        <p>New User? <a href="{
       { url_for('register') }}">Click to Register!</a></p>
        <p>
            Forgot Your Password?
            <a href="{
       { url_for('reset_password_request') }}">Click to Reset It</a>
        </p>
    {% endblock %}

**app/templates/reset\_password.html**

{% extends "base.html" %}
    {% import 'bootstrap/wtf.html' as wtf %}
    
    {% block app_content %}
    	<h1>Reset Your Password</h1>
    	<div class="row">
    		<div class="col-md-4">
    			{
       { wtf.quick_form(form) }}
    		</div>
    	</div>
    {% endblock %}

**app/templates/reset\_password\_request.html**

{% extends "base.html" %}
    {% import 'bootstrap/wtf.html' as wtf %}
    
    {% block app_content %}
    	<h1>Reset Password</h1>
    	<div class="row">
    		<div class="col-md-4">
    			{
       { wtf.quick_form(form) }}
    		</div>
    	</div>
    {% endblock %}

**app/templates/user.html**

{% extends "base.html" %}
    
    {% block app_content %}
    	<table class="table table-hover">
    		<tr>
    			<td width="256px"><img src="{
       { user.avatar(256) }}"></td>
    			<td>
    				<h1>User:{
       { user.username }}</h1>
    				{% if user.about_me %}
    					<p>{
       { user.about_me }}</p>
    				{% endif %}
    
    				{% if user.last_seen %}
    					<p>Last seen on:{
       { user.last_seen }}</p>
    				{% endif %}
    
    				{% if user == current_user %}
    					<p>
    						<a href="{
       { url_for('edit_profile') }}">Edit your profile</a>
    					</p>
    
    				{% elif not current_user.is_following(user) %}
    					<p>
    						<a href="{
       { url_for('follow', username=user.username) }}">Follow</a>
    					</p>
    
    				{% else %}
    					<p>
    						<a href="{
       { url_for('unfollow', username=user.username) }}">Unfollow</a>
    					</p>
    				{% endif %}
    			</td>
    		</tr>
    	</table>
    	
    	{% for post in posts %}
    		{% include '_post.html' %}
    	{% endfor%}
    
    	<nav aria-label="...">
    		<ul class="pager">
    			<li class="previous{% if not prev_url %} disabled{% endif %}">
    				<a href="{
       { prev_url or '#' }}">
    					<span aria-hidden="true">←</span> Newer posts
    				</a>
    			</li>
    			<li class="next{% if not next_url %} disabled{% endif %}">
    				<a href="{
       { next_url or '#' }}">
    					Older posts <span aria-hidden="true">→</span>
    				</a>
    			</li>
    		</ul>
    	</nav>
    {% endblock%}

# 博客帖子的渲染 #

呈现单个博客帖子的表示逻辑被抽象为 名为\`\_post.html\`的子模板。对其小调整，以便在Bootstrap下看起来更好。 **app/templates/\_post.html**：

<table class="table table-hover">
        <tr>
            <td width="70px">
                <a href="{
       { url_for('user', username=post.author.username) }}">
                    <img src="{
       { post.author.avatar(70) }}" />
                </a>
            </td>
            <td>
                <a href="{
       { url_for('user', username=post.author.username) }}">
                    {
       { post.author.username }}
                </a>
                says:
                <br>
                {
       { post.body }}
            </td>
        </tr>
    </table>

# 渲染分页链接 #

分页链接是Bootstrap提供支持的另一个领域。为此，再一次参考Bootstrap\[文档\](https://getbootstrap.com/docs/3.3/components/\#optional-disabled-state)，并调整其中一个示例。 **app/templates/index.html**：重新设计的分页链接 \`\`\` ...

*   ← Newer posts 
 *      <li class="next{% if not next_url %} disabled{% endif %}">
        			<a href="{
              { next_url or '#' }}">
        				Older posts <span aria-hidden="true">→</span>
        			</a>
        		</li>
        	</ul>
        </nav>

\{% endblock %\}

不过注意，在上述实现中，当某个方向没有更多内容时，将运用禁用状态，而不是隐藏下一个或上一个链接，这将使链接显示为灰色。
    
    类似的更改也需要运用于`user.html`，这个更改在上一小节上展示了。
    
    最终效果呈现：
    ![这里写图片描述](https://img-blog.csdn.net/20180822201005329?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI1NjQ3NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
    目前为止，项目结构：
    <pre>microblog/
        app/
            templates/
    	        email/
    		        reset_password.html
    		        reset_password.txt
    	        _post.html
    	        404.html
    	        500.html
                base.html
                edit_profile.html
                index.html
                login.html
                register.html
                reset_password.html
                reset_password_request.html
                user.html
            __init__.py
            email.py
            errors.py
            forms.py
            models.py
            routes.py
        logs/
            microblog.log
        migrations/
        venv/
        app.db
        config.py
        microblog.py
        tests.py
    </pre>
    
    参考：
    [作者博客](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xi-facelift)
    
    <font color=red>如需转载请注明出处。</font>

[Bootstrap]: http://getbootstrap.com/
[Link 1]: https://getbootstrap.com/docs/3.3/getting-started/#examples
[Link 2]: https://www.bootcdn.cn/bootstrap/
[Flask-Bootstrap]: https://pythonhosted.org/Flask-Bootstrap/
[dominate 2.3.1]: https://pypi.org/project/dominate/
[visitor 0.1.3]: https://pypi.org/project/visitor/
[Link 3]: https://pythonhosted.org/Flask-Bootstrap/basic-usage.html#available-blocks