django学习日志（模板的渲染过程）第十部分：模板继承
- 内容分块
- 修改 WhatsTemplate\templates\index.html
{% load static %} <!-- 加载静态资源-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 样式地址 Swiper CDN服务-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<!-- 样式-->
<style type="text/css">
.swiper-container img{
width: 50%;
height: 700px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<script>
// 等待页面加载完成以后在执行
$(function () {
var mySwiper = new Swiper ('.swiper-container',
{
direction: 'horizontal',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
}
)
})
</script>
</head>
<body>
<!--切块-->
<!--头部分-->
{% block header %}
{% include 'fuckoff.html' %}
<!--swiper内容 轮播-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{% static 'img/slide1.jpg'%}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/slide2.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/slide3.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/slide4.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/slide5.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/slide6.jpg' %}">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
{% endblock %}
<!-- 中间部分-->
{% block content %}
<div style="height: 1000px;background-color: #58bc58"></div>
{% endblock %}
<!-- 最底下部分-->
{% block footer %}
<div style="height: 300px;background-color: red"></div>
{% endblock %}
</body>
</html>
-
复制index.html 改成index2.html
-
修改 WhatsTemplate\templates\index2.html
<!-- 中间部分-->
{% block content %}
<div style="height: 1000px;background-color: yellow"></div>
{% endblock %}
- 新建一个路由
- 修改 WhatsTemplate\WhatsTemplate\urls.py
url(r'^index2/', views.index2),
- 修改 WhatsTemplate\WhatsTemplate\views.py
def index2(request):
return render(request,'index2.html')
- 打开 http://127.0.0.1:8000/index2/
- 提取共性的部分
- 新建一个父模板
- 将index.html复制一份改成base.html
- 修改 WhatsTemplate\templates\base.html
{% load static %} <!-- 加载静态资源-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<!--自定义的样式-->
{% block customStyle %}
<!-- 样式地址 Swiper CDN服务-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
{% endblock customStyle %}
<!--自定义的脚本-->
{% block customScript %}
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
{% endblock customScript %}
</head>
<body>
<!--切块-->
<!--头部分-->
{% block header %}
{% endblock %}
<!-- 中间部分-->
{% block content %}
{% endblock %}
<!-- 最底下部分-->
{% block footer %}
{% endblock %}
</body>
</html>
- 传入标题title
- 修改 WhatsTemplate\WhatsTemplate\views.py
def index(request):
template = loader.get_template('index.html')
ret = template.render(context={'title':'主页'})
return HttpResponse(ret)
def index2(request):
return render(request,'index2.html',context={'title':'主页2'})
- index.html 继承base.html
- 修改 WhatsTemplate\templates\index.html
<!--继承base.html-->
{% extends "base.html" %}
<!--重写customStyle-->
{% block customStyle %}
<!--继承父类的内容-->
{{ block.super }}
<!--填坑-->
<style type="text/css">
.swiper-container img{
width: 50%;
height: 700px;
}
</style>
{% endblock customStyle %}
<!--重写父类的customScript-->
{% block customScript %}
<!--继承父类的内容-->
{{ block.super }}
<!--填坑-->
<script>
// 等待页面加载完成以后在执行
$(function () {
var mySwiper = new Swiper ('.swiper-container',
{
direction: 'horizontal',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
}
)
})
</script>
{% endblock customScript %}
<!--切块-->
<!--头部分-->
{% block header %}
{% include 'fuckoff.html' %}
<!--swiper内容 轮播-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{% static 'img/slide1.jpg'%}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/slide2.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/slide3.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/slide4.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/slide5.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/slide6.jpg' %}">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
{% endblock %}
<!-- 中间部分-->
{% block content %}
<div style="height: 1000px;background-color: #58bc58"></div>
{% endblock %}
<!-- 最底下部分-->
{% block footer %}
<div style="height: 150px;background-color: red"></div>
{% endblock %}
- 遇到一个问题
- 解决问题
- {% load static %} 继承不了需要添加
- 修改 WhatsTemplate\templates\index.html
<!--继承base.html-->
{% extends 'base.html' %}
{% load static %} <!-- 加载静态资源-->
- index2.html 从 index.html 继承过来
- 修改 WhatsTemplate\templates\index2.html
<!--继承index.html-->
{% extends 'index.html' %}
{% block content %}
<!--重写index.html中的content-->
<div style="height: 500px;background-color: yellow"></div>
{% endblock content %}
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
