您的位置：首页 > Web前端 > HTML

Django之html-模板继承

2018-01-30 00:00 543 查看

在编程的过程中，我们经常会重复性的写了很多的代码，比如一个页面的框架部分，这样我又多少个页面就得写上多少次，这样既不好维护，也不够高效，所以我们引出了html的模板继承部分。

1、写好一个html文件。

2、下面有个新的html文件需要继承上面这个html。

　　直接在这个新的html文件的最顶端，写上下面的内容　　

#这个manger.html就是母版的文件名称，告诉这个html去哪里继承。

{% extends 'manger.html' %}

3、问题来了，我们既然是继承，总不能全部继承吧，我们肯定是需要写一些新的内容在新的html文件中展示，我们只是继承母版中的一部分，比如head之类的。

　　比如我们要在html的一个位置更换新的内容。

　　1、定义一个继承的块，叫index。

{% block index %}{% endblock %}

　　2、继承者在自己的文件中需要更换新的内容，需要这么写。

　　注意：只需要在继承的任意位置写上{% block index %}内容区{% endblock %}

{% block index %}
<div style="height: 45px;line-height: 45px;font-size: 15px;font-weight: bolder">
<span>首页 ></span>
<span>资产管理</span>
</div>
{% endblock %}

4、问题由来了，如果我的html内容特别多，我看着特别乱，这样我可以把这些内容都写到一个新的html文件里面，然后在我的html文件中直接引用就OK。

例如：我单独写了一个test.html文件。

我想在html中引用直接写入地下的东西就OK了。

{% include "test.html" %}

5、写自己的CSS和JS样式或操作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
height: 38px;
width: 300px;
}
</style>
{% block css %}{% endblock %}
<body>
<div>

</div>
<script src="jquery-x.x.x"></script>
{% block js %}{% endblock %}
</body>
</html>

　　这样，我们就可以在自己的html文件中直接写自己的css样式或者js操作。

{% block css %}
<style>

</style>
{% endblock %}

{% block js %}
<script>

</script>
{% endblock %}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Django

相关文章推荐

新的分享

章节导航