一:模版的继承

1.什么是模板继承?
你需要事先在你想要使用的主页面上划定区域做好标记，之后在子页面继承的时候你就可以使用在主页面划定的区域，也就意味着，如果你不划定任何区域，那么你子页面将无法修改主页面内容
2.使用继承流程原理
  • 1.先在你想要继承的主页面上通过bolck划定你将来可能要改的区域，并做好标记
  • 2.在子页面上继承extends，利用block自动提示选取你想要修改的内容区域标记名称
  • 3.在子页面extends中写你要修改主页面标记区的代码
  • 4.然后就可以让子页面的修改内容渲染到主页面的划定区域上

你们有没有见过一些网站

这些网站页面整体都大差不差 只是某一些局部在做变化

3.模板继承语法
1.继承

{% extends '模版页面名' %}

2.局部修改

	# 1.你需要先去模版页面中划定可以被修改的区域

  	{% block '名字' %}

    	模版内容（666）

    {% endblock %}

  # 2.子页面中即成了模版页面之后 就可以根据名字修改

  	{% block '名字' %}

    	子版内容

      子版页面吃了可以自己写自己的之外 还可以继续使用模版的内容

      {{ block.super }}  666

      {{ block.super }}  666

      {{ block.super }}  666

      {{ block.super }}  666

    {% endblock %}


4.一般情况下模版页面上应该至少有三块可以被修改的区域

  1.css区域

  2.html区域

  3.js区域

每一个子页面就都可以有自己独有的css代码 html代码 js代码

互相之间 互不干扰

# 子页面css

{% block css %}

{% endblock %}

{% block content %}

{% endblock %}

# 子页面js

{% block js %}

{% endblock %}

二:模板的继承使用

1.案例需求

  • 1.实现用户点击登录右侧局部出现登录页面，点击注册右侧出现注册页面

  • urls.py

    # 模板的继承

    url(r'^home/', views.home),

    # 创建login路由

    url(r'^login/', views.login),

    # 创建reg路由

    url(r'^reg/', views.reg),
  • views.py
def home(request):

    return render(request, 'home.html')

def login(request):

    return render(request, 'login.html')

def reg(request):

    return render(request, 'reg.html')
  • home.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--bootstrap引入 CSS CDN-->

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <!--jQuery引入 CDN-->

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!--Bootstrap引入 Js CDN-->

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

{% block css %}

{% endblock %}

</head>

<body>

