Laravel项目中使用MaterializeCSS优化分页样式的技术咨询

我身边好几个做Laravel的朋友都在用MaterializeCSS，分页样式优化其实很简单，核心就是把Laravel默认的分页结构改成Materialize的组件风格就行，给你分享两种实用方案：

方案一：自定义全局分页视图（一劳永逸） #

Laravel允许我们替换默认的分页视图，这样所有页面的分页都会自动用上Materialize样式：

1. 首先导出Laravel默认的分页视图文件到项目本地：

php artisan vendor:publish --tag=laravel-pagination

执行完后，你会在 resources/views/vendor/pagination 目录下看到默认的分页视图文件（比如bootstrap.blade.php，默认是Bootstrap风格）。

2. 打开这个文件，把里面的代码替换成下面的Materialize适配版本：

@if ($paginator->hasPages())
    <ul class="pagination center-align">
        {{-- 上一页按钮 --}}
        @if ($paginator->onFirstPage())
            <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
        @else
            <li class="waves-effect"><a href="{{ $paginator->previousPageUrl() }}"><i class="material-icons">chevron_left</i></a></li>
        @endif

        {{-- 页码列表 --}}
        @foreach ($elements as $element)
            {{-- 省略号分隔符 --}}
            @if (is_string($element))
                <li class="disabled"><span>{{ $element }}</span></li>
            @endif

            {{-- 页码链接组 --}}
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <li class="active"><a href="#!">{{ $page }}</a></li>
                    @else
                        <li class="waves-effect"><a href="{{ $url }}">{{ $page }}</a></li>
                    @endif
                @endforeach
            @endif
        @endforeach

        {{-- 下一页按钮 --}}
        @if ($paginator->hasMorePages())
            <li class="waves-effect"><a href="{{ $paginator->nextPageUrl() }}"><i class="material-icons">chevron_right</i></a></li>
        @else
            <li class="disabled"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
        @endif
    </ul>
@endif

3. 之后你在Blade里还是用 {{$services->links()}} 调用分页，就会自动渲染成Materialize的样式了～

方案二：在当前视图中手动构建分页（快速临时修改） #

如果不想改动全局视图，也可以直接在你的home.blade.php里手动循环分页数据，构建Materialize的分页结构：

<div class="row center-align">
    @if($services->hasPages())
        <ul class="pagination">
            {{-- 上一页 --}}
            @if($services->onFirstPage())
                <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
            @else
                <li class="waves-effect"><a href="{{ $services->previousPageUrl() }}"><i class="material-icons">chevron_left</i></a></li>
            @endif

            {{-- 页码按钮 --}}
            @foreach(range(1, $services->lastPage()) as $page)
                @if($page == $services->currentPage())
                    <li class="active"><a href="#!">{{ $page }}</a></li>
                @else
                    <li class="waves-effect"><a href="{{ $services->url($page) }}">{{ $page }}</a></li>
                @endif
            @endforeach

            {{-- 下一页 --}}
            @if($services->hasMorePages())
                <li class="waves-effect"><a href="{{ $services->nextPageUrl() }}"><i class="material-icons">chevron_right</i></a></li>
            @else
                <li class="disabled"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
            @endif
        </ul>
    @endif
</div>

最后别忘了Materialize的JS初始化！ #

要让分页的波纹点击效果正常工作，确保你已经引入了Materialize的JS文件，并且初始化了分页组件：

<!-- 引入Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- 初始化分页组件 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.pagination');
    var instances = M.Pagination.init(elems);
});
</script>

这样改完之后，你的分页就会完全符合Materialize的设计风格啦～

内容的提问来源于stack exchange，提问作者Atef Rihane