前端改造
在之前的几篇完成后，我们得到了一个简陋的首页，下面我们使用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 %}
修改完成后，刷新页面，应该不会有任何变化。
暂无评论