feat(theme): 全新的首页布局与配置方案！

docs/README.md

@@ -1,11 +1,76 @@
 ---
 home: true
-banner: https://file.mo7.cc/api/public/bz
-bannerMask: 
-  light: 0.1
-  dark: 0.3
-hero: 
-  name: 鹏展博
-  tagline: 前端开发工程师
-  text: 简单介绍专业技能信息相关的描述
+config: 
+  - 
+    type: hero
+    full: true
+    background: filter
+    hero: 
+      name: Theme Plume
+      tagline: Vuepress Next Theme
+      text: 一个简约的，功能丰富的 vuepress 文档&博客 主题
+      actions: 
+        - 
+          theme: brand
+          text: 快速开始 →
+          link: /
+        - 
+          theme: alt
+          text: Github
+          link: /
+  - 
+    type: features
+    title: 标题
+    description: 随便描述
+    features: 
+      - 
+        title: 特性1
+        icon: 🖨
+        details: 特性说明
+      - 
+        title: 特性1
+        icon: 🖨
+        details: 特性说明
+      - 
+        title: 特性1
+        icon: 🖨
+        details: 特性说明
+      - 
+        title: 特性1
+        icon: 🖨
+        details: 特性说明
+      - 
+        title: 特性1
+        icon: 🖨
+        details: 特性说明
+  - 
+    type: custom
+  - 
+    type: text-image
+    title: 标题
+    description: 随便描述
+    list: 
+      - 
+        title: 描述
+        description: 随便描述一下
+      - 随便描述一下
+      - 随便描述一下
+    image: /images/blogger.png
+  - 
+    type: image-text
+    title: 标题
+    description: 随便描述
+    list: 
+      - 
+        title: 描述
+        description: 随便描述一下
+      - 随便描述一下
+      - 随便描述一下
+    image: /images/blogger.png
+  - 
+    type: profile
+    name: 鹏展博
+    description: 前端开发工程师, 热爱前端, 热爱生活, 热爱互联网, 热爱技术, 热爱开源, 热爱生命。
 ---
+
+这里是自定义的内容，你可以随意添加你自己的内容

theme/src/client/components/Home.vue

