diff --git a/src/client/app/components/Debug.vue b/src/client/app/components/Debug.vue
index 003e89d6..5f729207 100644
--- a/src/client/app/components/Debug.vue
+++ b/src/client/app/components/Debug.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="debug" :class="{ open }" @click="open = !open">
     <pre>debug</pre>
-    <pre>$site {{ $site }}</pre>
     <pre>$page {{ $page }}</pre>
+    <pre>$siteByRoute {{ $siteByRoute }}</pre>
+    <pre>$site {{ $site }}</pre>
   </div>
 </template>
 
@@ -27,8 +28,8 @@ export default {
   cursor: pointer;
   bottom: 0;
   right: 0;
-  width: 50px;
-  height: 20px;
+  width: 80px;
+  height: 30px;
   padding: 5px;
   overflow: hidden;
   color: #eeeeee;
@@ -40,7 +41,7 @@ export default {
   width: 500px;
   height: 100%;
   margin-top: 0;
-  padding: 5px 20px;
+  padding: 0 0;
   overflow: scroll;
 }
 
@@ -48,5 +49,7 @@ export default {
   font-family: Hack, monospace;
   font-size: 13px;
   margin: 0;
+  padding: 5px 10px;
+  border-bottom: 1px solid #eee;
 }
 </style>
diff --git a/src/client/app/index.ts b/src/client/app/index.ts
index 7ce6cd9f..12108031 100644
--- a/src/client/app/index.ts
+++ b/src/client/app/index.ts
@@ -7,6 +7,7 @@ import Debug from './components/Debug.vue'
 import Theme from '/@theme/index'
 import { inBrowser, pathToFile } from './utils'
 import { useSiteDataByRoute } from './composables/siteDataByRoute'
+import { siteDataRef } from './composables/siteData'
 
 const NotFound = Theme.NotFound || (() => '404 Not Found')
 
@@ -84,6 +85,11 @@ export function createApp() {
 
   Object.defineProperties(app.config.globalProperties, {
     $site: {
+      get() {
+        return siteDataRef.value
+      }
+    },
+    $siteByRoute: {
       get() {
         return siteDataByRouteRef.value
       }
diff --git a/src/client/tsconfig.json b/src/client/tsconfig.json
index da3e0146..b004aa66 100644
--- a/src/client/tsconfig.json
+++ b/src/client/tsconfig.json
@@ -16,5 +16,8 @@
   "include": [
     ".", 
     "../../types/shared.d.ts",
+  ],
+  "exclude": [
+    "../shared"
   ]
 }
diff --git a/src/shared/config.ts b/src/shared/config.ts
index 0ad5e779..2480f751 100644
--- a/src/shared/config.ts
+++ b/src/shared/config.ts
@@ -1,7 +1,16 @@
 import { SiteData } from '../../types/shared'
 
 function findMatchRoot(route: string, roots: string[]) {
-  roots.sort((a, b) => b.length - a.length)
+  // first match to the routes with the most deep level.
+  roots.sort((a, b) => {
+    const levelDelta = b.split('/').length - a.split('/').length
+    if (levelDelta !== 0) {
+      return levelDelta
+    } else {
+      return b.length - a.length
+    }
+  })
+
   for (const r of roots) {
     if (route.startsWith(r)) return r
   }
@@ -16,6 +25,7 @@ function resolveLocales<T>(
   return localeRoot ? locales[localeRoot] : undefined
 }
 
+// this merges the locales data to the main data by the route
 export function resolveSiteDataByRoute(siteData: SiteData, route: string) {
   const localeData = resolveLocales(siteData.locales || {}, route) || {}
   const localeThemeConfig =
@@ -29,7 +39,10 @@ export function resolveSiteDataByRoute(siteData: SiteData, route: string) {
     ...localeData,
     themeConfig: {
       ...siteData.themeConfig,
-      ...localeThemeConfig
-    }
+      ...localeThemeConfig,
+      // clean the locales to reduce the bundle size
+      locales: {}
+    },
+    locales: {}
   }
 }