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？这显然是脑子瓦特了。

<!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>

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

form flask import render_template

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

@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
                           )

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