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

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

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

@app.route('/')
def index():user = {'username': 'clannadhh'}return '''<html><head><title>首页</title></head><body><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)

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

emmmm，看起来还不错的样子。到这里你们是不是发现，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 %}

好了，我们跑起来看看效果。emmmm，整理效果不错。