feat(home): add target and rel attribute to home actions (#3528)

vuejs · Feb 1, 2024 · ab39fd8 · ab39fd8
1 parent 30c665b
commit ab39fd8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/docs/reference/default-theme-home-page.md b/docs/reference/default-theme-home-page.md
@@ -69,6 +69,12 @@ interface HeroAction {
 
   // Destination link of the button.
   link: string
+
+  // Link target attribute.
+  target?: string
+
+  // Link rel attribute.
+  rel?: string
 }
 ```
 
@@ -144,6 +150,9 @@ interface Feature {
   //
   // e.g. `external`
   rel?: string
+
+  // Link target attribute for the `link` option.
+  target?: string
 }
 
 type FeatureIcon =

diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
@@ -9,6 +9,8 @@ interface Props {
   theme?: 'brand' | 'alt' | 'sponsor'
   text: string
   href?: string
+  target?: string;
+  rel?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
   size: 'medium',
@@ -30,8 +32,8 @@ const component = computed(() => {
     class="VPButton"
     :class="[size, theme]"
     :href="href ? normalizeLink(href) : undefined"
-    :target="isExternal ? '_blank' : undefined"
-    :rel="isExternal ? 'noreferrer' : undefined"
+    :target="props.target ?? (isExternal ? '_blank' : undefined)"
+    :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
   >
     {{ text }}
   </component>

diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
@@ -8,6 +8,8 @@ export interface HeroAction {
   theme?: 'brand' | 'alt'
   text: string
   link: string
+  target?: string
+  rel?: string
 }
 
 defineProps<{
@@ -43,6 +45,8 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
               :theme="action.theme"
               :text="action.text"
               :href="action.link"
+              :target="action.target"
+              :rel="action.rel"
             />
           </div>
         </div>