Django博客系统开发04

前端改造

在之前的几篇完成后,我们得到了一个简陋的首页,下面我们使用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>

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

7

模板继承

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 %}

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

 

暂无评论

发表评论

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