laravel自定义分页

       本篇博客将给大家讲述如何修改博客的分页样式，这是博主前几天再修改界面分页样式所遇到的问题。 

       博主也是先百度，但是网络上的答案也是层出不穷,很多人其实都没实践过，而是随便贴代码就这样，在这里我真的要吐槽一下，好了进入正轨。

       我们先新建一个页面，在resources/views/home/partials中建一个页面(由于我的前端页面是放在home文件夹中,看个人情况存放),我自己命名的的文件名为paginator.blade.php。建完这个页面之后，我们在根目录中的vendor/laravel/framework/src/Illuminate/Pagination/resources/view看到有4个文件,我们打开default.blade.php,并复制代码到我们前面创建的页面中,代码如下：

@if ($paginator->hasPages())
    {{-- Previous Page Link --}}
    @if ($paginator->onFirstPage())
     «        
    @else
     previousPageUrl() }}" rel="prev" _href="{{ $paginator->previousPageUrl() }}">
     «        
    @endif
    {{-- Pagination Elements --}}
    @foreach ($elements as $element)
       {{-- "Three Dots" Separator --}}
       @if (is_string($element))
           {{ $element }}            
       @endif
       {{-- Array Of Links --}}
       @if (is_array($element))
           @foreach ($element as $page => $url)
               @if ($page == $paginator->currentPage())
                  {{ $page }}                   
               @else
                  {{ $page }}                    
               @endif
           @endforeach
        @endif
    @endforeach
    {{-- Next Page Link --}}
    @if ($paginator->hasMorePages())
        nextPageUrl() }}" rel="next" _href="{{ $paginator->nextPageUrl() }}"> 
        »        
    @else
        »        
    @endif
@endif

       然后我们开始根据样式修改里面的类，这个看个人需求，下面我就贴出我的分页样式代码，供大家参考，代码如下：

.paginator-content {
    padding: 1rem;
    margin: 3rem auto;
    border-radius: 0.2rem;
    counter-reset: pagination;
    text-align: center;
}

.paginator-content ul {
    width: 100%;
}

.paginator-content ul {
    list-style: none;
    display: inline;
    padding-left: 0px;
}

.paginator-content li {
    border: solid 1px #d6d6d6;
    border-radius: 0.2rem;
    color: #7d7d7d;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 0.9rem;
}

        写完以上代码样式后，接下来就是重要的一部,在用到分页的页面中，我们通常都是以

{{ $blog->links() }}

       这个是默认的分页样式，接下来我们就把他改成我们自己写的分页样式，代码如下：

{{ $blog->links('home.partials.paginator') }}

       

       好了，这样就成功使用自定义分页样式了。

       这期就给大家讲到这里，下期我们继续。

      更多文章请关注微信公众号