个性签名卡片-ProfileCard

约 523 字大约 2 分钟

组件个性签名

2026-05-15

个性签名

💡 动机

为什么要做这个组件？

统一签名样式，增强氛围与视觉识别

🎯 设计目标

✍️ 实现步骤

编写组件

新建组件文件，路径为: .vuepress/theme/components/about/ProfileCard.vue，并实现如下内容

<template>
  <section
    class="profile"
    :class="[
      `align-${align}`,
      boxMode === 'profile' ? 'box-profile' : '',
      isDark ? 'theme-dark' : 'theme-light'
    ]"
  >
    <div
      class="profile-banner"
      :class="[
        boxMode === 'banner' ? 'box-banner' : '',
        isDark ? 'theme-dark' : 'theme-light'
      ]"
    >
      <img
        src="https://cdn.jsdelivr.net/gh/EmirioBomb/media-collections@main/GearPress/profile/sticker.gif"
        width="100"
        class="profile-avatar is-static"
        alt="Status"
      />

      <img
        src="https://cdn.jsdelivr.net/gh/EmirioBomb/media-collections@main/GearPress/profile/profile.svg"
        class="profile-message is-static"
        alt="About Me"
      />
    </div>
  </section>
</template>

<script setup lang="ts">
import { useDark } from "@vueuse/core"

const props = withDefaults(
  defineProps<{
    align?: "left" | "center" | "right"
    boxMode?: "profile" | "banner"
  }>(),
  {
    align: "center",
    boxMode: "banner"
  }
)

/** 自动检测主题，根据主题调整卡片底色及hover效果 */
const isDark = useDark()
</script>

<style scoped>
.profile {
  display: flex;
  width: 100%;
}

.profile.align-left {
  justify-content: flex-start;
}

.profile.align-center {
  justify-content: center;
}

.profile.align-right {
  justify-content: flex-end;
}

.profile.box-profile {
  padding: 12px;
  border-radius: 16px;
  transition: all 0.25s ease;
}

.profile-banner {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;

  max-width: 100%;
  flex-wrap: nowrap;

  background: transparent;
  border: none;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.profile-banner.box-banner {
  padding: 10px;
  border-radius: 16px;
}

.profile-message {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  height: auto;
}

.theme-light.box-profile:hover,
.theme-light.box-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgb(0 0 0 / 12%);
}

.theme-dark.box-profile:hover,
.theme-dark.box-banner:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 28px rgba(98, 97, 97, 0.45),
    0 0 0 1px rgb(255 255 255 / 6%);
}

.is-static {
  pointer-events: none;
}
</style>

注册组件

修改如下文件: .vuepress/theme/client.ts

.vuepress/theme/client.ts
 import { defineClientConfig } from 'vuepress/client'
 import ProfileCard from './theme/components/about/ProfileCard.vue'

 export default defineClientConfig({
   enhance({ app }) {
       app.component('ProfileCard', ProfileCard) 
   },
 })

使用组件
该组件可在任意位置使用，例如文章或博客中
docs/README.md
```
<ProfileCard />
```
注意
若是在 首页 使用组件时，请确保在首页的 Frontmatter 中配置 type: custom，否则组件不生效
点击展开
docs/README.md
--- home: true pageLayout: home externalLinkIcon: false config: - type: custom ---
组件效果

📖 属性定义

boxModeOptionalstring

banner

控制组件的外观样式

profile：卡片样式，占满父容器宽度的卡片布局，具备完整块级展示结构
banner：横幅样式，仅包裹内容的内联式布局，不占满整行

alignOptional'left' | 'center' | 'right'

center

对齐方式

left: 左对齐
center: 居中
right: 右对齐

🚀 用法用例

外观样式	说明	样例
默认样式	默认为 `横幅样式`	`<ProfileCard />`
卡片样式	占满父容器宽度的卡片布局	`<ProfileCard boxMode="profile" />`
横幅样式	仅包裹内容的内联式布局	`<ProfileCard boxMode="banner" />`
对齐方式	`left`: 左对齐 `center`: 居中 `right`: 右对齐	`<ProfileCard align="left"/>`