我们在做web页面的时候,经常会遇到多个页面有重复的部分.对于这种情况,我们可以在每个页面中写入相同的代码,但是这样做的话就失去了编程的意义,会造成重复代码过多以及繁琐等情况.这时候就需要用到模板的继承与导入了.
先来定义一个被继承的模板master.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tpl1title>
<link rel="stylesheet" href="/static/commons.css">
<style>
.pg-header{
height: 48px;
background-color: seashell;
color: green;
}
style>
{% block css %} {% endblock %}
head>
<body>
<div class="pg-header">
页面管理
div>
{# 这样就说明这个页面可以被继承了 ,content是我们起的名字 #}
{% block content%}
{% endblock %}
<script src="/static/jquery-1.12.4.js">script>
{% block js %}
{% endblock %}
body>
html>
其中:
{% block content%}
{% endblock %}
这段代码就说明该html文件可以被继承,其中content是我们定义的名字,在继承的时候会用到.
然后我们来定义三个页面继承上面这个master.html.
tpl1.html:
{#一个html文件只能继承一个模板#}
{#但是可以写多个include#}
{#声明替换哪个模板#}
{% extends 'master.html' %}
{#通过content名字来继承master.html#}
{% block content %}
<ul>
{% for li in user_list %}
<li>{
{ li }}li>
{% endfor %}
ul>
{# 导入tag.html #}
{% for i in user_list %}
{% include 'tag.html' %}
{% endfor %}
{% endblock %}
{% block css %}
<style>
body{
background-color: #eeeeee;
}
style>
{% endblock %}
tpl2.html:
{% extends 'master.html' %}
{% block content %}
<h1>修改密码:{
{ name }}h1>
{% endblock %}
tpl3.html:
{% extends 'master.html' %}
{% block content %}
<h1>删除:{
{ status }}h1>
{% endblock %}
然后我们配置好urls,然后写好views.py:
urls.py:
"""day21 URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.urls.conf import include
urlpatterns = [
path('admin/', admin.site.urls),
path('app01/', include('app01.url')),
]
app01中的url.py:
from django.urls import path
from django.urls.conf import include
from app01 import views
urlpatterns = [
path('index/', views.index),
path('tpl1/', views.tpl1),
path('tpl2/', views.tpl2),
path('tpl3/', views.tpl3),
]
然后在浏览器中就可以看到不同的效果了(这里就不做演示了).
注:需要说明以下几点:
1.一个html文件只能继承一个模板;
2.在模板中,写入以下代码来声明该模板可以被继承:
{% block content%}
{% endblock %}
其中,content是我们定义的名字,是在继承的时候用的;
3.在新的页面继承时,首先要声明继承哪一个html文件:
{% extends 'master.html' %}
这里extends是声明我们继承’master.html’这个模板.
4.继承模板时,只需将需要替换的模块写上即可:
{% block content %}
<ul>
{% for li in user_list %}
<li>{
{ li }}li>
{% endfor %}
ul>
{% endblock %}
其中,{% block content %}是表明要替换模板中的content那一部分;
5.对于CSS和JS的继承,我们可以将其单独写出来,然后让不同的页面来写自己不同的CSS和JS.
{% block css %} {% endblock %}
{% block js %}{% endblock %}
6.我们可以在tpl1,html中单独写属于自己的CSS:
{% block css %}
<style>
body{
background-color: #eeeeee;
}
style>
{% endblock %}
注:这个位置没有规定,可以任意写.
如果在页面中有很多重复的元素,比如有很多按钮,或者有很多输入框,我们就可以先自定义一个文件,然后导入这个文件就可以.
例如,我们先自定义一个tag.html,用来被导入:
<form>
<input type="text">
<input type="submit">
form>
然后,在tpl1.html中导入这个文件:
{# 导入tag.html #}
{% for i in user_list %}
{% include 'tag.html' %}
{% endfor %}
注:include是用来导入的,想想C++中的#include ,'tag.html’是被导入的文件;
在模板继承的时候,一个文件只能继承一个模板,但是导入的时候可以导入多个模板.
本文是个人的一些学习笔记,如有侵权,请及时联系我进行删除,谢谢大家.