修改國際化文件，zh-cn

views:pagination:first: "首頁"last: "尾頁"previous: "上一頁"next: "下一頁"truncate: "&hellip;"helpers:page_entries_info:one_page:display_entries:zero: "沒有任何 %{entry_name}"one: "顯示 <b>1</b> 個 %{entry_name}"other: "顯示 <b>全部 %{count}</b> 個 %{entry_name}"more_pages:display_entries: "顯示 <b>%{total}</b> 個 %{entry_name} 中的第 <b>%{first}&nbsp;-&nbsp;%{last}</b> 個"

haml添加分頁插件

.col-md-12.site-theme-paginate-wrapper= paginate @site_themes, window: 2, left: 1, right: 1

生成的頁碼html

<div class="col-md-12 site-theme-paginate-wrapper"><nav class="pagination"><span class="first"><a href="/site_themes">首頁</a></span><span class="prev"><a rel="prev" href="/site_themes?page=2">上一頁</a></span><span class="page"><a href="/site_themes">1</a></span><span class="page"><a rel="prev" href="/site_themes?page=2">2</a></span><span class="page current"> //當前頁，里面沒有a3</span><span class="page"><a rel="next" href="/site_themes?page=4">4</a></span><span class="page"><a href="/site_themes?page=5">5</a></span><span class="page gap">…</span><span class="page"><a href="/site_themes?page=18">18</a></span><span class="next"><a rel="next" href="/site_themes?page=4">下一頁</a></span><span class="last"><a href="/site_themes?page=18">尾頁</a></span></nav></div>

設置分頁樣式

.site-theme-paginate-wrapper .pagination span a, .site-theme-paginate-wrapper .pagination span.current{height: 66px;line-height: 66px;padding: 0 26px;text-align: center;font-size: 18px;color: #414141;border: 1px solid #d9d9d9;display: inline-block;margin-right: 14px;background: #fff; } .site-theme-paginate-wrapper .pagination span a:hover, .site-theme-paginate-wrapper .pagination span.current {height: 68px;line-height: 68px;background: #dc0000;color: #fff; }

?

轉載于:https://www.cnblogs.com/znsongshu/p/7346906.html

總結

以上是生活随笔為你收集整理的kaminari分页插件样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。