Django模板语言的复用
include标签
'''
前提：项目中，往往会出现多个页面拥有一个或几个相同的页面板块，或是一个页面多个页面板块是相同的
解决：我们可以采用模板语言复用 include标签 来帮我们解决，就避免了大量的复制粘贴html页面板块代码
'''- 公共的页面板块
<!-- templates/public.html -->
<!-- 该页面位公共的页面代码块，所以不需要完整的html页面结构 -->
<div class="public">
<!-- 公用页面板块的详细html代码 -->
</div>- 公告页面板块的样式
/* static/css/public.css */
/* 该样式文件是为公告页面代码块提供页面布局的css样式 */
.public {
/* 具体的css样式块 */
}- 使用公告板块的页面们
<!-- 拥有公共页面板块的 templates/first.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first</title>
<link rel="stylesheet" href="/static/css/public.css">
</head>
<body>
<!-- 该页面的其他html代码块 -->
<!-- 加载相同的页面板块 -->
{% include 'public.html' %}
<!-- 该页面的其他html代码块 -->
</body>
</html><!-- 拥有公共页面板块的 templates/second.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>second</title>
<link rel="stylesheet" href="/static/css/public.css">
</head>
<body>
<!-- 该页面的其他html代码块 -->
<!-- 加载相同的页面板块 -->
{% include 'public.html' %}
<!-- 该页面的其他html代码块 -->
</body>
</html>inclusion_tag自定义标签
'''
前提：与include标签出现的页面需求很类似，但是这些不是完全相同的板块，因为板块内的细节不是完全一致
解决：我们可以采用模板语言复用 自定义inclusion_tag标签 来帮我们解决，同样来减少代码的冗余
'''- 自定义inclusion_tag
# app/templatetags/owen_tags.py
from django.template import Library
register = Library()
@register.inclusion_tag('public_tag.html')
def header_list(list):
return {'list': list}- 公共类似的页面板块
<!-- templates/public_tag.html -->
<!-- 该页面位公共的页面代码块，所以不需要完整的html页面结构 -->
<ul class="public_tag">
<!-- 公用页面板块的详细html代码 -->
{% for foo in list %}
<li>{{ foo }}</li>
{% endfor %}
</ul>
<!-- 注：拥有该公共页面代码块的页面会为其提供存放不同数据的 list变量 -->- 使用公告板块的页面们
<!-- 拥有公共页面板块的 templates/first_tag.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first_tag</title>
</head>
<body>
<!-- 该页面的其他html代码块 -->
<!-- 加载共同类似的页面板块 -->
{% load owen_tags %}
{% with [1, 2, 3, 4, 5] as list %}
{% header_list list %}
{% endwith %}
<!-- 该页面的其他html代码块 -->
</body>
</html>
<!-- 拥有公共页面板块的 templates/second_tag.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>second_tag</title>
</head>
<body>
<!-- 该页面的其他html代码块 -->
<!-- 加载共同类似的页面板块 -->
{% load owen_tags %}
{% with [10, 30, 50] as list %}
{% header_list list %}
{% endwith %}
<!-- 该页面的其他html代码块 -->
</body>
</html>
母版继承
母版：{% block title%}****{% endblock %}
子版：{% extands 'xxxx.html'%}
{% block title%}****{% endblock %}子版标题
{% block.super%} 保留母版中原有内容
'''
前提：多个页面的多个板块是一致或是类似的，只有少部分或是一部分板块是完全不一致的
解决：我们可以采用模板语言复用 母版 来帮我们解决，通过多个页面继承母版，只书写自己独有的板块来减少代码的冗余
'''
母版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="/static/commons.css">
<style>
.pg-header{
height: 48px;
background-color: seashell;
color: green;
}
</style>
{% block css %}{% endblock %} {# 自定义css使用 #}
</head>
<body>
<div class="pg-header">主机管理</div>
{% block center %}{% endblock %}
<script src="/static/jquery.js"></script>
{% block js %}{% endblock %} {# 自定义js使用 #}
</body>
</html>
子版：
{% extends 'master.html' %} {# 导入模板文件 #}
{% block title %}用户管理{% endblock %} {# 标题 #}
{% block center %} {# 内容 #}
<h1>用户管理</h1>
<ul>
{% for i in u %}
<li>{{ i }}</li>
{% endfor %}
</ul>
{% endblock %}
{% block css %} {# 自定义css #}
<style>
body{
background-color: white;
}
</style>
{% endblock %}
{% block js %} {# 自定义js #}
<script></script>
{% endblock %}
- 公共的母版页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<link rel="stylesheet" href="/static/css/base.css">
{% block style %}
{# 为继承该母版的页面引入自身样式文件通过的block #}
{% endblock %}
</head>
<body>
<!-- 母版有有大量的共同板块 -->
<!-- 母版有有大量的共同板块 -->
<!-- 母版有有大量的共同板块 -->
{% block own %}
{# 为继承该母版的页面提供书写自己页面独有内容的block #}
{% endblock %}
<!-- 母版有有大量的共同板块 -->
<!-- 母版有有大量的共同板块 -->
</body>
</html>
- 页面样式文件均放在static/css中，每个html文件按需导入自己的css文件
/* static/css/base.css */
/* static/css/login.css */
/* static/css/register.css */
- 继承母版的login页面
{% extends 'base.html' %}
{% block style %}
<link rel="stylesheet" href="/static/css/login.css">
{% endblock %}
{% block own %}
<div class="login">登录页面独有的登录板块</div>
{% endblock %}
- 继承母版的register页面
{% extends 'base.html' %}
{% block own %}
<div class="register">注册页面独有的注册板块</div>
{% endblock %}
{% block style %}
<link rel="stylesheet" href="/static/css/register.css">
{% endblock %}
<!-- 继承母版的页面通过替换母版留出的block块，来实现自己页面独有的板块 -->
<!-- 替换block块的顺序随意 -->
2511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
