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.导入使用静态 ...

随机推荐

AOP操作-AspectJ注解
AOP操作(AspectJ注解) 1,创建类,在类里面定义方法 2,创建增强类(编写增强逻辑) (1)在增强类里面,创建方法,让不同方法代表不同通知类型 3,进行通知的配置 (1)在spring配置文 ...
java IO 文件复制代码模型
package com.xjtu.demo; import java.io.*; public class FileCopy { public static void main(String[] ar ...
python类2
#!/usr/bin/python #coding=utf-8 #好好学习,天天向上 class Car: """一次模拟汽车的简单尝试""" ...
Spring源码-IOC部分-Spring是如何解决Bean循环依赖的【6】
实验环境:spring-framework-5.0.2.jdk8.gradle4.3.1 Spring源码-IOC部分-容器简介[1] Spring源码-IOC部分-容器初始化过程[2] Spring ...
ApacheCN 计算机视觉译文集 20210218 更新
新增了六个教程: OpenCV3 安卓应用编程零.前言一.设置 OpenCV 二.使用相机帧三.应用图像效果四.识别和跟踪图像五.将图像跟踪与 3D 渲染相结合六.通过 JNI 混合 Ja ...
ApacheCN Pandas 教程集
Pandas 秘籍零.前言一.Pandas 基础二.数据帧基本操作三.开始数据分析四.选择数据子集五.布尔索引六.索引对齐七.分组以进行汇总,过滤和转换八.将数据重组为整齐的表格九 ...
Component、PureComponent源码解析
1.什么是Component,PureComponent? 都是class方式定义的基类,两者没有什么大的区别,只是PureComponent内部使用shouldComponentUpdate(nex ...
使用Xamarin开发移动应用示例——数独游戏（八）使用MVVM实现完成游戏列表页面
项目代码可以从Github下载:https://github.com/zhenl/ZL.Shudu .代码随项目进度更新. 前面我们已经完成了游戏的大部分功能,玩家可以玩预制的数独游戏,也可以自己添加 ...
[USACO18DEC]Balance Beam P
根据题意不难发现这个模型是不好进行贪心的,于是可以考虑使用 \(dp\).可以令 \(dp_i\) 表示在 \(i\) 位置以最优策略能获得的报酬期望值,那么会有转移: \[dp_i = \max(f ...
AndroidStudio项目提交到github最详细步骤【转】
感谢大佬:https://www.cnblogs.com/imqsl/p/6763133.html 在使用studio开发的项目过程中有时候我们想将项目发布到github上,以前都是用一种比较麻烦的方 ...

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

一:模版的继承

1.什么是模板继承?

2.使用继承流程原理

3.模板继承语法

二:模板的继承使用

1.案例需求

2.总结模板继承

三:模版的导入

1.模板导入

2.模板导入格式

3.模板导入使用

4.使用结果

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

随机推荐

热门专题