feat: 添加留言板功能，集成 Giscus 评论系统并更新相关配置

app/components/FriendsSection.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="card panel flex flex-col gap-2.5">
-        <h2 class="m-0 mb-1 gradient-text">友情链接</h2>
+        <h2 class="m-0 mb-1 text-lg font-semibold">友情链接</h2>
         <p class="text-text-muted text-sm m-0 mb-3 block">欢迎互换友链 · Friends</p>
         <div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
             <article v-for="f in displayedFriends" :key="f.url"

app/components/PageSwitcher.vue

@@ -33,6 +33,7 @@ const pages = [
     { name: "sites", label: "网站" },
     { name: "projects", label: "项目" },
     { name: "friends", label: "友链" },
+    { name: "comments", label: "留言" },
 ];
 
 const currentIndex = computed(() => pages.findIndex((item) => item.name === route.name));

app/components/ProjectsSection.vue

@@ -1,9 +1,7 @@
 <template>
     <section class="card panel flex flex-col gap-2.5">
         <h2 class="m-0 mb-1 text-lg font-semibold">项目作品</h2>
-
         <p class="text-sm text-white/60 mb-3">一些正在维护或已发布的项目 · Projects</p>
-
         <div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
             <article v-for="p in projects" :key="p.url"
                 class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-yellow-400/50 w-[290px] h-[145px] flex flex-col">

app/components/SitesSection.vue

@@ -1,8 +1,8 @@
 <template>
     <section class="card panel flex flex-col gap-2.5">
-        <h2 class="m-0 mb-1 text-lg font-semibold">项目作品</h2>
+        <h2 class="m-0 mb-1 text-lg font-semibold">我的网站</h2>
 
-        <p class="text-sm text-white/60 mb-3">一些正在维护或已发布的项目 · Projects</p>
+        <p class="text-sm text-white/60 mb-3">正在运行的站点 · Websites</p>
 
         <div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
             <article v-for="site in sites" :key="site.url"

app/components/SitesSection_old.vue

@@ -1,34 +0,0 @@
-<template>
-    <section class="card flex flex-col gap-2.5">
-        <h2 class="m-0 mb-1 gradient-text">我的网站</h2>
-        <p class="text-text-muted text-sm m-0 mb-3 block">正在运行的站点 · Websites</p>
-        <div class="w-full -mx-[1.125rem] -mb-[1.125rem]">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-[1.125rem] pb-[1.125rem]">
-                <article
-                    v-for="site in sites"
-                    :key="site.url"
-                    class="bg-gradient-to-br from-white/5 to-white/1 border border-white/10 rounded-2xl p-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-blue-400/60 hover:shadow-lg-dark hover:bg-gradient-to-br hover:from-yellow-500/6"
-                >
-                    <div class="flex items-center justify-between mb-1.5">
-                        <h3 class="m-0 font-semibold text-base">{{ site.name }}</h3>
-                        <span class="px-2.5 py-1 rounded-full bg-green-500/14 text-green-300 text-xs font-medium"
-                            >在线</span
-                        >
-                    </div>
-                    <p class="text-text-muted text-sm m-0 mb-2.5">{{ site.desc }}</p>
-                    <a
-                        :href="site.url"
-                        target="_blank"
-                        rel="noreferrer"
-                        class="inline-flex items-center gap-1.5 mt-2.5 text-blue-400 font-semibold text-sm hover:text-blue-300 transition-all duration-200 hover:gap-2"
-                        >查看 →</a
-                    >
-                </article>
-            </div>
-        </div>
-    </section>
-</template>
-
-<script setup>
-defineProps({ sites: Array });
-</script>

app/components/SkillsSection.vue

@@ -1,7 +1,7 @@
 <template>
     <section class="card flex flex-col gap-2.5">
         <div>
-            <h2 class="m-0 mb-1">技能专长</h2>
+            <h2 class="m-0 mb-1 font-semibold">技能专长</h2>
             <p class="text-text-muted text-sm m-0 mb-3">我常用的工具与技术 · Skills & Technologies</p>
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">

app/components/SocialLinks.vue

@@ -1,6 +1,6 @@
 <template>
     <section class="card flex flex-col gap-2.5">
-        <h2 class="m-0 mb-1">社交链接</h2>
+        <h2 class="m-0 mb-1 text-lg font-semibold">社交链接</h2>
         <p class="text-text-muted text-sm m-0 mb-3 block">社交账号 · Links</p>
         <div class="flex flex-wrap gap-2.5">
             <a v-for="link in links" :key="link.url" :href="link.url" target="_blank" rel="noreferrer"

