Django模板的继承与模板的导入

一:模版的继承
二:模板的继承使用
- - 1.案例需求
  - 2.总结模板继承
三:模版的导入

一:模版的继承

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 页面全部清空#}

{#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>

{% 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模板的继承与模板的导入的更多相关文章

Django框架之第五篇（模板层） --变量、过滤器、标签、自定义标签、过滤器，模板的继承、模板的注入、静态文件
模板层模板层就是html页面,Django系统中的(template) 一.视图层给模板传值的两种方法方式一:通过键值对的形式传参,指名道姓的传参 n = 'xxx'f = 'yyy'return ...
Web框架之Django_04 模板层了解（过滤器、标签、自定义过滤器、标签、inclusion_tag、模板的继承与导入）
摘要: 模版层(模板语法) 模板语法过滤器标签自定义过滤器.标签 inclusion_tag 模板的继承模板的导入一.模板语法: 常用语法:{{ }} 变量相关{% %} ...
Django（十五）模板详解：模板标签、过滤器、模板注释、模板继承、html转义
一.模板的基础配置及使用 [参考]https://docs.djangoproject.com/zh-hans/3.0/topics/templates/ 作为Web框架,Django提供了模板,用于 ...
Django的视图层和模板层
目录一.视图层 1. 小白必会三板斧 2. JsonResponse 3. FBV与CBV 3.1 FVB 3.2 CBV 4. CBV的源码 5. 给CBV加装饰器二.模板层 1. 模板语法 2 ...
用 Flask 来写个轻博客 (12) — M(V)C_编写和继承 Jinja 模板
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表扩展阅读使用 Bootstrap 编写 Jinja 模板文件继承一 ...
Django（4）html模板继承、模板导入、分页实现
1.获取所有请求信息导入模块:from django.core.handlers.wsgi import WSGIRequest request.environ:包含所有的请求信息,可以打印看一下, ...
Django 你需要掌握的模型层（标签、过滤器、模板的继承与导入）
Django 模型层(标签.过滤器.模板的继承与导入) 好文章来自超哥:https://www.cnblogs.com/guanchao/p/11006062.html 过滤器/自定义过滤器模板 ...
Django框架（七）-- 模板层：模板导入、模板继承、静态文件
一.模板导入要复用一个组件,可以将该组件写在一个文件中,在使用的时候导入即可在模板中使用 1.语法 {% include '模板名字' %} 2.使用 ad.html页面 <div clas ...
Django框架（八）—— 模板层：模板导入、模板继承、静态文件
目录模板导入.继承.静态文件一.模板导入 1.语法 2.使用二.模板的继承 1.使用模板的继承 2.强调(注意点) 三.静态文件 1.在配置文件settings中配置过静态文件 2.导入使用静态 ...

随机推荐

echart 横轴倾斜
xAxis: [ { type: 'category', data:[], axisLabel: { interval:0, rotate:40 }, grid: { left: '10%', bot ...
golang中channel
1. Channel是Go中的一个核心类型,你可以把它看成一个管道,通过它并发核心单元就可以发送或者接收数据进行通讯(communication). 2. select package main im ...
初步学习TypeScript
使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...
Error building SqlSession. ### The error may exist in dao/UserMapper.xml ### Cause: org.apache.ibatis.builder.BuilderException: Error parsing SQL Mapper Configuration(2 字节的 UTF-8 序列的字节 2 无效。)
关于在学习Mybatis框架时运行报错 Caused by: org.apache.ibatis.exceptions.PersistenceException: ### Error building ...
SpringBoot整合Nacos自动刷新配置
目的 Nacos作为SpringBoot服务的注册中心和配置中心. 在NacosServer中修改配置文件,在SpringBoot不重启的情况下,获取到修改的内容. 本例将在配置文件中配置一个 cml ...
关于老Windows平板电脑睡眠状态下无法开机(睡死)的问题及解决方案
1.简述前几天我从闲鱼上淘了一个二手Windows平板, 拿来上课记笔记用. 型号是联想的Thinkpad Helix 2nd, 2015年出产. cpu是酷睿m-5y71超低功耗处理器, TDP只 ...
AT2582 [ARC075D] Mirrored
首先因为这个问题的解的范围我们是不清楚的,可以先考虑一下解的范围以便后面的解题. 那么我们可以大胆猜测这个数的位数应该不会很长,否则除非使用一条与 \(D\) 有关的式子外,不论我们用什么方法都计算不 ...
Spring Security过滤器链体系
以下摘自胖哥分享的 2022开工福利教程. 在学习Spring Security的时候你有没有下面这两个疑问: Spring Security的登录是怎么配置的? Spring Security的访问 ...
Java-方法的递归调用
方法的递归是指在一个方法的内部调用自身的过程.递归必须要有结束条件,否则将陷入无限递归的状态,永远无法结束调用. 代码 public class Example24{ public static vo ...
异步回调实现- Guava Retryer
为什么要使用重试利器Retryer 在实际开发中我们经常会遇到需要轮询查询一个接果,实现轮询的方式有很多种,我们经常要写许多代码,有时还会怕写出的代码有bug,如果已经有轮子了,我们就没必要重复造轮子 ...

Django模板的继承与模板的导入

一:模版的继承

1.什么是模板继承?

2.使用继承流程原理

3.模板继承语法

二:模板的继承使用

1.案例需求

2.总结模板继承

三:模版的导入

1.模板导入

2.模板导入格式

3.模板导入使用

4.使用结果

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

随机推荐

热门专题