diff --git a/package-lock.json b/package-lock.json
index 5c5bb30..0a493d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,10 +10,12 @@
       "dependencies": {
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
+        "vue-markdown-it": "^0.9.4",
         "vue-router": "^4.3.2"
       },
       "devDependencies": {
         "@tsconfig/node20": "^20.1.4",
+        "@types/markdown-it": "^14.1.1",
         "@types/node": "^20.12.5",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/tsconfig": "^0.5.1",
@@ -747,6 +749,28 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.1.tgz",
+      "integrity": "sha512-4NpsnpYl2Gt1ljyBGrKMxFYAYvpqbnnkgP/i/g+NLpjEUa3obn1XJCur9YbEXKDAkaXqsR1LbDnGEJ0MmKFxfg==",
+      "dev": true,
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.13.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.13.0.tgz",
@@ -1506,6 +1530,16 @@
         "he": "bin/he"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "9.18.5",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.5.tgz",
+      "integrity": "sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==",
+      "deprecated": "Support has ended for 9.x series. Upgrade to @latest",
+      "hasInstallScript": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1643,6 +1677,56 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
+    "node_modules/markdown-it-abbr": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-it-abbr/-/markdown-it-abbr-1.0.4.tgz",
+      "integrity": "sha512-ZeA4Z4SaBbYysZap5iZcxKmlPL6bYA8grqhzJIHB1ikn7njnzaP8uwbtuXc4YXD5LicI4/2Xmc0VwmSiFV04gg=="
+    },
+    "node_modules/markdown-it-deflist": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-deflist/-/markdown-it-deflist-2.1.0.tgz",
+      "integrity": "sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg=="
+    },
+    "node_modules/markdown-it-emoji": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz",
+      "integrity": "sha512-QCz3Hkd+r5gDYtS2xsFXmBYrgw6KuWcJZLCEkdfAuwzZbShCmCfta+hwAMq4NX/4xPzkSHduMKgMkkPUJxSXNg=="
+    },
+    "node_modules/markdown-it-footnote": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-3.0.3.tgz",
+      "integrity": "sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w=="
+    },
+    "node_modules/markdown-it-ins": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-ins/-/markdown-it-ins-2.0.0.tgz",
+      "integrity": "sha512-DhLLxseIg2C7+AULvoyVI+zMeufR0QFvXJ2o0oV013hN5HvBvNh2rbVtTdxZjI959+hgo2AA0aRdtEIUaKPbhg=="
+    },
+    "node_modules/markdown-it-mark": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-2.0.0.tgz",
+      "integrity": "sha512-iT8ua0Bda8QrVwHDOUNw1eyCuL7irXeYch5n8zGS4tb7wsDIn7EjQZLjihKaijzBiL0ikfWL2zAvL/ECqTvsNA=="
+    },
+    "node_modules/markdown-it-smartarrows": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-smartarrows/-/markdown-it-smartarrows-1.0.1.tgz",
+      "integrity": "sha512-LwWnlFyLY5ANjLR0a8BuLvQEm4Ri76IavQwqTnpquSiMoE3JXefk5Pu7nD5VKn784bgLqL3sexdt/j8GwuLgOw=="
+    },
+    "node_modules/markdown-it-sub": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sub/-/markdown-it-sub-1.0.0.tgz",
+      "integrity": "sha512-z2Rm/LzEE1wzwTSDrI+FlPEveAAbgdAdPhdWarq/ZGJrGW/uCQbKAnhoCsE4hAbc3SEym26+W2z/VQB0cQiA9Q=="
+    },
+    "node_modules/markdown-it-sup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz",
+      "integrity": "sha512-E32m0nV9iyhRR7CrhnzL5msqic7rL1juWre6TQNxsnApg7Uf+F97JOKxUijg5YwXz86lZ0mqfOnutoryyNdntQ=="
+    },
+    "node_modules/markdown-it-task-lists": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
+      "integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA=="
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -2090,6 +2174,21 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2283,6 +2382,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -2291,6 +2398,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -2627,6 +2739,95 @@
         }
       }
     },
