diff --git a/docs/reference/default-theme-home-page.md b/docs/reference/default-theme-home-page.md index 765c585e..b44c2e6b 100644 --- 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 index 3a284337..3b9152f2 100644 --- 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(), { 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 }} diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue index dbadaa14..9fc1f396 100644 --- 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 :theme="action.theme" :text="action.text" :href="action.link" + :target="action.target" + :rel="action.rel" />