diff --git a/.vscode/settings.json b/.vscode/settings.json
index 038a9c07..73f19997 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -27,6 +27,7 @@
     "portfinder",
     "shiki",
     "shikiji",
+    "taze",
     "Tongji",
     "tsbuildinfo",
     "vite",
diff --git a/theme/src/client/components/global/ExternalLinkIcon.vue b/theme/src/client/components/global/ExternalLinkIcon.vue
new file mode 100644
index 00000000..db7214fe
--- /dev/null
+++ b/theme/src/client/components/global/ExternalLinkIcon.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import IconExternalLink from '../icons/IconExternalLink.vue'
+</script>
+
+<template>
+  <IconExternalLink class="external-icon" />
+</template>
+
+<style scoped>
+.external-icon {
+  position: relative;
+  display: inline-block;
+  color: var(--vp-c-text-3);
+  vertical-align: middle;
+  top: 1px;
+  width: 0.8em;
+  height: 0.8em;
+}
+</style>
diff --git a/theme/src/client/config.ts b/theme/src/client/config.ts
index 154b9125..e08aa266 100644
--- a/theme/src/client/config.ts
+++ b/theme/src/client/config.ts
@@ -3,6 +3,7 @@ import './styles/index.scss'
 import { defineClientConfig } from '@vuepress/client'
 import { h } from 'vue'
 import Badge from './components/global/Badge.vue'
+import ExternalLinkIcon from './components/global/ExternalLinkIcon.vue'
 import { setupDarkMode, useScrollPromise } from './composables/index.js'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
@@ -12,6 +13,7 @@ export default defineClientConfig({
     // global component
 
     app.component('Badge', Badge)
+    app.component('ExternalLinkIcon', ExternalLinkIcon)
 
     app.component('DocSearch', () => {
       const SearchComponent