feat: add twikoo & waline comments component (untested)

2025-08-11 17:12:26 +08:00 · 2025-08-11 17:12:26 +08:00 · 123da1747f
commit 123da1747f
parent 955ba5a0b9
5 changed files with 292 additions and 9 deletions
--- a/package.json
+++ b/package.json
@ -29,11 +29,13 @@
    "rehype-katex": "^7.0.1",
    "remark-math": "^6.0.0",
    "sharp": "^0.34.1",
+    "twikoo": "^1.6.44",
    "ultrahtml": "^1.6.0"
  },
  "packageManager": "pnpm@10.7.1+sha512.2d92c86b7928dc8284f53494fb4201f983da65f0fb4f0d40baafa5cf628fa31dae3e5968f12466f17df7e97310e30f343a648baea1b9b350685dafafffdf5808",
  "devDependencies": {
    "@azure/static-web-apps-cli": "^2.0.6",
-    "@types/node": "^22.15.3"
+    "@types/node": "^22.15.3",
+    "@waline/client": "^3.6.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -31,7 +31,7 @@ importers:
        version: 5.2.5
      artalk:
        specifier: ^2.9.1
-        version: 2.9.1(marked@14.1.4)
+        version: 2.9.1(marked@16.1.2)
      astro:
        specifier: ^5.2.5
        version: 5.7.10(@azure/identity@4.9.1)(@types/node@22.15.3)(rollup@4.40.1)(typescript@5.8.3)(yaml@2.7.1)
@ -62,6 +62,9 @@ importers:
      sharp:
        specifier: ^0.34.1
        version: 0.34.1
+      twikoo:
+        specifier: ^1.6.44
+        version: 1.6.44
      ultrahtml:
        specifier: ^1.6.0
        version: 1.6.0
@ -72,6 +75,9 @@ importers:
      '@types/node':
        specifier: ^22.15.3
        version: 22.15.3
+      '@waline/client':
+        specifier: ^3.6.0
+        version: 3.6.0(typescript@5.8.3)

 packages:

@ -210,6 +216,11 @@ packages:
    engines: {node: '>=6.0.0'}
    hasBin: true

+  '@babel/parser@7.28.0':
+    resolution: {integrity: sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
  '@babel/runtime@7.27.1':
    resolution: {integrity: sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==}
    engines: {node: '>=6.9.0'}
@ -218,6 +229,10 @@ packages:
    resolution: {integrity: sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==}
    engines: {node: '>=6.9.0'}

+  '@babel/types@7.28.2':
+    resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
+    engines: {node: '>=6.9.0'}
+
  '@capsizecss/unpack@2.4.0':
    resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==}

@ -1075,6 +1090,9 @@ packages:
  '@types/unist@3.0.3':
    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}

+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
  '@typespec/ts-http-runtime@0.2.2':
    resolution: {integrity: sha512-Gz/Sm64+Sq/vklJu1tt9t+4R2lvnud8NbTD/ZfpZtMiUX7YeVpCA8j6NSW8ptwcoLL+NmYANwqP8DV0q/bwl2w==}
    engines: {node: '>=18.0.0'}
@ -1082,6 +1100,56 @@ packages:
  '@ungap/structured-clone@1.3.0':
    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}

