mirror of
https://github.com/KazooTTT/kazoottt-blog-v2.git
synced 2025-06-24 11:11:29 +08:00
feat: 新增分类
This commit is contained in:
KazooTTT
74
src/pages/categories/[category]/[...page].astro
Normal file
74
src/pages/categories/[category]/[...page].astro
Normal file
@ -0,0 +1,74 @@
|
||||
---
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import Pagination from "@/components/Paginator.astro";
|
||||
import PostPreview from "@/components/blog/PostPreview.astro";
|
||||
import { getAllPosts, getUniqueCategories } from "@/data/post";
|
||||
import PageLayout from "@/layouts/Base.astro";
|
||||
import { collectionDateSort } from "@/utils/date";
|
||||
import type { GetStaticPaths, Page } from "astro";
|
||||
|
||||
export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
|
||||
const allPosts = await getAllPosts();
|
||||
const sortedPosts = allPosts.sort(collectionDateSort);
|
||||
const uniqueCategories = getUniqueCategories(sortedPosts);
|
||||
|
||||
return uniqueCategories.flatMap((category) => {
|
||||
const filterPosts = sortedPosts.filter((post) => post.data.category === category);
|
||||
return paginate(filterPosts, {
|
||||
pageSize: 10,
|
||||
params: { category },
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
interface Props {
|
||||
page: Page<CollectionEntry<"post">>;
|
||||
}
|
||||
|
||||
const { page } = Astro.props;
|
||||
const { category } = Astro.params;
|
||||
|
||||
const meta = {
|
||||
description: `View all posts with the category - ${category}`,
|
||||
title: `Category: ${category}`,
|
||||
};
|
||||
|
||||
const paginationProps = {
|
||||
...(page.url.prev && {
|
||||
prevUrl: {
|
||||
text: "← Previous Categories",
|
||||
url: page.url.prev,
|
||||
},
|
||||
}),
|
||||
...(page.url.next && {
|
||||
nextUrl: {
|
||||
text: "Next Categories →",
|
||||
url: page.url.next,
|
||||
},
|
||||
}),
|
||||
};
|
||||
---
|
||||
|
||||
<PageLayout meta={meta}>
|
||||
<div class="mb-6 flex items-center">
|
||||
<h1 class="sr-only">Posts with the category {category}</h1>
|
||||
<a class="title text-accent" href="/categories/"
|
||||
><span class="sr-only">All {" "}</span>Categories</a
|
||||
>
|
||||
<span aria-hidden="true" class="ms-2 me-3 text-xl">→</span>
|
||||
<span aria-hidden="true" class="text-xl">#{category}</span>
|
||||
</div>
|
||||
<section aria-labelledby={`categories-${category}`}>
|
||||
<h2 id={`categories-${category}`} class="sr-only">Post List</h2>
|
||||
<ul class="space-y-4">
|
||||
{
|
||||
page.data.map((p) => (
|
||||
<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
|
||||
<PostPreview as="h2" post={p} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<Pagination {...paginationProps} />
|
||||
</section>
|
||||
</PageLayout>
|
||||
35
src/pages/categories/index.astro
Normal file
35
src/pages/categories/index.astro
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
import { getAllPosts, getUniqueCategoriesWithCount } from "@/data/post";
|
||||
import PageLayout from "@/layouts/Base.astro";
|
||||
|
||||
const allPosts = await getAllPosts();
|
||||
const allCategories = getUniqueCategoriesWithCount(allPosts);
|
||||
|
||||
const meta = {
|
||||
description: "A list of all the categories I've written about in my posts",
|
||||
title: "All Categories",
|
||||
};
|
||||
---
|
||||
|
||||
<PageLayout meta={meta}>
|
||||
<h1 class="title mb-6">Categories</h1>
|
||||
<ul class="space-y-4">
|
||||
{
|
||||
allCategories.map(([item, val]) => (
|
||||
<li class="flex items-center gap-x-2">
|
||||
<a
|
||||
class="cactus-link inline-block"
|
||||
data-astro-prefetch
|
||||
href={`/categories/${item}/`}
|
||||
title={`View posts with the category: ${item}`}
|
||||
>
|
||||
#{item}
|
||||
</a>
|
||||
<span class="inline-block">
|
||||
- {val} Post{val > 1 && "s"}
|
||||
</span>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</PageLayout>
|
||||
@ -2,7 +2,7 @@
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import Pagination from "@/components/Paginator.astro";
|
||||
import PostPreview from "@/components/blog/PostPreview.astro";
|
||||
import { getAllPosts, getUniqueTags, groupPostsByYear } from "@/data/post";
|
||||
import { getAllPosts, getUniqueCategories, getUniqueTags, groupPostsByYear } from "@/data/post";
|
||||
import PageLayout from "@/layouts/Base.astro";
|
||||
import { collectionDateSort } from "@/utils/date";
|
||||
import type { GetStaticPaths, Page } from "astro";
|
||||
@ -11,20 +11,23 @@ import { Icon } from "astro-icon/components";
|
||||
export const getStaticPaths = (async ({ paginate }) => {
|
||||
const MAX_POSTS_PER_PAGE = 10;
|
||||
const MAX_TAGS = 7;
|
||||
const MAX_CATEGORIES = 7;
|
||||
const allPosts = await getAllPosts();
|
||||
const uniqueTags = getUniqueTags(allPosts).slice(0, MAX_TAGS);
|
||||
const uniqueCategories = getUniqueCategories(allPosts).slice(0, MAX_CATEGORIES);
|
||||
return paginate(allPosts.sort(collectionDateSort), {
|
||||
pageSize: MAX_POSTS_PER_PAGE,
|
||||
props: { uniqueTags },
|
||||
props: { uniqueTags, uniqueCategories },
|
||||
});
|
||||
}) satisfies GetStaticPaths;
|
||||
|
||||
interface Props {
|
||||
page: Page<CollectionEntry<"post">>;
|
||||
uniqueTags: string[];
|
||||
uniqueCategories: string[];
|
||||
}
|
||||
|
||||
const { page, uniqueTags } = Astro.props;
|
||||
const { page, uniqueTags, uniqueCategories } = Astro.props;
|
||||
|
||||
const meta = {
|
||||
description: "Read my collection of posts and the things that interest me",
|
||||
@ -79,47 +82,96 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
|
||||
}
|
||||
<Pagination {...paginationProps} />
|
||||
</div>
|
||||
{
|
||||
!!uniqueTags.length && (
|
||||
<aside>
|
||||
<h2 class="title mb-4 flex items-center gap-2 text-lg">
|
||||
Tags
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none" stroke="none" />
|
||||
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
|
||||
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
|
||||
<path d="M6 9h-.01" />
|
||||
</svg>
|
||||
</h2>
|
||||
<ul class="flex flex-wrap gap-2">
|
||||
{uniqueTags.map((tag) => (
|
||||
<li>
|
||||
<a class="cactus-link flex items-center justify-center" href={`/tags/${tag}/`}>
|
||||
<span aria-hidden="true">#</span>
|
||||
<span class="sr-only">View all posts with the tag</span>
|
||||
{tag}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<span class="mt-4 block sm:text-end">
|
||||
<a class="hover:text-link" href="/tags/">
|
||||
View all <span aria-hidden="true">→</span>
|
||||
<span class="sr-only">blog tags</span>
|
||||
</a>
|
||||
</span>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
<aside class="flex flex-col gap-2">
|
||||
{
|
||||
!!uniqueTags.length && (
|
||||
<div>
|
||||
<h2 class="title mb-4 flex items-center gap-2 text-lg">
|
||||
Tags
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none" stroke="none" />
|
||||
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
|
||||
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
|
||||
<path d="M6 9h-.01" />
|
||||
</svg>
|
||||
</h2>
|
||||
<ul class="flex flex-wrap gap-2">
|
||||
{uniqueTags.map((tag) => (
|
||||
<li>
|
||||
<a class="cactus-link flex items-center justify-center" href={`/tags/${tag}/`}>
|
||||
<span aria-hidden="true">#</span>
|
||||
<span class="sr-only">View all posts with the tag</span>
|
||||
{tag}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<span class="mt-4 block sm:text-end">
|
||||
<a class="hover:text-link" href="/tags/">
|
||||
View all <span aria-hidden="true">→</span>
|
||||
<span class="sr-only">blog tags</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
!!uniqueCategories.length && (
|
||||
<div>
|
||||
<h2 class="title mb-4 flex items-center gap-2 text-lg">
|
||||
Categories
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none" stroke="none" />
|
||||
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
|
||||
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
|
||||
<path d="M6 9h-.01" />
|
||||
</svg>
|
||||
</h2>
|
||||
<ul class="flex flex-wrap gap-2">
|
||||
{uniqueCategories.map((category) => (
|
||||
<li>
|
||||
<a
|
||||
class="cactus-link flex items-center justify-center"
|
||||
href={`/categories/${category}/`}
|
||||
>
|
||||
<span aria-hidden="true">#</span>
|
||||
<span class="sr-only">View all posts with the category</span>
|
||||
{category}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<span class="mt-4 block sm:text-end">
|
||||
<a class="hover:text-link" href="/categories/">
|
||||
View all <span aria-hidden="true">→</span>
|
||||
<span class="sr-only">blog categories</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</aside>
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
Reference in New Issue
Block a user