区块标题组件-SectionTitle
首个自定义组件,支持图标与标题的 区块标题组件 实现记录
💡 动机
为什么要做这个组件?
- 熟悉组件的用法
- 统一区块标题样式
🎯 设计目标
用一个组件统一所有 “区块标题样式”
- ✅ 支持标题传参
- ✅ 支持图标(Iconify)
✍️ 实现步骤
编写组件
新建组件文件,路径为:
.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>注册组件
修改如下文件:
.vuepress/theme/client.ts.vuepress/theme/client.tsimport { 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/4/30 08:28
查看所有更新日志
版权所有
版权归属:EmirioBomb