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-02 20:36:49 +08:00
parent 8ee70869ec
commit eb38ca1edc
13 changed files with 1646 additions and 13160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/app.vue
View File

@@ -11,6 +11,25 @@ useHead({
const desktopBg = siteConfig.theme.background || "";
const mobileBg = siteConfig.theme.backgroundMobile || "";
// 将 siteConfig.theme.color 转换为 CSS 变量
const hexToRgb = (hex: string) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? `${parseInt(result[1]!, 16)}, ${parseInt(result[2]!, 16)}, ${parseInt(result[3]!, 16)}`
: "189, 131, 243";
};
const primaryColor = siteConfig.theme.color || "#bd83f3";
const primaryRgb = hexToRgb(primaryColor);
useHead({
style: [
{
innerHTML: `:root { --site-primary: ${primaryColor}; --site-primary-rgb: ${primaryRgb}; }`,
},
],
});
</script>
<template>

4
app/components/blog/Header.vue
View File

@@ -40,7 +40,7 @@ withDefaults(defineProps<Props>(), {
</div>
<h1
class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-zinc-800 dark:text-zinc-100 mb-6 tracking-tight leading-tight">
class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-zinc-800 dark:text-zinc-100 mb-6 tracking-tight leading-tight break-words">
{{ title }}
</h1>
@@ -49,7 +49,7 @@ withDefaults(defineProps<Props>(), {
</p>
</div>
<div class="relative group max-w-4xl mx-auto mb-12">
<div class="relative group max-w-4xl mx-auto mb-12 w-full">
<div
class="absolute inset-0 bg-linear-to-tr from-violet-500/20 to-fuchsia-500/20 rounded-3xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
<NuxtImg

44
app/components/main/SocialLinks.vue
View File

@@ -2,24 +2,15 @@
<section class="flex flex-col gap-2.5">
<div class="flex flex-wrap gap-2.5">
<template v-for="link in links" :key="link.url">
<NuxtLink
:to="link.url"
class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/40 backdrop-blur-md border border-white/40 text-zinc-700 text-sm font-semibold transition-all duration-300 hover:bg-white/60 hover:border-white/60 hover-text-black hover:-translate-y-1 hover:shadow-lg dark:bg-slate-800/40 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-slate-800/60 dark:hover:text-white">
<span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
<Icon
v-if="iconFor(link).name"
:name="iconFor(link).name"
size="16"
class="text-current" />
<NuxtImg
v-else
:src="iconFor(link).src"
:alt="link.name"
loading="lazy"
class="w-full h-full" />
</span>
<span>{{ link.name }}</span>
</NuxtLink>
<UTooltip :text="link.name">
<NuxtLink
:to="link.url"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-white/40 backdrop-blur-md border border-white/40 text-zinc-700 transition-all duration-300 hover:bg-white/60 hover:border-white/60 hover:text-black hover:-translate-y-1 hover:shadow-lg dark:bg-slate-800/40 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-slate-800/60 dark:hover:text-white">
<Icon v-if="iconFor(link)" :name="iconFor(link)" size="22" class="text-current" />
</NuxtLink>
</UTooltip>
</template>
</div>
</section>
@@ -28,7 +19,6 @@
<script setup>
import siteConfig from "~/config";
import { onMounted } from "vue";
const links = siteConfig.socialLinks;
const iconMap = {
@@ -55,20 +45,8 @@ const iconMap = {
const iconFor = (link) => {
const key = (link.name || "").toLowerCase();
if (iconMap[key]) return { name: iconMap[key] };
if (link.icon) return { src: link.icon };
if (iconMap[key]) return iconMap[key];
if (link.icon) return link.icon;
return null;
};
onMounted(() => {
const id = "fa-cdn";
if (document.getElementById(id)) return;
const link = document.createElement("link");
link.id = id;
link.rel = "stylesheet";
link.href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?font-display=swap";
link.crossOrigin = "anonymous";
link.referrerPolicy = "no-referrer";
document.head.appendChild(link);
});
</script>

50
app/components/main/header.vue
View File

@@ -27,22 +27,16 @@ watch(
</script>
<template>
<header class="fixed top-0 left-0 right-0 z-50 h-16 backdrop-blur-sm font-semibold px-4 sm:px-8">
<header class="fixed top-0 left-0 right-0 z-50 h-20 backdrop-blur-sm font-semibold px-4 lg:px-8">
<div class="flex justify-center items-center h-full w-full relative">
<nav class="flex items-center justify-center w-full">
<!-- 移动端导航栏 -->
<div class="flex sm:hidden items-center justify-between w-full">
<div class="flex lg:hidden items-center justify-between w-full">
<NuxtLink
to="/"
class="flex items-center gap-2 h-10 px-4 rounded-full bg-white/80 dark:bg-slate-900/80 border border-zinc-200/50 dark:border-white/10 shadow-sm backdrop-blur-xl transition-transform active:scale-95">
<Icon
name="fa-solid:cat"
size="18"
class="text-zinc-700 dark:text-zinc-200 flex items-center" />
<span
class="text-base font-bold bg-linear-to-r from-zinc-900 to-zinc-600 dark:from-zinc-100 dark:to-zinc-400 bg-clip-text text-transparent"
>{{ siteConfig.siteMeta.title }}</span
>
<Icon name="fa-solid:cat" size="18" class="text-primary flex items-center" />
<span class="text-base font-bold text-primary">{{ siteConfig.siteMeta.title }}</span>
</NuxtLink>
<div class="flex items-center gap-2">
@@ -71,34 +65,28 @@ watch(
</div>
<!-- 桌面端导航栏 -->
<div class="hidden sm:flex items-center justify-center w-full relative h-12">
<div class="hidden lg:flex items-center justify-center w-full relative h-14">
<!-- 桌面端导航栏logo (左上角) -->
<div
class="absolute left-0 h-12 flex items-center rounded-full border bg-white/80 dark:bg-slate-900/80 border-zinc-200/50 dark:border-white/10 shadow-sm backdrop-blur-xl transition-transform px-1"
class="absolute left-0 h-14 flex items-center rounded-full border bg-white/80 dark:bg-slate-900/80 border-zinc-200/50 dark:border-white/10 shadow-sm backdrop-blur-xl transition-transform px-1"
:class="{
'bg-white dark:bg-slate-800 shadow-sm font-bold': isActive('/'),
'hover:bg-zinc-100 dark:hover:bg-white/10': !isActive('/'),
}">
<NuxtLink to="/" class="flex h-10 duration-200 items-center gap-2 px-4 text-base">
<Icon
name="fa-solid:cat"
size="18"
class="flex items-center text-zinc-700 dark:text-zinc-200" />
<span
class="font-bold bg-linear-to-r from-zinc-900 to-zinc-600 dark:from-zinc-100 dark:to-zinc-400 bg-clip-text text-transparent"
>{{ siteConfig.siteMeta.title }}</span
>
<NuxtLink to="/" class="flex h-12 duration-200 items-center gap-2 px-4 text-lg">
<Icon name="fa-solid:cat" size="20" class="flex items-center text-primary" />
<span class="font-bold text-primary">{{ siteConfig.siteMeta.title }}</span>
</NuxtLink>
</div>
<!-- 桌面端导航栏 (居中) -->
<div
class="inline-flex items-center h-12 bg-white/70 dark:bg-slate-900/50 backdrop-blur-xl shadow-[0_4px_20px_-2px_rgba(0,0,0,0.1)] border border-zinc-200/50 dark:border-white/5 rounded-full px-1.5 transition-all duration-300 hover:shadow-xl">
<ul class="flex items-center space-x-1.5 text-base">
class="inline-flex items-center h-14 bg-white/70 dark:bg-slate-900/50 backdrop-blur-xl shadow-[0_4px_20px_-2px_rgba(0,0,0,0.1)] border border-zinc-200/50 dark:border-white/5 rounded-full px-1.5 transition-all duration-300 hover:shadow-xl">
<ul class="flex items-center space-x-1.5 text-lg">
<li v-for="link in siteConfig.navbar.links" :key="link.path">
<NuxtLink
:to="link.path"
class="relative h-10 px-5 rounded-full transition-all duration-200 flex items-center text-zinc-700 dark:text-zinc-200"
class="relative h-12 px-6 rounded-full transition-all duration-200 flex items-center text-zinc-700 dark:text-zinc-200"
:class="{
'bg-white dark:bg-slate-800 shadow-sm font-bold': isActive(link.path),
'hover:bg-zinc-100 dark:hover:bg-white/10': !isActive(link.path),
@@ -106,7 +94,7 @@ watch(
<Icon
v-if="link.icon"
:name="link.icon"
size="18"
size="20"
class="mr-2 flex items-center" />
<span>{{ link.name }}</span>
</NuxtLink>
@@ -119,11 +107,11 @@ watch(
<ClientOnly>
<button
:title="colorMode.value === 'light' ? '切换到深色模式' : '切换到浅色模式'"
class="relative h-12 w-12 rounded-full bg-white/80 dark:bg-slate-900/80 border border-zinc-200/50 dark:border-white/10 shadow-sm flex items-center justify-center transition-all hover:scale-110 active:scale-95 backdrop-blur-xl"
class="relative h-14 w-14 rounded-full bg-white/80 dark:bg-slate-900/80 border border-zinc-200/50 dark:border-white/10 shadow-sm flex items-center justify-center transition-all hover:scale-110 active:scale-95 backdrop-blur-xl"
@click="onClick(colorMode.value === 'light' ? 'dark' : 'light')">
<Icon
name="fa-regular:moon"
size="18"
size="20"
class="icon-svg transition-all duration-300 text-zinc-700 dark:text-white-200"
:class="
colorMode.value === 'light'
@@ -133,7 +121,7 @@ watch(
<Icon
name="fa-regular:sun"
size="18"
size="20"
class="icon-svg absolute transition-all duration-300 text-yellow-400"
:class="
colorMode.value === 'dark'
@@ -155,7 +143,7 @@ watch(
leave-to-class="translate-y-2 opacity-0 scale-95">
<div
v-if="isMenuOpen"
class="sm:hidden absolute top-full right-0 mt-3 w-56 overflow-hidden bg-white/95 dark:bg-slate-900/95 backdrop-blur-2xl border border-zinc-200/60 dark:border-white/10 rounded-3xl shadow-2xl z-50 origin-top-right">
class="lg:hidden absolute top-full right-0 mt-3 w-56 overflow-hidden bg-white/95 dark:bg-slate-900/95 backdrop-blur-2xl border border-zinc-200/60 dark:border-white/10 rounded-3xl shadow-2xl z-50 origin-top-right">
<div class="p-2">
<ul class="space-y-1">
<li v-for="link in siteConfig.navbar.links" :key="link.path">
@@ -191,11 +179,11 @@ watch(
<!-- 移动端菜单遮罩 -->
<div
v-if="isMenuOpen"
class="fixed inset-0 z-40 bg-black/5 sm:hidden"
class="fixed inset-0 z-40 bg-black/5 lg:hidden"
@click="isMenuOpen = false"></div>
<!-- Spacer to prevent page content being hidden under fixed header -->
<div class="h-16" aria-hidden="true"></div>
<div class="h-20" aria-hidden="true"></div>
</template>
<style scoped>

33
app/components/main/hero.vue
View File

@@ -1,6 +1,32 @@
<script setup lang="ts">
import siteConfig from "~/config";
import SocialLinks from "./SocialLinks.vue";
import Typed from "typed.js";
const descriptions = siteConfig.hero.description;
const typedElement = ref<HTMLElement | null>(null);
const randomDescription = ref(descriptions[0]);
let typed: Typed | null = null;
onMounted(() => {
if (siteConfig.hero.typed?.enable && typedElement.value) {
typed = new Typed(typedElement.value, {
strings: descriptions,
typeSpeed: siteConfig.hero.typed.typeSpeed || 100,
backSpeed: siteConfig.hero.typed.backSpeed || 50,
loop: siteConfig.hero.typed.loop ?? true,
backDelay: siteConfig.hero.typed.backDelay || 2000,
});
} else {
randomDescription.value = descriptions[Math.floor(Math.random() * descriptions.length)];
}
});
onUnmounted(() => {
if (typed) {
typed.destroy();
}
});
</script>
<template>
@@ -9,7 +35,7 @@ import SocialLinks from "./SocialLinks.vue";
class="container max-w-5xl mx-auto px-6 min-h-[calc(100vh-4rem)] flex items-center justify-center">
<div class="relative z-10 flex flex-col items-center text-center">
<div class="mb-8">
<div class="relative h-32 w-32 group">
<div class="relative h-40 w-40 group">
<div
class="absolute inset-0 bg-primary-gradient rounded-full blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-500"></div>
<NuxtImg
@@ -32,8 +58,9 @@ import SocialLinks from "./SocialLinks.vue";
</div>
<p
class="mt-4 max-w-2xl text-base sm:text-lg text-zinc-600 dark:text-zinc-300 relative font-medium leading-relaxed">
{{ siteConfig.hero.description }}
class="mt-4 max-w-2xl text-lg sm:text-xl text-zinc-600 dark:text-zinc-300 relative font-medium leading-relaxed min-h-[1.5em]">
<span v-if="siteConfig.hero.typed?.enable" ref="typedElement"></span>
<span v-else>{{ randomDescription }}</span>
</p>
</div>

2
app/components/main/recent.vue
View File

@@ -53,7 +53,7 @@ const formattedData = computed(() => {
</h2>
</div>
<NuxtLink
to="/blogs"
to="/archive"
class="group flex items-center gap-1 text-sm font-semibold text-zinc-900 dark:text-zinc-50 hover-text-primary transition-colors">
查看全部文章
<Icon

9
app/config/index.ts
View File

@@ -12,7 +12,14 @@ const siteConfig = {
hero: {
title: "RhenCloud's Blog",
description: "Your Solution Answer Exists And Only.",
description: ["Your Solution Answer Exists And Only.", "趁世界还未重启之前 约一次爱恋"],
typed: {
enable: true,
typeSpeed: 100,
backSpeed: 50,
loop: true,
backDelay: 2000,
},
},
profile: {

2
app/layouts/default.vue
View File

@@ -3,7 +3,7 @@ const route = useRoute();
</script>
<template>
<div class="gd-container font-spacegrotesk relative">
<div class="gd-container font-spacegrotesk relative overflow-x-hidden">
<MainHeader />
<main>
<slot />

121
app/pages/posts/index.vue
View File

@@ -1,121 +0,0 @@
<script lang="ts" setup>
import Fuse from "fuse.js";
import { getRandomFallbackImage } from "~/utils/helper";
// import type { BlogPost } from "~/types/blog";
const { data } = await useAsyncData("all-blog-post", () => queryCollection("content").all());
const elementPerPage = ref(5);
const pageNumber = ref(1);
const searchTest = ref("");
const formattedData = computed(() => {
return (
data.value?.map((articles) => {
return {
path: articles.path,
title: articles.title || "no-title available",
description: articles.description || "no-description available",
image: articles.image || getRandomFallbackImage(),
alt: articles.alt || "no alter data available",
date: articles.date || "not-date-available",
tags: articles.tags || [],
published: articles.published || false,
};
}) || []
);
});
const fuse = computed(() => {
return new Fuse(formattedData.value, {
keys: ["title", "description"],
threshold: 0.4,
includeScore: false,
});
});
const searchData = computed(() => {
if (!searchTest.value.trim()) {
return formattedData.value;
}
const results = fuse.value.search(searchTest.value);
return results.map((result) => result.item);
});
const paginatedData = computed(() => {
const startInd = (pageNumber.value - 1) * elementPerPage.value;
const endInd = pageNumber.value * elementPerPage.value;
return searchData.value.slice(startInd, endInd);
});
function onPreviousPageClick() {
if (pageNumber.value > 1) pageNumber.value -= 1;
}
const totalPage = computed(() => {
const ttlContent = searchData.value.length || 0;
return Math.ceil(ttlContent / elementPerPage.value);
});
function onNextPageClick() {
if (pageNumber.value < totalPage.value) pageNumber.value += 1;
}
useHead({
title: "Archive",
meta: [
{
name: "description",
content: "Here you will find all the blog posts I have written & published on this site.",
},
],
});
</script>
<template>
<main class="container max-w-5xl mx-auto text-zinc-600">
<ArchiveHero />
<div class="px-6">
<input
v-model="searchTest"
placeholder="Search"
type="text"
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 paginatedData" :key="post.title">
<ArchiveCard
:path="post.path"
:title="post.title"
:date="post.date"
:description="post.description"
:image="post.image"
:alt="post.alt"
:tags="post.tags"
:published="post.published" />
</template>
<ArchiveCard v-if="paginatedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
</div>
<div class="flex justify-center items-center space-x-6">
<button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
<Icon
name="mdi:code-less-than"
size="30"
:class="{ 'text-sky-700 dark:text-sky-400': pageNumber > 1 }" />
</button>
<p>{{ pageNumber }} / {{ totalPage }}</p>
<button :disabled="pageNumber >= totalPage" @click="onNextPageClick">
<Icon
name="mdi:code-greater-than"
size="30"
:class="{ 'text-sky-700 dark:text-sky-400': pageNumber < totalPage }" />
</button>
</div>
</main>
</template>