yufan.me/src/layouts/posts/CategoryLayout.astro

37 lines
1.2 KiB
Plaintext

---
import Pagination from '@/components/page/pagination/Pagination.astro';
import PostSquare from '@/components/page/post/PostSquare.astro';
import { slicePosts } from '@/helpers/formatter';
import type { Category, Post } from '@/helpers/schema';
import BaseLayout from '@/layouts/BaseLayout.astro';
import options from '@/options';
interface Props {
category: Category;
posts: Post[];
pageNum: number;
}
const { category, posts, pageNum } = Astro.props;
const { currentPosts, totalPage } = slicePosts(posts, pageNum, options.settings.pagination.category);
---
<BaseLayout title={category.name}>
<div class="px-lg-2 px-xxl-5 py-3 py-md-4 py-xxl-5">
<div class="container">
<div class="mb-3 mb-lg-4">
<h1>{category.name}</h1>
<div class="text-muted mt-1">
{category.description.split('\n').map((line) => (line !== '' ? <p>{line}</p> : ''))}
</div>
</div>
<div class="row g-2 g-md-3 g-xxl-4 list-grouped">
{currentPosts.map((post, index) => <PostSquare post={post} first={index === 0} />)}
</div>
<div class="mt-4 mt-lg-5">
<Pagination current={pageNum} total={totalPage} rootPath={category.permalink} />
</div>
</div>
</div>
</BaseLayout>