使用模板嵌套来精简html代码

在编写django的时候,前端html文件里经常会遇到很多有大量重复代码的情况出现,为了代码精简好看以及后期维护的方便,就需要把那些重复的代码统一放到一个文件里去,不重复的部分自然保留,文件到时直接调用重复模板就好,不同的部分对应填充。

举个例子,有一个代码是templates/aaa.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>{{ blog.title }}</title> <!-- blog.title就是文章标题,从数据库中提取,使用vender映射出来 -->
</head>
<body>
<div>
<a href="{% url 'home' %}">
<h2>BACK TO HOMEPAGE</h2> <!-- 这部分是重复的 -->
</a>
</div>
<h3>{{ blog.title }}</h3> <!-- 这一部分也是同样用vender映射,展现每一篇文章对应的作者和内容 -->
<p>作者:{{ blog.author }}</p>
<p>分类:
<a href="{% url 'blogs_with_type' blog.blog_type.pk %}">
{{ blog.blog_type }}
</a>
</p>
<p> {{ blog.blog_type.pk }}</p>
<p>发表时间:{{ blog.created_time|date:"Y-m-d H:i:s"}}</p> <!-- 这里规定了时间格式 -->
<hr>
<p>{{ blog.content }}</p>
</body>
</html>

假设aaa.html里”BACK TO HOMEPAGE”这个部分是重复的,即每一个页面都有返回主页的点击。既然都有这个功能,那么就单独做一个base.html文件当框架,把重复的部分写进去:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>{% block title %}{% endblock %}</title> <!--这里加入了一个block(块),块的名字叫title-->
</head>
<body>
<div>
<a href="{% url 'home' %}">
<h2>BACK TO HOMEPAGE</h2>
</a>
</div>
<hr>
{% block content%} {% endblock %} <!--这里又加入了一个block,块的名字叫content-->
</body>
</html>

现在的base.html就是一个框架,里面有了两个block,这两个块有各自的名称,因为这两个块的内容是变化的。再把aaa.html里需要对应配置的部分定义成对应的变量,并且引入这个base.html即可。重新修理后的aaa.html就长这个样子了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% extends 'base.html' %}	<!--首先引入同目录下的base.html-->

{% block title%}
{{ blog.title }} <!--这部分就是title块的内容-->
{% endblock%}

{% block content %} <!--这一段就是content块的内容-->
<h3>{{ blog.title }}</h3>
<p>作者:{{ blog.author }}</p>
<p>分类:
<a href="{% url 'blogs_with_type' blog.blog_type.pk %}">
{{ blog.blog_type }}
</a>
</p>
<p> {{ blog.blog_type.pk }}</p>
<p>发表时间:{{ blog.created_time|date:"Y-m-d H:i:s"}}</p>
<hr>
<p>{{ blog.content }}</p>
{% endblock %}

aaa.html保存之后,刷新对应的页面,会发现依旧可以成功读取而且界面没有任何的变化。

可是在实际操作中也会出现这样的需求:多个不同的django APP可能会要访问同一个模板文件(即base.html),那么就要每一个app都复制一遍base.html吗?其实大可不必。这里可以修改一下setting.py,在里面设置一下公共的模板文件路径。

首先我们现在project根目录下建立一个base文件夹,把base.html复制进去,然后修改一下setting.py如下的字段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR,'base'), #BASE_DIR是在文件最开始定义的,即project的根目录
],
'APP_DIRS': True, #这句话的意思是templates文件夹里所有的文件都可以访问
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

保存之后,再次刷新界面,发现界面没变化。这里django在寻找页面的时候,就会去project的路径/base下先找对应的文件,如果没有,会再去自己应用下的templates文件夹里找。如果两个都没有,那就会报错base.html is not exist

感谢您请我喝咖啡~O(∩_∩)O,如果要联系请直接发我邮箱chenx1242@163.com,我会回复你的
-------------本文结束感谢您的阅读-------------