第五节:博客总站点首页布局

博客总站点首页布局

本功能需求:

-列出所有文章

-文章旁边可以显示作者头像

-文章旁边可以看到文章的发布时间

-文章旁边可以看到点赞点踩的数量

一、添加路由

1、在urls.py中添加

导入

from django.urls import path, re_path
from django.views.static import serve
from bbs import views
import settings

首页路由

    path('index/', views.index, name='index'), 

个人头像路由

    re_path('^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

=================================================================

注意:此处需要先在配置文件settings.py中开启media文件夹

MEDIA_ROOT=os.path.join(BASE_DIR,'media')

=================================================================

二、添加视图函数

在views.py中添加

1、视图函数index

def index(request):
    swiper_list = models.Swiper.objects.all()
    article_list = models.Article.objects.all().order_by('-create_time')
    page_num_int = int(request.GET.get('page', 1))
    paginator = Paginator(article_list, 6)
    if paginator.num_pages > 9:
        if page_num_int - 4 < 1:
            page_range = range(1, 9)
        elif page_num_int + 4 > paginator.num_pages:
            page_range = range(paginator.num_pages - 8, paginator.num_pages + 1)
        else:
            page_range = range(page_num_int - 4, page_num_int + 4)
    else:
        page_range = paginator.page_range
    page = paginator.page(page_num_int)
    start = 1
    end = paginator.num_pages
    if page_num_int > int(end):
        return redirect(reverse('error'))
    return render(request, 'Index.html', locals())

注意:对主页展示的文章此处要用到一个分页器

三、首页功能涉及的模型层操作

渲染前端文章详情模板时需要用到文章表(Article),及与其相关的一系列外键字段属性(点赞点踩,评论,用户头像等)

四、首页功能前端模板

我们先在templates文件夹中的template_base文件夹中写一个网站的总体风格模板 base.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% block title %}

    {% endblock %}</title>

    {% block css %}
        {% include 'template_static/css_base.html' %}
    {% endblock %}
</head>
<body>

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-9">
            <div class="card">
                <nav class="navbar navbar-expand-lg navbar-light bg-info">
                    <a href="{% url 'index' %}" class="mr-3 text-white"><i class="fa fa-windows fa-2x"></i></a>
                    <a href="{% url 'index' %}" class="mx-2 text-white btn btn-info">
                        Blog
                    </a>
                    {% if request.user.is_authenticated %}
                        {% if request.user.is_superuser %}
                            <a href="{% url 'user_info' %}" class="mx-2 text-white btn btn-info">
                                用户管理
                            </a>
                            <a href="{% url 'upload_swiper' %}" class="mx-2 text-white btn btn-info">
                                轮播图上传
                            </a>
                            <a href="/admin/" class="mx-2 text-white btn btn-info">
                                Admin后台管理
                            </a>
                        {% endif %}
                        <a href="{% url 'log' %}" class="mx-2 text-white btn btn-info">
                            访问日志
                        </a>
                        <div class="btn-group ml-auto">
                            <img src="/media/{{ request.user.avatar }}" alt="" class="show_avatar">
                            <span class="text-white my-1 ml-1 mr-3"><strong>{{ request.user.username }}</strong></span>
                            <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                更多
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="/set_info/">个人中心</a>
                                <a class="dropdown-item" href="/{{ request.user.username }}">我的博客</a>
                                <a class="dropdown-item" href="/backend/">后台管理</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="{% url 'logout' %}">退出</a>
                            </div>
                        </div>
                    {% else %}
                        <div class="ml-auto">
                            <a href="{% url 'register' %}" class="mx-2 text-white btn btn-info ">
                                注册
                            </a>
                            <a href="{% url 'login' %}" class="mx-2 text-white btn btn-info ">
                                登录
                            </a>
                        </div>
                    {% endif %}
                </nav>
                <div class="card-body">
                    {% block content %}

                    {% endblock %}
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('body').attr('style', 'background:url(/media/{{ request.user.bg_img }}) !important;background-attachment: fixed !important;background-size: cover !important;')
    $('.card').attr('style', 'background:rgba(0,0,0,0)')
    $('.card-body').addClass('bg-white-95')
</script>
{% block js %}

{% endblock %}
</body>
</html>

templates中的index.html(在此页面中继承了上面所写的base.html)

{% extends 'template_base/base.html' %}

