本文详解如何在 Laravel 8 中完全控制分页 HTML 结构，解决 links() 方法嵌入导致标签错位的问题，通过自定义分页视图实现精准渲染 Prev/Next 按钮与数字页码，兼容搜索参数（withQueryString()），并保持语义化与可维护性。

本文详解如何在 laravel 8 中完全控制分页 html 结构，解决 `links()` 方法嵌入导致标签错位的问题，通过自定义分页视图实现精准渲染 prev/next 按钮与数字页码，兼容搜索参数（`withquerystring()`），并保持语义化与可维护性。

在 Laravel 中，默认的 {{ $articles->links() }} 会渲染一个完整的 <nav></nav> 包裹的分页组件，而你在 Blade 模板中已手动编写了符合设计规范的 <nav class="pgn"></nav> 结构——此时若直接混用 !! $articles->links() !!，会导致 HTML 嵌套混乱（例如外层 <ul></ul> 内重复出现 <nav></nav> 或 <ul></ul>），破坏 DOM 层级，造成样式失效或逻辑错误。这就是你遇到“Prev/Next 可用，中间页码不显示或结构错乱”的根本原因：Laravel 默认分页视图无法与你手写的容器结构共存，它试图“自己画整个盒子”，而非只提供“盒子里的按钮”。

✅ 正确解法：使用自定义分页视图（推荐且标准）

Laravel 提供了开箱即用的分页视图定制机制，无需修改核心代码，仅需两步：

1. 发布分页视图资源

运行命令，将默认分页模板复制到 resources/views/vendor/pagination/ 目录下：

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

执行后，你会看到 resources/views/vendor/pagination/default.blade.php —— 这就是你要修改的起点。

2. 创建并配置自定义视图（如 custom.blade.php）

在 resources/views/vendor/pagination/ 下新建文件 custom.blade.php，按你的 HTML 结构重写逻辑（注意：变量名统一为 $paginator，非 $articles）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

@unless($paginator->onFirstPage())
    

Prev

@else

Prev

@endunless @foreach ($elements as $element) @if (is_string($element))

{{ $element }}

@endif @if (is_array($element)) @foreach ($element as $page => $url) @if ($page == $paginator->currentPage())

{{ $page }}

@else

{{ $page }}

@endif @endforeach @endif @endforeach @unless($paginator->hasMorePages())

Next

@else

Next

@endunless

⚠️ 关键说明：

• 使用 $paginator（Laravel 传递的分页器实例），不是控制器中的 $articles；
• withQueryString() 确保翻页时保留 ?search=xxx 等查询参数；
• onFirstPage() / hasMorePages() 是分页器内置方法，安全判断边界；
• class="disabled" + <span></span> 用于禁用状态（无链接），符合可访问性（a11y）要求。

3. 在页面模板中调用自定义视图

回到你的 Blade 模板（如 index.blade.php），替换原分页代码为：

<nav class="pgn"><ul>
      {{-- Prev --}}
      @if ($articles->onFirstPage())
          <li class="disabled"><span class="pgn__prev">Prev</span></li>
      @else
          <li><a class="pgn__prev" href="%7B%7B%20%24articles->withQueryString()->previousPageUrl()%20%7D%7D">Prev</a></li>
      @endif

      {{-- 自定义分页项 --}}
      {{ $articles->links('vendor.pagination.custom') }}

      {{-- Next --}}
      @if ($articles->hasMorePages())
          <li><a class="pgn__next" href="%7B%7B%20%24articles->withQueryString()->nextPageUrl()%20%7D%7D">Next</a></li>
      @else
          <li class="disabled"><span class="pgn__next">Next</span></li>
      @endif
  </ul></nav>

✅ 此时 HTML 结构 100% 符合你的原始设计：外层 <nav></nav> + <ul></ul> 完全可控，内部仅插入 <li> 序列，无额外包裹，CSS 类名（pgn__prev/pgn__num/current）精准生效。

? 额外建议

• SEO & 可访问性：确保 <a></a> 标签包含 rel="prev"/rel="next" 属性（可在自定义视图中添加），有助于搜索引擎理解分页关系；
• 移动端适配：若页码过多，可在自定义视图中加入“首/末页”或动态省略逻辑（如仅显示当前页 ±2 页）；
• 复用性：同一套 custom.blade.php 可被所有分页对象（$articles, $comments 等）复用，只需调用 ->links('vendor.pagination.custom')。

通过该方案，你既保留了 Laravel 分页的全部功能（查询参数继承、数据绑定、响应式支持），又完全掌控 HTML 输出结构，是 Laravel 8+ 中定制分页的标准实践路径。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！