Hugging Face's logo

Spaces:
cacode
/
blog
Paused

App Files Community
blog
File size: 3,221 Bytes
96dd062
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
---
import type { CollectionEntry } from "astro:content";
import { commentConfig } from "@/config/commentConfig";
import Key from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import { removeFileExtension } from "@/utils/url-utils";
import Artalk from "./Artalk.astro";
import Disqus from "./Disqus.astro";
import Giscus from "./Giscus.astro";
import Twikoo from "./Twikoo.astro";
import Waline from "./Waline.astro";

interface Props {
	post: CollectionEntry<"posts"> | CollectionEntry<"spec">;
	customPath?: string;
}

const { post, customPath } = Astro.props;
const { id } = post;

// 根据页面类型确定路径
const slug = removeFileExtension(id);
const path =
	customPath || (post.collection === "posts" ? `/posts/${slug}` : `/${slug}`);
const url = `${Astro.site?.href}${path}`;

// 强制commentService类型为string，避免类型不兼容警告
let commentService: string = commentConfig?.type || "none";
---

{
  commentService !== "none" && (
    <div class="card-base p-8 mb-6 relative overflow-hidden">

      <!-- 评论区装饰性背景 -->

      <div class="absolute top-0 right-0 w-32 h-32 opacity-5 pointer-events-none">

        <svg viewBox="0 0 100 100" class="w-full h-full">

          <circle cx="50" cy="50" r="40" fill="currentColor" class="text-(--primary)" />

          <circle cx="50" cy="50" r="25" fill="none" stroke="currentColor" stroke-width="2" class="text-(--primary)" />

          <circle cx="50" cy="50" r="10" fill="currentColor" class="text-(--primary)" />

        </svg>

      </div>

      <!-- 评论区标题 -->

      <div class="relative z-10 mb-6">

        <div class="flex items-center gap-3 mb-2">

          <div class="w-1 h-6 bg-linear-to-b from-(--primary) to-transparent rounded-full"></div>

          <h3 class="text-xl font-bold text-(--btn-content)">{i18n(Key.commentSection)}</h3>

        </div>

        <p class="text-sm text-(--content-meta) ml-4">{i18n(Key.commentSubtitle)}</p>

      </div>

      <!-- 评论内容区域 -->

      <div class="relative z-10">

        {commentService === "twikoo" && <Twikoo path={path} />}

        {commentService === "waline" && <Waline path={path} />}

        {commentService === "giscus" && <Giscus />}

        {commentService === "disqus" && <Disqus identifier={slug} url={url} title={'title' in post.data ? post.data.title : slug} />}

          {commentService === "artalk" && <Artalk path={path} />}

        {commentService === "none" && (

          <div class="text-center py-8 text-(--content-meta)">

            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-(--btn-regular-bg) flex items-center justify-center">

              <svg class="w-8 h-8 text-(--primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">

                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>

              </svg>

            </div>

            <p>{i18n(Key.commentNotConfigured)}</p>

          </div>
        )}
      </div>
    </div>
  )
}