Django入门教程(六)模板继承和静态资源的使用

第一部分 模板的继承
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文件中写入如下代码：

{% extends 'nav.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(代码块)即可，需要给这个块起一个名称。可以随意起。

{% block 名称 %}

{% endblock %}

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。这一点类似于类，我们可以对类进行继承，在继承的同时对其不符合我们需求的进行重写。

刷新查看

此时，标题已经变化为首页。其他两个模板的修改同index，这里不做尝试，望读者自行尝试。

第二部分 静态文件的使用

1、静态资源。
在项目中，我们经常会用到css、image、js等静态资源。一般会将这些静态资源放到一个单独的目录中，然后建一个统一的目录，以方便管理。

那么Django如何在html中引用静态文件？
1、在项目根目录下或者app下，新建一个static文件夹(名字是固定的)；将所有的静态资源文件放进去。
2、如果static是在根目录下创建的，需要在settings.py文件中，配置搜索路径；如果是在app下创建的，不用配置。
3、在html文件中，引入静态资源；

2、现在我们在项目根目录下新建一个static文件夹。

同时在里面建立image,css,js,等文件夹(不是必须建立，需要使用哪个时建立即可)。

3、在settings.py文件中做出配置。默认的是搜索app下的static，由于我们是建立在项目根目录下的，所以需要稍作修改。

#搜索app下的static
STATIC_URL = '/static/'

#搜索根目录下的static
STATICFILES_DIRS=[os.path.join(BASE_DIR,'static')]

4、假设现在我们有一个需求，就是将首页的h1标签中的文字部分显示为蓝色。那么我们就在static文件夹下的css文件中新建一个index.css文件。

5、然后编写css样式。

6、此时我们需要引入这个css文件，以实现效果。这里我们有两个选择。第一个就是我们可以直接在index.html的{% block content %}中引用。第二个就是因为nav.html中没有class="h"这个类，所以我们也可以考虑在nav.html中引入，也是可以的。
现在我们就选择第二种方案。同时附上第一种方案的代码：

{% block content %}
    <link rel="stylesheet" href="/static/css/index.css">
    <h1 class="h">index首页的内容</h1>
{% endblock %}

此时我们在浏览器中刷新查看，达到我们需要的效果。

至此，模板的继承和静态资源的使用到此结束。