@@ -1,170 +0,0 @@
-<script lang="ts" setup>
-import { usePageFrontmatter, withBase } from 'vuepress/client'
-import { computed } from 'vue'
-import type { PlumeThemeHomeFrontmatter } from '../../shared/index.js'
-import { useDarkMode } from '../composables/darkMode.js'
-import VButton from './VButton.vue'
-
-const matter = usePageFrontmatter<PlumeThemeHomeFrontmatter>()
-const isDark = useDarkMode()
-
-const mask = computed(() => {
-  if (typeof matter.value.bannerMask !== 'object')
-    return matter.value.bannerMask || 0
-
-  return (
-    (isDark.value
-      ? matter.value.bannerMask.dark
-      : matter.value.bannerMask.light) || 0
-  )
-})
-
-const homeStyle = computed(() => {
-  return {
-    'background-image': [
-      mask.value
-        ? `linear-gradient(rgba(0, 0, 0, ${mask.value}), rgba(0, 0, 0, ${mask.value}))`
-        : '',
-      `url(${withBase(matter.value.banner ?? 'http://file.mo7.cc/api/public/bz')})`,
-    ]
-      .filter(Boolean)
-      .join(','),
-  }
-})
-
-const name = computed(() => matter.value.hero?.name ?? 'Plume')
-const tagline = computed(() => matter.value.hero?.tagline ?? 'A VuePress Theme')
-const text = computed(() => matter.value.hero?.text)
-
-const actions = computed(() => {
-  return matter.value.hero?.actions ?? []
-})
-</script>
-
-<template>
-  <div class="plume-home" :style="homeStyle">
-    <div class="container">
-      <div class="content">
-        <h2 v-if="name" class="hero-name">
-          {{ name }}
-        </h2>
-        <p v-if="tagline" class="hero-tagline">
-          <span class="line" /> <span>{{ tagline }}</span>
-        </p>
-        <p v-if="text" class="hero-text">
-          {{ text }}
-        </p>
-        <div v-if="actions" class="actions">
-          <div v-for="action in actions" :key="action.link" class="action">
-            <VButton
-              tag="a"
-              size="medium"
-              :theme="action.theme"
-              :text="action.text"
-              :href="action.link"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.plume-home {
-  width: 100%;
-  min-height: calc(100vh - var(--vp-nav-height));
-  filter: var(--vp-home-hero-image-filter);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  transition: all var(--t-color);
-}
-
-.plume-home .container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  padding-top: 4rem;
-  margin: 0 auto;
-}
-
-.plume-home .content {
-  width: 100%;
-  padding: 0 2rem;
-}
-
-.plume-home .content .hero-name {
-  font-size: 72px;
-  font-weight: 600;
-  line-height: 1;
-  color: var(--vp-c-text-hero-name);
-}
-
-.plume-home .content .hero-tagline {
-  display: flex;
-  align-items: center;
-  margin-top: 1rem;
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 1.25;
-  color: var(--vp-c-text-hero-tagline);
-}
-
-.plume-home .content .hero-tagline .line {
-  display: inline-block;
-  width: 80px;
-  height: 0;
-  margin-right: 1rem;
-  border-top: solid 1px var(--vp-c-text-hero-tagline);
-}
-
-.plume-home .content .hero-text {
-  width: 100%;
-  max-width: 700px;
-  margin-top: 1.5rem;
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--vp-c-text-hero-text);
-
-  /* padding: 6px 20px; */
-  border-radius: 5px;
-
-  /* background-color: rgba(0, 0, 0, 0.25); */
-}
-
-@media (min-width: 960px) {
-  .plume-home .container {
-    max-width: 768px;
-    padding-top: 8rem;
-  }
-
-  .plume-home .content .hero-name {
-    font-size: 100px;
-  }
-}
-
-@media (min-width: 1440px) {
-  .plume-home .container {
-    max-width: 1104px;
-    padding-top: 8rem;
-  }
-
-  .plume-home .content .hero-tagline {
-    font-size: 32px;
-  }
-}
-
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  padding-top: 24px;
-  margin: -6px;
-}
-
-.action {
-  flex-shrink: 0;
-  padding: 6px;
-}
-</style>

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

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { usePageFrontmatter } from 'vuepress/client'
+import { type Component, computed, h, resolveComponent } from 'vue'
+import type { PlumeThemeHomeFrontmatter } from '../../../shared/index.js'
+import HomeBanner from './HomeBanner.vue'
+import HomeHero from './HomeHero.vue'
+import HomeFeatures from './HomeFeatures.vue'
+import HomeTextImage from './HomeTextImage.vue'
+import HomeProfile from './HomeProfile.vue'
+import HomeCustom from './HomeCustom.vue'
+
+const components: Record<string, Component<any, any, any>> = {
+  'banner': HomeBanner,
+  'hero': HomeHero,
+  'features': HomeFeatures,
+  'text-image': HomeTextImage,
+  'image-text': HomeTextImage,
+  'profile': HomeProfile,
+  'custom': HomeCustom,
+}
+
+const matter = usePageFrontmatter<PlumeThemeHomeFrontmatter>()
+
+const config = computed(() => {
+  const config = matter.value.config
+  if (config && config.length)
+    return config
+
+  return [{
+    type: 'banner',
+    banner: matter.value.banner,
+    bannerMask: matter.value.bannerMask,
+    hero: matter.value.hero,
+  }]
+})
+
+const onlyOnce = computed(() => config.value.length === 1)
+
+function resolveComponentName(type: string) {
+  return components[type] ?? resolveComponent(type)
+}
+</script>
+
+<template>
+  <div class="plume-home">
+    <template
+      v-for="(item, index) in config"
+      :key="item.type + index"
+    >
+      <div :class="{ layout: index > 0 && item.type !== 'features' }">
+        <component
+          :is="resolveComponentName(item.type)"
+          v-bind="item"
+          :only-once="onlyOnce"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.plume-home {
+  min-height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
+}
+
+.plume-home .layout {
+  transition: background-color var(--t-color);
+}
+
+.plume-home .layout:nth-child(odd) {
+  background-color: var(--vp-c-bg-alt);
+}
+
+.plume-home .layout:nth-child(even) {
+  background-color: var(--vp-c-bg);
+}
+</style>

