Django learning: page optimization (12)

Others 2019-08-28 18:18:14 views: null

When there are many pages, the page will appear more bloated, you need to hide in the middle of the page, is the need to optimize the page display.

Preliminary adjustment before the page before the page is not the number of blog page display.

Modify blog templates blog blog_list.htmlfile

<div class="panel-heading">{% block blog_list_title %}博客列表(一共有{{ page_of_blogs.paginator.count }}篇博客){% endblock %}</div>

At this time, the number of blog can be displayed correctly.

Modify views.pyfiles conducive to reading

    context = {}
    context['blogs'] = page_of_blogs.object_list
    context['page_of_blogs'] = page_of_blogs
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)

While the blog_list.htmlrespective code changes

<div class="panel-body">
                        {% for blog in blogs %}
                        <div class="blog">
                            <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                            <p class="blog_info">
                                <span class="glyphicon glyphicon-tag"></span><a href='{% url "blogs_with_type" blog.blog_type.pk %}'>{{ blog.blog_type }}</a>
                                <span class="glyphicon glyphicon-time"></span>{{ blog.created_time|date:"Y-m-d" }}
                            </p>
                            <p>{{ blog.content|truncatechars_html:120 }}</p>
                        </div>
                        {% empty %}
                        <div class="blog">
                            <h3>-- 暂无博客，敬请期待 --</h3>
                        </div>
                        {% endfor %}
                    </div>

Change the code to two blog as pagination

views.py

paginator = Paginator(blogs_all_list, 2)

At this time, refresh the page turns

Produce two demand, when users click on the page, so the page is displayed as highlighted, in addition to reducing the number of pages shown to enhance the user experience of perception.

  • Let the selected page number highlighted

    blog_list.html

{# 全部页码 #}
                        {% for page_num in page_of_blogs.paginator.page_range %}
                            {% if page_num == page_of_blogs.number %}
                                <li class='active'><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                            {% else %}
                                <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                            {% endif %}
                        {% endfor %}

The Select page becomes selected

In order to display only the information section of the page click on a page, you can consider only displays the current page and front and rear 2

  • Modify views.pyfile
def blog_list(request):
    
    blogs_all_list = Blog.objects.all()
    paginator = Paginator(blogs_all_list, 2) # 每10篇博客进行分页
    page_num = request.GET.get('page', 1) # 获取url的页面参数（GET请求）
    page_of_blogs = paginator.get_page(page_num)
    current_page_num = page_of_blogs.number # 获取当前页码
    page_range = [current_page_num - 2, current_page_num - 1, current_page_num, current_page_num + 1, current_page_num + 2]

    context = {}
    context['blogs'] = page_of_blogs.object_list
    context['page_range'] = page_range
    context['page_of_blogs'] = page_of_blogs
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)
  • Modify blog_list.htmlfile
{# 全部页码 #}
                        {% for page_num in page_range %}
                            {% if page_num == page_of_blogs.number %}
                                <li class='active'><span>{{ page_num }}</span></li>
                            {% else %}
                                <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                            {% endif %}
                        {% endfor %}

At this time, the resulting page is as follows:

There is a new problem, when a page is the last time, after two pages shows up, but in fact there is no content.

To views.pyfile optimization

def blog_list(request):
    
    blogs_all_list = Blog.objects.all()
    paginator = Paginator(blogs_all_list, 2) # 每10篇博客进行分页
    page_num = request.GET.get('page', 1) # 获取url的页面参数（GET请求）
    page_of_blogs = paginator.get_page(page_num)
    current_page_num = page_of_blogs.number # 获取当前页码
    page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))

    context = {}
    context['blogs'] = page_of_blogs.object_list
    context['page_range'] = page_range
    context['page_of_blogs'] = page_of_blogs
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)

The page turns

  • Continue to modify views.pyto make first and last pages are displayed