+  '@vue/compiler-core@3.5.18':
+    resolution: {integrity: sha512-3slwjQrrV1TO8MoXgy3aynDQ7lslj5UqDxuHnrzHtpON5CBinhWjJETciPngpin/T3OuW3tXUf86tEurusnztw==}
+
+  '@vue/compiler-dom@3.5.18':
+    resolution: {integrity: sha512-RMbU6NTU70++B1JyVJbNbeFkK+A+Q7y9XKE2EM4NLGm2WFR8x9MbAtWxPPLdm0wUkuZv9trpwfSlL6tjdIa1+A==}
+
+  '@vue/compiler-sfc@3.5.18':
+    resolution: {integrity: sha512-5aBjvGqsWs+MoxswZPoTB9nSDb3dhd1x30xrrltKujlCxo48j8HGDNj3QPhF4VIS0VQDUrA1xUfp2hEa+FNyXA==}
+
+  '@vue/compiler-ssr@3.5.18':
+    resolution: {integrity: sha512-xM16Ak7rSWHkM3m22NlmcdIM+K4BMyFARAfV9hYFl+SFuRzrZ3uGMNW05kA5pmeMa0X9X963Kgou7ufdbpOP9g==}
+
+  '@vue/reactivity@3.5.18':
+    resolution: {integrity: sha512-x0vPO5Imw+3sChLM5Y+B6G1zPjwdOri9e8V21NnTnlEvkxatHEH5B5KEAJcjuzQ7BsjGrKtfzuQ5eQwXh8HXBg==}
+
+  '@vue/runtime-core@3.5.18':
+    resolution: {integrity: sha512-DUpHa1HpeOQEt6+3nheUfqVXRog2kivkXHUhoqJiKR33SO4x+a5uNOMkV487WPerQkL0vUuRvq/7JhRgLW3S+w==}
+
+  '@vue/runtime-dom@3.5.18':
+    resolution: {integrity: sha512-YwDj71iV05j4RnzZnZtGaXwPoUWeRsqinblgVJwR8XTXYZ9D5PbahHQgsbmzUvCWNF6x7siQ89HgnX5eWkr3mw==}
+
+  '@vue/server-renderer@3.5.18':
+    resolution: {integrity: sha512-PvIHLUoWgSbDG7zLHqSqaCoZvHi6NNmfVFOqO+OnwvqMz/tqQr3FuGWS8ufluNddk7ZLBJYMrjcw1c6XzR12mA==}
+    peerDependencies:
+      vue: 3.5.18
+
+  '@vue/shared@3.5.18':
+    resolution: {integrity: sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==}
+
+  '@vueuse/core@13.6.0':
+    resolution: {integrity: sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/metadata@13.6.0':
+    resolution: {integrity: sha512-rnIH7JvU7NjrpexTsl2Iwv0V0yAx9cw7+clymjKuLSXG0QMcLD0LDgdNmXic+qL0SGvgSVPEpM9IDO/wqo1vkQ==}
+
+  '@vueuse/shared@13.6.0':
+    resolution: {integrity: sha512-pDykCSoS2T3fsQrYqf9SyF0QXWHmcGPQ+qiOVjlYSzlWd9dgppB2bFSM1GgKKkt7uzn0BBMV3IbJsUfHG2+BCg==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@waline/api@1.0.0':
+    resolution: {integrity: sha512-o0lWjt+/oZH1/4q3DJxTf5kdkgNbSmoLRXIiGznW225A6hq9/9IkOO1DiAijIsxGYJS6psFC+58+IzkD1EerBA==}
+    engines: {node: '>=18'}
+
+  '@waline/client@3.6.0':
+    resolution: {integrity: sha512-GzRHOpyveRlJamS/QOQ6OItYzvU6px4wtb9enGiwtWcODHSgU+21GZd++czjLwwiyiEgMNOCe8Wqll4ianI38w==}
+    engines: {node: '>=18'}
+
  acorn-jsx@5.3.2:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@ -1175,6 +1243,9 @@ packages:
  atomically@2.0.3:
    resolution: {integrity: sha512-kU6FmrwZ3Lx7/7y3hPS5QnbJfaohcIul5fGqf7ok+4KklIEk9tJ0C2IQPdacSbVUWv6zVHXEBWoWd6NrVMT7Cw==}

+  autosize@6.0.1:
+    resolution: {integrity: sha512-f86EjiUKE6Xvczc4ioP1JBlWG7FKrE13qe/DxBCpe8GCipCq2nFw73aO8QEBKHfSbYGDN5eB9jXWKen7tspDqQ==}
+
  axios@1.9.0:
    resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==}

@ -1396,6 +1467,9 @@ packages:
    engines: {node: '>=4'}
    hasBin: true

+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
  data-uri-to-buffer@2.0.2:
    resolution: {integrity: sha512-ND9qDTLc6diwj+Xe5cdAgVTbLVdXbtxTJRXRhli8Mowuaan+0EJOtdqJ0QCHNSSPyoXGx9HX2/VMnKeC34AChA==}

@ -1570,6 +1644,10 @@ packages:
  end-of-stream@1.4.4:
    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}