theme/src/client/layouts/Layout.vue

@@ -5,7 +5,7 @@ import type { PlumeThemePageData } from '../../shared/index.js'
 import Backdrop from '../components/Backdrop.vue'
 import Blog from '../components/Blog/Blog.vue'
 import Friends from '../components/Friends.vue'
-import Home from '../components/Home.vue'
+import Home from '../components/Home/Home.vue'
 import LayoutContent from '../components/LayoutContent.vue'
 import LocalNav from '../components/Nav/LocalNav.vue'
 import Nav from '../components/Nav/index.vue'

theme/src/shared/frontmatter.ts

@@ -1,15 +1,18 @@
-import type { NavItemWithLink } from '.'
+import type { NavItemWithLink, PlumeThemeImage } from '.'
 
-export interface PlumeThemeHomeFrontmatter {
+/* =============================== Home begin ==================================== */
+export interface PlumeThemeHomeFrontmatter extends Omit<PlumeThemeHomeBanner, 'type'> {
   home?: true
-  banner?: string
-  bannerMask?: number | { light?: number, dark?: number }
-  hero: {
-    name: string
-    tagline?: string
-    text?: string
-    actions: PlumeThemeHeroAction[]
-  }
+  config?: PlumeThemeHomeConfig[]
+}
+
+export type PlumeThemeHomeConfig = PlumeThemeHomeBanner | PlumeThemeHomeTextImage | PlumeThemeHomeFeatures | PlumeThemeHomeProfile
+
+export interface PlumeThemeHero {
+  name: string
+  tagline?: string
+  text?: string
+  actions: PlumeThemeHeroAction[]
 }
 
 export interface PlumeThemeHeroAction {
@@ -18,6 +21,83 @@ export interface PlumeThemeHeroAction {
   link?: string
 }
 
+export interface PlumeHomeConfigBase {
+  type: 'banner' | 'hero' | 'text-image' | 'image-text' | 'features' | 'profile' | 'custom'
+}
+
+export interface PlumeThemeHomeBanner extends PlumeHomeConfigBase {
+  type: 'banner'
+  banner?: string
+  bannerMask?: number | { light?: number, dark?: number }
+  hero: PlumeThemeHero
+}
+
+export interface PlumeThemeHomeHero extends PlumeHomeConfigBase {
+  type: 'hero'
+  hero: PlumeThemeHero
+  full?: boolean
+  background?: 'filter' | (string & { zz_IGNORE?: never })
+}
+
+export interface PlumeThemeHomeTextImage extends PlumeHomeConfigBase {
+  type: 'text-image' | 'image-text'
+  image: PlumeThemeImage
+  width?: number | string
+  title?: string
+  description?: string
+  list: (string | { title?: string, description?: string })[]
+  backgroundImage?: string | { light: string, dark: string }
+  backgroundAttachment?: 'fixed' | 'local'
+}
+
+export interface PlumeThemeHomeFeatures extends PlumeHomeConfigBase {
+  type: 'features'
+  title?: string
+  description?: string
+  features: PlumeThemeHomeFeature[]
+}
+
+export interface PlumeThemeHomeFeature {
+  icon?: FeatureIcon
+  title: string
+  details?: string
+  link?: string
+  linkText?: string
+  rel?: string
+  target?: string
+}
+
+export type FeatureIcon = string | {
+  src: string
+  alt?: string | undefined
+  width?: string | undefined
+  height?: string | undefined
+  wrap?: boolean | undefined
+} | {
+  light: string
+  dark: string
+  alt?: string | undefined
+  width?: string | undefined
+  height?: string | undefined
+  wrap?: boolean | undefined
+}
+
+export interface PlumeThemeHomeProfile extends PlumeHomeConfigBase {
+  type: 'profile'
+  name?: string
+  description?: string
+  avatar?: PlumeThemeImage
+  circle?: boolean
+}
+
+export interface PlumeThemeHomeCustom extends PlumeHomeConfigBase {
+  type: 'custom'
+  backgroundImage?: string | { light: string, dark: string }
+  backgroundAttachment?: 'fixed' | 'local'
+}
+
+/* =============================== Home end ==================================== */
+
 export interface PlumeThemePageFrontmatter {
   comments?: boolean
   editLink?: boolean