博客总站点首页布局
本功能需求：
-列出所有文章
-文章旁边可以显示作者头像
-文章旁边可以看到文章的发布时间
-文章旁边可以看到点赞点踩的数量
一、添加路由
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 %}