RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Rhen Cloud
2026-01-01 23:01:44 +08:00
parent 1d888e9af0
commit 5fb144ea64
41 changed files with 163 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/pages/categories/[category].vue
View File

@@ -49,9 +49,26 @@ useHead({
</script>
<template>
<main class="container max-w-5xl mx-auto text-zinc-600 px-4">
<CategoryTopic />
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<main class="container max-w-5xl mx-auto text-zinc-600 px-4 py-12">
<div class="flex flex-col items-center mb-12">
<NuxtLink
to="/categories"
class="flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline mb-4">
<Icon name="heroicons:arrow-left-20-solid" />
返回分类
</NuxtLink>
<div class="p-3 bg-blue-500/10 rounded-2xl mb-4">
<Icon name="mdi:folder-multiple" size="2.5em" class="text-blue-600 dark:text-blue-400" />
</div>
<h1
class="text-4xl md:text-5xl font-bold text-zinc-800 dark:text-zinc-100 mb-4 tracking-tight">
{{ category }}
</h1>
<p class="text-zinc-600 dark:text-zinc-400 text-center">
找到 {{ formattedData.length || 0 }} 篇分类下的文章
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<BlogCard
v-for="post in formattedData"
:key="post.title"

50
app/pages/categories/index.vue
View File

@@ -3,16 +3,16 @@ const { data } = await useAsyncData("all-blog-post-by-category", () =>
queryCollection("content").select("path", "categories").where("published", "=", true).all(),
);
const allTags = new Map();
const allCategories = new Map();
data.value?.forEach((blog) => {
const categories: Array<string> = (blog.categories as string[]) || [];
categories.forEach((category) => {
if (allTags.has(category)) {
const cnt = allTags.get(category);
allTags.set(category, cnt + 1);
if (allCategories.has(category)) {
const cnt = allCategories.get(category);
allCategories.set(category, cnt + 1);
} else {
allTags.set(category, 1);
allCategories.set(category, 1);
}
});
});
@@ -22,8 +22,7 @@ useHead({
meta: [
{
name: "description",
content:
"Below All the topics are listed on which either I have written a blog or will write a blog in near future.",
content: "以下列出了我撰写的文章主题。",
},
],
});
@@ -31,9 +30,42 @@ useHead({
<template>
<main class="container max-w-5xl mx-auto text-zinc-600">
<CategoryHero />
<div class="flex flex-col items-center mb-12 py-8">
<NuxtLink
to="/"
class="flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline mb-4">
<Icon name="heroicons:arrow-left-20-solid" />
返回首页
</NuxtLink>
<div class="p-3 bg-blue-500/10 rounded-2xl mb-4">
<Icon name="mdi:folder-multiple" size="2.5em" class="text-blue-600 dark:text-blue-400" />
</div>
<h1
class="text-4xl md:text-5xl font-bold text-zinc-800 dark:text-zinc-100 mb-4 tracking-tight">
分类
</h1>
<p class="text-zinc-600 dark:text-zinc-400 text-center max-w-2xl">
以下列出了我撰写的文章主题。
</p>
</div>
<div class="flex flex-wrap px-6 mt-12 gap-3">
<CategoryCard v-for="topic in allTags" :key="topic[0]" :title="topic[0]" :count="topic[1]" />
<!-- <CategoryCard v-for="topic in allCategories" :key="topic[0]" :title="topic[0]" :count="topic[1]" /> -->
<div class="flex flex-wrap justify-center gap-4">
<NuxtLink
v-for="[category, count] in allCategories"
:key="category"
:to="`/categories/${category.toLowerCase()}`"
class="group relative flex items-center gap-2 px-6 py-3 rounded-2xl bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<span
class="text-lg font-bold text-zinc-700 dark:text-zinc-200 group-text-primary transition-colors">
#{{ category }}
</span>
<span
class="flex items-center justify-center min-w-6 h-6 px-1.5 rounded-full bg-primary-10 text-primary dark:text-primary text-xs font-bold border border-primary">
{{ count }}
</span>
</NuxtLink>
</div>
</div>
</main>
</template>