app/components/StatsSection.vue

@@ -1,7 +1,7 @@
 <template>
     <section class="card">
         <div class="header">
-            <h2>开发统计</h2>
+            <h2 class="m-0 mb-1 font-semibold">开发统计</h2>
             <div class="tabs">
                 <button class="tab-button" :class="{ active: activeTab === 'github' }" @click="activeTab = 'github'">
                     GitHub

app/config/siteConfig.ts

@@ -119,12 +119,8 @@ const siteConfig = {
         { name: "Cloud Home", url: "https://github.com/RhenCloud/cloud-home", desc: "个人主页模板" },
         { name: "ILP", url: "https://github.com/RhenCloud/ILP", desc: "跨平台、多网站、模块化的小说下载器" },
         { name: "ILP-C++", url: "https://github.com/RhenCloud/ILP-Cpp", desc: "跨平台、多网站、模块化的小说下载器" },
-        {
-            name: "Test",
-            url: "https://github.com/RhenCloud/ILP-Cpp",
-            desc: "",
-        },
     ],
+
     friends: [
         {
             name: "wuxian",
@@ -138,14 +134,26 @@ const siteConfig = {
             url: "https://blog.sakura.ink",
             avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
         },
-        {
-            name: "鈴奈咲桜のBlog",
-            desc: "一个普普通通的Blog",
-            url: "https://blog.sakura.ink",
-            avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
-        },
     ],
 
+    comments: {
+        enable: true,
+        // twikoo: {
+        //     url: "https://twikoo.rhen.cloud",
+        // },
+        giscus: {
+            repo: "RhenCloud/Cloud-Home",
+            repoId: "R_kgDOQjx8rQ",
+            category: "Announcements",
+            categoryId: "DIC_kwDOQjx8rc4Cz4Qb",
+            mapping: "pathname",
+            reactionsEnabled: "1",
+            emitMetadata: "0",
+            inputPosition: "bottom",
+            theme: "preferred_color_scheme",
+        },
+    },
+
     footer: {
         beian: "津ICP备2025039003号-1",
         beianLink: "https://beian.miit.gov.cn/",

app/pages/comments.vue

@@ -0,0 +1,68 @@
+<template>
+    <section class="container mx-auto py-8">
+        <p v-if="!giscus || !giscus.repo" class="text-sm text-red-500 mb-4">Giscus 未配置。</p>
+        <ClientOnly>
+            <section class="card panel flex flex-col gap-2.5">
+                <h2 class="m-0 mb-1 text-lg font-semibold">留言板</h2>
+                <p class="text-sm text-white/60 mb-3">在这里留下想说的话吧 · Comments</p>
+                <div class="giscus-wrapper">
+                    <component v-if="GiscusComponent" :is="GiscusComponent" :repo="giscus.repo" :repo-id="giscus.repoId"
+                        :category="giscus.category" :category-id="giscus.categoryId" :mapping="giscus.mapping"
+                        :strict="giscus.strict" :reactions-enabled="giscus.reactionsEnabled"
+                        :emit-metadata="giscus.emitMetadata" :input-position="giscus.inputPosition"
+                        :theme="'/css/giscus.css'" lang="zh-CN" class="giscus" />
+                    <div v-else id="giscus-container" class="giscus" />
+                </div>
+            </section>
+        </ClientOnly>
+    </section>
+</template>
+
+<script setup lang="ts">
+import { definePageMeta } from "#imports";
+import { onMounted, shallowRef, markRaw } from "vue";
+import siteConfig from "~/config/siteConfig";
+
+const giscus = siteConfig.comments.giscus || {};
+const GiscusComponent = shallowRef(null as any);
+
+async function tryUseOfficialComponent() {
+    try {
+        const mod = await import("@giscus/vue");
+        const comp = mod.default ?? mod;
+        if (comp) GiscusComponent.value = markRaw(comp);
+        return !!comp;
+    } catch (e) {
+        console.error("Failed to import Giscus component:", e);
+        return false;
+    }
+}
+
+
+onMounted(async () => {
+    // 如果没有配置 giscus，显示提示（由模板处理）
+    if (!siteConfig.comments.enable) return;
+    if (!giscus || !giscus.repo) return;
+    const ok = await tryUseOfficialComponent();
+});
+
+definePageMeta({
+    order: 5,
+    label: "留言",
+});
+</script>
+
+<style scoped>
+.container {
+    max-width: 880px;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+h1 {
+    color: #e6eef8;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
+}
+</style>
+
+<!-- <style src="../styles/giscus.css"></style> -->