Django开发个人博客项目-(6)模板继承

欢迎访问我的博客:小羊驼的部落阁
在编程的过程中,我们经常会重复性的写了很多的代码,比如一个页面的框架部分,这样有多少个页面就得写上多少次,这样既不好维护,也不够高效,所以我们引出了html的模板继承部分。

通过观察我的博客: https://wouldmissyou.com/
,我们发现,很多页面大体构造都是一样的,因此我们可以将公用的框架作为一个模板,其它页面可以继承自这个模板,然后在其基础上添加上自己的东西。

新建base.html页面
我们在templates下新建一个base页面,将上一节中的index.html页面全部剪切进来。
然后在index.html页面中第一行写下如下,即可将base.html页面完全继承过来。

{% extends 'base.html' %}

当然,我们对base.html页面中非公共部分需要通过block标记出来,比如head中的title,每一个页面的title都不一样,可以通过如下方式进行区分:

<title> {% block title %}{% endblock %} </title>

然后在base.html中的head中添加一个留空的地方,方便我们以后添加css、js代码

{% block head%}{% endblock %} 

同样,我们还应当在base.html页面建立content的block,需要注意的是,这个block一定要放在它原先所在的位置

{% block content%}{% endblock %}

然后将class=”content-wrap”中的内容全部剪切到index.html页面中的content block中:

{% block content %}
class="content-wrap"
...
{% endblock %}

当然,还可以添加其它不同的block,哪里有需要的话就可以添加,比如说样式文件,可能某个样式只是用在该页面上,那么只需要在该页面通过block添加到base页面即可。我们这里只需要添加比较少的内容,整体来看,index页面精简了不少:

{% extends 'base.html' %}

{% block title %}
小羊驼的部落阁
{% endblock %}

{% block content %}
<div class="content-wrap">
...
{% endblock %}

再次运行http://127.0.0.1:8000 就可以看到内容和没改之前的是一样的 ,这样的完成了首页的模板继承

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘刘刘刘露

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值