From e0b972c3cbc51a53563a8255a319e9dbb54d025c Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Mon, 1 Dec 2025 11:27:59 +0800
Subject: [PATCH] fix(theme): incorrect displaying external link icon (#760)

---
 plugins/plugin-md-power/src/node/enhance/links.ts |  1 -
 theme/src/client/components/Posts/VPPostItem.vue  |  2 +-
 theme/src/client/components/VPDocBreadcrumbs.vue  |  2 +-
 theme/src/client/components/VPFriends.vue         |  2 +-
 theme/src/client/components/VPLink.vue            | 13 ++-----------
 theme/src/client/composables/link.ts              |  4 ++++
 theme/src/client/styles/content.css               |  7 ++++---
 7 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/plugins/plugin-md-power/src/node/enhance/links.ts b/plugins/plugin-md-power/src/node/enhance/links.ts
index 0920612c..91f2a7ff 100644
--- a/plugins/plugin-md-power/src/node/enhance/links.ts
+++ b/plugins/plugin-md-power/src/node/enhance/links.ts
@@ -44,7 +44,6 @@ export function linksPlugin(md: Markdown): void {
     // convert starting tag of internal link
     hasOpenInternalLink = true
     token.tag = internalTag
-    token.attrJoin(':no-icon', 'true')
 
     const matched = hrefLink.match(/^([^#?]*?(?:\/|\.md|\.html))([#?].*)?$/)
 
diff --git a/theme/src/client/components/Posts/VPPostItem.vue b/theme/src/client/components/Posts/VPPostItem.vue
index cf82a5aa..3437146c 100644
--- a/theme/src/client/components/Posts/VPPostItem.vue
+++ b/theme/src/client/components/Posts/VPPostItem.vue
@@ -116,7 +116,7 @@ const coverStyles = computed(() => {
         <div v-if="categoryList.length" class="category-list">
           <span class="icon vpi-folder" />
           <template v-for="(cate, i) in categoryList" :key="i">
-            <VPLink :href="categoriesLink ? `${categoriesLink.link}?id=${cate.id}` : undefined">
+            <VPLink :href="categoriesLink ? `${categoriesLink.link}?id=${cate.id}` : undefined" no-icon>
               {{ cate.name }}
             </VPLink>
             <span v-if="i !== categoryList.length - 1">/</span>
diff --git a/theme/src/client/components/VPDocBreadcrumbs.vue b/theme/src/client/components/VPDocBreadcrumbs.vue
index ddee92ba..54112db9 100644
--- a/theme/src/client/components/VPDocBreadcrumbs.vue
+++ b/theme/src/client/components/VPDocBreadcrumbs.vue
@@ -104,7 +104,7 @@ function resolveSidebar(
         property="itemListElement"
         typeof="ListItem"
       >
-        <VPLink :href="link" class="breadcrumb" :class="{ current }" property="item" typeof="WebPage" :text="text" />
+        <VPLink :href="link" class="breadcrumb" :class="{ current }" property="item" typeof="WebPage" :text="text" no-icon />
         <span v-if="index !== breadcrumbList.length - 1" class="vpi-chevron-right" />
         <meta property="name" :content="text">
         <meta property="position" :content="`${index + 1}`">
diff --git a/theme/src/client/components/VPFriends.vue b/theme/src/client/components/VPFriends.vue
index 545b9711..73a072d0 100644
--- a/theme/src/client/components/VPFriends.vue
+++ b/theme/src/client/components/VPFriends.vue
@@ -39,7 +39,7 @@ const groups = computed(() => matter.value.groups || [])
       <VPLink
         class="edit-link-button"
         :href="editLink.link"
-        :no-icon="true"
+        no-icon
       >
         <span class="vpi-square-pen edit-link-icon" aria-label="edit icon" />
         {{ editLink.text }}
diff --git a/theme/src/client/components/VPLink.vue b/theme/src/client/components/VPLink.vue
index f4899a68..77704259 100644
--- a/theme/src/client/components/VPLink.vue
+++ b/theme/src/client/components/VPLink.vue
@@ -28,7 +28,8 @@ function linkTo(e: Event) {
 
 <template>
   <Component
-    :is="tag" class="vp-link" :class="{ link, 'no-icon': noIcon }"
+    :is="tag"
+    class="vp-link" :class="{ link, 'no-icon': noIcon, 'vp-external-link-icon': isExternal }"
     :href="link ? isExternalProtocol ? link : isExternal ? link : withBase(link) : undefined"
     :target="target ?? (isExternal ? '_blank' : undefined)"
     :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
@@ -37,15 +38,5 @@ function linkTo(e: Event) {
     <slot>
       {{ text || href }}
     </slot>
-    <span v-if="isExternal && !noIcon" class="vpi-external-link" />
   </Component>
 </template>
-
-<style>
-.vp-link .vpi-external-link {
-  width: 11px;
-  height: 11px;
-  margin-top: -1px;
-  margin-left: 4px;
-}
-</style>
diff --git a/theme/src/client/composables/link.ts b/theme/src/client/composables/link.ts
index 13e2876e..2b6411f9 100644
--- a/theme/src/client/composables/link.ts
+++ b/theme/src/client/composables/link.ts
@@ -65,6 +65,10 @@ export function useLink(
     // 判断是否为不存在的路由
     const routePath = link.split(/[?#]/)[0]
     const { notFound } = resolveRoute(routePath)
+
+    if (__VUEPRESS_DEV__)
+      notFound && console.warn(`[VuePress Dead Link] "${toValue(href)}" is not found in (${page.value.filePathRelative || page.value.path})`)
+
     return notFound
   })
 
diff --git a/theme/src/client/styles/content.css b/theme/src/client/styles/content.css
index 9cf0d965..c27cf105 100644
--- a/theme/src/client/styles/content.css
+++ b/theme/src/client/styles/content.css
@@ -293,7 +293,7 @@
  * -------------------------------------------------------------------------- */
 :is(.vp-external-link-icon, .vp-doc a[href*="://"],
 .vp-doc a[target=_blank])::after {
-  --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' viewBox='0 0 24 24' %3E %3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E %3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' fill='currentColor' /%3E %3C/svg%3E");
 
   display: inline-block;
   flex-shrink: 0;
@@ -307,12 +307,13 @@
   mask-image: var(--icon);
 }
 
-.vp-external-link-icon::after {
+.vp-external-link-icon:not(.no-icon)::after {
   content: "";
 }
 
 /* prettier-ignore */
-.external-link-icon-enabled :is(.vp-doc a[href*="://"], .vp-doc a[target=_blank])::after {
+.external-link-icon-enabled :is(.vp-doc a[href*='://'],
+.vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
   color: currentcolor;
   content: "";
 }