jekyll分頁頁面顯示過多處理方法(分頁只顯示五頁)已成功

pagination.html:

<div class="pagination text-align">
    <div class="btn-group">
        {% if paginator.total_pages > 1 %}
	        {% if paginator.page == 1 %}
	        	<a class="btn btn-outline">首頁</a>
	        {% else %}
	        	<a href="/" class="btn btn-outline">首頁</a>
	        {% endif %}
	        <!-- 如果有前一頁的頁號 -->
	        {% if paginator.previous_page %}
		        <!-- 如果前一頁的頁號是1 -->
		        {% if paginator.previous_page == 1 %}
			        <a href="/" class="btn btn-outline">&laquo;</a>
			    {% else %}
       				<a href="/page{{paginator.previous_page}}" class="btn btn-outline">&laquo;</a>
        		{% endif %}
        	{% else %}
        		<button disabled="disabled" href="javascript:;" class="btn btn-outline">&laquo;</button>
                {% endif %}
            {% if paginator.page <= 3 %}
                {% for num in (1..paginator.total_pages) %}
                    {% if forloop.index <= 5 %}
                        {% if num != paginator.page %}
                            {% if num == 1 %}
                                <a href="/" class="btn btn-outline">1</a>
                            {% else %}
                                <a href="/page{{num}}" class="btn btn-outline">{{num}}</a>
                            {% endif %}
                        {% endif %}
                        <!--如果當前頁碼數和num相等,則不會出現連接地址,也不能點擊,並且加上背景色樣式-->
                        {% if num == paginator.page %}
                            <a href="javascript:;" class="active btn btn-outline">{{num}}</a>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            {% else %}
                {% assign index1 = paginator.page|plus:1 %}
                {% assign index2 = paginator.page|plus:2 %}
                {% if index1 > paginator.total_pages %}
                    <a href="/page{{paginator.page|plus:-4}}" class="btn btn-outline">{{paginator.page|plus:-4}}</a>
                {% endif %}
                {% if index2 > paginator.total_pages %}
                    <a href="/page{{paginator.page|plus:-3}}" class="btn btn-outline">{{paginator.page|plus:-3}}</a>
                {% endif %}
                <a href="/page{{paginator.page|plus:-2}}" class="btn btn-outline">{{paginator.page|plus:-2}}</a>
                <a href="/page{{paginator.page|plus:-1}}" class="btn btn-outline">{{paginator.page|plus:-1}}</a>
                <a href="javascript:;" class="active btn btn-outline">{{paginator.page}}</a>
                {% if index1 <= paginator.total_pages %}
                    <a href="/page{{paginator.page|plus:1}}" class="btn btn-outline">{{paginator.page|plus:1}}</a>
                {% endif %}
                {% if index2 <= paginator.total_pages %}
                    <a href="/page{{paginator.page|plus:2}}" class="btn btn-outline">{{paginator.page|plus:2}}</a>
                {% endif %}
            {% endif %}

        	{% if paginator.next_page %}
		        <a href="/page{{paginator.next_page}}" class="btn btn-outline">&raquo;</a>
		        <a href="{{ site.baseurl}}/page{{paginator.total_pages}}" class="btn btn-outline">末頁</a>
        	{% else %}
		        <button disabled="disabled" href="javascript:;" class="btn btn-outline">&raquo;</button>
		        <a class="btn btn-outline">末頁</a>
        	{% endif %}
        		<a class="btn btn-outline disabled">第{{paginator.page}}頁 / 共{{paginator.total_pages}}頁</a>
        <!-- 只有一頁的情況 -->
        {% else %}
        	<!-- 如果有文章纔會顯示 -->
        	{% if paginator.posts %}
        		<a class="btn btn-outline">首頁</a>
	        	<button disabled="disabled" href="javascript:;" class="btn btn-outline">&laquo;</button>
	        	<a href="javascript:;" class="active btn btn-outline">1</a>
	        	<button disabled="disabled" href="javascript:;" class="btn btn-outline">&raquo;</button>
	        	<a class="btn btn-outline">末頁</a>
	        	<a class="btn btn-outline disabled">第{{paginator.page}}頁 / 共{{paginator.total_pages}}頁</a>
	        {% endif %}	        
    </div>
</div>
{% endif %}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章