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

2020-04-07 · 树下魅狐 · · 本文共1,393个字,预计阅读需要6分钟。

Una | 尤娜

一个基于Spring Boot 2.0构建的Java博客系统

分页函数

在一个网站中,很多页面都需要用到数据分页导航栏,为了便于主题模板的制作,尤娜提供了内置的分页函数,通过分页函数,能够自动对数据进行分页,并生成分页导航按钮。在使用分页函数之前,请在对应的页面中增加下面的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个参数,具体如下表:

参数 类型 是否必须 说明
url String 当前页面的url
id Integer 当前栏目编号
offset Integer 当前页码,默认为第一页
spans Integer 分页按钮显示数量,默认5个按钮
size Integer 每页加载的数据量,默认15条数据

提示:

分页函数一般需要和对应的内容标签一起使用,内容标签负责加载具体的数据,分页函数用于生成对应的分页按钮。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中,新增了文章类型字段,系统中的文章分为两种类型:博客和文档。具体参数如下:

参数 类型 是否必须 说明
url String 当前页面的url
style Integer 博客类型,可选值:0-博客,1-文档
offset Integer 当前页码,默认为第一页
spans Integer 分页按钮显示数量,默认5个按钮
size Integer 每页加载的数据量,默认15条数据

示例:

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

输出:

说明:

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

u_tagPage()

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

参数 类型 是否必须 说明
url String 当前页面的url
id Integer 当前标签编号
offset Integer 当前页码,默认为第一页
spans Integer 分页按钮显示数量,默认5个按钮
size Integer 每页加载的数据量,默认15条数据

示例:

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

输出:

说明:

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