Django-include标签-inclusion_tag自定义标签-母版

本文介绍了Django中的`include`标签和`inclusion_tag`自定义标签的使用,以及如何构建和继承母版页面。通过示例展示了如何组织公共页面板块和样式,以及在login和register等页面中应用这些设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、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>
二、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>
三、母版
前提:多个页面的多个板块是一致或是类似,只有少部分或是一部分板块是完全不一致的
解决:我们可以采用模板语言复用母版来帮我们解决,通过多个页面继承母版,只书写自己独有的板块来减少代码的冗余

公共的母版页面

<!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块的顺序随意 -->
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值