官网下载bootstrap插件放到项目中的static文件中
路由
path('blog-fullwidth/', login.fullwidth,name='fullwidth'),
前端页面引入
"/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
前端获取数据
{% for v in article_obj %}class="blog-post"> class="writer pull-left" src="{{ v.member.member_photo }}" alt="用户头像"/>{% endfor %}"color: #000;">作 者 *a href="/blog/personage/{{ v.member_id }}">{{ v.member.member_name }}
{{ v.article_addtime }} "/blog/single-post/{{ v.article_id }}">{{ v.article_title }}
class="post-img"{% if not v.image.all.first.image_src %} style="display: none"{% endif %}> {# 点击查看图片详情#} "{{ v.image.all.last.image_src }}">class="img-responsive" src="{{ v.image.all.last.image_src }}" alt="#"/>{# {{ v.image.all.first.image_src }}#}{{ v.article_description }}
class="list-inline read-more">
- "/blog/single-post/{{ v.article_id }}" role="button">查看全文
阅读:{{ v.article_clicknum }} a href="javascript:;" data-id="{{ v.article_id }}" data-num="{{ v.article_praise_num }}" class="likes">赞:{{ v.article_praise_num }} {#- {{ v.article_comment }}
#}
前端分页写法
后台写法
# 文章列表页 def fullwidth(request): member_id = request.session.get('member_id') member_name = request.session.get('member_name') super_obj = Article.objects.filter(member_id=7).last() # 获取所有文章 article_obj = Article.objects.filter(article_auditor=0).order_by('-article_addtime') currentPage = int(request.GET.get('page', 1)) # 获取当前在第几页 # book_list = Book.objects.all() paginator = Paginator(article_obj, 5) # 告诉分页器我5条分页 # 如果总页数大于十一页,设置分页 if paginator.num_pages > 11: # 如果当前页数小于5页 if currentPage - 5 : # 页面上显示的页码 pageRange = range(1, 11) # 如果当前页数+5大于总页数显示的页码 elif currentPage + 5 > paginator.num_pages: pageRange = range(paginator.num_pages - 9, paginator.num_pages + 1) else: # 在中间显示的十个页码 pageRange = range(currentPage - 5, currentPage + 5) else: pageRange = paginator.page_range # 捕获路由异常 try: article_obj = paginator.page(currentPage) # 如果页码输入不是整数则返回第一页的数据 except PageNotAnInteger: article_obj = paginator.page(1) # 如果页码输入是空值则返回第一页数据 except EmptyPage: article_obj = paginator.page(1) return render(request, 'blog/blog-fullwidth.html', locals())
页面效果
done。
参与评论
手机查看
返回顶部