把giscus评论系统改成twikoo

src/components/comment/Twikoo.astro

@@ -0,0 +1,19 @@
+---
+import { commentConfig } from '@/config'
+
+interface Props {
+  path: string
+}
+
+const config = {
+  ...commentConfig.twikoo,
+  el: '#tcomment',
+  path: Astro.props.path,
+}
+---
+
+<div id="tcomment"></div>
+<script is:inline src="https://cdn.staticfile.org/twikoo/1.6.44/twikoo.all.min.js"></script>
+<script is:inline define:vars={{ config }}>
+  twikoo.init(config)
+</script>

src/components/comment/index.astro

@@ -0,0 +1,22 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import { commentConfig } from '@/config'
+import Twikoo from './Twikoo.astro'
+interface Props {
+  post: CollectionEntry<'posts'>
+}
+
+const { id, data, slug } = Astro.props.post
+
+const path = `/posts/${slug}`
+const url = `${Astro.site?.href}${path}`
+
+let commentService = ''
+if (commentConfig?.twikoo) {
+  commentService = 'twikoo'
+}
+---
+<div class="card-base p-6 mb-4">
+  {commentService === 'twikoo' && <Twikoo path={path} />}
+  {commentService === '' && null}
+</div>

src/config.ts

@@ -1,5 +1,6 @@
 import type {
 	ExpressiveCodeConfig,
+	CommentConfig,
 	LicenseConfig,
 	NavBarConfig,
 	ProfileConfig,
@@ -99,3 +100,9 @@ export const expressiveCodeConfig: ExpressiveCodeConfig = {
 	// Please select a dark theme, as this blog theme currently only supports dark background color
 	theme: "github-dark",
 };
+
+export const commentConfig: CommentConfig = {
+  twikoo: {
+    envId: 'https://twikoo.mckero.com/',
+  },
+}

src/pages/posts/[...slug].astro

@@ -13,6 +13,7 @@ import ImageWrapper from "../../components/misc/ImageWrapper.astro";
 import PostMetadata from "../../components/PostMeta.astro";
 import { profileConfig, siteConfig } from "../../config";
 import { formatDateToYYYYMMDD } from "../../utils/date-utils";
+import Comment from "@components/comment/index.astro"
 
 export async function getStaticPaths() {
 	const blogEntries = await getSortedPosts();
@@ -108,22 +109,8 @@ const jsonLd = {
             </Markdown>
 
             {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
-<script src="https://giscus.app/client.js"
-        data-repo="MCKero6423/chat"
-        data-repo-id="R_kgDOPcjoqA"
-        data-category="Announcements"
-        data-category-id="DIC_kwDOPcjoqM4CuFO_"
-        data-mapping="pathname"
-        data-strict="0"
-        data-reactions-enabled="1"
-        data-emit-metadata="0"
-        data-input-position="top"
-        data-theme="preferred_color_scheme"
-        data-lang="zh-CN"
-        data-loading="lazy"
-        crossorigin="anonymous"
-        async>
-</script>
+
+             <Comment post={entry}></Comment>
 
         </div>
     </div>

src/types/config.ts

@@ -91,6 +91,16 @@ export type LIGHT_DARK_MODE =
 	| typeof DARK_MODE
 	| typeof AUTO_MODE;
 
+    export type CommentConfig = {
+    twikoo?: TwikooConfig
+  }
+  
+  type TwikooConfig = {
+    envId: string
+    region?: string
+    lang?: string
+  }
+
 export type BlogPostData = {
 	body: string;
 	title: string;