diff --git a/src/assets/vue_config.json b/src/assets/vue_config.json
new file mode 100644
index 0000000..544b7b4
--- /dev/null
+++ b/src/assets/vue_config.json
@@ -0,0 +1,3 @@
+{
+    
+}
\ No newline at end of file
diff --git a/src/components/cards/Card.ts b/src/components/cards/Card.ts
index b2b931f..f60e9a5 100644
--- a/src/components/cards/Card.ts
+++ b/src/components/cards/Card.ts
@@ -21,17 +21,14 @@ export type cardType = {
 };
 
 export function getDatas(url: string, cards: cardType[]) {
-  console.log(url);
   FetchWrapper.fetch(url, { timeout: 3000 })
     .then(response => {
       if (!response.ok) {
         // throw new Error(`HTTP error! status: ${response.status}`);
         return null;
       }
-      console.log(response);
       return response.json();
     }).then(jsonData => {
-      console.log('JSON Data:', jsonData);
       if (!jsonData) {
         return null;
       }
diff --git a/src/components/cards/Card.vue b/src/components/cards/Card.vue
index 32623c0..47b87ab 100644
--- a/src/components/cards/Card.vue
+++ b/src/components/cards/Card.vue
@@ -27,9 +27,9 @@ let { card, idx } = defineProps<{
   idx: number
 }>()
 
-function getRealHref(href: string) {
+function getRealHref(href: string, user_name: string = "$") {
   if (href.startsWith('$')) {
-    return `/card/_${href.substring(1)}`;
+    href = `/card/${user_name}${href.substring(1)}`;
   }
   return href;
 }
diff --git a/src/pages/CardShower.vue b/src/pages/CardsShower.vue
similarity index 80%
rename from src/pages/CardShower.vue
rename to src/pages/CardsShower.vue
index 5e7e679..229d5f2 100644
--- a/src/pages/CardShower.vue
+++ b/src/pages/CardsShower.vue
@@ -1,12 +1,12 @@
 <template>
-  <Navbar />
+  <Navbar v-show="is_surround ?? true"/>
   <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" />
   </div>
 
   <CardsManager :checkCallback="checkHandle" cardType="Card" v-model:cards="cardsData" v-model:is-show-edit="isShowEdit"/>
-  <Footer />
+  <Footer v-show="is_surround ?? true"/>
 </template>
 
 <script setup lang="ts">
@@ -14,27 +14,20 @@ import { onMounted, ref, watch } from "vue"
 import Navbar from "@/components/Navbar.vue"
 import Footer from "@/components/Footer.vue"
 // import axios, { AxiosError } from "axios"
-import router from "@/router"
-import FetchWrapper from "@/components/utils/FetchWapper";
 import { getDatas, type cardType } from "@/components/cards/Card";
 import CardsManager from "@/components/cards/CardsManager.vue";
 
-import { file_api } from '@/config/config.json';
-
-const props = defineProps(['user_name', 'pages_name', 'token'])
+const props = defineProps<{
+  user_name: string,
+  url: string,
+  is_surround?: boolean,
+}>()
 
 let isShowEdit = ref(false)
 let TOKEN = ref("")
 
-const cardUrl = (
-  `${file_api.root_url}/` +
-  `${file_api.cards.url}/` +
-  `${props.pages_name}?` +
-  `type=${file_api.cards.type}`
-);
-
 onMounted(() => {
-  getDatas(cardUrl, cardsData.value);
+  getDatas(props.url, cardsData.value);
 });
 
 let cardsData = ref<cardType[]>([])
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 62d47a2..da40626 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -13,17 +13,8 @@
   <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" />
-  </div>
-  <div class="form-control">
-    <label class="label cursor-pointer">
-      <span class="label-text">isShowEdit</span>
-      <input type="checkbox" v-model="isShowEdit" class="checkbox" />
-    </label>
-  </div>
-  <CardsManager :checkCallback="checkHandle" cardType="Card" v-model:cards="cards" v-model:is-show-edit="isShowEdit" />
+
+  <CardShower user_name="$" :url="getCardUrl()" :is_surround="false"/>
   <Footer/>
 </template>
 
@@ -32,59 +23,11 @@ import { onMounted, ref, watch } from "vue"
 import Navbar from "@/components/Navbar.vue"
 import Hero from "@/components/Hero.vue"
 import Footer from "@/components/Footer.vue"
-import { type cardType, getDatas } from "@/components/cards/Card"
-import CardsManager from "@/components/cards/CardsManager.vue"
-import { useRouter } from "vue-router"
 import Alert from "@/components/utils/Alert.vue"
-
-import { file_api } from "@/config/config.json"
-
-const router = useRouter()
+import CardShower from "./CardsShower.vue"
+import { getCardUrl } from "@/router/card"
 
 let isShowEdit = ref(false)
-let TOKEN = ref("")
-watch(TOKEN, () => {
-  console.log(TOKEN.value)
-  if (TOKEN.value) {
-    isShowEdit.value = true
-  }
-})
-
-function checkHandle() {
-  return false
-}
-
-const cardUrl = (
-  `${file_api.root_url}/` +
-  `${file_api.cards.url}/` +
-  `${file_api.cards.home}?` +
-  `type=${file_api.cards.type}`
-);
-
-onMounted(() => {
-  getDatas(cardUrl, cards.value)
-});
-
-let cards = ref<cardType[]>([
-  {
-    title: "404",
-    body: "test",
-    jumpHerf: "/404",
-    imgSrc: null,
-    imgAlt: null,
-    btnText: null,
-    btnHref: null,
-  },
-  {
-    title: "404",
-    body: "note",
-    jumpHerf: '/note/Style Guide for C',
-    imgSrc: null,
-    imgAlt: null,
-    btnText: null,
-    btnHref: null,
-  },
-])
 
 // watch(myItems, () => {
 //   console.log("cards updated")
diff --git a/src/pages/NoteShower.vue b/src/pages/NoteShower.vue
index 49d715b..7d4f279 100644
--- a/src/pages/NoteShower.vue
+++ b/src/pages/NoteShower.vue
@@ -11,7 +11,7 @@ import Navbar from "@/components/Navbar.vue";
 import Alert from '@/components/utils/Alert.vue'
 import FetchWrapper from "@/components/utils/FetchWapper";
 
-import { file_api } from '@/config/config.json';
+import { file_api } from '@/router/config.json';
 
 const props = defineProps(['note_name', 'token'])
 let isShow = ref(true)
diff --git a/src/router/card.ts b/src/router/card.ts
new file mode 100644
index 0000000..19922f4
--- /dev/null
+++ b/src/router/card.ts
@@ -0,0 +1,31 @@
+import { type RouteRecordRaw } from "vue-router";
+import { file_api } from "./config.json";
+
+export function getCardUrl(path: string = file_api.cards.home): string {
+  return `${file_api.root_url}/` +
+  `${file_api.cards.url}/` +
+  `${path}?` +
+  `type=${file_api.cards.type}`
+};
+
+export default function cardRoute(): RouteRecordRaw {
+    return {
+      name: "cardShower",
+      path: "/card/:user_name/:pages_path*",
+      component: () => import("@/pages/CardsShower.vue"),
+      props(to) {
+        let path: string;
+        if (Array.isArray(to.params.pages_path)) {
+          path = to.params.pages_path.join("/");
+        } else {
+          path = to.params.pages_path;
+        }
+
+        return {
+          ...to.params,
+          path,
+          url: getCardUrl(path),
+        }
+      },
+    }
+}
diff --git a/src/config/config.json b/src/router/config.json
similarity index 100%
rename from src/config/config.json
rename to src/router/config.json
diff --git a/src/router/index.ts b/src/router/index.ts
index d98c4af..912df44 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,5 @@
-import { createRouter, createWebHistory } from "vue-router"
+import { createRouter, createWebHistory } from "vue-router";
+import cardRoute from "./card";
 
 const router = createRouter({
   history: createWebHistory(),
@@ -23,21 +24,17 @@ const router = createRouter({
       path: "/users",
       component: () => import("@/pages/Users.vue"),
     },
-    {
-      name: "cardShower",
-      path: "/card/:user_name/:pages_name/:token?",
-      component: () => import("@/pages/CardShower.vue"),
-      props: true,
-    },
+    cardRoute(),
     {
       name: "noteShower",
       path: "/note/:note_name/:token?",
       component: () => import("@/pages/NoteShower.vue"),
-      props(route) {
-        return {
-          ...route.params
-        }
-      },
+      props: true,
+      // props(route) {
+      //   return {
+      //     ...route.params
+      //   }
+      // },
     },
     {
       name: 'notFound',