diff --git a/package.json b/package.json
index 7a75499..f504749 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5e90add..0aa4ff6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,9 +36,6 @@ importers:
       '@swup/astro':
         specifier: ^1.4.1
         version: 1.4.1(@types/babel__core@7.20.5)
-      artalk:
-        specifier: ^2.9.1
-        version: 2.9.1(marked@14.1.3)
       astro:
         specifier: ^4.15.0
         version: 4.15.0(@types/node@22.5.1)(lightningcss@1.26.0)(rollup@2.79.1)(sass@1.77.8)(stylus@0.63.0)(terser@5.31.6)(typescript@5.5.4)
@@ -1773,11 +1770,6 @@ packages:
     resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
     engines: {node: '>= 0.4'}
 
-  artalk@2.9.1:
-    resolution: {integrity: sha512-IFo9XqWDalsHy8BsmMA5SSB9bozBa/sBhTm/+O5KwA6DnC95lFKv7C6ScMx/Xa4ue5qSQ7VV5vxRgCh/raohkQ==}
-    peerDependencies:
-      marked: ^14.1.0
-
   astro-compress@2.3.1:
     resolution: {integrity: sha512-W2rv6Vr8dZEw2CEA0/QcBEFmXCERbY8onlyixfRul1nY5moPNkk3zdiw7Id3TkIJyHpqQTP6OyfTmTp6MhOqjw==}
 
@@ -3186,11 +3178,6 @@ packages:
   markdown-table@3.0.3:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
 
-  marked@14.1.3:
-    resolution: {integrity: sha512-ZibJqTULGlt9g5k4VMARAktMAjXoVnnr+Y3aCqW1oDftcV4BA3UmrBifzXoZyenHRk75csiPu9iwsTj4VNBT0g==}
-    engines: {node: '>= 18'}
-    hasBin: true
-
   maxmin@2.1.0:
     resolution: {integrity: sha512-NWlApBjW9az9qRPaeg7CX4sQBWwytqz32bIEo1PW9pRW+kBP9KLRfJO3UC+TV31EcQZEUq7eMzikC7zt3zPJcw==}
     engines: {node: '>=0.12'}
@@ -6707,10 +6694,6 @@ snapshots:
       is-array-buffer: 3.0.4
       is-shared-array-buffer: 1.0.3
 
-  artalk@2.9.1(marked@14.1.3):
-    dependencies:
-      marked: 14.1.3
-
   astro-compress@2.3.1(@types/node@22.5.1)(rollup@2.79.1)(sass@1.77.8)(stylus@0.63.0)(typescript@5.5.4):
     dependencies:
       '@playform/pipe': 0.1.0
@@ -8413,8 +8396,6 @@ snapshots:
 
   markdown-table@3.0.3: {}
 
-  marked@14.1.3: {}
-
   maxmin@2.1.0:
     dependencies:
       chalk: 1.1.3
diff --git a/src/components/Artalk.astro b/src/components/Artalk.astro
index 18a73d9..a747522 100644
--- a/src/components/Artalk.astro
+++ b/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>
\ No newline at end of file
+    });
+document.addEventListener('astro:before-swap', () => {    
+    Artalk.init({
+    el:        '#Comments', 
+    server:    {server}, 
+    site:      {site}, 
+  });
+    });
+</script>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index aff4345..8347aca 100644
--- a/src/pages/posts/[...slug].astro
+++ b/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}]}>