模版继承(母版继承)
模版继承可以创建一个基本的“骨架”模版，它包含您站点中的全部元素，并且可以定义能够被子模版覆盖的 blocks 。
<!--设置一个共同的HTML模版(一个HTML文件,base.html)-->
<!--其他的html文档来继承这个公共的母版-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>home</title>
<!--设置block方法,block中包含的内容,在其他html页面继承后可以进行修改,-->
<!--block可以设置多个,可以在页面的任意位置,包括css,js内容-->
{% block style %}
<style>
h1{
background-color: red;
}
</style>
<!--申明block方法的结束-->
{% endblock %}
</head>
<body>
<h1>你好世界</h1>
{% block connect %}
<h1>修改的内容</h1>
{% endblock %}
</body>
</html>
***************************************************
<!--继承页面的写法-->
<!--申明继承于那个页面,必须放在开头的位置-->
{% extends 'base.html' %}
<!--使用block来申明要修改的内容,block后面的变量必须和模板中的一一对应,指定要修改的部分-->
<!--页面中写和母版中名字相同的block块,从而来显示自定义的内容-->
{% block style %}
<style>
h1{
background-color: blue;
}
</style>
{% endblock %}
{% block connect %}
<!--block.super可以显示继承的母版中的block中的内容-->
{{ block.super }}
<h1>修改后的内容</h1>
{% endblock %}组件
//可以将常用的页面内容如导航条，页尾信息等组件保存在单独的文件中，然后在需要使用的地方，文件的任意位置按如下语法导入即可。
//设置一个组件,就是新建一个html文件,然后在这个文件中封装组件的内容
//组件的意思类似于python中的函数的,在其他地方进行引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
}
</style>
</head>
<body>
<div class="c1">
<span>个人中心</span>
<span>首页</span>
<span>注册</span>
<span>登陆</span>
</div>
</body>
</html>
#**********************************************************
//在其他的html中使用这个组件,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//使用include方法来引用组件,后面写的是导入那个组件,导入后放到当前引入的位置
//导入组件会导入所有的内容,包括css样式,js代码等,都是放在body标签中,不会影响当签页面的效果
{% include 'index.html' %}
<h1>新项目首页</h1>
</body>
</html>
#**********************************************************
//模版继承和组价的区别:
模版是一个公共模版,是一个底板,其他页面只是修改他的内容,用的还是他的结构,
组件类似一个插件,封装了一些功能,别的页面只是引入使用这些功能,组件中的页面效果,不会影响当前页面中的设置的效果
//www.jq22.com中有一些封装好的插件可以直接使用原文地址：https://www.cnblogs.com/luckinlee/p/11622260.html
时间： 2024-11-09 16:39:31