尤娜v1.2.2版本标签指南-Part II(分页函数)

分页函数

在一个网站中，很多页面都需要用到数据分页导航栏，为了便于主题模板的制作，尤娜提供了内置的分页函数，通过分页函数，能够自动对数据进行分页，并生成分页导航按钮。在使用分页函数之前，请在对应的页面中增加下面的CSS样式：

.pagination {
    margin: 30px;
    padding: 0px 0 56px 0;
    border-bottom: 1px solid #f2f2f2; 
}
.pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 13px;
}
.pagination ul li {
    margin: 0 2px 0 2px;
    display: inline;
    line-height: 1;
}
.pagination ul li a {
    text-decoration: none;
}
.pagination .pre {
    float: left;
}
.pagination .next {
    float: right;
}
.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
}
?
.page-link:hover {
  z-index: 2;
  color: #0056b3;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}
?
.page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
?
.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
?
.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
?
.page-item.active .page-link {
  z-index: 1;
  color: #ffffff;
  background-color: #007bff;
  border-color: #007bff;
}
?
.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #ffffff;
  border-color: #dee2e6;
}

补充：

上述的CSS样式不是必须的，你可以根据自己页面的版式，自定义分页按钮的样式。

你可以在com.ramostear.unaboot.freemarker.function包下查询到分页函数的相关源代码。尤娜提供的分页函数有栏目数据分页，文章分页和标签分页。

u_categoryPage()

u_categoryPage()是对栏目的文章进行分页处理，并生成导航按钮。该函数接收5个参数，具体如下表：

提示：

分页函数一般需要和对应的内容标签一起使用，内容标签负责加载具体的数据，分页函数用于生成对应的分页按钮。u_categoryPage()函数需要和u_category_page_detail内容标签搭配使用，且配置参数需要一致，否则实际加载的数据和分页按钮无法匹配。

示例：

...
<div class="pagination">
    ${u_categoryPage(una+"/category/"+category.slug category.id offset 5 15)}
</div>
...

说明：

una+"/category/"+category.slug : 当前的url地址

category.id : 当前栏目ID

offset : 当前的页码，该值由后台传递到页面

5 ：分页按钮数量

15 ：每页显示的数据条数

输出：

...
<div class="pagination">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0);">Previous</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="javascript:void(0);">
                1<span class="sr-only">(current)</span>
            </a>
        </li>
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0);">Next</a>
        </li>
    </ul>
</div>
...

效果：

u_postPage()

u_postPage()函数是对尤娜系统中所有已发布的博客进行分页，与u_categoryPage()函数不同的是：u_postPage()函数不需要提供栏目的编号，但需要提供文章的类型。在尤娜V1.2.2中，新增了文章类型字段，系统中的文章分为两种类型：博客和文档。具体参数如下：

示例：

<div class="pagination">
    ${u_postPage(una+"/index" 0 offset 5 15)}
</div>

输出：

说明：

u_postPage()函数同样需要和u_post_page_detail内容标签一起使用。

u_tagPage()

u_tagPage()函数用于生成标签的数据分页按钮，此函数的用法与u_categoryPage()函数一致，详细参数如下：

示例：

...
<div class="pagination">
    ${u_tagPage(una+"/tag/"+tag.name tag.id offset 5 15)}
</div>
...

输出：

说明：

u_tagPage()函数同样需要和u_tag_page_detail内容标签一起使用，且配置参数需要保持一致。