def blog_list(request):
    
    blogs_all_list = Blog.objects.all()
    paginator = Paginator(blogs_all_list, 2) # 每10篇博客进行分页
    page_num = request.GET.get('page', 1) # 获取url的页面参数（GET请求）
    page_of_blogs = paginator.get_page(page_num)
    current_page_num = page_of_blogs.number # 获取当前页码
    # 获取当前页前后各2页
    page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
    
    if page_range[0] != 1:
        page_range.insert(0, 1)
    if page_range[-1] != paginator.num_pages:
        page_range.append(paginator.num_pages)


    context = {}
    context['blogs'] = page_of_blogs.object_list
    context['page_range'] = page_range
    context['page_of_blogs'] = page_of_blogs
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)
  • The page intermediate display ellipsis

views.py

def blog_list(request):
    
    blogs_all_list = Blog.objects.all()
    paginator = Paginator(blogs_all_list, 2) # 每10篇博客进行分页
    page_num = request.GET.get('page', 1) # 获取url的页面参数（GET请求）
    page_of_blogs = paginator.get_page(page_num)
    current_page_num = page_of_blogs.number # 获取当前页码
    # 获取当前页前后各2页
    page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
    
    # 加上省略号
    if page_range[0] - 1 >= 2:
        page_range.insert(0, '...')
    if paginator.num_pages - page_range[-1] >= 2:
        page_range.append('...')


    # 加上首尾页码
    if page_range[0] != 1:
        page_range.insert(0, 1)
    if page_range[-1] != paginator.num_pages:
        page_range.append(paginator.num_pages)

    context = {}
    context['blogs'] = page_of_blogs.object_list
    context['page_range'] = page_range
    context['page_of_blogs'] = page_of_blogs
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)

The page effect

At this point ... is clickable, you can modify blog_list.htmladjusted to not click on the template file.

