母版使用:把多个页面公用的部分提取出来,放在一个母版里面,其他的页面只需要 继承 母版就可以了。
-
母版使用:
- 把公用的HTML部分提取出来,放到base.html文件中
- 在base.html中,通过定义block,把每个页面不同的部分区分出来
- 在具体的页面中,先继承母版
- 然后block名去指定替换母版中相应的位置
base.html {% block page-main %} {% endblock %} main.html # 引入头文件 {% extends 'base.html' %} {% block page-main %} <h1>替换部分内容</h1> {% endblock %}
-
举例说明
base.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>model</title> </head> <body> <div id="header">This is the Header</div> <div id="content"> {% block page-main %} {% endblock %} </div> <div id="footer">This is the footer</div> </body> </html>
main.html
{% extends 'base.html' %} {% block page-main %} <h1>替换的主体部分</h1> {% endblock %}
views.main
def main(request): return render(request, "main.html")
母版的常见使用方法:给子页面替换CSS、JS文件
某一个页面单独用到CSS文件添加-
使用母版的注意事项
{% extends 'base.html' %} => 母版文件:base.html要加引号 {% extends 'base.html' %} 必须放在子页面的第一行 在base.html中定义很多block,通常我们会额外定义page-css和page-js两个 view.py相应的函数中返回的是对应的子页面文件 不是不是不是 base.html
- 组件:相同的模块抽出弄成组件。例如导航栏
使用方法
{% include 'xxx.html'%}