前端改造

在之前的几篇完成后，我们得到了一个简陋的首页，下面我们使用Bootstrap来美化一下我们的前端。

下载Bootstrap

需要下载的是Bootstrap的css和js，以及jquery。这里就不仔细说明了，下载后放到新建的static/目录下即可。现在，整个项目的结构如下：

注意到这里还有一个style.css，我将在这个文件中定义主体css。

style.css内容如下：

配置静态目录

下面我们把刚才创建的static目录添加到配置中，修改hzsite/settings.py增加以下内容：

写入到配置后，我们就可以在模板中直接调用static目录下的css和js了。

修改template

修改index.html

现在，我们的博客首页看起来就舒服多了。

模板继承

Django的模板系统支持模板继承，所以我们可以使用继承的方法来减少前端代码的冗余。在index.html的基础上把页面上一般不改变的地方拆分出来创建base.html。内容如下:

然后删除掉index.html中的重复内容，并在开头加上模板引用。修改完后的index.html如下：

修改完成后，刷新页面，应该不会有任何变化。