Laravel博客开发｜自定义分页

Laravel 项目默认情况下&＃xff0c;由分页器生成的 HTML 与 Tailwind CSS 框架 兼容&＃xff0c;然而&＃xff0c;我使用的是 Bulma CSS 框架&＃xff0c;现在需要自定义一个兼容 Bulma CSS 框架兼容的分页。

导出默认视图

使用 vendor:publish 命令将 Laravel 项目自带的分页导出到 resources/views/vendor 目录&＃xff1a;

php artisan vendor:publish --tag&＃61;laravel-pagination


这个命令将会把分页视图导出到 resources/views/vendor/pagination 目录。该目录 9 个视图文件&＃xff0c;其中 tailwind.blade.php文件就是默认的分页视图。

现在最简单的方式是直接修改 tailwind.blade.php文件来实现自定义分页&＃xff0c;但我想在保持已有分页的情况下&＃xff0c;再新增一个兼容 Bulma CSS 框架的分页。

添加分页视图

在 resources/views/vendor/pagination目录下添加一个 bulma.balde.php文件&＃xff1a;

touch resources/views/vendor/pagination/bulma.blade.php


打开新建的文件&＃xff0c;添加如下内容&＃xff1a;
resources/views/vendor/pagination/bulma.blade.php。

&＃64;if ($paginator->hasPages())<nav class&＃61;"pagination is-centered" role&＃61;"navigation" aria-label&＃61;"pagination">&＃64;if ($paginator->onFirstPage())<a class&＃61;"pagination-previous" disabled>上一页</a>&＃64;else<a class&＃61;"pagination-previous" href&＃61;"%7B%7B%20%24paginator->previousPageUrl()%20%7D%7D">上一页</a>&＃64;endif&＃64;if ($paginator->hasMorePages())<a class&＃61;"pagination-next" href&＃61;"%7B%7B%20%24paginator->nextPageUrl()%20%7D%7D">下一页</a>&＃64;else<a class&＃61;"pagination-next " disabled>下一页</a>&＃64;endif<ul class&＃61;"pagination-list">{{-- Pagination Elements --}}&＃64;foreach ($elements as $element){{-- "Three Dots" Separator --}}&＃64;if (is_string($element))<li class&＃61;"page-item disabled"><span class&＃61;"page-link">{{ $element }}</span></li>&＃64;endif{{-- Array Of Links --}}&＃64;if (is_array($element))&＃64;foreach ($element as $page &＃61;> $url)&＃64;if ($page &＃61;&＃61; $paginator->currentPage())<li><a class&＃61;"pagination-link is-current" aria-label&＃61;"Page {{ $page }}" aria-current&＃61;"page">{{ $page }}</a></li>&＃64;else<li><a href&＃61;"%7B%7B%20%24url%20%7D%7D" class&＃61;"pagination-link" aria-label&＃61;"Goto page {{ $page }}">{{ $page }}</a></li>&＃64;endif&＃64;endforeach&＃64;endif&＃64;endforeach</ul></nav>
&＃64;endif


服务提供者

现在修改 App\Providers\AppServiceProvider 服务提供者中的 boot 方法&＃xff1a;

namespace App\Providers;use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;class AppServiceProvider extends ServiceProvider
{/*** Register any application services.** &＃64;return void*/public function register(){//}/*** Bootstrap any application services.** &＃64;return void*/public function boot(){Paginator::defaultView(&＃39;vendor.pagination.bulma&＃39;);}
}


上面代码中&＃xff0c;使用 Paginator 提供的 defaultView方法设置默认分页&＃xff0c;其中 vendor/pagination.bulma参数指定分页视图。

展示

使用浏览器访问 [http://blog.test/blog](http://blog.test/blog) 可以看到分页样式如下所示&＃xff1a;