Pagination eingebaut

This commit is contained in:
2025-12-18 19:13:46 +01:00
parent bbe05bd765
commit 30a1c4ad8e
+45 -15
View File
@@ -1,16 +1,16 @@
<?php snippet('layout', slots: true) ?>
<?php
// Filterfunktionalität implementieren
$posts = $page->children()->sortBy('date', 'desc');
<?php
// Filterfunktionalität implementieren
$posts = $page->children()->sortBy('date', 'desc')->paginate(5);
// Nach Kategorie (Tag) filtern
if($tag = param('tag')) {
// Nach Kategorie (Tag) filtern
if ($tag = param('tag')) {
$posts = $posts->filterBy('tags', $tag, ',');
}
?>
}
?>
<?php foreach($posts as $post): ?>
<?php foreach ($posts as $post): ?>
<article class="relative flex flex-col gap-8 lg:flex-row py-12">
<div class="relative aspect-video sm:aspect-2/1 lg:aspect-square lg:w-64 lg:shrink-0">
<img src="<?= $post->image()->url() ?>" alt="" class="absolute inset-0 size-full rounded-xl object-cover" />
@@ -22,8 +22,9 @@
<time class="text-gray-500"><?= $post->date()->toDate("d.m.Y") ?></time>
</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>
<?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>
<?php endforeach; ?>
</div>
</div>
@@ -56,14 +57,43 @@
<?php endif ?>
</div>
</article>
<?php endforeach ?>
<?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 ?>
<?php if(param('tag')): ?>
<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">
<a href="<?= $page->url() ?>" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded">
Alle Beiträge anzeigen
</a>
</div>
<?php endif ?>
<?php endsnippet() ?>
<?php endif ?><?php endsnippet() ?>