一. 基本樣式

主要優化內容：

＃1. 當前頁高亮
＃2. 顯示當前頁及其前後兩頁
＃3. 顯示省略號標記
＃4. 顯示首尾頁
＃5. 將“頁數描述文字”放置在“頁碼欄”下方
＃6. “頁碼欄”與“頁數描述文字”居中顯示　　

二. 當前頁高亮

　　在模版中判斷顯示的頁碼是否是當前的頁碼，若是，添加class=‘active‘屬性

{% for page_num in page_of_blogs.num_pages%} 
　　{% 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 %}

三. 顯示當前頁及其前後兩頁

　　current_page-2 最小值為1，current_page+2最大值為分頁器的最大頁數

＃ 獲取當前頁碼
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))

＃ 修改循環顯示的頁碼範圍
{% 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 %}

四. 顯示省略號標記

# 添加省略號標記
if (page_range[0] - 1 >= 2):
    page_range.insert(0,‘...‘)
if (paginator.num_pages - page_range[-1] >= 2):
    page_range.append(‘...‘)

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

五. 顯示首尾頁

　　將首頁和尾頁加入到page_range中

# 先加入‘...‘標記
    
# 再將第一頁與最後一頁始終顯示
if (page_range[0] != 1):
    page_range.insert(0,1)
if (page_range[-1] != paginator.num_pages):
    page_range.append(paginator.num_pages)

六. 將“頁數描述”放置在“頁碼欄”下方，並居中顯示

 <div class="paginator">
     ＋<ul class="pagination">
        </ul>
	<p>
		共有{{ page_of_blogs.paginator.count}}篇博客, 
                當前為第{{page_of_blogs.number}}頁, 
                共{{page_of_blogs.paginator.num_pages}}頁
	</p>
</div>    

div.paginator {
	text-align: center;
}

[Django學習] Django基礎(5)_優化分頁器