<博客建立历程>阿里云建站15——分页显示

时间:Dec. 27, 2016 分类:

目录:

Blog分页显示

随着博客的条数逐渐增加,在主页显示所有的博客要找好久才能找到自己想要找到的Blog,需要添加一个分页显示,每页显示固定数量的博客,这样就能显得博客有条理一些。这次需要使用的是Django中的paginator,Django Pagination 文档链接

依然和以前一样从三方面入手,views,urls和html入手,这次是通过修改原来的主页views,所以就不用urls了。

views.py

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger    #导入paginator

def blog_index(request):                                              #主页显示
    blog_list_all = BlogPost.objects.all()
    paginator = Paginator(blog_list_all,10)                           #分页,每页显示10个
    page = request.GET.get('page')                                    #获取页数
    try:
        blog_list = paginator.page(page)
    except PageNotAnInteger:
        blog_list = paginator.page(1)
    except EmptyPage:
        blog_list = paginator.paginator(paginator.num_pages)
    dic_blog_list = {'blog_list': blog_list}    #生成字典
    return render(request, 'blog.html', dic_blog_list)

index.html

{% extends "blog_base.html" %}
{% load custom_markdown %}
{% block content %}
        {% for blogs in blog_list %}
        <h1><a href="/blog/{{blogs.id}}">{{ blogs.title }}</a></h1>
        时间:<a>{{ blogs.timestamp | date:'M d'}}</a>
        分类:<a class="post-category post-category-js" href="#">{{ blogs.family }}</a>
        <p>{{ blogs.body |custom_markdown | truncatewords_html:"5" }}</p>
        <!--   
        <a class="pure-button"  href="/blog/{{blogs.id}}">Read More >>></a>   
        -->
    <br/>
        {% endfor%}
<div class="pagination">
    <span class="step-links">
        {% if blog_list.has_previous %}
            <a href="?page={{ blog_list.previous_page_number }}">上一页</a>
        {% endif %}
            Page {{ blog_list.number }} of {{ blog_list.paginator.num_pages }}
        {% if blog_list.has_next %}
            <a href="?page={{ blog_list.next_page_number }}">下一页</a>
        {% endif %}
    </span>
</div>
{% endblock %}    

效果展示

分页优化

但是这样还是有些不太友好,只能一页一页的翻,还不如以前好用,我们需要添加一下所有的页都可以选择。

index.html优化

        {% endfor%}
        {% if blog_list.has_previous %}
            <a href="?page={{ blog_list.previous_page_number }}">上一页</a>
        {% endif %}
            {% for page in blog_list.paginator.page_range %}
                {% if page = blog_list.number %}
                    <a class='paginator_current' title='当前页:{{ page }}'><span>{{ page }}</span></a>
                {% else %}
                    <a class='paginator' href='?page={{ page }}' title='{{ page }}'><span>{{ page }}</span></a>
                {% endif %}
            {% endfor %}
        {% if blog_list.has_next %}
            <a href="?page={{ blog_list.next_page_number }}">下一页</a>
        {% endif %}

效果展示