Django模板:HTML静态模板的继承

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

假设,我们的网站主页面除了正文是由导航条,低栏,统计栏构成。也就是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 %}


运行这个页面,你就会发现,原有的base.html中的模块被替换掉了。

转载于:https://my.oschina.net/lifeisshort/blog/511604

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值