ページネーション

app/Http/Controllers/Home/Index.php

@@ -22,7 +22,7 @@ class Index {
   public function index () {
     $get = DB::table('blg_content')->where('isPost', 1);
     if ($this->valid['blg_addpost'] == 0 && $this->valid['blg_editpost'] == 0) $get = $get->where('public_status', 0);
-    $get = $get->orderBy('publish_date', 'desc')->get();
+    $get = $get->orderBy('publish_date', 'desc')->paginate(10);
     setlocale(LC_ALL, 'ja_JP.utf8');
 
     return view('pages.site.index', ['res' => $get, 'menu' => $this->menu, 'user' => $this->user]);

resources/sass/app.scss

@@ -28,6 +28,7 @@
 @import "conponent/check";
 @import "conponent/form";
 @import "conponent/modal";
+@import "conponent/pagination";
 @import "conponent/select";
 
 // テーブル

resources/sass/conponent/_pagination.scss

@@ -0,0 +1,49 @@
+.page-link  {
+  background: linear-gradient(to bottom, $evil4 0%, $evil1 34%, $evil6 100%);
+}
+
+.page-link, .page-item .disabled {
+  text-align: center;
+  color: $white1;
+  padding: 8px 20px;
+  font-size: 28px;
+  border-bottom: solid 2px $suwa03;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s;
+  margin: auto;
+}
+
+.page-link > a {
+  color: $white1;
+}
+
+.page-link > a:hover {
+  text-decoration: none;
+}
+
+.page-link:hover {
+  color: $white1;
+  background: linear-gradient(to bottom, $evil3 0%, $evil0 34%, $evil2 100%);
+}
+
+.page-item.disabled > .page-link {
+  color: $white1;
+  background: linear-gradient(to bottom, $black3 0%, $grey4 34%, $grey5 100%);
+  border-color: $suwa04;
+}
+
+.page-item.active > .page-link {
+  color: $white1;
+  background: linear-gradient(to bottom, $suwa04 0%, $suwa01 34%, $suwa06 100%);
+  border-color: $suwa04;
+}
+
+.page-item.active > .page-link:hover {
+  color: $white1;
+  background: linear-gradient(to bottom, $suwa03 0%, $suwa00 34%, $suwa02 100%);
+}
+
+.pagination {
+  margin: auto;
+  padding: 8px;
+}

resources/views/pages/site/index.blade.php

@@ -12,4 +12,8 @@
   @endforeach
 </div>
 
+<div class="within" style="background-color: rgb(49, 54, 59); margin: 32px auto 0px">
+  {{ $res->links() }}
+</div>
+
 @endsection