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

12
app/pages/[...slug].vue
View File

@@ -11,9 +11,15 @@ useHead({
</script>
<template>
<div class="py-5">
<div class="container max-w-xl mx-auto">
<Logo404 />
<div class="py-20">
<div class="container max-w-xl mx-auto text-center">
<h1 class="text-6xl font-bold text-zinc-900 dark:text-white mb-4">404</h1>
<p class="text-xl text-zinc-600 dark:text-zinc-400 mb-8">页面未找到</p>
<NuxtLink
to="/"
class="inline-block bg-violet-600 hover:bg-violet-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors">
返回首页
</NuxtLink>
</div>
</div>
</template>

43
app/pages/archive/index.vue
View File

@@ -1,6 +1,16 @@
<script lang="ts" setup>
import Fuse from "fuse.js";
import { formatDate, getRandomFallbackImage } from "~/utils/helper";
import { formatDate } from "~/utils/helper";
useHead({
title: "Archive",
meta: [
{
name: "description",
content: "浏览所有已发布的文章，轻松找到您感兴趣的内容。",
},
],
});
const { data } = await useAsyncData("all-archive-post", () =>
queryCollection("content").where("published", "=", true).order("date", "DESC").all(),
@@ -15,7 +25,7 @@ const posts = computed(() => {
path: articles.path,
title: articles.title || "no-title available",
description: articles.description || "no-description available",
image: articles.image || getRandomFallbackImage(),
image: articles.image || "/404/dog.svg",
alt: articles.alt || "no alter data available",
date: formatDate(articles.date) || "not-date-available",
tags: articles.tags || [],
@@ -45,8 +55,34 @@ const searchResults = computed(() => {
<template>
<main class="container max-w-5xl mx-auto text-zinc-600">
<h1 class="text-3xl font-bold my-6">Archive</h1>
<!-- Hero 部分 -->
<div class="w-full py-12 mb-6">
<div class="container max-w-5xl mx-auto px-6">
<div class="flex flex-col items-center">
<NuxtLink
to="/"
class="flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-400 hover:underline mb-4">
<Icon name="heroicons:arrow-left-20-solid" />
返回首页
</NuxtLink>
<div class="p-3 bg-violet-500/10 rounded-2xl mb-4">
<Icon
name="mdi:file-document-multiple"
size="2.5em"
class="text-violet-600 dark:text-violet-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>
</div>
<!-- 搜索框 -->
<div class="px-6 mb-6">
<input
v-model="searchTest"
@@ -55,6 +91,7 @@ const searchResults = computed(() => {
class="block w-full bg-[#F1F2F4] dark:bg-slate-900 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
</div>
<!-- 文章列表 -->
<div v-auto-animate class="space-y-5 my-5 px-4">
<template v-for="post in searchResults" :key="post.title">
<ArchiveCard

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>

4
app/pages/tags/[tag].vue
View File

@@ -57,7 +57,7 @@ useHead({
to="/tags"
class="flex items-center gap-2 text-sm font-bold text-primary hover:underline mb-4">
<Icon name="heroicons:arrow-left-20-solid" />
Back to all tags
返回标签
</NuxtLink>
<div class="p-3 bg-primary-10 rounded-2xl mb-4">
<Icon name="fa-solid:tag" size="2.5em" class="text-primary" />
@@ -67,7 +67,7 @@ useHead({
#{{ tag }}
</h1>
<p class="text-zinc-600 dark:text-zinc-400 text-center">
Found {{ formattedData.length || 0 }} posts with this tag
找到 {{ formattedData.length || 0 }} 篇关于此标签的文章
</p>
</div>

6
app/pages/tags/index.vue
View File

@@ -24,7 +24,7 @@ useHead({
meta: [
{
name: "description",
content: "浏览所有标签，浏览我写过的文章的标签。",
content: "浏览所有我写过的文章的标签。",
},
],
});
@@ -38,10 +38,10 @@ useHead({
</div>
<h1
class="text-4xl md:text-5xl font-bold text-zinc-800 dark:text-zinc-100 mb-4 tracking-tight">
All Tags
标签
</h1>
<p class="text-zinc-600 dark:text-zinc-400 text-center max-w-md">
Browse through all the topics and technologies I've written about.
浏览所有我写过的文章的标签。
</p>
</div>