继承
1.首先给模板中建立好坑(相当于定义好抽象方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BaseHtml</title>
</head>
<body>
{% block header %}
{% endblock %}
{% block banner %}
{% endblock %}
{% block context %}
{% endblock %}
{% block footer %}
{% endblock %}
</body>
</html>
2.建立其他模板时,进行继承,并实现某个方法
{% extends "base.html" %}
{% block header %}
<h1>我来实现header了~{{ name }}</h1>
{% endblock %}
3.进行逻辑代码,并渲染
def getExtends(request):
context ={
"name":"sola"
}
return render(request,"home.html",context=context)
4.也可以再继承已实现的header进行覆盖或者增量(与接口同理)
{% extends "home.html" %}
{% block header %}
{% comment %} 可用super调用{% endcomment %}
{{ block.super }}
<h1>进行增量增加</h1>
{% endblock %}
包含
1.建立一个只有body内容的html
<h1>我是脚</h1>
2.在render的html中加入include即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BaseHtml</title>
</head>
<body>
{% include "footer.html" %}
</body>
</html>
——————————————————————————————————————————————————————
应用CSS
在header中开个坑
<head>
<meta charset="UTF-8">
<title>BaseHtml</title>
{% block cssBlock %}
{% endblock %}
</head>
在继承的html中实现
{% block cssBlock %}
<link rel="stylesheet" type="text/css" href="/static/css/basecss.css">
{% endblock %}
这个css文件我是建立在新的文件夹下的,所以我们需要告诉项目我们有这个文件夹,所以需要进入setting中进行设置
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
css中实现简单的样式,即可完成html上的渲染
目录也可以不用写死,进行相对加载(这样两种加载会有个坑,关闭调试模式时,会找不到资源,后续解决)
{% extends "home.html" %}
{% load static %}
{% block header %}
{% comment %} 可用super调用{% endcomment %}
{{ block.super }}
<h1>进行增量增加</h1>
{% endblock %}
{% block cssBlock %}
{# <link rel="stylesheet" type="text/css" href="/static/css/basecss.css">#}
<link rel="stylesheet" type="text/css" href={% static "css/basecss.css" %}>
{% endblock %}