test

package.json

@@ -22,7 +22,6 @@
     "@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

@@ -1,30 +1,23 @@
 ---
-
+const { site, server } = Astro.props;
 ---
-<style>
-  #Comments {
-    opacity: 0;
-    transition: opacity 0.5s ease-in-out;
-  }
 
-  #Comments.loaded {
-    opacity: 1;
-  }
-</style>
+<link href="https://artalk.loliko.cn/dist/Artalk.css" rel="stylesheet">
+<script src="https://artalk.loliko.cn/dist/Artalk.js"></script>
 <div id="Comments"></div>
 <script>
-import Artalk from 'artalk';
-// 初始化 Artalk
-const initArtalk = () => {
-  const artalk = new Artalk({
-    el: '#Comments',
-    site: 'ittst',
-    server: 'https://artalk.loliko.cn',
+document.addEventListener('astro:before-swap', () => {
+  Artalk.init({
+    el:        '#Comments', 
+    server:    {server}, 
+    site:      {site}, 
   });
-
-  // 添加 loaded 类名以触发转场效果
-  document.getElementById('Comments').classList.add('loaded');
-};
-// 在页面加载完成后初始化 Artalk
-window.addEventListener('load', initArtalk);
-</script>
+    });
+document.addEventListener('astro:before-swap', () => {    
+    Artalk.init({
+    el:        '#Comments', 
+    server:    {server}, 
+    site:      {site}, 
+  });
+    });
+</script>

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

@@ -109,7 +109,7 @@ const jsonLd = {
         </div>
     </div>
     <!-- 使用ArtalkComments组件 -->
-    <Artalk />
+    <Artalk server="https://atalk.loliko.cn" site="ittst" />
     <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}]}>