config.yml下配置信息:
~~~
gems: [jekyll-paginate]
paginate: 12
paginate_path: "page/:num/"
~~~
需要分頁的頁面需要引入
{% include posts_paginator.html %}
posts_paginator.html的內容如下:
~~~
{% for post in paginator.posts %}
<article class="excerpt excerpt-c5">
<a class="thumbnail" href={{ post.url }}>
<img src="/assets/images/cover.jpg" class="thumb" style="display: inline;">
</a>
<h2>
<a href={{ post.url }}>{{ post.title | strip_html | strip_newlines | truncate: 250 }}…
</a>
</h2>
<footer>
<a href="javascript:;" class="post-like" data-pid="135" etap="like">
<i class="fa"></i><span>χ</span>
</a>
<time class="hot">Hot</time>
<span class="post-view">{{ post.date | date: "%F"}}</span>
<span class="post-comm">{{ post.tags }}</span>
</footer>
</article>
{% endfor %}
{% include pagination.html %}
~~~
pagination.html顯示的是頁碼內容:
~~~
<!-- 分頁鏈接 -->
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="previous" style="float:left;"><< Previous</a>
{% else %}
<!-- <span class="previous">Previous</span> -->
{% endif %}
<span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path }}" class="next" style="float:right;margin-right:30px;">Next >></a>
{% else %}
<!-- <span class="next ">Next</span> -->
{% endif %}
</div>
~~~
自此,項目目錄下的分頁即可顯示。
需要注意的是,分頁引入的入口文件只能在index.html/md/markdown 文件中。為何,官方規則。
>[warning] 那么問題出來了,我要是在別的頁面顯示分頁,該如何操作呢?
* 分頁只在html文件中起作用
* paginate_path同時定義了需要被分頁的文件,本人測試這個叫index.html,具體目錄由paginate_path中的路徑定義,如果定義的目錄沒有,則會向上尋找index.html,直到根目錄的index.html,具體機制官網上沒有詳細說,所以還需要進一步實驗,
也許你會說,先之前那樣把分頁引入頁面不就行了。
太天真了,no,答案是不行的。
具體目錄由paginate_path中的路徑定義,把paginate_path改成數組行不。no,也是不行的。看后邊
不過有意思的是:paginate_path 設置為"page/:num"時,跟站點下的分頁顯示正常;設置為“archive/page/:num”時,主頁顯示不正常,而archive下的分頁顯示正常
期初我也這么搞得,就是出不來哦!
在網上搜索找到了答案,但是,我沒看明白,實際操作了下,還有報錯什么的。就這個分頁搞了兩天,我休閑的周六日,就這樣拜倒在分頁下。感覺比我追女朋友還費神。
不過好在最后實現了。改了下插件的邏輯實現的。一種成功的興奮油然而生。
pagination.rb文件修改:
~~~
# def generate(site)
# if Pager.pagination_enabled?(site)
# if template = template_page(site)
# paginate(site, template)
# else
# Jekyll.logger.warn "Pagination:", "Pagination is enabled, but I couldn't find " +
# "an index.html page to use as the pagination template. Skipping pagination."
# end
# end
# end
def generate(site)
if Pager.pagination_enabled?(site)
path_array = site.config['paginatepath']
length = path_array.length-1
for i in 0..length do
site.config['paginate_path'] = path_array[i]
if template = template_page(site)
paginate(site, template)
else
Jekyll.logger.warn "Pagination:", "Pagination is enabled, but I couldn't find " +
"an index.html page to use as the pagination template. Skipping pagination."
end
end
end
end
~~~
原來,paginate_path是個字符串設置不了數組
自此多個頁面分頁顯示就正常了!
- 1. KanCloud快捷鍵
- algate.github.io的網站建設
- algate.github.io基礎完善
- 如何在github上展示作品——為你的項目生成一個快速訪問的網址
- Github README.md 添加圖片
- git上傳github常用命令
- WEB開發文檔
- 工具相關文檔說明
- GulpJs開發文檔
- 安裝Gulp詳細教程
- 如何上傳到github
- 服務端相關文檔
- tomcat配置多域名多端口訪問
- Vue遇到的那些大坑
- vue-bulid新建問題解決方案
- vue-prev功能實現方案優劣(element)
- 常用組件使用和功能實現
- 1-文件上傳功能
- 2-select插件實現利弊
- 3-實現分步驟流程效果
- ES6-export與export default遇到的坑
- require.context()-route去中心化管理
- webpack.ensure(webpack代碼分割)
- angular爬-跪著也要爬完
- 新建遇到的問題
- 常用angular核心知識
- React初生牛犢不怕虎
- react初次見面之泥坑深譚
- react+webpack+es6精簡版HelloWorld
- create-react-app創建失敗
- create-react-app不歸路
- react用到的組件module
- react-hot-loader
- JavaScript成長之路
- Js進階
- Js模塊化編程:require.js的用法
- 淺談前端架構
- Js常見問題匯總
- 瀏覽器渲染原理及解剖瀏覽器內部工作原理
- 雅虎前端優化的35條軍規
- 常見問題描述-面試常問
- 前端性能優化-algate
- http狀態碼詳解
- 作用域,閉包,面向對象
- Js基礎知識
- Js基本功必須扎實
- 各個瀏覽器加載icon
- html特殊標簽和屬性的說明
- 個人資源總結
- 個人簡歷-絕對真實有效
- Jekyll博客創建
- Jekyll開始創建
- Jekyll文檔說明
- jekyll-paginate分頁問題
- HEXO博客創建
- es6新用法解析以及使用
- 神奇的三個點:...
- 幾大類
- coding創建hexo
- sublime相關配置
- Atom使用