08–Django筆記–分頁優化展示

上一次做出了分頁效果，但是分頁存在問題

1. 當分頁過多，下方的頁碼導航欄長度過長
2. 沒有頁碼高亮，不知道目前處于的頁面

一、目前頁碼高亮

先判斷目前頁面，然後把目前頁面設定為 active

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

二、縮減分頁導航欄

修改傳入 blog_list.html 的分頁，保證傳入的頁面僅限于目前頁面及前兩頁、後兩頁，和首頁、尾頁：

# mysite/blog/views.py
def blog_list(request): # 部落格清單html界面的渲染
    ...
    # 擷取目前頁碼及前後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['page_range'] = page_range
    ...
    return render(request, 'blog_list.html', context)
           

修改 blog_list.html 中頁碼部分：

{% for page_num in page_range %} <!-- 修改後要在page_range中循環 -->
	{% if page_num == page_of_blogs.number %} <!-- 判斷頁碼如果是目前頁，則設定為高亮狀态 -->
		<li class="active"><a href="?page={{ page_num }}">{{ page_num }}</a></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 %}
           

由于 blogs_with_type.html 是繼承于 blog_list.html 檔案

是以 views.py 中的 blogs_with_type 函數需要修改

def blogs_with_type(request, blogs_type_pk):
    context = {}
    blog_type = get_object_or_404(BlogType, pk = blogs_type_pk)

    blogs_all_list = Blog.objects.filter(blog_type = blog_type)
    paginator = Paginator(blogs_all_list, 10) # 分頁，每10篇分一頁

    page_num = request.GET.get('page', 1) # request.GET得到get請求中的内容; 此處檢視get請求中有沒有page這個屬性，沒有則為1
    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] # 會出現頁碼小于1或者大于最大頁碼的問題
    # 擷取目前頁碼及前後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['page_of_blogs'] = page_of_blogs
    context['blog_types'] = BlogType.objects.all()
    context['blog_type'] = blog_type
    context['page_range'] = page_range
    return render(request, 'blogs_with_type.html', context)
           

三、将每頁部落格數量變量設為全局變量

公共全局設定可以放在 settings.py 檔案中，進行統一管理

調用方法：

from django.conf import settings
settings.xxx
           

具體操作如下：

現在 settings.py 檔案中設定變量：

然後修改 views.py ：