Flask之jinja2模板（三）

最新推荐文章于 2024-11-15 13:12:16 发布

我还可以熬_

最新推荐文章于 2024-11-15 13:12:16 发布

阅读量691

点赞数 4

分类专栏： # Flask框架文章标签： flask python 后端

本文链接：https://blog.csdn.net/m0_67093160/article/details/127592919

版权

Flask框架专栏收录该内容

21 篇文章

订阅专栏

include导入模板

1. 这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置。

2. include标签，如果想要使用父模版中的变量，直接用就可以了，不需要使用with context。

3. include的路径，也是跟import一样，直接从templates根目录下去找，不要以相对路径去找。

在templas中创建common文件夹在里边创建header.html文件和footer.html文件，并通过下面的方式进行调用：


    <hr>

        {% include 'common/header.html' %}
        <main>主要内容</main>
        {% include 'common/footer.html' %}

set与with的使用

set的使用

set是全局变量，在模版中，可以使用set语句来定义变量。


    {% set uname = 'xiaolin' %}

    <p>用户名：{{ uname }}</p>

一旦定义了这个变量，那么在后面的代码中，都可以使用这个变量，就类似于Python的变量定义是一样的。

with语句

with像是局部变量，with语句定义的变量，只能在with语句块中使用，超过了这个代码块，就不能再使用了。

    {% with nick = '小林' %}
        <p>昵称：{{ nick }}</p>
    {% endwith %}

注意

关于定义的变量，with语句也不一定要跟一个变量，

可以定义一个空的with语句，

需要在指定的区域才能使用的情况，可以set与with组合使用

    {% with %}
        {% set age = 20 %}
        <p>年龄:{{age}}</p>
    {% endwith %}

静态资源的引入

静态文件

静态文件包括：css文件 js文件图片文件等文件

加载静态文件使用的是url_for函数。然后第一个参数需要为static，第二个参数需要为一个关键字参数filename='路径'。

下面是引入js/css/img的基本模板：

需要创建一个static的文件夹，里边可以在创建js/css/img等文件夹分类管理文件，在使用url_for进行引用即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态文件的引入</title>
    <script src="{{url_for('static',filename = 'js/text.js')}}"></script>
    <link href="{{url_for('static',filename = 'css/text.css')}}" type="text/css" rel="stylesheet"></link>
</head>
<body>
    <h1>静态文件的引入</h1>
    <img src="/static/img/img1.jpg" alt="">
    <img src="{{url_for('static',filename = 'img/img1.jpg')}}" alt="" srcset="">
    
</body>
</html>

注意

路径查找，要以当前项目的static目录作为根目录

模板继承

为什么需要模版继承

模版继承可以把一些公用的代码单独抽取出来放到一个父模板中

以后子模板直接继承就可以使用了。

这样可以重复的利用代码，并且以后修改起来也比较方便

模板继承语法

使用extends语句，来指明继承的父模板。父模板的路径，也是相对于templates文件夹下的绝对路径

{% extends "base.html" %}

block语法

父模板与子模版的一个接口

父模板：

 {% block content  %}
     这个地方是主题内容
 {% endblock %}

子模版：

{% block content %}
    {{ super() }}
    <p>这个是子模版的内容</p>
{% endblock %}

默认情况下，子模板如果实现了父模版定义的block。那么子模板block中的代码就会覆盖掉父模板中的代码。

{{ super（） }}是子模板中仍然保持父模板中原有的内容。

调用另外一个block中的代码

如果想要在另外一个模版中使用其他模版中的代码。那么可以通过{{ self.其他block名字() }}就可以了。

注意

1. 子模板中的代码，第一行，应该是extends

2. 子模板中，如果要实现自己的代码，应该放到block中。如果放到其他地方，那么就不会被渲染

模板继承练习

home_base.html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title%}首页{% endblock %}</title>


<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/style.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/body.css')}}"/> 
</head>
<body>
<div class="container">
	<section id="content">
        {% block content %}

        {% endblock %}
	</section><!-- content -->
</div>
<!-- container -->
<br><br>

</body>
</html>

{% extends 'home_base.html'%}

{% block title%}
登录页面
{% endblock %}

{% block content %}
<form action="">
    <h1>会员登录</h1>
    <div>
        <input type="text" placeholder="邮箱" required="" id="username" />
    </div>
    <div>
        <input type="password" placeholder="密码" required="" id="password" />
    </div>
     <div class="">
        <span class="help-block u-errormessage" id="js-server-helpinfo">&nbsp;</span>			</div> 
    <div>
        <!-- <input type="submit" value="Log in" /> -->
        <input type="submit" value="登录" class="btn btn-primary" id="js-btn-login"/>
        <a href="#">忘记密码?</a>
        <!-- <a href="#">Register</a> -->
    </div>
</form><!-- form -->
{% endblock %}

{% extends 'home_base.html'%}

{% block title%}
注册页面
{% endblock %}

{% block content %}
<form action="">
    <h1>会员注册</h1>
    <div>
        <input type="text" placeholder="邮箱" required="" id="username" />
    </div>
    <div>
        <input type="password" placeholder="密码" required="" id="password" />
    </div>
    <div>
        <input type="password" placeholder="确认密码" required="" id="password" />
    </div>
        <div class="">
        <span class="help-block u-errormessage" id="js-server-helpinfo">&nbsp;</span>			</div> 
    <div>
        <!-- <input type="submit" value="Log in" /> -->
        <input type="submit" value="注册" class="btn btn-primary" id="js-btn-login"/>
        <a href="#">去登录</a>
        <!-- <a href="#">Register</a> -->
    </div>
</form><!-- form -->
{% endblock %}

css的就不放了直接从文档里copy的哈哈哈

效果图：