4.博客展示

栏目: CSS · 发布时间: 5年前

内容简介：博客展示前面我们已经使用Django自带的Admin系统，将博客的后台功能编写完成，这节我们就可以展示给用户了。1.导航 2.登录 3.博客列表 4.博客详情

博客展示

前面我们已经使用Django自带的Admin系统，将博客的后台功能编写完成，这节我们就可以展示给用户了。

需求

1.导航 2.登录 3.博客列表 4.博客详情

模版搭建

在mysite/下创建一个templates目录和static目录。

templates放置html模版

static放置静态文件。然后在static下在创建一个css目录，存放样式表。

结构如下：

|--mystie
    |--migrations
    |--static
    |--templates
    ...

templates目录创建一个base.html，是所有页面的基页面。

<!DOCTYPE html>

{#加载静态文件#}
{% load static %}

<html lang="en">
<head>
    <meta charset="UTF-8">
{#    标题占位#}
    <title>{% block title %} {% endblock %}</title>

{#    加载static/css下的样式表#}
    <link rel="stylesheet" href="{% static 'css/style.css' %}">

{#    其他放在头部的文件占位，留给子模版重写，比如js css#}
    {% block header %}
    {% endblock %}

</head>
<body>
<header>
{#    导航#}
    <nav class="nav">
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/">技术</a></li>
            <li><a href="/">资讯</a></li>
            <li><a href="{% url 'about' %}">关于</a></li>
        </ul>

{#    如果用户没有登录显示登录 否则 显示用户名和登出#}
        {% if not request.user.is_authenticated %}
            <a style="float: right; color: white;text-decoration: none" href="{% url 'login' %}">登录/注册</a>
        {% else %}
            <div style="float: right;color: white;">
                {{ user.username }}
                <a style="color: white;text-decoration: none" href="{% url 'logout' %}">登出</a>
            </div>

        {% endif %}
    </nav>

</header>

{## 页面主体部分，留给子模版重写#}
<div class="content">
    {% block content %}
    {% endblock %}
</div>


{#页面底部的说明#}
<footer>

    <div class="footer">
        COPYRIGHT@2019 litets.com
        <div>power by <a target="_blank" href="https://litets.com">litets.com</a></div>
    </div>
</footer>

</body>
</html>

index.html

{#继承自base#}
{% extends 'base.html' %}

{#标题 显示在浏览器标签上的#}
{% block title %}
    首页
{% endblock %}

{#页面内使用到的资源，此处没有用到也可以不写#}
{% block header %}
{% endblock %}

{#主体部分#}
{% block content %}
    <ul>
{#        遍历文章#}
        {% for article in articles %}
            <li class="item">
                <a href="{% url 'detail' article.id %}">

                    <div class="title">
                        {{ forloop.counter }}、{{ article.title }}
                    </div>
                </a>

                <div class="info">
                    本条目由{{ article.author }},发布于{{ article.pub_date }}
                </div>


            </li>
        {% endfor %}

    </ul>
{% endblock %}

在static/css下添加一个style.css样式文件. 调整页面样式的

* {
    margin: 0;
    padding: 0;
}

.nav {
    background-color: darkslategrey;
    line-height: 45px;
    height: 45px;
    padding-left: 30px;
    padding-right: 30px;
}

.content {
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.footer{
    background: #999999;
    height: 60px;
    text-align: center;
    padding-top: 20px;
}

ul {
    list-style: none;
}


.nav ul li {
    display: inline-block;
    float: left;
}

.nav ul li a {
    color: white;
    text-decoration: none;
    line-height: 45px;
    display: inline-block;
    padding-right: 20px;
    padding-left: 20px;
    background-color: forestgreen;
    margin-right: 1px;

}

.nav ul li a:hover {
    background-color: darkgreen;
}

.title{
    color: black;
    font-size: 20px;
}

.info {
    margin-top: 5px;
    margin-bottom: 5px;
    color: gray;
}

.item {
    color: cadetblue;
    padding-top: 10px;
    padding-bottom: 10px;
}

.item a {
    text-decoration: none;
}

.item .title:hover {
    color: darkgreen;
}

.item .title{
    color: forestgreen;
}

.item .time{
    color: #cccccc;
}

然后在setting.py中设置app使用的静态文件目录

STATIC_URL = '/static/' # 全局性的
STATIC_ROOT = 'static' # 每个app下的

views.py中添加

from django.shortcuts import render
from mysite.models import Article

# 首页处理视图
def index(request):
    # 查询status=1已发表的所有文章
    articles = Article.objects.filter(status=1)
    # locals() 是把articles变成模版的参数传递进去 也可以使用
    # context = {'articles': articles}
    return render(request, 'index.html', locals())

启动服务器， http://127.0.0.1:8000 将会看到。