区块标题组件-SectionTitle

约 470 字大约 2 分钟

组件图标

2026-04-22

首个自定义组件，支持图标与标题的 区块标题组件 实现记录

💡 动机

为什么要做这个组件？

熟悉组件的用法
统一区块标题样式

🎯 设计目标

用一个组件统一所有 “区块标题样式”

✅ 支持标题传参
✅ 支持图标（Iconify）

✍️ 实现步骤

编写组件

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

<template>
  <div class="section-title" :class="{ empty: !icon && !title }">
    <template v-if="icon || title">
      <Icon v-if="icon" :icon="icon" />
      <span v-if="title">{{ title }}</span>
    </template>

    <div v-else class="divider-line"></div>
  </div>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue'

defineProps({
  title: String,
  icon: String
})
</script>

<style scoped>
.section-title {
  --gradient: linear-gradient(
    270deg,
    var(--vp-c-purple-1),
    var(--vp-c-brand-2),
    var(--vp-c-purple-1)
  );

  --anim: gradient-flow 2s linear infinite;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.section-title:not(.empty) {
  background: var(--gradient);
  background-size: 200% 100%;
  animation: var(--anim);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title:not(.empty)::before,
.section-title:not(.empty)::after {
  content: "";
  flex: 1;
  height: 2px;

  background: var(--gradient);
  background-size: 200% 100%;
  animation: var(--anim);

  border-radius: 2px;
}

.divider-line {
  width: 100%;
  height: 2px;

  background: var(--gradient);
  background-size: 200% 100%;
  animation: var(--anim);

  border-radius: 2px;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
</style>

注册组件

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

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

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

使用组件

该组件可在任意位置使用，例如文章或博客中

docs/README.md
<SectionTitle title="常用仓库" icon="codicon:repo" />

注意

若是在 首页 使用组件时，请确保在首页的 Frontmatter 中配置 type: custom，否则组件不生效

docs/README.md
---
home: true
pageLayout: home
externalLinkIcon: false
config:
  - type: custom
---

<SectionTitle title="常用仓库" icon="codicon:repo" />

组件效果
常用仓库

📖 属性定义

titleOptionalstring

区块标题名称

iconOptionalstring

Iconify 图标名称，例如 mdi:home、codicon:repo

🚀 用法用例

标题	图标	状态说明	样例
✔	✔	图标 + 标题	`<SectionTitle title="常用仓库" icon="codicon:repo" />`
✔	✖	仅标题	`<SectionTitle title="常用仓库" />`
✖	✔	仅图标	`<SectionTitle icon="codicon:repo" />`
✖	✖	仅分割线	`<SectionTitle />`

✨ 效果预览

常用仓库

🔖 总结

更新日志

2026/5/15 07:41

查看所有更新日志

eb93b-docs(section-title): 💬 update tags于 2026/5/15
7a98b-docs(section-title): 📝 update table styles and fix some text于 2026/5/15
84703-docs(section-title): 📝 update permalink to file path format于 2026/4/30
ec1bd-docs(section-title): 📝 refine docs layout and update descriptions于 2026/4/28
1a0bb-docs(blog): ✨ add SectionTitle component blog于 2026/4/22

版权所有

版权归属：EmirioBomb

许可证：署名 4.0 国际 (CC-BY-4.0)