网站模板的设计，一般的，我们做网站有一些通用的部分，比如 导航，底部，访问统计代码等。合理的规划模板往往会减少工作量，同时也使得罗乱、难以阅读的静态页面布局变得优雅。

假设，我们的网站主页面除了正文是由导航条，低栏，统计栏构成。也就是nav.html，bottom.html，tongji.html。

在构建页面的时候，可以写一个base.html来包含（include）这些通用文件，如下：

<!DOCTYPE html>

 <html>

<head>

<title>{% block title %}默认标题{% endblock %}</title>

 </head>

 <body>   {% include 'nav.html' %} {% block content %}

  <div>这里是默认内容，所有继承自这个模板的，如果不覆盖就显示这里的默认内容。</div> {% endblock %} {% include 'bottom.html' %} {% include 'tongji.html' %}

</body>

 </html>

在这里，所有的include都是引入通用文件，而block都是定义默认模块，其他继承base.html的页面，都可以在自己的页面中重新定义这些模块，达到覆盖替换的作用。

比如我们设计一个主页面index.html，继承自base.html，同时替换base.html中的title和content两个模块。以下是index.html文件的内容：

{% extends 'base.html' %}

{% block title %}欢迎光临首页{% endblock %}

 {% block content %} {% include 'ad.html' %} 这里是首页，欢迎光临 {% endblock %}

HTML 模板继承的更多相关文章

  1. Python自动化之模板继承和cookie

    request请求头信息 type(request) //查看类 from django.core.handlers.wsgi import WSGIRequest 结果会以字典的形式存在 reque ...

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

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

  3. tp框架之模板继承

    模板继承是一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局),并且其中定义相关的区 ...

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

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

  5. Thinkphp3.2中的模板继承

    1:模板继承:   是3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比 类的继承一样,模板也可以定义一个基础模板( ...

  6. Django1.9开发博客（6）- 模板继承

    模板继承就是网站的多个页面可以共享同一个页面布局或者是页面的某几个部分的内容.通过这种方式你就需要在每个页面复制粘贴同样的代码了. 如果你想改变页面某个公共部分,你不需要每个页面的去修改,只需要修改一 ...

  7. thinkphp中模板继承

    模板继承是3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局), ...

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

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

  9. php随机10-thinkphp 3.1.3 模板继承 布局

    8.25 模板继承 模 板继承是3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类 的继承一样,模板也可以定义一个 ...

  10. tp框架---View视图层---模板继承（举例说明）

    当我们做动态页面时,我们会发现一个网站的头部和尾部是相同的,那么我们如何用tp框架来做模板呢 ? 先看一下注意事项: (1)每个区块由<block></block>标签组成 ( ...

随机推荐

  1. 【译】第八篇 Integration Services：高级工作流管理

    本篇文章是Integration Services系列的第八篇,详细内容请参考原文. 简介在前面两篇文章,我们创建了一个新的SSIS包,学习了SSIS中的脚本任务和优先约束,并检查包的MaxConcu ...

  2. React Native新手入门

    前言 React Native是最近非常火的一个话题,想要学习如何使用它,首先就要知道它是什么. 好像面对一个新手全面介绍它的文章还不多,我就归纳一下所有的资料和刚入门的小伙伴一起来认识它~ 将从以下 ...

  3. Spring4笔记5--基于注解的DI（依赖注入）

    基于注解的DI(依赖注入): 对于 DI 使用注解,将不再需要在 Spring 配置文件中声明 Bean 实例.只需要在 Spring 配置文件中配置组件扫描器,用于在指定的基本包中扫描注解. < ...

  4. 高级C#信使（译） - Unity维基百科

    高级C#信使 作者:Ilya Suzdalnitski 译自:http://wiki.unity3d.com/index.php/Advanced_CSharp_Messenger 描述 前言 Mis ...

  5. java map遍历并删除特定值

    删除map中包含password和username的键值对 若是在map中直接删除,会指针错误 Iterator<Map.Entry<String,Object>> it = ...

  6. MVVM模式View和ViewModel的通信

    还需要些什么呢 在前面几篇博客中我们尝试去实现了MVVM中的数据绑定.命令绑定和事件绑定.貌似实现的差不多了.我最早尝试用MVVM去开发的时候也是这么想的,没有用第三方框架,甚至只是实现了数据绑定和命 ...

  7. re-sign重签名

    准备: ① re-sign.jar重签名工具:(下载地址为:http://troido.de/downloads/category/1): ② 从D:\Android\sdk\build-tools\ ...

  8. 查看sql语句加锁信息

    问题: 最近使用quartz集群,总是报deadlock问题,所以需要查看一下执行的sql导致的加锁冲突. 步骤: 1.在要测试的库中创建指定表innodb_lock_monitor create t ...

  9. 【Android开发日记】之入门篇（十二）——Android组件间的数据传输

    组件我们有了,那么我们缺少一个组件之间传递信息的渠道.利用Intent做载体,这是一个王道的做法.还有呢,可以利用文件系统来做数据共享.也可以使用Application设置全局数据,利用组件来进行控制 ...

  10. 【CF767C】Garland

    传送门啦 分析: 这个题我是看着翻译做的,感觉不是很难,很普通的一个树形dp 题目大意: 在一棵树上分离出三个子树,使这三个子树的点权和相等. 明确题目意思这个题就简单多了吧. 我们会发现每一棵子树的 ...