在编程的过程中，我们经常会重复性的写了很多的代码，比如一个页面的框架部分，这样我又多少个页面就得写上多少次，这样既不好维护，也不够高效，所以我们引出了html的模板继承部分。

1、写好一个html文件。

2、下面有个新的html文件需要继承上面这个html。

　　直接在这个新的html文件的最顶端，写上下面的内容

　　

#这个manger.html就是母版的文件名称，告诉这个html去哪里继承。
{% extends 'manger.html' %}

3、问题来了，我们既然是继承，总不能全部继承吧，我们肯定是需要写一些新的内容在新的html文件中展示，我们只是继承母版中的一部分，比如head之类的。

　　比如我们要在html的一个位置更换新的内容。

　　1、定义一个继承的块，叫index。

{% block index %}{% endblock %}

　　2、继承者在自己的文件中需要更换新的内容，需要这么写。

　　注意：只需要在继承的任意位置写上{% block index %}内容区{% endblock  %}

{% block index %}

    <div style="height: 45px;line-height: 45px;font-size: 15px;font-weight: bolder">

        <span>首页&nbsp;></span>

        <span>资产管理</span>

    </div>

{% endblock %}

4、问题由来了，如果我的html内容特别多，我看着特别乱，这样我可以把这些内容都写到一个新的html文件里面，然后在我的html文件中直接引用就OK。

例如：我单独写了一个test.html文件。

我想在html中引用直接写入地下的东西就OK了。

{% include "test.html" %}

5、写自己的CSS和JS样式或操作。

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

    <style>

        body{

            height: 38px;

            width: 300px;

        }

    </style>

    {% block css %}{% endblock %}

<body>

    <div>

    </div>

    <script src="jquery-x.x.x"></script>

    {% block js %}{% endblock %}

</body>

</html>

　　这样，我们就可以在自己的html文件中直接写自己的css样式或者js操作。

{% block css %}

    <style>

    </style>

{% endblock %}

{% block js %}

    <script>

    </script>

{% endblock %}

Django之html-模板继承的更多相关文章

  1. Django框架之模板继承和静态文件配置

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  2. Django之前端模板继承

    在使用Django进行web开发时,往往会构造一个基础框架模板即base.html,而后在其子模板中对它所包含站点公用部分和定义块进行重载. 首先创建一个base.html,源码为: <!DOC ...

  3. Django学习手册 - 模板继承与导入

    核心: PS:一个页面只能继承一个模板. 前置: 配置url. 配置views 关键字: 1. {% extends "index模板.html" %} 声明继承于哪个模板 ,关联 ...

  4. [py][mx]django模板继承-课程列表页

    课程列表页分析 1,机构类型 2,所在地区 3.排序 学习人数 先分析下 纵观页面,页头页脚都一样. django提供了模板继承. 至少 不同页面的title 面包屑路径 content内容不一致,以 ...

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

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

  6. Django 中url补充以及模板继承

    Django中的URL补充 默认值 在url写路由关系的时候可以传递默认参数,如下: url(r'^index/', views.index,{"name":"root& ...

  7. python【第二十一篇】Django模板继承、分页、cookie验证

    1.模板继承 母版master.html {% block title %}{% endblock %}2 {% block table-cont %}{% endblock %} 子板 {% ext ...

  8. Django——模板层(template)（模板语法、自定义模板过滤器及标签、模板继承）

    前言:当我们想在页面上给客户端返回一个当前时间,一些初学者可能会很自然的想到用占位符,字符串拼接来达到我们想要的效果,但是这样做会有一个问题,HTML被直接硬编码在 Python代码之中. 1 2 3 ...

  9. Django（五）框架之模板继承和静态文件配置

    https://www.cnblogs.com/haiyan123/p/7731959.html 一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% end ...

  10. Django 模板继承

    本质上来说,模板继承就是先构造一个基础框架模板,而后在其子模板中对它所包含站点公用部分和定义块进行重载. 让我们通过修改 current_datetime.html 文件,为 current_date ...

随机推荐

  1. 【JS设计模式】装饰者模式

    装饰者模式:在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象 装饰模式的特点 (1) 装饰对象和真实对象有同样的接口.这样clien ...

  2. 绝不能错过的10款最新OpenStack网络运维 & 监控工具

    摘要 今天我们要推荐给大家的是关于奥斯汀OpenStack Summit的OpenStack网络方面功能与工具相关的技术演讲. 希望可以帮助国内的开发者.架构师和用户更好地了解OpenStack在SD ...

  3. SysTick—系统定时器

    本章参考资料<ARM Cortex™-M4F 技术参考手册> -4.5 章节 SysTick Timer(STK), 和4.48 章节 SHPRx,其中 STK 这个章节有 SysTick ...

  4. 如何设置UITextView不可被编辑

    在项目中遇到一些需求需要把文字用UITextView来展示,但是该文字不能被编辑,只要把以下该代理方法实现就可以了 -(BOOL)textViewShouldBeginEditing:(UITextV ...

  5. C# 个人疏漏整理

    1.dynamic和var不能混为一谈. var声明局部变量只是一种简化语法,var要求编译器根据之后的表达式推断具体的数据类型. var只能用于声明方法内部的局部变量,dynamic则可用于局部变量 ...

  6. uvalive 3231 Fair Share 公平分配问题 二分+最大流 右边最多流量的结点流量尽量少。

    /** 题目: uvalive 3231 Fair Share 公平分配问题 链接:https://vjudge.net/problem/UVALive-3231 题意:有m个任务,n个处理器,每个任 ...

  7. C0301 代码块{}的使用,重定向, 从文件中读取行

    #!/bin/bash # 从 /etc/fstab 中读行 File=/etc/fstab {     read line1     read line2 } < $File # {}代码块, ...

  8. 安装loadrunner时出现”命令行选项语法错误键入命令 \?获得帮助“的解决方法

    安装LR11 时,安装Microsoft Visual c++2005 sp1运行时组件,就会提示命令行选项语法错误,键入“命令/?”可获取帮肋信息1.进入loadrunner-11\Addition ...

  9. Stanford CoreNLP 3.6.0 中文指代消解模块调用失败的解决方案

    当前中文指代消解领域比较活跃的研究者是Chen和Vincent Ng,这两个人近两年在AAAI2014, 2015发了一些相关的文章,研究领域跨越零指代.代词指代.名词指代等,方法也不是很复杂,集中于 ...

  10. （转）git使用教程

    git基础使用:http://geek.csdn.net/news/detail/77455 github介绍:http://stormzhang.com/github/2016/05/25/lear ...