4.博客展示

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

内容简介：博客展示前面我们已经使用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 将会看到。

注：如果查询不到文章，首先摇到admin后台，添加文章 http://127.0.0.1:8000/admin

以上所述就是小编给大家介绍的《4.博客展示》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Bad Blood

John Carreyrou / Knopf / 2018-5-21 / USD 27.95

The full inside story of the breathtaking rise and shocking collapse of Theranos, the multibillion-dollar biotech startup, by the prize-winning journalist who first broke the story and pursued it to t......一起来看看《Bad Blood》这本书的介绍吧!

码农工具

随机密码生成器

多种字符组合密码

Base64 编码/解码

HEX HSV 转换工具

HEX HSV 互换工具