{#导航条#}

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">Brand</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

      <form class="navbar-form navbar-left">

        <div class="form-group">

          <input type="text" class="form-control" placeholder="Search">

        </div>

        <button type="submit" class="btn btn-default">Submit</button>

      </form>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

{#左右不留白#}

<div class="container-fluid">

{#row 划分12份区域#}

    <div class="row">

{#        左侧分三份#}

        <div class="col-md-3">

{#侧边栏  #}

            <div class="list-group">

              <a href="/home/" class="list-group-item active">

                首页

              </a>

              <a href="/login/" class="list-group-item">登录</a>

              <a href="/reg/" class="list-group-item">注册</a>

            </div>

        </div>

        <div class="col-md-9">

{#            面板#}

            <div class="panel panel-primary">

          <div class="panel-heading">

            <h3 class="panel-title">Panel title</h3>

          </div>

          <div class="panel-body">

{#          划分区域 不影响区域展示，仅仅是标记  区域名#}

              {% block content %}

                  {#              巨幕#}

                 <div class="jumbotron">

                  <h1>Hello, world!</h1>

                  <p>...</p>

                  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

                </div>

              {% endblock %}

          </div>

        </div>

        </div>

    </div>

</div>

{% block js %}

{% endblock %}

</body>

</html>
  • login.html


{#login 页面全部清空#}

{#login继承home主页面#}

{% extends 'home.html' %}

{#子页面的css代码 #}

{% block css %}

    <style>

        h1 {

            color: red;

        }

    </style>

{% endblock %}

{#block 指定选择主页面划分的(区域) 可以进行修改 #}

{% block content %}

    <h1 class="text-center">登录页面</h1>

    <form action="">

        <p>username: <input type="text" class="form-control"></p>

        <p>password: <input type="text" class="form-control"></p>

        <input type="submit" class="btn btn-success">

    </form>

{% endblock %}

{# 子页面的js代码 #}

{% block js %}

    <script>

        alert('登录页面')

    </script>

{% endblock %}
  • reg.html


{#reg页面全部清空#}

{#reg继承home主页面#}

{% extends 'home.html' %}

{#子页面的css代码 #}

{% block css %}

    <style>

        h1 {

            color: seagreen;

        }

    </style>

{% endblock %}

{#block 指定选择主页面划分的(区域) 可以进行修改 #}

{% block content %}

    <h1 class="text-center">注册页面</h1>

    <form action="">

        <p>username: <input type="text" class="form-control"></p>

        <p>password: <input type="text" class="form-control"></p>

        <input type="submit" class="btn btn-danger">

    </form>

{% endblock %}

{# 子页面的js代码 #}

{% block js %}

    <script>

        alert('注册')

    </script>

{% endblock %}

2.总结模板继承
一般情况下 模版的页面上划定的区域越多 那么该模版的扩展性就越高

但是如果太多 那还不如自己直接写

三:模版的导入

1.模板导入
将页面的某一个局部当成模块的形式

哪个地方需要就可以直接导入使用即可
2.模板导入格式
{% include '导入html文件名' %}
3.模板导入使用
  • sss.html
<h1>我是sss.html页面</h1>
  • login.html子页面
{% endblock %}

{#block 指定选择主页面划分的(区域) 可以进行修改 #}

{% block content %}

    <h1 class="text-center">登录页面</h1>

    <form action="">

        <p>username: <input type="text" class="form-control"></p>

        <p>password: <input type="text" class="form-control"></p>

        <input type="submit" class="btn btn-success">

    </form>

<p>模板的导入</p>

{% include 'sss.html' %}

{% endblock %}
4.使用结果

Django模板的继承与模板的导入的更多相关文章

  1. Django框架之第五篇（模板层） --变量、过滤器、标签、自定义标签、过滤器，模板的继承、模板的注入、静态文件

    模板层 模板层就是html页面,Django系统中的(template) 一.视图层给模板传值的两种方法 方式一:通过键值对的形式传参,指名道姓的传参 n = 'xxx'f = 'yyy'return ...

  2. Web框架之Django_04 模板层了解（过滤器、标签、自定义过滤器、标签、inclusion_tag、模板的继承与导入）

    摘要: 模版层(模板语法) 模板语法 过滤器 标签 自定义过滤器.标签 inclusion_tag 模板的继承 模板的导入 一.模板语法: 常用语法:{{     }}    变量相关{% %}    ...

  3. Django（十五）模板详解：模板标签、过滤器、模板注释、模板继承、html转义

    一.模板的基础配置及使用 [参考]https://docs.djangoproject.com/zh-hans/3.0/topics/templates/ 作为Web框架,Django提供了模板,用于 ...

  4. Django的视图层和模板层

    目录 一.视图层 1. 小白必会三板斧 2. JsonResponse 3. FBV与CBV 3.1 FVB 3.2 CBV 4. CBV的源码 5. 给CBV加装饰器 二.模板层 1. 模板语法 2 ...

  5. 用 Flask 来写个轻博客 (12) — M(V)C_编写和继承 Jinja 模板

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 使用 Bootstrap 编写 Jinja 模板文件 继承一 ...

  6. Django（4）html模板继承、模板导入、分页实现

    1.获取所有请求信息 导入模块:from django.core.handlers.wsgi import WSGIRequest request.environ:包含所有的请求信息,可以打印看一下, ...

  7. Django 你需要掌握的模型层（标签、过滤器、模板的继承与导入）

    Django 模型层(标签.过滤器.模板的继承与导入) 好文章来自超哥:https://www.cnblogs.com/guanchao/p/11006062.html   过滤器/自定义过滤器 模板 ...

  8. Django框架（七）-- 模板层：模板导入、模板继承、静态文件

    一.模板导入 要复用一个组件,可以将该组件写在一个文件中,在使用的时候导入即可 在模板中使用 1.语法 {% include '模板名字' %} 2.使用 ad.html页面 <div clas ...

  9. Django框架（八）—— 模板层：模板导入、模板继承、静态文件

    目录 模板导入.继承.静态文件 一.模板导入 1.语法 2.使用 二.模板的继承 1.使用模板的继承 2.强调(注意点) 三.静态文件 1.在配置文件settings中配置过静态文件 2.导入使用静态 ...

随机推荐

  1. http状态码 200 304 404 503等

    浏览器采用http请求时,会封装http get等信息见下图请求头,然后服务器响应后回发一些信息,包括状态码,响应头,响应信息等等,如下图. 右上图可见两种状态码,一种是200 一种是304.其中20 ...

  2. golang中bufio和ioutil的使用

    bufio bufio包实现了带缓冲区的读写,是对文件读写的封装 bufio缓冲写数据 模式 含义 os.O_WRONLY 只写 os.O_CREATE 创建文件 os.O_RDONLY 只读 os. ...

  3. gin中设置和获取cookie

    package main import ( "fmt" "github.com/gin-gonic/gin" ) func main() { router := ...

  4. gin中自定义http的配置

    package main import ( "github.com/gin-gonic/gin" "net/http" "time" ) f ...

  5. 运维利器-ClusterShell集群管理

    在运维实战中,如果有若干台数据库服务器,想对这些服务器进行同等动作,比如查看它们当前的即时负载情况,查看它们的主机名,分发文件等等,这个时候该怎么办?一个个登陆服务器去操作,太傻帽了!写个shell去 ...

  6. Nginx配置文件nginx.conf有哪些属性模块?

    worker_processes 1: # worker进程的数量 events { # 事件区块开始 worker_connections 1024: # 每个worker进程支持的最大连接数 } ...

  7. 学习Java第17天

    今天差不多搞清了Javaweb的基本学习路线及网站开发的基本流程,以前好像走了不少弯路,不过还好,明天开始学习Javaweb sql 总结了许多 新的学习方法,记笔记很重要,学多少忘多少. 练习也很重 ...

  8. Django class meta

    class Main(models.Model): img = models.CharField(max_length=200) # 图片 name = models.CharField(max_le ...

  9. CSS之常见布局|常用单位|水平垂直居中

    常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...

  10. git 下载及更新

    转载请注明来源:https://www.cnblogs.com/hookjc/ 在完成了创建之后,GitHub会提示你如何向这个Repository上传代码.  首次上传: Git 本地上传 添加新文 ...