fix: replace tag with category in the category page

This commit is contained in:
KazooTTT
2024-07-25 13:58:00 +08:00
parent cd05509c7c
commit ed0aa02c26
2 changed files with 18 additions and 16 deletions

View File

@ -8,18 +8,20 @@ import Pagination from '@/components/Paginator.astro'
import PostPreview from '@/components/blog/PostPreview.astro' import PostPreview from '@/components/blog/PostPreview.astro'
import PageLayout from '@/layouts/BaseLayout.astro' import PageLayout from '@/layouts/BaseLayout.astro'
import Button from '@/components/Button.astro' import Button from '@/components/Button.astro'
import { getAllPosts, getUniqueTags, sortMDByDate } from '@/utils' import { getAllPosts, getUniqueCategories, sortMDByDate } from '@/utils'
export const getStaticPaths: GetStaticPaths = async ({ paginate }) => { export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
const allPosts = await getAllPosts() const allPosts = await getAllPosts()
const allPostsByDate = sortMDByDate(allPosts) const allPostsByDate = sortMDByDate(allPosts)
const uniqueTags = getUniqueTags(allPostsByDate) const uniqueCategories = getUniqueCategories(allPostsByDate)
return uniqueTags.flatMap((tag) => { return uniqueCategories.flatMap((category) => {
const filterPosts = allPostsByDate.filter((post) => post.data.tags.includes(tag)) const filterPosts = allPostsByDate.filter((post) =>
category === '未分类' ? !post.data.category : post.data.category === category
)
return paginate(filterPosts, { return paginate(filterPosts, {
pageSize: 10, pageSize: 10,
params: { tag } params: { category }
}) })
}) })
} }
@ -29,23 +31,23 @@ interface Props {
} }
const { page } = Astro.props const { page } = Astro.props
const { tag } = Astro.params const { Category } = Astro.params
const meta = { const meta = {
description: `View all posts with the tag - ${tag}`, description: `View all posts of Category - ${Category}`,
title: `Tag: ${tag}` title: `Category: ${Category}`
} }
const paginationProps = { const paginationProps = {
...(page.url.prev && { ...(page.url.prev && {
prevUrl: { prevUrl: {
text: `← Previous Tags`, text: `← Previous Category`,
url: page.url.prev url: page.url.prev
} }
}), }),
...(page.url.next && { ...(page.url.next && {
nextUrl: { nextUrl: {
text: `Next Tags →`, text: `Next Category →`,
url: page.url.next url: page.url.next
} }
}) })
@ -70,8 +72,8 @@ const paginationProps = {
</svg> </svg>
</Button> </Button>
<h1 class='mb-6 mt-5 flex items-end gap-x-2 text-2xl font-bold'> <h1 class='mb-6 mt-5 flex items-end gap-x-2 text-2xl font-bold'>
Tags: Category:
<span class='text-xl'>#{tag}</span> <span class='text-xl'>#{Category}</span>
</h1> </h1>
<section aria-label='Blog post list'> <section aria-label='Blog post list'>
<ul class='flex flex-col gap-y-3 text-start'> <ul class='flex flex-col gap-y-3 text-start'>

View File

@ -36,15 +36,15 @@ const meta = {
{ {
allCategories.length > 0 && ( allCategories.length > 0 && (
<ul class='flex flex-col gap-y-3'> <ul class='flex flex-col gap-y-3'>
{allCategories.map(([tag, val]) => ( {allCategories.map(([category, val]) => (
<li class='flex items-center gap-x-2 '> <li class='flex items-center gap-x-2 '>
<a <a
class='inline-block underline underline-offset-4 hover:text-foreground/75' class='inline-block underline underline-offset-4 hover:text-foreground/75'
data-astro-prefetch data-astro-prefetch
href={`/tags/${tag}/`} href={`/categories/${category}/`}
title={`View posts with the tag: ${tag}`} title={`View posts of the Category: ${category}`}
> >
&#35;{tag} &#35;{category}
</a> </a>
<span class='inline-block'> <span class='inline-block'>
- {val} post{val > 1 && 's'} - {val} post{val > 1 && 's'}