前端改造
在之前的几篇完成后,我们得到了一个简陋的首页,下面我们使用Bootstrap来美化一下我们的前端。
下载Bootstrap
需要下载的是Bootstrap的css和js,以及jquery。这里就不仔细说明了,下载后放到新建的static/目录下即可。现在,整个项目的结构如下:
hzsite ├── hzblog │ ├── admin.py │ ├── apps.py │ ├── __init__.py │ ├── models.py │ ├── templates │ │ └── blog │ │ └── index.html │ ├── tests.py │ ├── urls.py │ └── views.py ├── hzsite │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── manage.py └── static ├── css │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.min.css │ ├── bootstrap-theme.min.css.map │ └── style.css └── js ├── bootstrap.min.js └── jquery-3.1.1.min.js
注意到这里还有一个style.css,我将在这个文件中定义主体css。
style.css内容如下:
.page-header { background-color: #417690; margin-top: 0; padding: 5px 20px 10px 40px; } .page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active { color: #ffffff; font-size: 28pt; text-decoration: none; } .content { margin-left: 40px; } h1, h2, h3, h4 { font-family: 'Microsoft YaHei', cursive; } .date { float: right; color: #828282; } .save { float: right; } .post-form textarea, .post-form input { width: 100%; } .top-menu, .top-menu:hover, .top-menu:visited { color: #ffffff; float: right; font-size: 26pt; margin-right: 20px; } .post { margin-bottom: 70px; } .post h1 a, .post h1 a:visited { color: #000000; }
配置静态目录
下面我们把刚才创建的static目录添加到配置中,修改hzsite/settings.py增加以下内容:
STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), )
写入到配置后,我们就可以在模板中直接调用static目录下的css和js了。
修改template
修改index.html
{% load staticfiles %} <html> <head> <title>ZIVER'S</title> <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}"> <script src="{% static 'js/bootstrap.min.js' %}"></script> <link rel="stylesheet" href="{% static 'css/style.css' %}"> </head> <body> <div class="page-header"> <h1><a href="/">ZIVER'S</a></h1> </div> <div class="content"> <div class="row"> <div class="col-md-8"> {% for post in posts %} <div class="post"> <h1><a href="">{{ post.title }}</a></h1> <p>published: {{ post.published_date }}</p> <p>{{ post.text|linebreaks }}</p> </div> {% endfor %} </div> </div> </div> </body> </html>
现在,我们的博客首页看起来就舒服多了。
模板继承
Django的模板系统支持模板继承,所以我们可以使用继承的方法来减少前端代码的冗余。在index.html的基础上把页面上一般不改变的地方拆分出来创建base.html。内容如下:
<html> <head> <title>ZIVER'S</title> <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}"> <script src="{% static 'js/bootstrap.min.js' %}"></script> <link rel="stylesheet" href="{% static 'css/style.css' %}"> </head> <body> <div class="page-header"> <h1><a href="/">ZIVER'S</a></h1> </div> <div class="content"> <div class="row"> <div class="col-md-8"> {% block content %} {% endblock %} </div> </div> </div> </body> </html>
然后删除掉index.html中的重复内容,并在开头加上模板引用。修改完后的index.html如下:
{% extends 'blog/base.html' %} {% block content %} {% for post in posts %} <div class="post"> <h1><a href="">{{ post.title }}</a></h1> <p>published: {{ post.published_date }}</p> <p>{{ post.text|linebreaks }}</p> </div> {% endfor %} {% endblock content %}
修改完成后,刷新页面,应该不会有任何变化。