test

package.json

@@ -22,6 +22,7 @@
     "@fontsource-variable/jetbrains-mono": "^5.0.22",
     "@fontsource/roboto": "^5.0.14",
     "@swup/astro": "^1.4.1",
+    "artalk": "^2.9.1",
     "astro": "^4.15.0",
     "astro-compress": "^2.3.1",
     "astro-icon": "^1.1.1",

src/components/Artalk.astro

@@ -0,0 +1,32 @@
+---
+import Artalk from 'artalk';
+import { useEffect } from 'react';
+
+const { siteKey, siteName } = Astro.props;
+
+useEffect(() => {
+  const artalk = new Artalk({
+    el: '#Comments',
+    site: ittst,
+    server: 'https://artalk.loliko.cn',
+  });
+
+  // 添加 loaded 类名以触发转场效果
+  document.getElementById('artalk-container').classList.add('loaded');
+
+  return () => {
+    artalk.destroy();
+  };
+}, [siteKey, siteName]);
+---
+<style>
+  #Comments {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+  }
+
+  #Comments.loaded {
+    opacity: 1;
+  }
+</style>
+<div id="Comments"></div>

src/layouts/Layout.astro

@@ -126,10 +126,6 @@ const bannerOffset = bannerOffsetByPosition[siteConfig.banner.position || 'cente
 
 		<slot name="head"></slot>
 
-        <link href="https://artalk.loliko.cn/dist/Artalk.css" rel="stylesheet">
-
-        <script src="https://artalk.loliko.cn/dist/Artalk.js" ></script>
-
 		<link rel="stylesheet" href="https://cdn.staticfile.net/KaTeX/0.16.9/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
 
 		<link rel="alternate" type="application/rss+xml" title={profileConfig.name} href={`${Astro.site}rss.xml`}/>

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

@@ -13,7 +13,7 @@ import PostMetadata from '../../components/PostMeta.astro'
 import ImageWrapper from '../../components/misc/ImageWrapper.astro'
 import { profileConfig, siteConfig } from '../../config'
 import { formatDateToYYYYMMDD } from '../../utils/date-utils'
-import ArtalkComments from '../../components/ArtalkComments.astro'
+import Artalk from '../../components/Artalk.astro'
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection('posts', ({ data }) => {
@@ -109,7 +109,7 @@ const jsonLd = {
         </div>
     </div>
     <!-- 使用ArtalkComments组件 -->
-    <ArtalkComments />
+    <Artalk />
     <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
         <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
            class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.nextSlug}]}>