From 3d7199fe29f6c85568d41f7409664c424b095dad Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Wed, 22 May 2024 16:37:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4=20externalLink?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=EF=BC=8C=E5=9C=A8=E4=B8=BB=E9=A2=98=E5=86=85?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |  1 +
 theme/src/client/components/LayoutContent.vue | 17 +++++++++--
 theme/src/client/styles/content.scss          | 28 +++++++++++++++++++
 theme/src/shared/options/locale.ts            | 14 +++++++---
 theme/src/shared/options/plugins.ts           |  5 ----
 5 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6aae6ea6..c406b560 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -31,6 +31,7 @@
   "editor.formatOnSave": false,
   "prettier.enable": false,
   "editor.codeActionsOnSave": {
+    "source.fixAll.stylelint": "explicit",
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
   },
diff --git a/theme/src/client/components/LayoutContent.vue b/theme/src/client/components/LayoutContent.vue
index 296a1b90..0eb4b8f7 100644
--- a/theme/src/client/components/LayoutContent.vue
+++ b/theme/src/client/components/LayoutContent.vue
@@ -1,18 +1,29 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { usePageFrontmatter } from 'vuepress/client'
 import { useSidebar } from '../composables/index.js'
+import { useThemeLocaleData } from '../composables/themeData.js'
+import type { PlumeThemePageFrontmatter } from '../../shared/index.js'
 
 const props = defineProps<{
   isNotFound?: boolean
 }>()
 
 const { hasSidebar } = useSidebar()
+
+const theme = useThemeLocaleData()
+const frontmatter = usePageFrontmatter<PlumeThemePageFrontmatter>()
+const enabledExternalIcon = computed(() => {
+  return frontmatter.value.externalLink ?? theme.value.externalLinkIcon ?? true
+})
 </script>
 
 <template>
   <div
-    id="LayoutContent"
-    class="layout-content"
-    :class="{ 'has-sidebar': hasSidebar && !props.isNotFound }"
+    id="LayoutContent" class="layout-content" :class="{
+      'has-sidebar': hasSidebar && !props.isNotFound,
+      'external-link-icon-enabled': enabledExternalIcon,
+    }"
   >
     <slot />
   </div>
diff --git a/theme/src/client/styles/content.scss b/theme/src/client/styles/content.scss
index 771fa5fd..869c8abf 100644
--- a/theme/src/client/styles/content.scss
+++ b/theme/src/client/styles/content.scss
@@ -268,3 +268,31 @@
 .plume-content a:hover > code {
   color: var(--vp-code-link-hover-color);
 }
+
+/**
+ * External links
+ * -------------------------------------------------------------------------- */
+:is(.vp-external-link-icon, .plume-content a[href*='://'], .plume-content a[target='_blank']):not(.no-icon)::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");
+
+  display: inline-block;
+  flex-shrink: 0;
+  width: 11px;
+  height: 11px;
+  margin-top: -1px;
+  margin-left: 4px;
+  color: var(--vp-c-text-3);
+  background: currentcolor;
+  -webkit-mask-image: var(--icon);
+  mask-image: var(--icon);
+}
+
+.vp-external-link-icon::after {
+  content: "";
+}
+
+/* prettier-ignore */
+.external-link-icon-enabled :is(.plume-content a[href*='://'], .plume-content a[target='_blank'])::after {
+  color: currentcolor;
+  content: "";
+}
diff --git a/theme/src/shared/options/locale.ts b/theme/src/shared/options/locale.ts
index 802de0f2..597e98f9 100644
--- a/theme/src/shared/options/locale.ts
+++ b/theme/src/shared/options/locale.ts
@@ -336,10 +336,6 @@ export interface PlumeThemeLocaleData extends LocaleData {
    * The text to replace the default "Contributors"
    */
   contributorsText?: string
-  /**
-   * 外部链接打开方式
-   */
-  openInNewWindow?: string | boolean
 
   // backToHome?: string
 
@@ -353,12 +349,22 @@ export interface PlumeThemeLocaleData extends LocaleData {
    */
   returnToTopLabel?: string
 
+  /**
+   * 侧边栏 outline 文本
+   *
+   * @default 'On this page'
+   */
   outlineLabel?: string
 
   prevPageLabel?: string
 
   nextPageLabel?: string
 
+  /**
+   * 是否显示外部链接图标
+   */
+  externalLinkIcon?: string
+
   footer?:
     | false
     | {
diff --git a/theme/src/shared/options/plugins.ts b/theme/src/shared/options/plugins.ts
index fedba272..755b1985 100644
--- a/theme/src/shared/options/plugins.ts
+++ b/theme/src/shared/options/plugins.ts
@@ -18,11 +18,6 @@ export interface PlumeThemePluginOptions {
    */
   caniuse?: false
 
-  /**
-   * 是否启用 external-link-icon 插件
-   */
-  externalLinkIcon?: false
-
   /**
    * plugin-search 配置
    */