{# 全部页码 #}
                        {% for page_num in page_range %}
                            {% if page_num == page_of_blogs.number %}
                                <li class='active'><span>{{ page_num }}</span></li>
                            {% else %}
                                {% if page_num == '...' %}
                                    <li><span>{{ page_num }}</span></li>
                                {% else %}
                                    <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                                {% endif %}
                            {% endif %}
                        {% endfor %}

Further beautification operation, the number of blog appears below the page number, and centered.

  • modifyblog_list.html
<div class='paginator'>
                      <ul class="pagination">
                        {# 上一页 #}
                        <li>
                            {% if page_of_blogs.has_previous %}
                                <a href="?page={{ page_of_blogs.previous_page_number }}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            {% else %}
                                <span aria-hidden="true">&laquo;</span>
                            {% endif %}
                        </li>
                        {# 全部页码 #}
                        {% for page_num in page_range %}
                            {% if page_num == page_of_blogs.number %}
                                <li class='active'><span>{{ page_num }}</span></li>
                            {% else %}
                                {% if page_num == '...' %}
                                    <li><span>{{ page_num }}</span></li>
                                {% else %}
                                    <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                        {# 下一页 #}
                        <li>
                            {% if page_of_blogs.has_next %}
                                <a href="?page={{ page_of_blogs.next_page_number }}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            {% else %}
                                <span aria-hidden="true">&raquo;</span>
                            {% endif %}
                        </li>
                      </ul>
                      <p>
                        共有{{ page_of_blogs.paginator.count }}篇博客，当前{{ page_of_blogs.number }}页，共{{ page_of_blogs.paginator.num_pages }}页
                      </p>
                </div>

blog.css

ul.blog_types {
    list-style-type: none;
}
div.blog:not(:last-child) {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #eee;
}
div.blog h3 {
    margin-top: 0.5em;
}
div.blog p.blog-info {
    margin-bottom: 0;
}
div.paginator {
    text-align: center;
}

ul.blog_info_description {
    list-style-type: none;
    margin-bottom: 1em;
}
ul.blog_info_description li {
    display: inline-block;
    margin-right: 2em;
}
div.blog-content {
    text-indent: 2em;
}

Force a refresh Home

It can be further optimized so that classification into the blog page display the same effect and pagination effect

views.py

from django.shortcuts import render_to_response,get_object_or_404
from django.core.paginator import Paginator
from .models import Blog, BlogType

# Create your views here.

# 每一页博客数量
each_page_blogs_number = 2

def blog_list(request):
    
    blogs_all_list = Blog.objects.all()
    paginator = Paginator(blogs_all_list, each_page_blogs_number) 
    page_num = request.GET.get('page', 1) # 获取url的页面参数（GET请求）
    page_of_blogs = paginator.get_page(page_num)
    current_page_num = page_of_blogs.number # 获取当前页码
    # 获取当前页前后各2页
    page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
    
    # 加上省略号
    if page_range[0] - 1 >= 2:
        page_range.insert(0, '...')
    if paginator.num_pages - page_range[-1] >= 2:
        page_range.append('...')

    # 加上首尾页码
    if page_range[0] != 1:
        page_range.insert(0, 1)
    if page_range[-1] != paginator.num_pages:
        page_range.append(paginator.num_pages)

    context = {}
    context['blogs'] = page_of_blogs.object_list
    context['page_range'] = page_range
    context['page_of_blogs'] = page_of_blogs
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)

def blog_detail(request,blog_pk):
    context = {}
    context['blog'] = get_object_or_404(Blog, pk=blog_pk)
    return render_to_response('blog/blog_detail.html', context)

def blogs_with_type(request, blog_type_pk):
    context = {}
    blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
    blogs_all_list = Blog.objects.filter(blog_type=blog_type)
    paginator = Paginator(blogs_all_list, each_page_blogs_number)
    page_num = request.GET.get('page', 1) # 获取url的页面参数（GET请求）
    page_of_blogs = paginator.get_page(page_num)
    current_page_num = page_of_blogs.number # 获取当前页码
    # 获取当前页前后各2页
    page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
    
    # 加上省略号
    if page_range[0] - 1 >= 2:
        page_range.insert(0, '...')
    if paginator.num_pages - page_range[-1] >= 2:
        page_range.append('...')

    # 加上首尾页码
    if page_range[0] != 1:
        page_range.insert(0, 1)
    if page_range[-1] != paginator.num_pages:
        page_range.append(paginator.num_pages)

    context = {}
    context['blog_type'] = blog_type
    context['blogs'] = page_of_blogs.object_list
    context['page_range'] = page_range
    context['page_of_blogs'] = page_of_blogs
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blogs_with_type.html', context)

blogs_with_type.html

{% extends 'blog/blog_list.html' %}
{# 页面标题 #}
{% block title %}{{ blog_type.type_name }}{% endblock %}
{% block blog_list_title %}
    {{ blog_type.type_name }}
    <a href='{% url "blog_list" %}'>查看全部博客</a>
{% endblock %}

At this blog entry list page as follows:

For paging global settings page may also be used, in a settings.pyset of

settings.py

...
...
# 自定义设置
EACH_PAGE_BLOGS_NUMBER = 7

views.py

from django.conf import settings
def blog_list(request):
    
    blogs_all_list = Blog.objects.all()
    paginator = Paginator(blogs_all_list, settings.EACH_PAGE_BLOGS_NUMBER) 
    ....
    return render_to_response('blog/blog_list.html', context)
    
def blogs_with_type(request, blog_type_pk):
    context = {}
    blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
    blogs_all_list = Blog.objects.filter(blog_type=blog_type)
    paginator = Paginator(blogs_all_list, settings.EACH_PAGE_BLOGS_NUMBER)
    ....

The page once every seven pages.

Guess you like

Origin www.cnblogs.com/sjfeng1987/p/11423584.html
Recommended
Ranking
Linux关机和重启详解（shutdown、halt、poweroff、reboot、init）
Netty work notes 0007---NIO's three core component relationships
Knife4j tutorial
2021.10.29，内容:什么时候用接口和抽象类
How to solve the problem that changing the memory frequency causes the computer to become unusable?
SpringMVC Tutorial - Controller
linux learning skills -Linux 25 transport Vega paid special privileges and facl extension
Financial quarterly report evaluation report data automatic generation 1.0
Agile Development Series - The Values of Agile Development
scrapy achieve browsercookie Middleware
Daily
More
2024-05-19(0)
2024-05-18(31)
2024-05-17(6)
2024-05-16(23)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)

Code World

© 2018 codetd.com