{% block title %}
    主页
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    当前位置:
                    <li class="breadcrumb-item active" aria-current="page">首页</li>
                </ol>
            </nav>
            <div class="swiper-container swiper1 radius-5 ">
                <div class="swiper-wrapper">
                    {% for foo in swiper_list %}
                        <div class="swiper-slide" style="background: url('/media/{{ foo.image }}')">
                            <br><br><br><br><br><br>
                            <a href="{{ foo.img_url }}">
                                <h2 class="text-center text-white my-5">{{ foo.title }}</h2>
                            </a>
                        </div>
                    {% endfor %}
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <hr>
            <div class="accordion bg-white-7" id="accordionExample">
                {% for article in page.object_list %}
                    <div class="card">
                        <div class="card-header p-2" id="headingOne">
                            <h2 class="mb-0">
                                <div class="btn btn-link btn-block text-left text-decoration-none" type="button"
                                     data-toggle="collapse"
                                     data-target="#collapse{{ forloop.counter }}" aria-expanded="true"
                                     aria-controls="collapseOne">
                                    <h5 class="d-inline ml-3">{{ article.title }}</h5>
                                </div>
                            </h2>
                        </div>
                        <div id="collapse{{ forloop.counter }}" class="collapse" aria-labelledby="headingOne"
                             data-parent="#accordionExample">
                            <div class="card-body px-3 py-2">
                                <div class="row">
                                    <div class="col-md-1">
                                        <a href="/{{ article.blog.userinfo.username }}">
                                            <img src="/media/{{ article.blog.userinfo.avatar }}" height="80">
                                        </a>
                                    </div>
                                    <div class="col-md-11">
                                        <div class="ml-4">
                                            <a href="/{{ article.blog.userinfo.username }}/article/{{ article.id }}.html">
                                                {{ article.description|truncatechars:"90" }}...
                                            </a>
                                            <hr class="my-1">
                                            <div class="mt-1 text-right">
                                                Posted @<a href="/{{ article.blog.userinfo.username }}"
                                                           class="mr-2 width-160">{{ article.blog.title }}</a>
                                                发布时间:<span class="mx-2">{{ article.create_time|date:'Y年m月d日' }}</span>
                                                <span class="mx-2 width-80"><i
                                                        class="fa fa-thumbs-o-up text-success"></i> {{ article.up_num }}</span>
                                                <span class="ml-2 width-80"><i
                                                        class="fa fa-commenting-o text-warning"></i> {{ article.comment_num }}</span>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                {% empty %}
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <strong>提示:</strong>当前暂无已发布文章
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                {% endfor %}
                <div class="d-flex justify-content-center mt-3">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            {% if page.has_previous %}
                                <li class="page-item">
                                    <a class="page-link"
                                       href="{% url 'index' %}?page={{ start }}">首页</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link"
                                       href="{% url 'index' %}?page={{ page.previous_page_number }}">上一页</a>
                                </li>
                            {% else %}
                                <li class="page-item disabled">
                                    <a class="page-link" href="#">首页</a>
                                </li>
                                <li class="page-item disabled"><a class="page-link" href="#">上一页</a>
                                </li>
                            {% endif %}

                            {% for page_num in page_range %}
                                {% if page_num_int == page_num %}
                                    <li class="page-item active">
                                        <a class="page-link"
                                           href="{% url 'index' %}?page={{ page_num }}">{{ page_num }}</a>
                                    </li>
                                {% else %}
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="{% url 'index' %}?page={{ page_num }}">{{ page_num }}</a>
                                    </li>
                                {% endif %}

                            {% endfor %}

                            {% if page.has_next %}
                                <li class="page-item">
                                    <a class="page-link"
                                       href="{% url 'index' %}?page={{ page.next_page_number }}">下一页</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link"
                                       href="{% url 'index' %}?page={{ end }}">尾页</a>
                                </li>
                            {% else %}
                                <li class="page-item disabled"><a class="page-link" href="#">下一页</a>
                                </li>
                                <li class="page-item disabled">
                                    <a class="page-link" href="#">尾页</a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
{% endblock %}

{% block js %}
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        })
        new Swiper('.swiper-container')
        var mySwiper = document.querySelector('.swiper-container').swiper
        mySwiper.slideNext();
    </script>
{% endblock %}
上一篇
下一篇
Copyright © 2022 Egon的技术星球 egonlin.com 版权所有 帮助IT小伙伴学到真正的技术