django模板继承之完美解析

django模板继承之完美解析

我们看过的网页许多都类似以下这样的


只有中间一大块在变动
今天教给大家如何抽取其中的重复部分啦~

1.初始状态

有三个html，并找到其中重复的代码，并抽取出来放进Base.html。

2.block标签

因为只把重复的代码抽取出来。每个html独有的代码，在这里用block标签来标记位置。类似这里函数调用其他html的独有部分一样。

main是自己取得名字，大家随意

3.模板继承

{% extends 'Base.html'%}

即继承Base.html

{% block main %}
......
{% endblock %}

…填写每个html独有的代码块

---

不过做到这里还会有个小问题
就是刚刚图片右边选到就会亮，现在选到就不会亮，即便右边的已经改变了。

原来的选项是通过class=‘active’ 这个类才得以变亮的。
所以把Base.html里的这段代码删除，并复制给每一个html，而且相应的还要把这个类放对

需要注意的是，我因为Base.html 这段代码和之前的block main的那段代码在上下位置，所以我在Base.html就没写新的block标签，其他的html也同样没写。他们是公用一个block main 标签的。

这样之后 就已经大大的OK啦~~

---

补充一个include标签
我们会遇到很多类似小米下面图片

先把这个单独的拿出来创建一个html。
我这里拿第一张图片的最上方的黑色导航栏做示范

我这里创建了一个navbar.html 并且把黑色导航栏的代码单独放在这里了。在原来的Base.html 里地方写下这段代码即可

{% include 'navbar.html' %}

---

还有一些小配置需要注意的

相应的代码我就不贴啦
因为我懒~~~