From c5b401be4f816b28ae385eb8816dce6253557cc9 Mon Sep 17 00:00:00 2001
From: qwqcode <qwqcode@gmail.com>
Date: Sun, 17 Dec 2023 01:52:10 +0800
Subject: [PATCH] docs(import): update the examples in import-framework.md

---
 docs/guide/frontend/import-blog.md      |  58 +----------
 docs/guide/frontend/import-framework.md | 129 ++++++++++++++++--------
 2 files changed, 92 insertions(+), 95 deletions(-)

diff --git a/docs/guide/frontend/import-blog.md b/docs/guide/frontend/import-blog.md
index 5136c22b0..b4269df73 100644
--- a/docs/guide/frontend/import-blog.md
+++ b/docs/guide/frontend/import-blog.md
@@ -102,63 +102,13 @@ NexT 主题可以安装 [Hexo NexT 主题的 Artalk 插件](https://github.com/l
 
 ## VuePress
 
-以 [VuePress v2](https://github.com/vuepress/vuepress-next) 为例，继承默认主题 `@vuepress/theme-default`
+（待补充）
 
-可参考：[“/.vuepress/theme/Artalk.vue”](https://github.com/ArtalkJS/Docs/blob/eef37bca8cc0c9973bf121fdef4014dcd940f104/docs/.vuepress/theme/Artalk.vue) 创建 Artalk 评论组件。
+::: tip 提示
 
-在 `/.vuepress/theme/clientAppEnhance.ts` 文件中全局注册组件：
+可参考：[“置入框架”](./import-framework.md)
 
-```ts
-import { defineClientAppEnhance } from '@vuepress/client'
-
-import Artalk from './Artalk.vue'
-
-export default defineClientAppEnhance(({ app, router, siteData }) => {
-  app.component('Artalk', Artalk)
-})
-```
-
-主题布局 `/.vuepress/theme/Layout.vue`：
-
-```vue
-<template>
-  <Layout>
-    <template #page-bottom>
-      <div class="page-meta">
-        <!-- Artalk -->
-        <Artalk />
-      </div>
-    </template>
-  </Layout>
-</template>
-
-<script lang="ts">
-import { defineComponent, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
-import Layout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
-
-export default defineComponent({
-  components: { Layout },
-  mounted: () => {
-  }
-})
-</script>
-```
-
-主题配置文件 `/.vuepress/theme/index.ts`：
-
-```ts
-import { path } from '@vuepress/utils'
-
-export default ({
-  name: 'vuepress-theme-local',
-  extends: '@vuepress/theme-default',
-  layouts: {
-    Layout: path.resolve(__dirname, 'Layout.vue'),
-  },
-  clientAppEnhanceFiles: path.resolve(__dirname, 'clientAppEnhance.ts'),
-})
-```
+:::
 
 ## Typecho
 
diff --git a/docs/guide/frontend/import-framework.md b/docs/guide/frontend/import-framework.md
index e61907879..0f72d88b3 100644
--- a/docs/guide/frontend/import-framework.md
+++ b/docs/guide/frontend/import-framework.md
@@ -14,49 +14,84 @@ Vue 3 + TypeScript 例：
 
 ```vue
 <template>
-  <div class="artalk-comments"></div>
+  <view ref="el"></view>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { onMounted, onBeforeUnmount, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import 'artalk/dist/Artalk.css'
-
-import { defineComponent } from 'vue'
 import Artalk from 'artalk'
 
-export default defineComponent({
-  mounted: () => {
-    const artalk = Artalk.init({
-      el:        this.$el,
-      pageKey:   `${location.pathname}`,
-      pageTitle: `${document.title}`,
-      server:    'http://localhost:8080',
-      site:      'Artalk 的博客',
-      // ...
-    })
-  }
+const el = ref<HTMLElement>()
+const route = useRoute()
+
+let artalk: Artalk
+
+onMounted(() => {
+  artalk = Artalk.init({
+    el:        el.value,
+    pageKey:   route.path,
+    pageTitle: `${document.title}`,
+    server:    'http://localhost:8080',
+    site:      'Artalk 的博客',
+    // ...
+  })
+})
+
+onBeforeUnmount(() => {
+  artalk.destroy()
 })
 </script>
 ```
 
-::: tip 提示
+## React
+
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import 'artalk/dist/Artalk.css';
+import Artalk from 'artalk';
+
+const ArtalkComment = () => {
+  const el = useRef(null);
+  const location = useLocation();
+  let artalk = null;
+
+  useEffect(() => {
+    artalk = new Artalk({
+      el: el.current,
+      pageKey: location.pathname,
+      pageTitle: document.title,
+      server: 'http://localhost:8080',
+      site: 'Artalk 的博客',
+      // ...
+    });
 
-VuePress 可参考：[“VuePress 引入”](./import-blog.md#vuepress)
+    return () => {
+      if (artalk) {
+        artalk.destroy();
+      }
+    };
+  }, [location.pathname]);
 
-:::
+  return <div ref={el}></div>;
+};
 
-## React
+export default ArtalkComment;
+```
 
 ```jsx
-import 'artalk/dist/Artalk.css'
-
 import React, { createRef } from 'react'
+import 'artalk/dist/Artalk.css'
 import Artalk from 'artalk'
 
 export default class Artalk extends React.Component {
   el = createRef()
+  artalk = null
 
-  componentDidMount () {
-    const artalk = Artalk.init({
+  componentDidMount() {
+    this.artalk = Artalk.init({
       el: this.el.current,
       pageKey:   `${location.pathname}`,
       pageTitle: `${document.title}`,
@@ -66,9 +101,13 @@ export default class Artalk extends React.Component {
     })
   }
 
-  render () {
+  componentWillUnmount() {
+    this.artalk?.destroy()
+  }
+
+  render() {
     return (
-      <div ref={this.el} class="artalk-comments" />
+      <div ref={this.el} />
     )
   }
 }
@@ -78,22 +117,30 @@ export default class Artalk extends React.Component {
 
 ```html
 <script>
-import 'artalk/dist/Artalk.css'
-import Artalk from 'artalk'
-
-let comments;
-
-onMount(() => {
-  Artalk.init({
-    el:        comments,
-    pageKey:   `${location.pathname}`,
-    pageTitle: `${document.title}`,
-    server:    'http://localhost:8080',
-    site:      'Artalk 的博客',
-    // ...
-  })
-})
+  import { onMount, onDestroy } from 'svelte';
+  import 'artalk/dist/Artalk.css';
+  import Artalk from 'artalk';
+
+  let el;
+  let artalk;
+
+  onMount(() => {
+    artalk = Artalk.init({
+      el: el,
+      pageKey: location.pathname,
+      pageTitle: document.title,
+      server: 'http://localhost:8080',
+      site: 'Artalk 的博客',
+      // ...
+    });
+
+    onDestroy(() => {
+      if (artalk) {
+        artalk.destroy();
+      }
+    });
+  });
 </script>
 
-<div bind:this={comments} class="artalk-comments"></div>
+<div bind:this={el}></div>
 ```