+    "node_modules/vue-markdown-it": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/vue-markdown-it/-/vue-markdown-it-0.9.4.tgz",
+      "integrity": "sha512-nI4AO3N6NKKmC5JRZhvbUEhW7Wa559peY0Ly0sZ6Tye84ROAWs9RZrUmbiCl4vTgBGcndlAYG7SYgi99CXH1Cw==",
+      "dependencies": {
+        "highlight.js": "^9.13.1",
+        "markdown-it": "^8.4.2",
+        "markdown-it-abbr": "^1.0.4",
+        "markdown-it-deflist": "^2.0.3",
+        "markdown-it-emoji": "^1.4.0",
+        "markdown-it-footnote": "^3.0.1",
+        "markdown-it-ins": "^2.0.0",
+        "markdown-it-mark": "^2.0.0",
+        "markdown-it-smartarrows": "^1.0.1",
+        "markdown-it-sub": "^1.0.0",
+        "markdown-it-sup": "^1.0.0",
+        "markdown-it-task-lists": "^2.1.1",
+        "vue": "^2.5.21"
+      }
+    },
+    "node_modules/vue-markdown-it/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/vue-markdown-it/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/vue-markdown-it/node_modules/entities": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+    },
+    "node_modules/vue-markdown-it/node_modules/linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
+    "node_modules/vue-markdown-it/node_modules/markdown-it": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
+      "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "entities": "~1.1.1",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/vue-markdown-it/node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
+    "node_modules/vue-markdown-it/node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
+    "node_modules/vue-markdown-it/node_modules/vue": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
+      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.16",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz",
diff --git a/package.json b/package.json
index 08a6861..e263277 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,12 @@
   "dependencies": {
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
+    "vue-markdown-it": "^0.9.4",
     "vue-router": "^4.3.2"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
+    "@types/markdown-it": "^14.1.1",
     "@types/node": "^20.12.5",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/tsconfig": "^0.5.1",
diff --git a/src/assets/config.json b/src/assets/config.json
new file mode 100644
index 0000000..3257e8b
--- /dev/null
+++ b/src/assets/config.json
@@ -0,0 +1,13 @@
+{
+    "file_api": {
+        "cards": {
+            "type": "json",
+            "base_url": "/api/files/cards",
+            "home_json": "index-content.json"
+        },
+        "notes": {
+            "type": "html",
+            "base_url": "/api/files/notes"
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/utils/Alert.vue b/src/components/utils/Alert.vue
new file mode 100644
index 0000000..25cacdc
--- /dev/null
+++ b/src/components/utils/Alert.vue
@@ -0,0 +1,61 @@
+<template>
+  <div role="alert" class="alert alert-warning" v-if="isShow">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+    </svg>
+    <span>{{ alertMsg }}</span>
+    <div>
+      <button :class="'btn btn-sm ' + LBtnClass" @click="LBtnFunc??LBtnFuncDefault()">{{ LBtnMsg }}</button>
+      <button :class="'btn btn-sm ' + RBtnClass" @click="RBtnFunc??RBtnFuncDefault()">{{ RBtnMsg }}</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import router from '@/router';
+import { ref } from 'vue';
+
+let isShow = ref(true)
+
+function LBtnFuncDefault() {
+  router.push('/404')
+}
+
+function RBtnFuncDefault() {
+  isShow.value = false
+}
+
+defineProps({
+  alertMsg: {
+    type: String,
+    default: 'This is a alert message'
+  },
+  LBtnFunc: {
+    type: Function,
+    default: null
+  },
+  LBtnClass: {
+    type: String,
+    default: ''
+  },
+  LBtnMsg: {
+    type: String,
+    default: 'Deny 拒绝'
+  },
+  RBtnFunc: {
+    type: Function,
+    default: null
+  },
+  RBtnClass: {
+    type: String,
+    default: 'btn-primary'
+  },
+  RBtnMsg: {
+    type: String,
+    default: 'Accept 接受'
+  },
+})
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/utils/IFrame.vue b/src/components/utils/IFrame.vue
new file mode 100644
index 0000000..1c3671f
--- /dev/null
+++ b/src/components/utils/IFrame.vue
@@ -0,0 +1,62 @@
+<template>
+    <div ref="outerContainer" @wheel.stop="handleWheel">
+        <iframe ref="frameRef" :src="frameUrl" :style="frameStyle"/>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+    'frameUrl': {
+        type: String,
+        required: true
+    },
+    height: {
+        type: String,
+        default: '85vh'
+    },
+    width: {
+        type: String,
+        default: '100%'
+    }
+})
+const frameRef = ref<HTMLIFrameElement | null>(null);
+
+const frameStyle = computed(() => {
+    return {
+        height: props.height,
+        width: props.width,
+        // border: 'none',
+    }
+})
+
+const outerContainer = ref<HTMLDivElement | null>(null);
+const handleWheel = (event: WheelEvent) => {
+    // if (frameRef.value && outerContainer.value) {
+    //     const iframeDoc = frameRef.value.contentDocument;
+    //     if (iframeDoc) {
+    //         const iframeBody = iframeDoc.body;
+    //         const iframeScrollTop = iframeBody.scrollTop;
+    //         const iframeScrollBottom = iframeBody.scrollHeight - iframeBody.clientHeight - iframeScrollTop;
+    //         const outerScrollTop = outerContainer.value.scrollTop;
+    //         const outerScrollBottom = outerContainer.value.scrollHeight - outerContainer.value.clientHeight - outerScrollTop;
+
+    //         if (event.deltaY > 0 && iframeScrollBottom <= 0) {
+    //             // 如果iframe滚动到底部，则滚动外部页面
+    //             outerContainer.value.scrollTop += event.deltaY;
+    //         } else if (event.deltaY < 0 && iframeScrollTop <= 0) {
+    //             // 如果iframe滚动到顶部，则滚动外部页面
+    //             outerContainer.value.scrollTop += event.deltaY;
+    //         } else {
+    //             // 否则只滚动iframe内部
+    //             iframeBody.scrollTop -= event.deltaY;
+    //         }
+    //     }
+    // }
+}
+
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 1da3adc..0674c25 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,7 +5,7 @@ import router from '@/router'
 import '@/style.css'
 import App from '@/App.vue'
 
-createApp(App)
-.use(createPinia())
-.use(router)
-.mount('#app')
+// import MarkdownIt from 'markdown-it'
+
+let app = createApp(App)
+app.use(createPinia()).use(router).mount('#app')
diff --git a/src/pages/CardShower.vue b/src/pages/CardShower.vue
index 0fc3025..a03dcdc 100644
--- a/src/pages/CardShower.vue
+++ b/src/pages/CardShower.vue
@@ -19,13 +19,15 @@ import FetchWrapper from "@/components/utils/FetchWapper";
 import type { cardType } from "@/components/cards/Card";
 import CardsManager from "@/components/cards/CardsManager.vue";
 
+import { file_api } from '@/assets/config.json'
+
 const props = defineProps(['user_name', 'pages_name', 'token'])
 
 let isShowEdit = ref(false)
 let TOKEN = ref("")
 
 onMounted(() => {
-  FetchWrapper.fetch(`/api/files/json/${props.pages_name}.json`, { timeout: 3000 })
+  FetchWrapper.fetch(`${file_api.cards.base_url}/${props.pages_name}.json`, { timeout: 3000 })
     .then(response => {
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 32c6f1b..c3c2054 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -10,6 +10,9 @@
       console.log(res)
     })
   }">BTN</button> -->
+  <div class="toast toast-top toast-center">
+    <Alert alertMsg="该网站仅供个人学习使用(This website is for personal learning purposes only)"/>
+  </div>
   <div>
     <span class="badge">TOKEN is</span>
     <input type="text" v-model.trim="TOKEN" placeholder="TOKEN" class="input input-ghost input-xs w-full max-w-xs" />
@@ -21,7 +24,7 @@
     </label>
   </div>
   <CardsManager :checkCallback="checkHandle" cardType="Card" v-model:cards="cards" v-model:is-show-edit="isShowEdit" />
-  <Footer />
+  <Footer/>
 </template>
 
 <script setup lang="ts">
@@ -31,8 +34,13 @@ import Hero from "@/components/Hero.vue"
 import Footer from "@/components/Footer.vue"
 import { type cardType } from "@/components/cards/Card"
 import CardsManager from "@/components/cards/CardsManager.vue"
-import router from "@/router"
 import FetchWrapper from "@/components/utils/FetchWapper"
+import { useRouter } from "vue-router"
+import Alert from "@/components/utils/Alert.vue"
+
+import { file_api } from "@/assets/config.json"
+
+const router = useRouter()
 
 let isShowEdit = ref(false)
 let TOKEN = ref("")
@@ -47,14 +55,20 @@ function checkHandle() {
   return false
 }
 
+const cardUrl = `${file_api.cards.base_url}/${file_api.cards.home_json}`
 onMounted(() => {
-  FetchWrapper.fetch("/api/files/json/index-content.json", { timeout: 3000 })
+  FetchWrapper.fetch(cardUrl, { timeout: 3000 })
     .then(response => {
       if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+        // throw new Error(`HTTP error! status: ${response.status}`);
+        return;
       }
       return response.json();
     }).then(body => {
+      if (!body.datas) {
+        return;
+      }
+      cards.value.length = 0;
       body.datas.forEach((i: cardType) => {
         const item = {...body.default_item, ...i}
         cards.value.push({
@@ -76,6 +90,15 @@ let cards = ref<cardType[]>([
     btnText: null,
     btnHref: null,
   },
+  {
+    title: "404",
+    body: "note",
+    jumpHerf: '/note/Style Guide for C.html',
+    imgSrc: null,
+    imgAlt: null,
+    btnText: null,
+    btnHref: null,
+  },
 ])
 
 // watch(myItems, () => {
diff --git a/src/pages/NoteShower.vue b/src/pages/NoteShower.vue
new file mode 100644
index 0000000..20fa79c
--- /dev/null
+++ b/src/pages/NoteShower.vue
@@ -0,0 +1,21 @@
+<template>
+    <Navbar/>
+    <!-- <Alert/> -->
+    <IFrame :frameUrl="noteUrl"/>
+</template>
+
+<script setup lang='ts'>
+import { computed, onMounted, ref, watch } from "vue"
+import IFrame from '@/components/utils/IFrame.vue'
+import Navbar from "@/components/Navbar.vue";
+import Alert from '@/components/utils/Alert.vue'
+const props = defineProps(['note_url', 'token'])
+let isShow = ref(true)
+const noteUrl = ref('/files/notes/' + props.note_url ?? '')
+
+let msg = ref('msg')
+let btnTxt = ref('btnTxt')
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 470af54..b6d5f1f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -29,6 +29,16 @@ const router = createRouter({
       component: () => import("@/pages/CardShower.vue"),
       props: true,
     },
+    {
+      name: "noteShower",
+      path: "/note/:note_url/:token?",
+      component: () => import("@/pages/NoteShower.vue"),
+      props(route) {
+        return {
+          ...route.params
+        }
+      },
+    },
     {
       name: 'notFound',
       path: "/:any*", // 使用正则表达式匹配所有路径