1、模板继承
 
  对于一个网站来说,会存在很多的html文件,但是由于一些页面中会有相同的页面结构出现。也就导致了多个html文件中代码是重复的,所以为了在html中减少重复的代码的出现,简化html结构,可以将多个页面中相同的html代码,单独的抽离出来放在一个html文件中,其他的html文件如果想要使用这部分内容,直接继承过去就可以了,有点类似于类的继承关系。
 
  继承关系:父模板和子模板。
 
  2、假设现在有一个网站,它的首页、列表页和详情页这些页面,页面顶部的导航条和页面底部的工具条是一样的,唯一变化的就是其中内容。画了一个简陋的图,大致如下图所示:
 
  对于这个网站,其页面结构%70(浮夸风()?""")以上的内容都是相似的,如果我们每一个html文件都写入这些相同部分的代码,也是可以的,只是会造成代码的冗余等。为了方便解决这个问题,减少重复代码的出现,模板的继承就很好的解决了这个问题。
 
  现在我们来实现模板的继承。
 
  1、创建项目和app
 
  django-admin startproject djangotemplateinherit
 
  cd djangotemplateinherit
 
  python manage.py startapp teminherit
 
  2、在项目根目录下创建templates文件夹。
 
  3、在urls.py文件中编写路由。
 
  4、编写业务逻辑,即视图函数。
 
  5、在templates文件夹下新建3个html文件。
 
  4、再新建一个nav.html,表示公共的导航条部分。
 
  同时,我们在views.py文件中更改视图函数,渲染模板。
 
  5、我们在nav.html中写入如下代码
 
  6、分别在index.html,list.html,detail.html中引入这个nav.html导航条模板。
 
  模板的继承需要使用到extends关键字。
 
  extends:关键字表明了当前文件index.html所继承的父模板
 
  继承时会将此文件(当前案例是nav.html文件)的所有代码全部继承。
 
  在index.html文件中写入如下代码:
 
  其他两个list.html,detail.html文件同index.html,写入相同的内容。
 
  7、运行查看
 
  此时,这三个html都使用了公共的导航条(nav.html文件)。
 
  8、虽然使用了公共的导航条,但是每个html文件中,此时我们不能加入每个页面的内容(即首页内容,列表页内容,详情页内容),不信,你可以尝试?此时我们在index.html中写入一个h2标签。
 
  再次刷新网页,发现首页上并没有我们想要的内容。
 
  原因是我们已经将nav.html中内容固定了,extends继承模板时,将nav.html文件的内容完全引入,替换掉index.html的内容,所以我们自己写的h2标签是不可以运行的。值得注意的是,如果把h2标签放在{% extends ‘nav.html’ %}代码之前,是可以运行显示的,这里不做尝试,望读者自行尝试。
 
  9、现在我们的需求是index,list,detail的模板文件在渲染后展示不同的内容。但由于这index,list,detail三个模板文件我们现在继承的是nav.html的内容,直接将代码{% extends ‘nav.html’ %}添加在后面又不可以,放在{% extends ‘nav.html’ %}之前又失去了公共导航条的意义。那么现在唯一剩下的解决方案就是更改nav.html,使其能够让我们在不同的模板文件中实现自定义的功能。
 
  Django为我们提供了一个block标签。如果子模板需要在当前这个页面的基础上,添加一些自己页面的内容,使用django内置的模板标签block(代码块)即可,需要给这个块起一个名称。可以随意起。
 
  10、现在我们修改nav.html,预留自定义代码的接口。即增加{% block content %} {% endblock %}。
 
  同时在index.html文件中增加一个自定义的h1标签。
 
  再次刷新,此时index首页已经发生变化。多出了我们自定义的h1标签。相应的其他两个模板文件的变更与index.html相同,这里不做尝试。
 
  11、虽然自定义了index首页的内容。但是细心的同学就会发现了一个小小的缺陷。
 
  那就是打开index首页的选项卡上仍旧显示的是nav.html中的title字段。我们知道,诸如伯乐在线这个网站,每点击导航栏的一个模块,新打开的窗口上的额标题就会发生变化。而我们现在继承了模板,相应的title内容也就写死了。那么该怎么处理呢?
 
  12、为了方便解决这个问题,我们将nav.html的内容再次做出修改,如下图所示:
 
  注意:
 
  在block中设置的标签,就相当于是一个title的默认值。
 
  如果子模板没有重写这个title块,就使用这个默认值,如果子模板重写了这个title块,就使用子模板的值。
 
  13、由于我们需要变更index首页的title标题,所以我们需要对index.html的内容再次做出修改。通过block预留的接口,修改我们需要的title。这一点类似于类,我们可以对类进行继承,在继承的同时对其不符合我们需求的进行重写。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61552.shtml