+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
  entities@6.0.0:
    resolution: {integrity: sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==}
    engines: {node: '>=0.12'}
@ -2147,9 +2225,14 @@ packages:
  markdown-table@3.0.4:
    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}

-  marked@14.1.4:
-    resolution: {integrity: sha512-vkVZ8ONmUdPnjCKc5uTRvmkRbx4EAi2OkTOXmfTDhZz3OFqMNBM1oTTWwTr4HY4uAEojhzPf+Fy8F1DWa3Sndg==}
-    engines: {node: '>= 18'}
+  marked-highlight@2.2.2:
+    resolution: {integrity: sha512-KlHOP31DatbtPPXPaI8nx1KTrG3EW0Z5zewCwpUj65swbtKOTStteK3sNAjBqV75Pgo3fNEVNHeptg18mDuWgw==}
+    peerDependencies:
+      marked: '>=4 <17'
+
+  marked@16.1.2:
+    resolution: {integrity: sha512-rNQt5EvRinalby7zJZu/mB+BvaAY2oz3wCuCjt1RDrWNpS1Pdf9xqMOeC9Hm5adBdcV/3XZPJpG58eT+WBc0XQ==}
+    engines: {node: '>= 20'}
    hasBin: true

  math-intrinsics@1.1.0:
@ -2586,6 +2669,10 @@ packages:
    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
    engines: {node: ^10 || ^12 || >=14}

+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
  prebuild-install@7.1.3:
    resolution: {integrity: sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==}
    engines: {node: '>=10'}
@ -2654,6 +2741,9 @@ packages:
  reading-time@1.5.0:
    resolution: {integrity: sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==}

+  recaptcha-v3@1.11.3:
+    resolution: {integrity: sha512-sEE6J0RzUkS+sKEBpgCD/AqCU0ffrAVOADGjvAx9vcttN+VLK42SWMkj/J/I6vHu3Kew+xcfbBqDVb65N0QGDw==}
+
  recma-build-jsx@1.0.0:
    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}

@ -3012,6 +3102,9 @@ packages:
  tunnel-agent@0.6.0:
    resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}

+  twikoo@1.6.44:
+    resolution: {integrity: sha512-Y3YfGtMelWT+1XxZS8SmGXkHZ6/26ry1ZteKKBNTYV0oA+o5/2ELUMi4ta2zYD/V0wGZGv6EXJ6HJU8GTPVh4g==}
+
  type-fest@0.21.3:
    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
    engines: {node: '>=10'}
@ -3260,6 +3353,14 @@ packages:
      vite:
        optional: true

