FLASK博客系列5——模板之从天而降

本文介绍: 我们啰啰嗦嗦讲了4篇，都是在调接口，啥时候能看到漂亮的页面呢？别急，今天我们就来实现。来我们先来实现一个简单的页面。不多说，上代码。如无意外，你可以看到下图：但是，我接受唔到咯。辣么难看，又要写一堆HTML。如果我们需要返回一个含有大量动态内容的大型以及复杂的 HTML 页面的话，代码将会有多么复杂啊！如果你需要改变你的网站布局，在一个大的应用程序，该应用程序有几十个视图，每一个直接返回HTML？这显然是脑子瓦特了。这时候我们就要引入模板一说了。那什么是呢？

我们啰啰嗦嗦讲了4篇，都是在调接口，啥时候能看到漂亮的页面呢？别急，今天我们就来实现。

来我们先来实现一个简单的页面。不多说，上代码。

@app.route('/')
def index():
    user = {'username': 'clannadhh'}
    return '''
        <html&gt;
          <head&gt;
            <title&gt;首页</title&gt;
          </head&gt;
          <body&gt;
            <h1>Hello, ''' + user['username'] + '''</h1>
          </body>
        </html>
    '''

如无意外，你可以看到下图：

但是，我接受唔到咯。辣么难看，又要写一堆HTML。如果我们需要返回一个含有大量动态内容的大型以及复杂的 HTML 页面的话，代码将会有多么复杂啊！如果你需要改变你的网站布局，在一个大的应用程序，该应用程序有几十个视图，每一个直接返回HTML？这显然是脑子瓦特了。

这时候我们就要引入模板一说了。那什么是模板呢？我们把包含变量和运算逻辑的 HTML 或其他格式的文本叫做模板，执行这些变量替换和逻辑计算工作的过程被称为渲染。

Jinjia2模板是Python web 编程中主流的模板语言，从Django模板发展而来，但比Django的模板性能更好。由于Flask是基于Werkzeug和Jiajia2发展而来的，因此在安装Flask的时候会自动安装Jinjia2。

Jiajia2语法

Jinjia2 模板由内容、变量、表达式、标签和注释5个部分组成。

普通内容：一般是没有特殊含义的内容，渲染模板时不对其进行解析。
变量：在Jinjia2 中是可以定义变量的，当模板渲染时，变量就会被替换为其对应的值。
表达式：可以针对变量做一些算术或者逻辑运算。
标签：用于在渲染模板时进行逻辑控制。
注释：就像平时的代码注释，模板渲染时不对其做解析。实际上渲染前会被删除掉。

我们在template文件夹下创建一个 base.html，这个就是我们博客的首页基模板。为了让我们的博客看起来更加大气，我们用Bootstrap4来实现前端渲染。这里我们直接用CDN引入即可，至于样式什么的，你们照搬我的就可以。等有时间自己慢慢研究，我们此次的目标要放在Flask上。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>
        {% block title %}
            我的个人博客
        {% endblock %}
    </title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
{# 我是一段注释 #}
{% include 'header.html' %}   {# 这里导入header.htm #}
{% block content %}  {# 表明要加入当前模板中的对应块的内容 #}
    <h1 >
        {# 这里传递了变量username #}
        你好啊！<sapn class="text-danger">{{ username }}</sapn> , 欢迎您~
    </h1>
{% endblock content%}


</body>
</html>

接着再新建一个header.html，这个渲染的是我们博客的导航栏，会显得好看很多。

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="#" style="font-size: 1.5rem;">
        我的个人博客
    </a>
</nav>

我们接着修改一下app.py。从flask中导入,用于渲染我们的模板：

form flask import render_template

接着修改一下我们之前的hello world。

@app.route('/')
def index():
    username = "clannadhh"
    return render_template("base.html", username=username)

接着运行访问，如无意外，我们就可以看到雏形了。

emm mm，看起来还不错的样子。到这里你们是不是发现，Jinjia2的语法也不难理解嘛。在模板里，我们通常要添加一些特殊格式定义的内容，下面是常见的三种：

{{ … }} 用来标记变量。像我们上面就用了username。
{% … %} 用来标记语句，比如 if 语句，for 语句等。
{# … #} 用来写注释。

我们再来伪造一些假数据。然后顺便美化一下。

在template目录下新建一个article文件夹，接着新建一个list.html。这个才是我们真正的首页的模板，它继承于base.html。

接着修改一下hello world。

@app.route('/')
def index():
    username = "clannadhh"
    articles =[
        {"title": "石正丽新研究:需持续监控蝙蝠", "detail": "石正丽新研究:需持续监控蝙蝠"},
        {"title": "建议增设火车青年票", "detail": "建议增设火车青年票"},
        {"title": "审议现场人大代表张伯礼哭了", "detail": "审议现场人大代表张伯礼哭了"},
        {"title": "31省区市首次确诊病例0新增", "detail": "31省区市首次确诊病例0新增"},
        {"title": "世界首个新冠疫苗人体临床数据", "detail": "世界首个新冠疫苗人体临床数据"},
    ]
    return render_template("article/list.html",
                           username=username,
                           articles=articles
                           )

然后是修改 list.html的内容。

{% extends "base.html" %}

{% block content %}
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-8 col-lg-8 col-sm-8">
                {% for article in articles %}
                    <div class="card row mt-4">
                        <div class="card-header">
                            <div class="mt-0">
                                <a style="font-weight: bold; color: black; font-size: 24px;"
                                   href="#">
                                    {{ article.title }}
                                </a>
                            </div>
                        </div>
                        <div class="card-body mt-0">
                            <p style="color: black; font-size: 16px;">
                                {{ article.detail }}
                            </p>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock content %}