Django博客系统开发04

前端改造

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

下载Bootstrap

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

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

style.css内容如下:

配置静态目录

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

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

修改template

修改index.html

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

7

模板继承

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

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

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

 

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注