为 SEO 添加 rel= 属性到 Bootpag 分页

Question

我正在使用带有 ajax 调用的 Bootpag 分页，我正在寻找一种将 rel='next' rel='prev' 添加到链接的方法，我已经根据“活动”类添加它们在所有以前的链接上使用“prev”属性，在所有下一个链接上使用“next”，但是当我使用分页时，属性不会改变。

附加属性的代码

if ( $('ul.pagination li').hasClass('active') ) {
   $('li.active').prevAll().attr("rel","prev");
 }
 if ( $('ul.pagination li').hasClass('active') ) {
   $('li.active').nextAll().attr("rel","next");
 }

分页代码

$('#pagination_container').bootpag({
    total: ${myOrdersData.totalNumberOfPages},
    leaps: true,
    firstLastUse: true,
    first: '| <',
    last: '> |',
    wrapClass: 'pagination',
    activeClass: 'active',
    disabledClass: 'disabled',
    nextClass: 'next',
    prevClass: 'prev',
    lastClass: 'last',
    firstClass: 'first'
})
  .on("page", function(event, /* page number here */ num){
    $.ajax({
      type:"get",
      url: "ordersByPageNumber?pageNumber="+num,
    })
    .done(function(data) {
     $("#previousOrders").html( data );
    });
  });

分页效果很好，只是在链接上添加了 rel 属性。

为澄清而编辑

<ul class="pagination bootpag">
<li data-lp="1" class="first" rel="prev">
  <a href="javascript:void(0);">| &lt;</a>
</li>
<li data-lp="1" class="prev" rel="prev">
  <a href="javascript:void(0);">&lt;</a>
</li>
<li data-lp="1" class="">
  <a href="javascript:void(0);">1</a>
</li>
<li data-lp="2" rel="next" class="active">
  <a href="javascript:void(0);">2</a>
</li>
<li data-lp="3" rel="next">
  <a href="javascript:void(0);">3</a>
</li>
<li data-lp="3" class="next" rel="next">
  <a href="javascript:void(0);">&gt;</a>
</li><li data-lp="3" class="last" rel="next">
  <a href="javascript:void(0);">&gt; |</a>
</li>
</ul>

Answer 1

基于上面的代码，在你的“页面”事件处理程序中是这样的：

.on("page", function(event, /* page number here */ num){

    var $lis = $('.bootpag li').not('.first, .last, .prev, .next'),
        $active = $('.bootpag li.active');

    $lis.removeAttr('rel');
    $active.prev().attr('rel', 'prev');
    $active.next().attr('rel', 'next');

    ...the rest of your code