From 84b4abc5fa29b353d52162508a31f55a4ea755e5 Mon Sep 17 00:00:00 2001 From: jimmyxuexue <65758455+Jimmylxue@users.noreply.github.com> Date: Mon, 31 Oct 2022 18:06:48 +0800 Subject: [PATCH] feat(theme): add link feature in homepage features (#984) (#1404) close #984 close #1070 Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Co-authored-by: Kia Ishii --- docs/config/frontmatter-configs.md | 14 ++++ docs/guide/theme-home-page.md | 12 ++++ .../theme-default/components/VPFeature.vue | 71 +++++++++++++++++-- .../theme-default/components/VPFeatures.vue | 4 ++ 4 files changed, 94 insertions(+), 7 deletions(-) diff --git a/docs/config/frontmatter-configs.md b/docs/config/frontmatter-configs.md index 57515e3356f..ff416440030 100644 --- a/docs/config/frontmatter-configs.md +++ b/docs/config/frontmatter-configs.md @@ -197,9 +197,23 @@ interface Feature { // Details of the feature. details: string + + // Link when clicked on feature component. The link can + // be both internal or external. + // + // e.g. `guide/theme-home-page` or `htttps://example.com` + link?: string + + // Link text to be shown inside feature component. Best + // used with `link` option. + // + // e.g. `Learn more`, `Visit page`, etc. + linkText?: string } ``` +You may learn more about it in [Theme: Home Page](../guide/theme-home-page). + ## aside - Type: `boolean` diff --git a/docs/guide/theme-home-page.md b/docs/guide/theme-home-page.md index e791c07acd6..da90b44a3f1 100644 --- a/docs/guide/theme-home-page.md +++ b/docs/guide/theme-home-page.md @@ -115,5 +115,17 @@ interface Feature { // Details of the feature. details: string + + // Link when clicked on feature component. The link can + // be both internal or external. + // + // e.g. `guide/theme-home-page` or `htttps://example.com` + link?: string + + // Link text to be shown inside feature component. Best + // used with `link` option. + // + // e.g. `Learn more`, `Visit page`, etc. + linkText?: string } ``` diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue index 7f24f3f351a..4a2be4fcc7c 100644 --- a/src/client/theme-default/components/VPFeature.vue +++ b/src/client/theme-default/components/VPFeature.vue @@ -1,26 +1,56 @@ diff --git a/src/client/theme-default/components/VPFeatures.vue b/src/client/theme-default/components/VPFeatures.vue index db49bde43cc..3dd0f0f3439 100644 --- a/src/client/theme-default/components/VPFeatures.vue +++ b/src/client/theme-default/components/VPFeatures.vue @@ -6,6 +6,8 @@ export interface Feature { icon?: string title: string details: string + link?: string + linkText?: string } const props = defineProps<{ @@ -38,6 +40,8 @@ const grid = computed(() => { :icon="feature.icon" :title="feature.title" :details="feature.details" + :link="feature.link" + :link-text="feature.linkText" />