Djangoの学習：ページの最適化（12）

多くのページがある場合は、ページがより肥大化表示され、ページの途中で非表示にする必要がある、ページの表示を最適化する必要があります。

ページの前のページの前に予備調整はブログのページ表示の数ではありません。

変更しblog templates blog blog_list.htmlたファイルを

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

この時点では、ブログの数が正しく表示することができます。

変更views.py読み取りを助長するファイルを

    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)

一方でblog_list.html、それぞれのコードの変更

<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>

ページネーションとして2つのブログにコードを変更します

views.py

paginator = Paginator(blogs_all_list, 2)

このとき、ページターンをリフレッシュ

ページが表示されるように強調されているように、ユーザーが知覚のユーザーエクスペリエンスを向上させることが示されるページ数を低下させることに加えて、ページをクリックすると、2人の需要を生み出します。

選択されたページ番号がハイライトしてみましょう

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 %}

選択ページが選択された状態になります

ページのページのクリックのみで情報セクションを表示するためには、現在のページのみとフロントとリアの2を表示し検討することができます

変更し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 # 获取当前页码
    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)

変更しblog_list.htmlたファイルを

{# 全部页码 #}
                        {% 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 %}

次のようにこの時点では、結果のページは次のようになります。

2つのページが現れた後、ページが最後の時間で新たな問題が、ありますが、実際には何のコンテンツがありません。

するために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 # 获取当前页码
    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)

ページターン

修正していき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:
        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)

ページの中間表示の省略記号

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)

ページ効果

この時点で...あなたは変更することができ、クリック可能であるblog_list.htmlテンプレートファイルをクリックしないように調整しました。

{# 全部页码 #}
                        {% 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 %}

さらに美化作業は、ブログの数は、ページ番号の下に表示され、中央に。

修正blog_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;
}

リフレッシュホームを強制

ブログページへの分類は、同じ効果とページネーションの効果を表示するように、それをさらに最適化することができます

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 %}

このブログエントリのリストページでは、次のように：

グローバル設定ページをページングするために、また、使用することができるsettings.pyのセット

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)
    ....

ページごとに7ページ。

Djangoの学習：ページの最適化（12）

おすすめ