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

2026-01-22 17:39:07 +08:00 · 2025-12-17 22:16:06 +08:00
parent 6cc98acd88
commit bda4281fde
13 changed files with 276 additions and 53 deletions
--- a/app/components/FriendsSection.vue
+++ b/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"
--- a/app/components/PageSwitcher.vue
+++ b/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));
--- a/app/components/ProjectsSection.vue
+++ b/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">
--- a/app/components/SitesSection.vue
+++ b/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"
--- a/app/components/SitesSection_old.vue
+++ b/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>
--- a/app/components/SkillsSection.vue
+++ b/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">
--- a/app/components/SocialLinks.vue
+++ b/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"
--- a/app/components/StatsSection.vue
+++ b/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
--- a/app/config/siteConfig.ts
+++ b/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/",
--- a/app/pages/comments.vue
+++ b/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> -->
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -65,6 +65,20 @@ export default defineNuxtConfig({
        public: {
            githubToken: process.env.NUXT_PUBLIC_GITHUB_TOKEN ?? "",
            umamiApiKey: process.env.NUXT_PUBLIC_UMAMI_API_KEY ?? "",
+            // Twikoo 评论服务地址（在 Netlify 或部署环境中设置 NUXT_PUBLIC_TWIKOO_URL）
+            twikooUrl: process.env.NUXT_PUBLIC_TWIKOO_URL ?? "",
+            // Giscus 配置（在部署环境中设置 NUXT_PUBLIC_GISCUS_* 系列变量）
+            giscus: {
+                repo: process.env.NUXT_PUBLIC_GISCUS_REPO ?? "",
+                repoId: process.env.NUXT_PUBLIC_GISCUS_REPO_ID ?? "",
+                category: process.env.NUXT_PUBLIC_GISCUS_CATEGORY ?? "",
+                categoryId: process.env.NUXT_PUBLIC_GISCUS_CATEGORY_ID ?? "",
+                mapping: process.env.NUXT_PUBLIC_GISCUS_MAPPING ?? "pathname",
+                reactionsEnabled: process.env.NUXT_PUBLIC_GISCUS_REACTIONS_ENABLED ?? "1",
+                emitMetadata: process.env.NUXT_PUBLIC_GISCUS_EMIT_METADATA ?? "0",
+                inputPosition: process.env.NUXT_PUBLIC_GISCUS_INPUT_POSITION ?? "bottom",
+                theme: process.env.NUXT_PUBLIC_GISCUS_THEME ?? "light",
+            },
        },
    },
 });
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
        "preview": "nuxt preview"
    },
    "dependencies": {
+        "@giscus/vue": "^3.1.1",
        "@jaseeey/vue-umami-plugin": "^1.4.0",
        "nodemailer": "^7.0.11",
        "nuxt": "^4.2.2",
--- a/public/css/giscus.css
+++ b/public/css/giscus.css
@@ -0,0 +1,167 @@
+/*!
+ * Modified from GitHub's Dark Dimmed theme, adapted for Cloud-Home
+ * License: MIT (see original project primer/primitives)
+ * Modified from GitHub's Dark Dimmed theme, licensed under the MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */
+
+:root {
+    --ch-bg: #0a0c14; /* 深色卡片背景 */
+    --ch-bg-2: rgba(6, 8, 15, 0.55);
+    --ch-border: rgba(255, 255, 255, 0.04);
+    --muted: #768390;
+    --fg: #e6eef8;
+
+    /* 添加 1.css 中的颜色变量 */
+    --color-prettylights-syntax-comment: #768390;
+    --color-prettylights-syntax-constant: #6cb6ff;
+    --color-prettylights-syntax-entity: #dcbdfb;
+    --color-prettylights-syntax-storage-modifier-import: #adbac7;
+    --color-prettylights-syntax-entity-tag: #8ddb8c;
+    --color-prettylights-syntax-keyword: #f47067;
+    --color-prettylights-syntax-string: #96d0ff;
+    --color-prettylights-syntax-variable: #f69d50;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+    --color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
+    --color-prettylights-syntax-invalid-illegal-bg: #922323;
+    --color-prettylights-syntax-carriage-return-text: #cdd9e5;
+    --color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+    --color-prettylights-syntax-string-regexp: #8ddb8c;
+    --color-prettylights-syntax-markup-list: #eac55f;
+    --color-prettylights-syntax-markup-heading: #316dca;
+    --color-prettylights-syntax-markup-italic: #adbac7;
+    --color-prettylights-syntax-markup-bold: #adbac7;
+    --color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+    --color-prettylights-syntax-markup-deleted-bg: #78191b;
+    --color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+    --color-prettylights-syntax-markup-inserted-bg: #1b4721;
+    --color-prettylights-syntax-markup-changed-text: #ffddb0;
+    --color-prettylights-syntax-markup-changed-bg: #682d0f;
+    --color-prettylights-syntax-markup-ignored-text: #adbac7;
+    --color-prettylights-syntax-markup-ignored-bg: #255ab2;
+    --color-prettylights-syntax-meta-diff-range: #dcbdfb;
+    --color-prettylights-syntax-brackethighlighter-angle: #768390;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
+    --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+    --color-btn-text: #adbac7;
+    --color-btn-bg: #373e47;
+    --color-btn-border: #cdd9e51a;
+    --color-btn-shadow: 0 0 #0000;
+    --color-btn-inset-shadow: 0 0 #0000;
+    --color-btn-hover-bg: #444c56;
+    --color-btn-hover-border: #768390;
+    --color-btn-active-bg: #3d444d;
+    --color-btn-active-border: #636e7b;
+    --color-btn-selected-bg: #2d333b;
+    --color-btn-primary-text: #fff;
+    --color-btn-primary-bg: #347d39;
+    --color-btn-primary-border: #cdd9e51a;
+    --color-btn-primary-shadow: 0 0 #0000;
+    --color-btn-primary-inset-shadow: 0 0 #0000;
+    --color-btn-primary-hover-bg: #46954a;
+    --color-btn-primary-hover-border: #cdd9e51a;
+    --color-btn-primary-selected-bg: #347d39;
+    --color-btn-primary-selected-shadow: 0 0 #0000;
+    --color-btn-primary-disabled-text: #cdd9e580;
+    --color-btn-primary-disabled-bg: #347d3999;
+    --color-btn-primary-disabled-border: #cdd9e51a;
+    --color-action-list-item-default-hover-bg: #909dab1f;
+    --color-segmented-control-bg: #636e7b1a;
+    --color-segmented-control-button-bg: #22272e;
+    --color-segmented-control-button-selected-border: #636e7b;
+}
+
+/* 外部容器（在组件中也有一层） */
+.giscus-wrapper {
+    background: linear-gradient(180deg, rgba(6, 8, 15, 0.55), rgba(10, 12, 20, 0.45));
+    border: 1px solid var(--ch-border);
+    border-radius: 12px;
+    padding: 0.75rem;
+    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.6);
+    backdrop-filter: blur(6px) saturate(120%);
+    -webkit-backdrop-filter: blur(6px) saturate(120%);
+    margin-bottom: 1.25rem;
+}
+
+.giscus {
+    width: 100%;
+    color-scheme: dark;
+    overflow: hidden;
+}
+
+/* 兼容非组件 fallback 容器 */
+#giscus-container {
+    padding: 0.5rem;
+}
+
+/* GitHub Dark Dimmed inspired tweaks adapted to site theme */
+.gsc-reactions-count {
+    display: none !important;
+}
+.gsc-timeline {
+    flex-direction: column-reverse;
+}
+.gsc-header {
+    padding-bottom: 1rem;
+    color: var(--muted) !important;
+}
+.gsc-comments > .gsc-comment-box {
+    margin-bottom: 1rem;
+}
+.gsc-comments > .gsc-header {
+    order: 1;
+}
+.gsc-comments > .gsc-timeline {
+    order: 3;
+}
+
+/* 卡片风格：半透明+圆角+内阴影，契合站点 */
+.gsc-comment,
+.gsc-comment-body,
+.gsc-comment .gsc-comment-body {
+    background: linear-gradient(180deg, rgba(6, 8, 15, 0.5), rgba(10, 12, 20, 0.45)) !important;
+    border: 1px solid var(--ch-border) !important;
+    border-radius: 10px !important;
+    padding: 0.75rem !important;
+    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.55) !important;
+}
+
+/* 评论作者/元信息颜色 */
+.gsc-comment .gsc-comment-header,
+.gsc-comment .gsc-comment-meta {
+    color: var(--muted) !important;
+}
+
+/* 按钮 / 交互控件微调 */
+.gsc-reaction-button,
+.gsc-input button {
+    background: var(--color-btn-bg) !important;
+    border: var(--color-btn-border) !important;
+    color: var(--color-btn-text) !important;
+    border-radius: 6px !important;
+    box-shadow: var(--color-btn-shadow) !important;
+    border-radius: 6px !important;
+}
+
+/* 输入框样式 */
+.gsc-input textarea,
+.gsc-input input {
+    background: rgba(0, 0, 0, 0.35) !important;
+    color: var(--fg) !important;
+    border: 1px solid rgba(255, 255, 255, 0.06) !important;
+    border-radius: 8px !important;
+}
+
+/* 加载图像和首页背景微调 */
+main .gsc-loading-image {
+    background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif) !important;
+}
+.gsc-homepage-bg {
+    background-color: var(--color-canvas-subtle) !important;
+}
+
+/* 语义辅助：让嵌入内容更好地适配窄屏 */
+.giscus {
+    overflow: hidden;
+}