fix: comment not update when route changes

Author: Xecades

src/assets/ts/utils.ts

@@ -39,14 +39,14 @@ export const isMobile = (): boolean => is_mobile({ tablet: true });
  * @param src - The source URL of the script to load
  * @returns A promise that resolves when the script is loaded
  */
-export const loadJS = (src: string): Promise<unknown> =>
+export const loadJS = (src: string): Promise<HTMLScriptElement> =>
     new Promise((resolve, reject) => {
         let script = document.createElement("script");
         script.type = "text/javascript";
         script.src = src;
         document.body.appendChild(script);
 
-        script.onload = resolve;
+        script.onload = () => resolve(script);
         script.onerror = reject;
     });
 

src/components/Comment.vue

@@ -3,17 +3,24 @@ import { onMounted } from "vue";
 import { loadJS } from "@/assets/ts/utils";
 
 import "@/assets/css/twikoo.css";
+import router from "@/router";
+
+let script: HTMLScriptElement | null = null;
 
 const URL = "https://cdn.jsdelivr.net/npm/twikoo@1.6.39/dist/twikoo.nocss.js";
 const ENV_ID = "https://twikoo-blog.xecades.xyz/";
 
-onMounted(async () => {
-    await loadJS(URL);
+const loadTwikoo = async () => {
+    if (script) script.remove();
+    script = await loadJS(URL);
 
     // @ts-expect-error
     const twikoo = window.twikoo;
     await twikoo.init({ envId: ENV_ID, el: "#twikoo" });
-});
+};
+
+router.afterEach(loadTwikoo);
+onMounted(loadTwikoo);
 </script>
 
 <template>
@@ -39,7 +46,7 @@ onMounted(async () => {
 
     .tk-extras
         display: none;
-    
+
     .tk-input textarea
         padding: 0.7rem 1rem;
         min-height: 170px !important;
@@ -60,7 +67,7 @@ onMounted(async () => {
 
     .tk-actions
         font-size: 0.8rem;
-        
+
         a
             color: #777;
 

src/components/Content.vue

@@ -80,7 +80,7 @@ onUpdated(registerAnchor);
         <Metadata
             :breadcrumb="meta.breadcrumb"
             :type="meta.type"
-            :key="meta.attr.title"
+            :key="meta.pathname"
         />
 
         <main class="markdown">