4.博客展示

博客展示

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

需求

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

css/html不在本教程之列,你可以随意发挥,或者抄抄代码即可,但是涉及到python的请仔细阅读,自己尝试编写。 毕竟眼过千遍不如手过一遍

模版搭建

在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>
        <!--导航只做演示 没有实现具体功能,代码仓库中编写了about页面-->
            <li><a href="/">首页</a></li>
            <li><a href="/">技术</a></li>
            <li><a href="/">资讯</a></li>
            <li><a href="/">关于</a></li>
        </ul>
    </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">
                {#   链接到文章详情的URL 格式 http://127.0.0.1:8000/detail/1 #}
                <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/' # 每个app下的
STATIC_ROOT = 'static' # 只有设置中DEBUG=True是Django自动处理,否在需要使用python3 manage.py collectedstatic执行静态资源收集起来同一处理

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())

添加注册视图到url上
在mysite中创建一个urls.py文件

from django.urls import path
from .views import index


urlpatterns = [
    path('', index),
]

添加到项目URL上
打开my_blog/urls.py

from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),
    # 使用include将app中的urs包含进来
    path('', include('mysite.urls')),
]

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

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

文章详情

templates/detail.html

{% extends 'base.html' %}

{% block title %}
    {{ article.title }}
{% endblock %}

{% block header %}
{% endblock %}

{% block content %}
{#    文章标题#}
    <h1 class="title">{{ article.title }}</h1>
{#    文章信息#}
    <div class="info"><span>作者:{{ article.author }}</span> <span>发表时间:{{ article.pub_date }}</span></div>

{#    详情#}
    <div>
        {{ article.content }}
    </div>
{% endblock %}

views.py添加视图
前面的首页列表,我们使用的是函数视图,详情我们使用django的通用视图

from django.views.generic import DetailView


class ArticleDetailView(DetailView):
    template_name = 'detail.html' # 模版名称
    model = Article # 使用到的model
    pk_url_kwarg = 'id' # 查询参数

注册视图到url

from django.urls import path
from .views import index, ArticleDetailView


urlpatterns = [
    path('', index),
    # name 就对应到index.html中的url  <a href="{% url 'detail' article.id %}">
    path('detail/<int:id>', ArticleDetailView.as_view(), name='detail'),
]

重启服务器,点击文章列表

到此一个简易的博客系统就完成。不要想的太复杂,所有的网站都是这样一个大体流程。

后面章节我们介绍用户的登录。

声明:原创文章,版权所有,转载请注明出处,https://litets.com。