+  vue@3.5.18:
+    resolution: {integrity: sha512-7W4Y4ZbMiQ3SEo+m9lnoNpV9xG7QVMLa+/0RFwwiAVkeYoyGXqWE85jabU4pllJNUzqfLShJ5YLptewhCWUgNA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
  wait-on@7.2.0:
    resolution: {integrity: sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==}
    engines: {node: '>=12.0.0'}
@ -3703,6 +3804,10 @@ snapshots:
    dependencies:
      '@babel/types': 7.27.1

+  '@babel/parser@7.28.0':
+    dependencies:
+      '@babel/types': 7.28.2
+
  '@babel/runtime@7.27.1': {}

  '@babel/types@7.27.1':
@ -3710,6 +3815,11 @@ snapshots:
      '@babel/helper-string-parser': 7.27.1
      '@babel/helper-validator-identifier': 7.27.1

+  '@babel/types@7.28.2':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
  '@capsizecss/unpack@2.4.0':
    dependencies:
      blob-to-buffer: 1.2.9
@ -4338,6 +4448,8 @@ snapshots:

  '@types/unist@3.0.3': {}

+  '@types/web-bluetooth@0.0.21': {}
+
  '@typespec/ts-http-runtime@0.2.2':
    dependencies:
      http-proxy-agent: 7.0.2
@ -4348,6 +4460,87 @@ snapshots:

  '@ungap/structured-clone@1.3.0': {}

+  '@vue/compiler-core@3.5.18':
+    dependencies:
+      '@babel/parser': 7.28.0
+      '@vue/shared': 3.5.18
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.18':
+    dependencies:
+      '@vue/compiler-core': 3.5.18
+      '@vue/shared': 3.5.18
+
+  '@vue/compiler-sfc@3.5.18':
+    dependencies:
+      '@babel/parser': 7.28.0
+      '@vue/compiler-core': 3.5.18
+      '@vue/compiler-dom': 3.5.18
+      '@vue/compiler-ssr': 3.5.18
+      '@vue/shared': 3.5.18
+      estree-walker: 2.0.2
+      magic-string: 0.30.17
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.18':
+    dependencies:
+      '@vue/compiler-dom': 3.5.18
+      '@vue/shared': 3.5.18
+
+  '@vue/reactivity@3.5.18':
+    dependencies:
+      '@vue/shared': 3.5.18
+
+  '@vue/runtime-core@3.5.18':
+    dependencies:
+      '@vue/reactivity': 3.5.18
+      '@vue/shared': 3.5.18
+
+  '@vue/runtime-dom@3.5.18':
+    dependencies:
+      '@vue/reactivity': 3.5.18
+      '@vue/runtime-core': 3.5.18
+      '@vue/shared': 3.5.18
+      csstype: 3.1.3
+
+  '@vue/server-renderer@3.5.18(vue@3.5.18(typescript@5.8.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.18
+      '@vue/shared': 3.5.18
+      vue: 3.5.18(typescript@5.8.3)
+
+  '@vue/shared@3.5.18': {}
+
+  '@vueuse/core@13.6.0(vue@3.5.18(typescript@5.8.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.6.0
+      '@vueuse/shared': 13.6.0(vue@3.5.18(typescript@5.8.3))
+      vue: 3.5.18(typescript@5.8.3)
+
+  '@vueuse/metadata@13.6.0': {}
+
+  '@vueuse/shared@13.6.0(vue@3.5.18(typescript@5.8.3))':
+    dependencies:
+      vue: 3.5.18(typescript@5.8.3)
+
+  '@waline/api@1.0.0': {}
+
+  '@waline/client@3.6.0(typescript@5.8.3)':
+    dependencies:
+      '@vueuse/core': 13.6.0(vue@3.5.18(typescript@5.8.3))
+      '@waline/api': 1.0.0
+      autosize: 6.0.1
+      marked: 16.1.2
+      marked-highlight: 2.2.2(marked@16.1.2)
+      recaptcha-v3: 1.11.3
+      vue: 3.5.18(typescript@5.8.3)
+    transitivePeerDependencies:
+      - typescript
+
  acorn-jsx@5.3.2(acorn@8.14.1):
    dependencies:
      acorn: 8.14.1
@ -4395,9 +4588,9 @@ snapshots:

  array-iterate@2.0.1: {}

-  artalk@2.9.1(marked@14.1.4):
+  artalk@2.9.1(marked@16.1.2):
    dependencies:
-      marked: 14.1.4
+      marked: 16.1.2

  as-table@1.0.55:
    dependencies:
@ -4510,6 +4703,8 @@ snapshots:
      stubborn-fs: 1.2.5
      when-exit: 2.1.4

+  autosize@6.0.1: {}
+
  axios@1.9.0:
    dependencies:
      follow-redirects: 1.15.9
@ -4724,6 +4919,8 @@ snapshots:

  cssesc@3.0.0: {}

+  csstype@3.1.3: {}
+
  data-uri-to-buffer@2.0.2: {}

  date-fns@2.30.0:
@ -4876,6 +5073,8 @@ snapshots:
    dependencies:
      once: 1.4.0

+  entities@4.5.0: {}
+
  entities@6.0.0: {}

  eol@0.9.1: {}
@ -5603,7 +5802,11 @@ snapshots:

  markdown-table@3.0.4: {}

-  marked@14.1.4: {}
+  marked-highlight@2.2.2(marked@16.1.2):
+    dependencies:
+      marked: 16.1.2
+
+  marked@16.1.2: {}

  math-intrinsics@1.1.0: {}

@ -6327,6 +6530,12 @@ snapshots:
      picocolors: 1.1.1
      source-map-js: 1.2.1

+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
  prebuild-install@7.1.3:
    dependencies:
      detect-libc: 2.0.4
@ -6398,6 +6607,8 @@ snapshots:

  reading-time@1.5.0: {}

+  recaptcha-v3@1.11.3: {}
+
  recma-build-jsx@1.0.0:
    dependencies:
      '@types/estree': 1.0.7
@ -6920,6 +7131,8 @@ snapshots:
    dependencies:
      safe-buffer: 5.2.1

+  twikoo@1.6.44: {}
+
  type-fest@0.21.3: {}

  type-fest@4.40.1: {}
@ -7096,6 +7309,16 @@ snapshots:
    optionalDependencies:
      vite: 6.3.4(@types/node@22.15.3)(yaml@2.7.1)

+  vue@3.5.18(typescript@5.8.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.18
+      '@vue/compiler-sfc': 3.5.18
+      '@vue/runtime-dom': 3.5.18
+      '@vue/server-renderer': 3.5.18(vue@3.5.18(typescript@5.8.3))
+      '@vue/shared': 3.5.18
+    optionalDependencies:
+      typescript: 5.8.3
+
  wait-on@7.2.0:
    dependencies:
      axios: 1.9.0
--- a/src/components/helper/comments/Twikoo.astro
+++ b/src/components/helper/comments/Twikoo.astro
@ -0,0 +1,25 @@
+---
+import {siteConfig} from "../../../config";
+
+const twikooServer = siteConfig.comments.twikoo.envId;
+const twikooRegion = siteConfig.comments.twikoo.region || ''; // 默认为空
+---
+<div id="tcomment" data-region={twikooRegion} data-env={twikooServer}></div>
+<script>
+    import 'twikoo/dist/twikoo.min.js';
+    function initTwikoo() {
+        const twikooElement = document.querySelector('#tcomment');
+        if (!twikooElement) return;
+        twikoo.init({
+            envId: twikooElement.getAttribute('data-env'), // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
+            el: '#tcomment', // 容器元素
+            region: twikooElement.getAttribute('data-region'), // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
+            lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
+        })
+    }
+    initTwikoo();
+    // Re-initialize on view transitions, fix issues with Astro's ClientRouter
+    document.addEventListener('astro:page-load', () => {
+        initTwikoo();
+    });
+</script>
--- a/src/components/helper/comments/Waline.astro
+++ b/src/components/helper/comments/Waline.astro
@ -0,0 +1,25 @@
+---
+import '@waline/client/style';
+import {siteConfig} from "../../../config";
+
+const walineServer = siteConfig.comments.waline.serverURL;
+---
+<div id="waline" data-server={walineServer}></div>
+<script>
+    import { init } from '@waline/client';
+    function initWaline() {
+        const walineElement = document.querySelector('#waline');
+
+        if (!walineElement) return;
+        init({
+            el: '#waline',
+            serverURL: `https://${walineElement.getAttribute('data-server')}` || '', // Replace with your Waline server URL
+            dark: 'auto', // Automatically switch between light and dark mode
+        });
+    }
+    initWaline();
+    // Re-initialize on view transitions, fix issues with Astro's ClientRouter
+    document.addEventListener('astro:page-load', () => {
+        initWaline();
+    });
+</script>
--- a/src/config.ts
+++ b/src/config.ts
@ -44,7 +44,7 @@ export const siteConfig = {
    contentPassword: 'p1easeChangeMe!',
    // comments
    comments: {
-        type: 'artalk', // 'artalk','giscus','fediverse','email','hatsu','oom'
+        type: 'artalk', // 'artalk','giscus','fediverse','email','hatsu','oom','twikoo','waline'
        artalk: {
            instanceDomain: '', // the domain of your artalk instance
        },
@ -88,6 +88,14 @@ export const siteConfig = {
        hatsu: {
            // use hatsu.cli.rs to get replies from the fediverse
            instanceDomain: '',
+        },
+        twikoo: {
+            // use twikoo to get comments
+            envId: 'your-env-id', // the env id/domain of your twikoo instance, see https://twikoo.js.org/backend.html
+            region: '' // the deployment region of your twikoo instance, can be 'ap-shanghai', 'ap-guangzhou', if you are not deploying twikoo on Tencent Cloud, leave it empty
+        },
+        waline: {
+            serverURL: '' // the domain of your waline instance, usually your-waline-instance.com
        }
    },
    // footer