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

💡 动机

为什么要做这个组件？

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

🎯 设计目标

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

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

✍️ 实现步骤

1. 编写组件

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

   <script setup lang="ts">
   import { Icon } from '@iconify/vue'
   
   defineProps({
     title: String,
     icon: String
   })
   </script>
   
   <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>
   
   <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>

2. 注册组件

   修改如下文件: .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) 
      },
    })

3. 使用组件

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

   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" />

4. 组件效果

   常用仓库

📖 属性定义

titleOptionalstring

区块标题名称

iconOptionalstring

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

🚀 用法用例

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

✨ 效果预览

常用仓库

常用仓库

🔖 总结

相关信息

虽然只是一个很小的标题组件，但在不断调整与测试的过程中，也慢慢感受到：

🧩 前端不仅是“写页面”，更是在“设计结构”，感觉很“有意思”！！！

更新日志

2026/4/30 08:28

查看所有更新日志

• 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)

贡献者: EmirioBomb