onDestroy

src/hello.svelte

@@ -3,26 +3,20 @@
  * https://github.com/frostime/sy-plugin-template-vite
 -->
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { onDestroy, onMount } from "svelte";
     import { version } from "./api";
     import { showMessage } from "siyuan";
     export let name: string;
+    export let i18n: any;
 
     let time;
     let ver;
 
-    onMount(async () => {
-        time = new Date();
-        ver = await version();
-    });
-
-    $: time_str = new Date(time).toLocaleTimeString();
-
-    setInterval(async () => {
+    let intv1 = setInterval(async () => {
         time = new Date();
     }, 1000);
 
-    setInterval(async () => {
+    let intv2 = setInterval(async () => {
         ver = await version();
         showMessage(
             `Hello ${name} v${ver}`,
@@ -30,50 +24,61 @@
         );
     }, 10000);
 
+    onMount(async () => {
+        time = new Date();
+        ver = await version();
+    });
+
+    /**
+     * You must call this function when the component is destroyed.
+    */
+    onDestroy(() => {
+        showMessage("Hello panel closed");
+        clearInterval(intv1);
+        clearInterval(intv2);
+    });
+
+    $: time_str = new Date(time).toLocaleTimeString();
+
 </script>
 
 <div id="hello">
-    <div class="row">
-        <div class="col left">
+    <div class="fn__flex">
+        <div class="fn__flex-1">
             <h2>Hello {name} v{ver}</h2>
         </div>
-        <div class="col right">
+        <div class="fn__flex-1 b3-label__text __text-alignright">
             {time_str}
         </div>
     </div>
 
     <br />
 
-    <p>
-        使用这个模板之前，请阅读<a
-            href="https://github.com/siyuan-note/plugin-sample">官方教程</a
-        >, 确保自己已经理解了插件的基本开发流程。
-    </p>
+    <div class="fn__flex-column">
+        <div class="fn__flex-1">
+            <ul class="b3-list b3-list--background">
+                <li class="b3-list-item">
+                    <span class="b3-list-item__text">
+                        {@html i18n.makesure}
+                    </span>
+                </li>
+            </ul>
+        </div>
+        <div class="fn__space-column"></div>
+    </div>
 
-    <p>
-        Before using this template, please read the <a
-            href="https://github.com/siyuan-note/plugin-sample">offical sample</a
-        >, make sure that you've known about the pipeline for plugin developing.
-    </p>
 </div>
 
 <style lang="scss">
     #hello {
-        margin: 1rem;
-        text-align: left;
+        margin: 20px;
     }
-    .row {
-        display: flex;
-        flex-direction: row;
-
-        .col {
-            flex: 1;
-        }
-        .left {
-            text-align: left;
-        }
-        .right {
-            text-align: right;
-        }
+    .__text-alignright {
+        text-align: right;
+    }
+    .fn__space-column {
+        height: 8px;
+        display: inline-block;
+        flex-shrink: 0;
     }
 </style>

src/i18n/en_US.json

@@ -1,3 +1,6 @@
 {
-    "name": "SiYuan"
+    "name": "SiYuan",
+    "hello": {
+        "makesure": "Before using this template, please read the <a href=\"https://github.com/siyuan-note/plugin-sample\">offical sample</a>, make sure that you've known about the pipeline for plugin developing."
+    }
 }

src/i18n/zh_CN.json

@@ -1,3 +1,6 @@
 {
-    "name": "思源"
+    "name": "思源",
+    "hello": {
+        "makesure": "使用这个模板之前，请阅读<a href=\"https://github.com/siyuan-note/plugin-sample\">官方教程</a>, 确保自己已经理解了插件的基本开发流程。"
+    }
 }

src/index.ts

@@ -20,7 +20,7 @@ export default class SamplePlugin extends Plugin {
             {
                 icon: "iconEmoji",
                 "title": "Hello SiYuan",
-                "callback": () => this.openHelloDialog()
+                "callback": () => this.openHelloInDialog()
             }
         )
     }
@@ -41,7 +41,7 @@ export default class SamplePlugin extends Plugin {
         });
     }
 
-    private openHelloDialog() {
+    private openHelloInDialog() {
         this.counter.hello++;
         let dialog = new Dialog({
             title: "Hello World",
@@ -55,6 +55,7 @@ export default class SamplePlugin extends Plugin {
             target: dialog.element.querySelector("#helloPanel"),
             props: {
                 name: `[${this.counter.hello}]${this.i18n.name}`,
+                i18n: this.i18n.hello
             }
         });
     }