本篇博客将给大家讲述如何修改博客的分页样式,这是博主前几天再修改界面分页样式所遇到的问题。
博主也是先百度,但是网络上的答案也是层出不穷,很多人其实都没实践过,而是随便贴代码就这样,在这里我真的要吐槽一下,好了进入正轨。
我们先新建一个页面,在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') }}
好了,这样就成功使用自定义分页样式了。
这期就给大家讲到这里,下期我们继续。
更多文章请关注微信公众号