feat(theme): add doc-hero support for custom home (#462)

docs/notes/theme/guide/markdown/示例容器.md

@@ -32,13 +32,13 @@ outline: 2
 
 ```md
 ::: demo-wrapper img no-padding
-![hero](/images/custom-hero.png)
+![hero](/images/custom-hero.jpg)
 :::
 ```
 
 **输出：**
 ::: demo-wrapper img no-padding
-![hero](/images/custom-hero.png)
+![hero](/images/custom-hero.jpg)
 :::
 
 包含 markdown 语法：

docs/notes/theme/guide/自定义首页.md

@@ -135,7 +135,7 @@ config:
 **效果：**
 
 :::demo-wrapper img no-padding
-<img src="/images/custom-banner.png" alt="" />
+<img src="/images/custom-banner.jpg" alt="" />
 :::
 
 ### hero
@@ -225,7 +225,7 @@ config:
 **效果：**
 
 :::demo-wrapper img no-padding
-<img src="/images/custom-hero.png" alt="Theme Plume" />
+<img src="/images/custom-hero.jpg" alt="Theme Plume" />
 :::
 
 当 `background` 配置为 `tint-plate` 时，还可以额外配置 `tintPlate` 调整 背景色调，范围为 `0 ~ 255`：
@@ -262,13 +262,89 @@ config:
 /* 默认设置，可以在 `index.css` 中覆盖 */
 :root {
   /* home hero name 背景色，通过背景色裁剪的方式定义文本颜色，
-   因此，可以设置渐变背景的方式使文本根据表现力 */
+   因此，可以设置渐变背景的方式使文本更具表现力 */
   --vp-bg-home-hero-name: linear-gradient(315deg, var(--vp-c-purple-1) 15%, var(--vp-c-brand-2) 65%, var(--vp-c-brand-2) 100%);
   --vp-c-home-hero-tagline: var(--vp-c-text-2);
   --vp-c-home-hero-text: var(--vp-c-text-3);
 }
 ```
 
+### doc-hero
+
+- 类型： `PlumeThemeHomeDocHero`
+
+适用于 文档 类型站点，放置于 首位。
+
+```ts
+interface PlumeThemeHomeDocHero {
+  type: 'doc-hero'
+  hero: {
+    name: string
+    tagline?: string
+    text?: string
+    image?: string
+      | { src: string, alt?: string }
+      | { dark: string, light: string, alt?: string }
+    actions?: {
+      theme?: 'brand' | 'alt' | 'sponsor'
+      text: string
+      link?: string
+      icon?: string // 文本左侧图标
+      suffixIcon?: string // 文本右侧图标
+      target?: '_blank' | '_self' | string
+      rel?: string
+    }
+  }
+}
+```
+
+**示例：**
+
+```md
+---
+home: true
+config:
+  -
+    type: doc-hero
+    hero:
+      name: Theme Plume
+      text: VuePress Next Theme
+      tagline: 一个简约易用的，功能丰富的 vuepress 文档&博客 主题
+      image: /plume.png
+      actions:
+        -
+          theme: brand
+          text: 快速开始 →
+          link: /guide/intro/
+        -
+          theme: alt
+          text: Github
+          link: https://github.com/pengzhanbo/vuepress-theme-plume
+---
+```
+
+**效果：**
+
+:::demo-wrapper img no-padding
+<img src="/images/custom-doc-hero.jpg" alt="Theme Plume" />
+:::
+
+主题还支持自定义 `name`, `tagline`， `text` 的颜色，以及 `image` 的背景色。
+
+通过 `CSS Vars` 进行配置。
+
+```css
+/* 默认设置，可以在 `index.css` 中覆盖 */
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: linear-gradient(120deg, var(--vp-c-purple-1) 30%, var(--vp-c-brand-2));
+  --vp-home-hero-tagline: var(--vp-c-text-2);
+  --vp-home-hero-text: var(--vp-c-text-1);
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-soft) 50%, var(--vp-c-brand-2) 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+```
+
 ### features
 
 - 类型： `PlumeThemeHomeFeatures`
@@ -363,7 +439,7 @@ config:
 **效果：**
 
 :::demo-wrapper img no-padding
-<img src="/images/custom-features.png" alt="" />
+<img src="/images/custom-features.jpg" alt="" />
 :::
 
 ### text-image | image-text
@@ -436,11 +512,11 @@ config:
 **效果：**
 
 :::demo-wrapper img no-padding
-<img src="/images/custom-image-text.png" alt="image-text" />
+<img src="/images/custom-image-text.jpg" alt="image-text" />
 :::
 
 :::demo-wrapper img no-padding
-<img src="/images/custom-text-image.png" alt="text-image" />
+<img src="/images/custom-text-image.jpg" alt="text-image" />
 :::
 
 ### blog
@@ -485,7 +561,7 @@ config:
 **效果：**
 
 :::demo-wrapper img no-padding
-<img src="/images/custom-profile.png" alt="profile" />
+<img src="/images/custom-profile.jpg" alt="profile" />
 :::
 
 ### custom
@@ -531,7 +607,7 @@ yarn add vuepress@next vuepress-theme-plume
 **效果：**
 
 :::demo-wrapper img no-padding
-<img src="/images/custom-content.png" alt="content" />
+<img src="/images/custom-content.jpg" alt="content" />
 :::
 
 ## 自定义区域类型

theme/src/client/components/Home/VPHome.vue

@@ -3,6 +3,7 @@ import type { Component } from 'vue'
 import VPBlog from '@theme/Blog/VPBlog.vue'
 import VPHomeBanner from '@theme/Home/VPHomeBanner.vue'
 import VPHomeCustom from '@theme/Home/VPHomeCustom.vue'
+import VPHomeDocHero from '@theme/Home/VPHomeDocHero.vue'
 import VPHomeFeatures from '@theme/Home/VPHomeFeatures.vue'
 import VPHomeHero from '@theme/Home/VPHomeHero.vue'
 import VPHomeProfile from '@theme/Home/VPHomeProfile.vue'
@@ -31,6 +32,7 @@ function VPHomeBlog() {
 const components: Record<string, Component<any, any, any>> = {
   'banner': VPHomeBanner,
   'hero': VPHomeHero,
+  'doc-hero': VPHomeDocHero,
   'features': VPHomeFeatures,
   'text-image': VPHomeTextImage,
   'image-text': VPHomeTextImage,