Pagination eingebaut

site/templates/blog.php

@@ -2,7 +2,7 @@
 
 <?php
 // Filterfunktionalität implementieren
-        $posts = $page->children()->sortBy('date', 'desc');
+$posts = $page->children()->sortBy('date', 'desc')->paginate(5);
 
 // Nach Kategorie (Tag) filtern
 if ($tag = param('tag')) {
@@ -23,7 +23,8 @@
                 </div>
                 <div>
                     <?php foreach ($post->tags()->split() as $tag): ?>
-                        <a href="<?= $page->url(['params' => ['tag' => $tag]]) ?>" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"><?= $tag ?></a>
+                        <a href="<?= $page->url(['params' => ['tag' => $tag]]) ?>"
+                            class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"><?= $tag ?></a>
                     <?php endforeach; ?>
                 </div>
             </div>
@@ -57,6 +58,37 @@
         </div>
     </article>
 <?php endforeach ?>
+<?php $pagination = $posts->pagination(); ?>
+<?php if ($pagination->hasPages()): ?>
+    <nav class="flex justify-between items-center my-12 border-t border-gray-100 pt-8">
+        <?php if ($pagination->hasPrevPage()): ?>
+            <a href="<?= $pagination->prevPageUrl() ?>"
+                class="flex items-center gap-2 rounded-full bg-gray-50 px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition-colors">
+                &larr; Neuere Beiträge
+            </a>
+        <?php else: ?>
+            <span class="flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-gray-300 cursor-not-allowed">
+                &larr; Neuere Beiträge
+            </span>
+        <?php endif ?>
+
+        <span class="text-xs font-medium text-gray-400">
+            Seite <?= $pagination->page() ?> von <?= $pagination->pages() ?>
+        </span>
+
+        <?php if ($pagination->hasNextPage()): ?>
+            <a href="<?= $pagination->nextPageUrl() ?>"
+                class="flex items-center gap-2 rounded-full bg-gray-50 px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition-colors">
+                Ältere Beiträge &rarr;
+            </a>
+        <?php else: ?>
+            <span class="flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-gray-300 cursor-not-allowed">
+                Ältere Beiträge &rarr;
+            </span>
+        <?php endif ?>
+    </nav>
+<?php endif ?>
+
 
 <?php if (param('tag')): ?>
     <div class="my-8">
@@ -64,6 +96,4 @@
             Alle Beiträge anzeigen
         </a>
     </div>
-    <?php endif ?>
-
-<?php endsnippet() ?>
+<?php endif ?><?php endsnippet() ?>