(零五)Flask有手就行——学会Jinja2

零、前言

上篇文章,HTTP请求的设置。
本篇文章,阐述一下Jinja2模板渲染引擎,减少HTML的代码量。

(零五)Flask有手就行——学会Jinja2_第1张图片

一、Jinja2

想象一下这样一个场景,如果对于某个网站来说,如果你充值了Vip,你才可以看到隐藏内容了。你该怎么做呢?
这个适合就需要jinja2的出场了

先写一份代码,根据姓名渲染一个网页,然后把姓名和vip变量传入HTML模板中。

注意使用jinja2的HTML页面是不能用浏览器直接打开的,必须要启动Flask,使用路由返回页面

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/space/')
def space(name):
    vip = True
    return render_template("space.html", name=name, vip=vip)

if __name__ == '__main__':
    app.run(debug=True)

当html模板,接收到flask传递过来的name、vip参数,在html中如何使用呢?

  • 使用{{ }}装载一个变量,比如文中使用{{ name }}在html中装载name变量
  • 使用{% %}装载一个语句,对于if语句的格式如下面的代码的8-11行,必须要以{% if xxx %},以{% endif %}结尾。
doctype html>
<html lang="en">
<head>
    <title>Hello from Flasktitle>
head>
<body>
    <h1>Hello {{ name }}!h1>
    
    {% if vip %}
        <h3>吆西,你触发了,隐藏内容啦!h3>
    {% endif %}
body>
html>

Jinja2语句扩展

先说一下最终的结论:jinja2中装载变量使用{{ }},装载语句使用{{% %}},括号里面都按Python的风格书写即可!
在html中,我们装载的变量,还有可能是一个列表,一个对象,一个字典等类型。
我们装载的方式如下所示:

# python
a = [1,2,3]
b = Cat(name="Tom")
c = {"name":"Jackson"}

# html
<h1>Hello {{ a[0] }}!h1>
<h1>Hello {{ b.name }}!h1>
<h1>Hello {{ c['name '] }}!h1>

# 输出结果
Hello 1!
Hello Tom!
Hello Jackson!

在html中,不仅仅要使用if语句,还有一个更重要的循环语句。jinja2的循环语句如下所示:

     {% for item in navigation %}
         <li><a href="{{ item.href }}">{{ item.caption }}a>li>
     {% endfor %}

上面的代码生成了len(navigation )个li,每个li都指向item.href的链接。

都看到这里了,点个赞白!

Jinja2模板继承

Jinja2的模板继承其实和对象的继承有一些相似的地方。比如,可以减少很多冗余的代码。接下来,我将展示一个Jinja2模板继承的小例子:
我们创建一个base.html,书写如下代码:

DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="base.css" />
    <title>{% block title %}{% endblock %}title>
    {% block head %}{% endblock %}
head>
<body>
    <div id="body">{% block body %}{% endblock %}div>
body>
html>

在上述代码中,{% block xxx %} {% endblock %}表示开一个卡槽,方便后续页面进行填写。

接下来,编写一个index.html继承base.html页面,具体方式如下所示:

{% extends "base.html" %}
{% block title %}首页{% endblock %}

{% block body %}
    <h1>这里是首页h1>
    <p class="detail">
      首页的内容
    p>
{% endblock %}  

{% extends “base.html” %} 表示继承base.html模板
{% block title %}首页{% endblock %} 表示使用title卡槽。首页是卡槽的内容
body 卡槽也是一样的

(零五)Flask有手就行——学会Jinja2_第2张图片

你可能感兴趣的:(flask,flask,python,后端)