kaminari分页插件样式

修改国际化文件，zh-cn

  views:
    pagination:
      first: "首页"
      last: "尾页"
      previous: "上一页"
      next: "下一页"
      truncate: "…"
    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">  //当前页，里面没有a
            3
          </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;
}