Ghost博客系統(tǒng)默認(rèn)提供的博文列表為傳統(tǒng)的翻頁方式（通過點(diǎn)擊上一頁教届、下一頁等按鈕來切換），隨著移動客戶端的發(fā)展驾霜，瀑布流式的滾動加載方式得到廣泛應(yīng)用案训，有效地提高了用戶瀏覽信息的流暢度。下面詳述如何通過
Infinite Scroll來改造Ghost博文列表的翻頁效果粪糙。
Infinite Scroll
Infinite Scroll顧名思義：無限滾動强霎，也稱為自動分頁、滾動分頁和無限分頁蓉冈，是基于jquery的一個插件城舞。可以用來實現(xiàn)滾動頁面的時候加載下一頁的內(nèi)容寞酿。
實現(xiàn)步驟
- 將
jquery.infinitescroll.min.js拷貝到你的主題目錄下 - 在循環(huán)獲取posts列表的頁面上引入
jquery.infinitescroll.min.js文件
注意：jquery.infinitescroll.min.js必須在jquery引入之后
<script src="{{asset "js/jquery.infinitescroll.min.js"}}"></script>
- 嘗試一下最簡配置家夺，若我們的頁面結(jié)構(gòu)如下
{{#foreach posts}}
<article class="{{post_class}}">
{{!有封面的時候展示封面}}
{{#if image}}
<a class="post-pic hidden-xs" href="{{url}}" style="background-image: url({{image}});"></a>
{{/if}}
<header class="post-header">
<h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
</header>
<section class="post-excerpt">
<p>{{excerpt characters="140"}} <a class="read-more" href="{{url}}">?</a></p>
</section>
<footer class="post-meta">
{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix=" <i class=\"fa fa-tags\"></i> "}}
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="YYYY年MM月DD日"}}</time>
</footer>
</article>
{{/foreach}}
<nav class="pagination" role="navigation">
{{#if prev}}
<a class="newer-posts" href="{{page_url prev}}">← 上一頁</a>
{{/if}}
<span class="page-number">第 {{page}} 頁 ? 共 {{pages}} 頁</span>
{{#if next}}
<a class="older-posts" href="{{page_url next}}">下一頁 →</a>
{{/if}}
</nav>
- 我們可以通過如下代碼將原來點(diǎn)擊上一頁、下一頁的翻頁模式變成滾動翻頁
<script>
$(document).ready(function (){
$('#posts-content').infinitescroll({
navSelector : "nav.pagination",
nextSelector : "nav.pagination a:last",
itemSelector : "article"
});
});
</script>
使用解析
- 通過id選擇器
$('#posts-content')選中post列表的循環(huán)展示區(qū)域伐弹，后續(xù)加載的內(nèi)容會被append到這個節(jié)點(diǎn)之下 -
navSelector參數(shù)拉馋，用來選中翻頁模塊的html位置，如上配置即選中了nav標(biāo)簽class為pagination的元素惨好，框架會將這部分內(nèi)容隱藏（隱藏原來的翻頁模塊） -
nextSelector參數(shù)椅邓，標(biāo)出下一頁的請求鏈接，框架根據(jù)此獲取下一頁的請求以發(fā)起ajax請求獲取下一頁的html內(nèi)容 -
itemSelector參數(shù)昧狮，在發(fā)起了下一頁請求之后，通過這個參數(shù)的配置來截取下一頁html內(nèi)容中post部分來填充到navSelector選中位置的最后
進(jìn)階配置
在完成了上面操作之后板壮，還可以做一些進(jìn)階的配置逗鸣，比如修改加載中的文字描述，沒有內(nèi)容之后的提示內(nèi)容等等。
下面是本站使用的配置撒璧，供參考透葛。
<script>
$(document).ready(function (){
$('#posts-content').infinitescroll({
navSelector : "nav.pagination",
nextSelector : "nav.pagination a:last",
itemSelector : "article",
animate : false,
bufferPx: 5,
extraScrollPx: 50,
loading: {
speed: 'fast',
selector: null,
msgText: '加載中...',
finishedMsg:'<div class="post-loading">沒有更多了</div>'
}
});
});
</script>
更多參數(shù)配置可參見：infinite-scroll
