Django模板的继承与模板的导入 Django模板的继承与模板的导入

一:模版的继承
- - 1.什么是模板继承?
  - 2.使用继承流程原理
  - 3.模板继承语法
二:模板的继承使用
- - 1.案例需求
  - 2.总结模板继承
三:模版的导入
- - 1.模板导入
  - 2.模板导入格式
  - 3.模板导入使用
  - 4.使用结果

一:模版的继承 1.什么是模板继承?

你需要事先在你想要使用的主页面上划定区域做好标记，之后在子页面继承的时候你就可以使用在主页面划定的区域，也就意味着，如果你不划定任何区域，那么你子页面将无法修改主页面内容

2.使用继承流程原理

1.先在你想要继承的主页面上通过bolck划定你将来可能要改的区域，并做好标记
2.在子页面上继承extends，利用block自动提示选取你想要修改的内容区域标记名称
3.在子页面extends中写你要修改主页面标记区的代码
4.然后就可以让子页面的修改内容渲染到主页面的划定区域上

你们有没有见过一些网站
这些网站页面整体都大差不差只是某一些局部在做变化
3.模板继承语法

1.继承 {% extends '模版页面名' %}2.局部修改 # 1.你需要先去模版页面中划定可以被修改的区域 {% block '名字' %} 模版内容（666） {% endblock %} # 2.子页面中即成了模版页面之后就可以根据名字修改 {% block '名字' %} 子版内容子版页面吃了可以自己写自己的之外还可以继续使用模版的内容 {{ block.super }}666 {{ block.super }}666 {{ block.super }}666 {{ block.super }}666 {% endblock %}

4.一般情况下模版页面上应该至少有三块可以被修改的区域 1.css区域 2.html区域 3.js区域每一个子页面就都可以有自己独有的css代码 html代码 js代码互相之间互不干扰 # 子页面css {% block css %}{% endblock %}{% block content %}{% endblock %}# 子页面js {% block js %}{% endblock %}

二:模板的继承使用 1.案例需求

1.实现用户点击登录右侧局部出现登录页面，点击注册右侧出现注册页面
urls.py

# 模板的继承 url(r'^home/', views.home), # 创建login路由 url(r'^login/', views.login), # 创建reg路由 url(r'^reg/', views.reg),

views.py

def home(request): return render(request, 'home.html')def login(request): return render(request, 'login.html')def reg(request): return render(request, 'reg.html')

home.html

Title{% block css %}{% endblock %} {#导航条#} Brand Link (current) Link Dropdown Action Another action Something else here Separated link One more separated link Link Dropdown Action Another action Something else here Separated link {#左右不留白#}{#row 划分12份区域#}{#左侧分三份#}{#侧边栏#}首页登录注册{#面板#}Panel title {#划分区域不影响区域展示，仅仅是标记区域名#} {% block content %} {#巨幕#}Hello, world!... Learn more {% endblock %}{% block js %}{% endblock %}

{#login 页面全部清空#}{#login继承home主页面#} {% extends 'home.html' %}{#子页面的css代码 #} {% block css %}h1 { color: red; }{% endblock %}{#block 指定选择主页面划分的(区域) 可以进行修改 #} {% block content %} 登录页面 username: password: {% endblock %}{# 子页面的js代码 #} {% block js %}{% endblock %}

reg.html

{#reg页面全部清空#}{#reg继承home主页面#} {% extends 'home.html' %}{#子页面的css代码 #} {% block css %}h1 { color: seagreen; }{% endblock %}{#block 指定选择主页面划分的(区域) 可以进行修改 #} {% block content %} 注册页面 username: password: {% endblock %}{# 子页面的js代码 #} {% block js %}{% endblock %}