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 将会看到。

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Parsing Techniques

Dick Grune、Ceriel J.H. Jacobs / Springer / 2010-2-12 / USD 109.00

This second edition of Grune and Jacobs' brilliant work presents new developments and discoveries that have been made in the field. Parsing, also referred to as syntax analysis, has been and continues......一起来看看《Parsing Techniques》这本书的介绍吧!

码农工具

图片转BASE64编码

在线图片转Base64编码工具

HSV CMYK 转换工具

HSV CMYK互换工具