目录
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>
login.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"> </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 %}
register.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> <input type="password" placeholder="确认密码" required="" id="password" /> </div> <div class=""> <span class="help-block u-errormessage" id="js-server-helpinfo"> </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的哈哈哈
效果图：
厚礼谢，希望自己能早点独立完成类似的效果！！！！！！！！！！！！！
进入下一个学习内容！！！！冲冲冲
